Enable unit tests for the frontend (#57)

Author: volodymyrkochyn

.eslintrc.json

@@ -14,6 +14,7 @@
     "plugins": [
         "react"
     ],
+    "ignorePatterns": ["**/src/tests/*"],
     "rules": {
         "react/jsx-filename-extension": [
             1,

.github/workflows/rpe_test.yml

@@ -98,6 +98,10 @@ jobs:
       - name: Run pytest on ${{ matrix.os }}
         if: ${{ matrix.os != 'ubuntu-22.04' }}
         run: python3 -m pytest
+        
+      - name: Run frontend unit test only on ubuntu-latest
+        run: |
+            npm test
 
   publish:
     needs: build 	

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', { runtime: 'automatic' }],
+  ],
+};

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+        '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+  testEnvironment: 'jsdom',
+};

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "start": "webpack --mode development && electron . --development",
     "build": "webpack --mode production && electron .",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest src/tests",
     "postinstall": "electron-builder install-app-deps",
     "pack": "electron-builder --dir",
     "dist": "pyinstaller --distpath backend --workpath dist -y --clean -n restapi_server.exe --onefile  backend/restapi_server.py && webpack && electron-builder"
@@ -75,18 +75,26 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.3.0",
+    "@testing-library/user-event": "^14.5.2",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.10.0",
+    "electron": "^28.2.2",
     "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-react": "^7.34.0",
     "html-webpack-plugin": "^5.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react-test-renderer": "^18.2.0",
     "style-loader": "^3.3.4",
     "webpack": "^5.90.1",
-    "electron": "^28.2.2",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {

src/components/DeviceList.js

@@ -28,7 +28,7 @@ function DeviceList({ devices, setDevice }) {
       <div className={getBaseName()}>
         <div className="dev-table-res">
           <div id="inner1">
-            <label>Device:</label>
+            <label htmlFor="deviceId">Device:</label>
           </div>
           <select
             id="deviceId"

src/tests/App.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import App from '../App';
+import { SelectionProvider } from '../SelectionProvider';
+import { SocTotalPowerProvider } from '../SOCTotalPowerProvider';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: '' };
+  }
+
+  componentDidCatch(error) {
+    this.setState({ error: `${error.name}: ${error.message}` });
+  }
+
+  render() {
+    const { error } = this.state;
+    if (error) {
+      return (
+        <div>{error}</div>
+      );
+    }
+    return <>{this.props.children}</>;
+  }
+}
+
+it('Run main app', () => {
+  const component = renderer.create(
+    <ErrorBoundary>
+      <SocTotalPowerProvider>
+        <SelectionProvider>
+          <App />
+        </SelectionProvider>
+      </SocTotalPowerProvider>
+    </ErrorBoundary>,
+  );
+});

src/tests/DeviceList.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+//import 'isomorphic-fetch';
+import DeviceList from '../components/DeviceList';
+import { SelectionProvider } from '../SelectionProvider';
+import { SocTotalPowerProvider } from '../SOCTotalPowerProvider';
+
+describe('DeviceList', () => {
+  it('default value', () => {
+    const { getByLabelText } = render(
+      <SocTotalPowerProvider>
+        <SelectionProvider>
+          <DeviceList devices={[{ id: 'test-dev', series: 'test' }]} setDevice={(dev) => {}} />
+        </SelectionProvider>
+      </SocTotalPowerProvider>,
+    );
+    expect(getByLabelText('Device:')).toBeInTheDocument();
+    expect(screen.getByText('test-dev test')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toHaveValue('selectDev');
+  });
+  it('select device', async () => {
+    const user = userEvent.setup();
+    render(
+      <SocTotalPowerProvider>
+        <SelectionProvider>
+          <DeviceList devices={[{ id: 'test-dev', series: 'test' }]} setDevice={(dev) => {}} />
+        </SelectionProvider>
+      </SocTotalPowerProvider>,
+    );
+    // todo, need rework compoment since fetch
+    // await user.selectOptions(screen.getByRole('combobox'), 'test-dev');
+    // expect(screen.getByRole('option', { name: 'test-dev test' }).selected).toBe(true);
+  });
+});

src/tests/FpgaCell.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FpgaCell from '../components/FpgaCell';
+import { SelectionProvider } from '../SelectionProvider';
+import { SocTotalPowerProvider } from '../SOCTotalPowerProvider';
+
+describe('FpgaCell', () => {
+  it('init', () => {
+    const component = render(
+      <SocTotalPowerProvider>
+        <SelectionProvider>
+          <FpgaCell power={0} powerWarm={0} powerErr={0} title="test" />
+        </SelectionProvider>
+      </SocTotalPowerProvider>,
+    );
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(component.container.getElementsByClassName('error').length).toBe(1);
+    expect(component.container.getElementsByClassName('clickable').length).toBe(1);
+  });
+});