[dashboard] added tests for Dashboard and ScanList

Author: sjillen

dashboard/package.json

@@ -33,5 +33,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

dashboard/src/App.test.js

@@ -1,9 +1,33 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, unmountComponentAtNode } from 'react-dom';
 import App from './App';
+import axiosMock from 'axios';
+import { act } from 'react-dom/test-utils';
+jest.mock('axios');
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+describe('App', () => {
+    let container = null;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        unmountComponentAtNode(container);
+        container.remove();
+        container = null;
+    });
+
+    it('renders without error', async () => {
+        axiosMock.get.mockResolvedValueOnce({
+            status: 200,
+            data: [],
+        });
+
+        await act(async () => {
+            render(<App />, container);
+        });
+        expect(container.childNodes.length).toBe(2);
+    });
 });

dashboard/src/components/Dashboard.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import Dashboard from './Dashboard';
+import axiosMock from 'axios';
+import { act } from 'react-dom/test-utils';
+
+jest.mock('axios');
+
+describe('Dashboard', () => {
+    let container = null;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        //  en sortie de test
+        unmountComponentAtNode(container);
+        container.remove();
+        container = null;
+    });
+
+    it('fetches the scans once at render', async () => {
+        axiosMock.get.mockResolvedValueOnce({
+            status: 200,
+            data: [],
+        });
+
+        await act(async () => {
+            render(<Dashboard />, container);
+        });
+
+        expect(axiosMock.get).toHaveBeenCalledTimes(1);
+    });
+});

dashboard/src/components/ScanList.js

@@ -27,13 +27,19 @@ const ScanList = ({ list }) => {
                     </Card.Header>
                 </Card>
                 {list.map((scan, index) => (
-                    <Card key={index}>
+                    <Card key={index} className="scan_item">
                         <Accordion.Toggle style={{ cursor: 'pointer' }} as={Card.Header} eventKey={index}>
                             <Row>
-                                <Col sm={3}>{scan.repositoryName}</Col>
-                                <Col sm={3}>{scan.status}</Col>
-                                <Col sm={5}>{displayCorrectTimestamp(scan)}</Col>
-                                <Col sm={1}>
+                                <Col className="repoName" sm={3}>
+                                    {scan.repositoryName}
+                                </Col>
+                                <Col className="status" sm={3}>
+                                    {scan.status}
+                                </Col>
+                                <Col className="timestamp" sm={5}>
+                                    {displayCorrectTimestamp(scan)}
+                                </Col>
+                                <Col className="findings" sm={1}>
                                     {scan.findings.length > 0 ? (
                                         <Badge pill variant="warning">
                                             {scan.findings.length}

dashboard/src/components/ScanList.test.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import ScanList from './ScanList';
+import { act } from 'react-dom/test-utils';
+
+describe('ScanList', () => {
+    let container = null;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        unmountComponentAtNode(container);
+        container.remove();
+        container = null;
+    });
+
+    it('displays all the element of the list', () => {
+        const mockScans = [
+            { repositoryName: 'One', status: 'pending', queuedAt: '01/01/2020', findings: [] },
+            { repositoryName: 'Two', status: 'pending', queuedAt: '01/01/2020', findings: [] },
+            { repositoryName: 'Three', status: 'pending', queuedAt: '01/01/2020', findings: [] },
+        ];
+
+        act(() => {
+            render(<ScanList list={mockScans} />, container);
+        });
+
+        expect(container.querySelectorAll('.scan_item').length).toEqual(3);
+    });
+
+    it('displays the correct timestamp depending on status', () => {
+        const queuedAt = '01/01/2020';
+        const scanningAt = '02/01/2020';
+        const finishedAt = '03/01/2020';
+        const mockScans = [
+            { repositoryName: 'One', status: 'Pending', queuedAt, scanningAt, finishedAt, findings: [] },
+            { repositoryName: 'Two', status: 'In Progress', queuedAt, scanningAt, finishedAt, findings: [] },
+            { repositoryName: 'Three', status: 'Failure', queuedAt, scanningAt, finishedAt, findings: [] },
+            { repositoryName: 'Four', status: 'Success', queuedAt, scanningAt, finishedAt, findings: [] },
+        ];
+
+        act(() => {
+            render(<ScanList list={mockScans} />, container);
+        });
+
+        const [pending, scanning, failure, success] = container.querySelectorAll('.scan_item');
+        expect(pending.querySelector('.timestamp').textContent).toEqual(queuedAt);
+        expect(scanning.querySelector('.timestamp').textContent).toEqual(scanningAt);
+        expect(failure.querySelector('.timestamp').textContent).toEqual(finishedAt);
+        expect(success.querySelector('.timestamp').textContent).toEqual(finishedAt);
+    });
+
+    it('displays the Badges with a number of findings', () => {
+        const mockFinding = {
+            ruleId: 1,
+            metadata: { description: 'description', severity: 'HIGH' },
+            location: { path: '/somwhere', positions: { begin: { line: 666 } } },
+        };
+
+        const finishedAt = '03/01/2020';
+        const mockScans = [
+            { repositoryName: 'one', status: 'Success', finishedAt, findings: [mockFinding] },
+            { repositoryName: 'two', status: 'Success', finishedAt, findings: [mockFinding, mockFinding] },
+            {
+                repositoryName: 'three',
+                status: 'Success',
+                finishedAt,
+                findings: [mockFinding, mockFinding, mockFinding],
+            },
+        ];
+
+        act(() => {
+            render(<ScanList list={mockScans} />, container);
+        });
+
+        const [one, two, three] = container.querySelectorAll('.scan_item');
+        expect(one.querySelector('.findings').childNodes[0].textContent).toEqual('1');
+        expect(two.querySelector('.findings').childNodes[0].textContent).toEqual('2');
+        expect(three.querySelector('.findings').childNodes[0].textContent).toEqual('3');
+    });
+
+    it('does not display the Badge when there is no findings', () => {
+        const mockScans = [{ repositoryName: 'One', status: 'pending', queuedAt: '01/01/2020', findings: [] }];
+
+        act(() => {
+            render(<ScanList list={mockScans} />, container);
+        });
+
+        const scan = container.querySelector('.scan_item');
+        expect(scan.querySelector('.findings').childNodes.length).toEqual(0);
+        expect(scan.querySelector('.findings').textContent).toEqual('');
+    });
+});

dashboard/src/components/useScan.js

@@ -18,8 +18,12 @@ const useScan = () => {
 
     useEffect(() => {
         (async () => {
-            const response = await axios.get(url);
-            setScans(response.data);
+            try {
+                const response = await axios.get(url);
+                setScans(response.data);
+            } catch (e) {
+                throw new Error('could not fetch scan, there is likely a problem with the server');
+            }
         })();
     }, []);