Add dashboard tests to CI

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/unit_tests.yml → .github/workflows/client_tests.yml

@@ -4,30 +4,28 @@ on:
   push:
     paths:
     - 'client/**'
-    - 'Makefile'
-    - '.github/workflows/unit_tests.yml'
+    - '.github/workflows/client_tests.yml'
   pull_request:
     paths:
     - 'client/**'
-    - 'Makefile'
-    - '.github/workflows/unit_tests.yml'
+    - '.github/workflows/client_tests.yml'
 
 jobs:
-  python:
+  python_client_unittests:
     runs-on: ${{ matrix.os }}
     defaults:
       run:
         working-directory: "./client"
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        python: [3.5, 3.6, 3.7, 3.8]
+        python: [3.6, 3.7, 3.8]
     steps:
     - uses: actions/checkout@v2
-    - name: Set up Python ${{ matrix.python-version }}
+    - name: Set up Python ${{ matrix.python }}
       uses: actions/setup-python@v2
       with:
-        python-version: ${{ matrix.python-version }}
+        python-version: ${{ matrix.python }}
     - name: venv cache
       id: venvcache
       uses: actions/cache@v2
@@ -72,12 +70,10 @@ jobs:
       run: |
         make coverage.xml
     - name: Codecov
-      # Switch this back to v1 once codecov-actions fixes their tags.
-      uses: codecov/codecov-action@v1.0.7
+      uses: codecov/codecov-action@v1
       with:
         file: ./coverage.xml
-        flags: unittests
-        env_vars: OS,PYTHON
+        flags: ${{ matrix.os }},python,python-${{ matrix.python }},client
         name: ci-codecov
         # This action has a tendency to timeout
         fail_ci_if_error: false

.github/workflows/dashboard_tests.yml

@@ -0,0 +1,55 @@
+name: Dashboard Unit Tests
+
+on:
+  push:
+    paths:
+    - 'dashboard/**'
+    - '.github/workflows/dashboard_tests.yml'
+  pull_request:
+    paths:
+    - 'dashboard/**'
+    - '.github/workflows/dashboard_tests.yml'
+
+jobs:
+  dashboard_unittests:
+    runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        working-directory: "./dashboard"
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node: [12.x, 14.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node }}
+    - name: Node modules cache
+      id: nodecache
+      uses: actions/cache@v2
+      with:
+        path: "./node_modules"
+        key: ${{ runner.os }}-${{ matrix.node }}-node_modules-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-${{ matrix.node }}-node_modules-
+    - name: Install dependencies
+      if: steps.nodecache.outputs.cache-hit != 'true'
+      run: |
+        make install-dev
+    - name: Check format
+      run: |
+        make check-format
+    - name: Test
+      run: |
+        # Generating a coverage report also runs the tests.
+        make coverage
+    - name: Codecov
+      uses: codecov/codecov-action@v1
+      with:
+        directory: ./coverage
+        flags: ${{ matrix.os }},node,node-${{ matrix.node }},dashboard
+        name: ci-codecov
+        # This action has a tendency to timeout
+        fail_ci_if_error: false

dashboard/Makefile

@@ -0,0 +1,29 @@
+# print out test coverage to sysout and into coverage directory. We add .PHONY
+# to make sure that it always runs even if the coverage directory has been
+# generated.
+.PHONY: coverage
+coverage: install-dev
+	npm test -- --coverage
+
+# Run all tests in src/ that end in .test.js or .spec.js. Outside of the CI this
+# runs tests on all affected files that would be committed.
+test: install-dev
+	npm run test
+
+clean:
+	rm build/.install-dev
+
+# format formats all HTML/CSS/JS/JSON/etc. files in-place.
+format: install-dev
+	npx prettier --write .
+
+# returns a non-zero value if code is not formatted.
+check-format: install-dev
+	npx prettier --check .
+
+install-dev: build/.install-dev
+
+# install-dev installs all dashboard dependencies.
+build/.install-dev: package.json package-lock.json
+	npm install
+	mkdir -p build && touch build/.install-dev

dashboard/src/components/app/App.js

@@ -5,14 +5,16 @@ import { ThemeProvider } from "@material-ui/core/styles";
 import Nav from "components/nav";
 
 export const App = (props) => (
-  <Wrapper><Nav></Nav></Wrapper>
+  <Wrapper>
+    <Nav></Nav>
+  </Wrapper>
 );
 
 export const Wrapper = ({ children }) => (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      { children }
-    </ThemeProvider>
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
 );
 
 export default App;

dashboard/src/components/nav/Nav.js

@@ -171,9 +171,11 @@ const NavDrawerSections = [
 
 export const DrawerLists = ({ classes, sections }) =>
   sections
-    .map((sectionProps) => <DrawerList classes={classes} {...sectionProps} />)
+    .map((sectionProps) => (
+      <DrawerList key={sectionProps.name} classes={classes} {...sectionProps} />
+    ))
     // Add a divider before each section
-    .flatMap((section) => [<Divider />, section]);
+    .flatMap((section, idx) => [<Divider key={idx} />, section]);
 
 export const DrawerList = ({ classes, name, items }) => (
   <List>

dashboard/src/components/nav/Nav.test.js

@@ -14,7 +14,14 @@ describe("Nav", () => {
   };
 
   it("hasn't changed", () => {
-    const tree = renderer.create(<Nav><div>abc</div><div>def</div></Nav>).toJSON();
+    const tree = renderer
+      .create(
+        <Nav>
+          <div>abc</div>
+          <div>def</div>
+        </Nav>
+      )
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -31,13 +38,13 @@ describe("Nav", () => {
     );
 
     it("renders sections", () => {
-      expect(drawerLists.find("DrawerList")).toHaveLength(3)
+      expect(drawerLists.find("DrawerList")).toHaveLength(3);
     });
 
     it("prepends divider", () => {
-      expect(drawerLists).toHaveLength(6)
+      expect(drawerLists).toHaveLength(6);
       for (var i of [0, 2, 4]) {
-        expect(drawerLists.at(i).name()).toMatch(/Divider/)
+        expect(drawerLists.at(i).name()).toMatch(/Divider/);
       }
     });
   });

dashboard/src/index.js

@@ -6,8 +6,7 @@ import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
-    ,
+    <App />,
   </React.StrictMode>,
   document.querySelector("#root")
 );