change border color, add tests

mocks/contract/solidityscanReport.ts

@@ -1,4 +1,4 @@
-export const solidityscanReport = {
+export const solidityscanReportAverage = {
   scan_report: {
     scan_status: 'scan_done',
     scan_summary: {
@@ -19,3 +19,47 @@ export const solidityscanReport = {
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
 };
+
+export const solidityscanReportGreat = {
+  scan_report: {
+    scan_status: 'scan_done',
+    scan_summary: {
+      issue_severity_distribution: {
+        critical: 0,
+        gas: 0,
+        high: 0,
+        informational: 0,
+        low: 0,
+        medium: 0,
+      },
+      lines_analyzed_count: 18,
+      scan_time_taken: 1,
+      score: '3.61',
+      score_v2: '100',
+      threat_score: '94.74',
+    },
+    scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
+  },
+};
+
+export const solidityscanReportLow = {
+  scan_report: {
+    scan_status: 'scan_done',
+    scan_summary: {
+      issue_severity_distribution: {
+        critical: 2,
+        gas: 1,
+        high: 3,
+        informational: 0,
+        low: 2,
+        medium: 10,
+      },
+      lines_analyzed_count: 18,
+      scan_time_taken: 1,
+      score: '3.61',
+      score_v2: '22.22',
+      threat_score: '94.74',
+    },
+    scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
+  },
+};

ui/address/SolidityscanReport.pw.tsx

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { solidityscanReport as solidityscanReportMock } from 'mocks/contract/solidityscanReport';
+import * as solidityscanReportMock from 'mocks/contract/solidityscanReport';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
@@ -10,17 +10,58 @@ import SolidityscanReport from './SolidityscanReport';
 const addressHash = 'hash';
 const REPORT_API_URL = buildApiUrl('contract_solidityscan_report', { hash: addressHash });
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
+test('average report +@dark-mode +@mobile', async({ mount, page }) => {
   await page.route(REPORT_API_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(solidityscanReportMock),
+    body: JSON.stringify(solidityscanReportMock.solidityscanReportAverage),
   }));
 
   const component = await mount(
     <TestApp>
       <SolidityscanReport hash={ addressHash }/>
     </TestApp>,
   );
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
+
+  await component.getByLabel('SolidityScan score').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
+});
+
+test('great report', async({ mount, page }) => {
+  await page.route(REPORT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(solidityscanReportMock.solidityscanReportGreat),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <SolidityscanReport hash={ addressHash }/>
+    </TestApp>,
+  );
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
+
+  await component.getByLabel('SolidityScan score').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
+});
+
+test('low report', async({ mount, page }) => {
+  await page.route(REPORT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(solidityscanReportMock.solidityscanReportLow),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <SolidityscanReport hash={ addressHash }/>
+    </TestApp>,
+  );
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
+
   await component.getByLabel('SolidityScan score').click();
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });

ui/address/SolidityscanReport.tsx

@@ -91,6 +91,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
           <Button
             className={ className }
             color={ scoreColor }
+            borderColor={ scoreColor }
             size="sm"
             variant="outline"
             colorScheme="gray"
@@ -130,7 +131,7 @@ const SolidityscanReport = ({ className, hash }: Props) => {
               <Text color={ scoreColor } fontWeight={ 500 }>Security score is { scoreLevel }</Text>
             </Box>
           </Flex>
-          { vulnerabilities && vulnerabilitiesCount && (
+          { vulnerabilities && vulnerabilitiesCount > 0 && (
             <Box mb={ 5 }>
               <Text py="7px" variant="secondary" fontSize="xs" fontWeight={ 500 }>Vulnerabilities distribution</Text>
               <Grid templateColumns="20px 1fr 100px" alignItems="center" rowGap={ 2 }>