Test setup (#30)

* First experiments in setting up test framework

* Basic React widget test passing

* Jest setup in package.json. Move tests to their own folder.

* Remove jest.config.ts

* Basic DataSelector test

* Remove sum.js used in testing test setup

* Configure ts-jest

* Rename main test file

* Added test for 'select all' checkboxes in DataSelector

* Remove unnecessary code

* Add UI test info to the Readme

Co-authored-by: Nicholas King <v-nicki@microsoft.com>

README.md

@@ -40,6 +40,8 @@ To run tests, make sure that you are in the project root folder and do:
 
 1. `pip install -r dev-requirements.txt`
 2. `pytest tests/`
+3. `npm install`
+4. `npm run test`
 
 # Development environment
 

jest.config.js

@@ -0,0 +1,8 @@
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const { compilerOptions } = require('./tsconfig');
+
+module.exports = {
+  preset: 'ts-jest',
+  verbose: true,
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths , { prefix: '<rootDir>/' })
+};

package.json

@@ -16,14 +16,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@types/jest": "^26.0.15",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@types/redux": "^3.6.0",
     "babel-core": "^6.26.3",
+    "babel-jest": "^26.6.0",
     "babel-loader": "^8.0.6",
     "babel-minify-webpack-plugin": "^0.3.1",
     "babel-polyfill": "^6.26.0",
@@ -32,11 +37,15 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.3.0",
     "html-webpack-plugin": "^4.5.0",
+    "jest": "^26.6.0",
     "mini-css-extract-plugin": "^0.12.0",
     "react-refresh": "^0.8.3",
+    "react-test-renderer": "^16.7.0",
     "source-map-loader": "^1.0.1",
     "style-loader": "^2.0.0",
+    "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.1",
+    "ts-node": "^9.0.0",
     "typescript": "^3.9.7",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.2.1",
@@ -44,6 +53,7 @@
   },
   "scripts": {
     "start": "webpack-dev-server --hot --mode development --host 0.0.0.0",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "test": "jest"
   }
 }

tests/ts/main.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, fireEvent, waitFor, screen, getByTestId, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { TestScheduler } from 'jest'
+import { act } from 'react-dom/test-utils'
+import { unmountComponentAtNode } from 'react-dom'
+
+import RawValues from '@App/RawValues'
+import DataSelector from '@App/DataSelector'
+
+afterEach(cleanup);
+
+test('RawValues renders', () => {
+    render(<RawValues data={{}}/>);
+    expect(screen.getByText("Raw Values Table goes here")).toBeInTheDocument();
+});
+
+function testCheckbox(label: string): void {
+    expect(screen.getByLabelText(label)).toBeChecked();
+    fireEvent.click(screen.getByLabelText(label));
+    expect(screen.getByLabelText(label)).not.toBeChecked();
+}
+
+test('DataSelector single checkboxes', () => {
+    let trainingToggleCount = 0;
+    let testingToggleCount = 0;
+    let newErrorToggleCount = 0;
+    let strictImitationToggleCount = 0;
+
+    render(<DataSelector 
+        toggleTraining={() => trainingToggleCount++}
+        toggleTesting={() => testingToggleCount++}
+        toggleNewError={() => newErrorToggleCount++}
+        toggleStrictImitation={() => strictImitationToggleCount++}
+        />);
+
+    testCheckbox("training");
+    testCheckbox("testing");
+    testCheckbox("new error");
+    testCheckbox("strict imitation");
+
+    expect(trainingToggleCount).toBe(1);
+    expect(testingToggleCount).toBe(1);
+    expect(newErrorToggleCount).toBe(1);
+    expect(strictImitationToggleCount).toBe(1);
+});
+
+test('DataSelector select all checkboxes', () => {
+    let trainingToggleCount = 0;
+    let testingToggleCount = 0;
+    let newErrorToggleCount = 0;
+    let strictImitationToggleCount = 0;
+
+    render(<DataSelector 
+        toggleTraining={() => trainingToggleCount++}
+        toggleTesting={() => testingToggleCount++}
+        toggleNewError={() => newErrorToggleCount++}
+        toggleStrictImitation={() => strictImitationToggleCount++}
+        />);
+
+    testCheckbox("select all datasets");
+    testCheckbox("select all dissonance");
+    expect(screen.getByLabelText("training")).not.toBeChecked();
+    expect(screen.getByLabelText("testing")).not.toBeChecked();
+    expect(screen.getByLabelText("new error")).not.toBeChecked();
+    expect(screen.getByLabelText("strict imitation")).not.toBeChecked();
+});

tsconfig.json

@@ -6,6 +6,10 @@
         "module": "commonjs",
         "esModuleInterop": true,
         "target": "es6",
-        "jsx": "react"
+        "jsx": "react",
+        "baseUrl": ".",
+        "paths": {
+            "@App/*": ["widget/*"]
+        }
     }
 }

widget/DataSelector.tsx

@@ -163,9 +163,9 @@ class DataSelector extends Component<DataSelectorProps, DataSelectorState> {
           <div className={getDatasetDropdownClasses()}>
             <span className="anchor" onClick={this.toggleDatasetDropdown}>Dataset</span>
             <ul className="items">
-              <li><input type="checkbox" checked={this.state.training && this.state.testing} onClick={this.selectTrainingAndTesting} />(Select All)</li>
-              <li><input type="checkbox" checked={this.state.training} onClick={this.selectTraining} />Training</li>
-              <li><input type="checkbox" checked={this.state.testing} onClick={this.selectTesting} />Testing</li>
+              <li><input type="checkbox" aria-label="select all datasets" checked={this.state.training && this.state.testing} onChange={this.selectTrainingAndTesting} />(Select All)</li>
+              <li><input type="checkbox" aria-label="training" checked={this.state.training} onChange={this.selectTraining} />Training</li>
+              <li><input type="checkbox" aria-label="testing" checked={this.state.testing} onChange={this.selectTesting} />Testing</li>
             </ul>
           </div>
         </div>
@@ -173,9 +173,9 @@ class DataSelector extends Component<DataSelectorProps, DataSelectorState> {
           <div className={getDissonanceDropdownClasses()}>
             <span className="anchor" onClick={this.toggleDissonanceDropdown}>Dissonance</span>
             <ul className="items">
-              <li><input type="checkbox" checked={this.state.newError && this.state.strictImitation} onClick={this.selectNewErrorAndStrictImitation} />(Select All)</li>
-              <li><input type="checkbox" checked={this.state.newError} onClick={this.selectNewError} />New Error</li>
-              <li><input type="checkbox" checked={this.state.strictImitation} onClick={this.selectStrictImitation} />Strict Imitation</li>
+              <li><input type="checkbox" aria-label="select all dissonance" checked={this.state.newError && this.state.strictImitation} onChange={this.selectNewErrorAndStrictImitation} />(Select All)</li>
+              <li><input type="checkbox" aria-label="new error" checked={this.state.newError} onChange={this.selectNewError} />New Error</li>
+              <li><input type="checkbox" aria-label="strict imitation" checked={this.state.strictImitation} onChange={this.selectStrictImitation} />Strict Imitation</li>
             </ul>
           </div>
         </div>