Merge pull request #962 from weaveworks/jp-fe-tests

Add example front-end tests

Author: jpellizzari

.github/workflows/test.yaml

@@ -154,6 +154,31 @@ jobs:
           cd cmd/clusters-service
           go test -v ./... -tags=integration
 
+  ui-unit-tests:
+    runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.BUILD_BOT_PERSONAL_ACCESS_TOKEN }}
+      YARN_CACHE_NAME: cache-yarn
+    steps:
+      - id: cache-paths
+        run: |
+          echo "::set-output name=dir::$(yarn cache dir)"
+          echo "::set-output name=go-build::$(go env GOCACHE)"
+          echo "::set-output name=go-mod::$(go env GOMODCACHE)"
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Yarn Cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.cache-paths.outputs.dir }}
+          key: ${{ runner.os }}-${{ env.YARN_CACHE_NAME }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ env.YARN_CACHE_NAME }}-
+      - name: Install modules
+        run: cd ui-cra && yarn --pure-lockfile
+      - name: Run Front-end Unit Tests
+        run: cd ui-cra && ./node_modules/.bin/react-scripts test
+
   ui-integration-tests:
     runs-on: ubuntu-latest
     env:

.gitignore

@@ -16,6 +16,7 @@
 tools/bin
 
 node_modules
+tilt_modules
 
 # Ignore binary dependencies
 /setup/wk-quickstart/bin/

CONTRIBUTING.md

@@ -419,6 +419,50 @@ yarn start
 
 Open up http://localhost:3000. Changes to code will be hot-reloaded.
 
+### Unit Tests
+
+To start the `jest` test runner CLI dialog:
+
+```
+$ cd ui-cra
+$ yarn test
+
+PASS  src/components/Applications/__tests__/index.test.tsx
+  Applications index test
+    ✓ renders table rows (349 ms)
+    snapshots
+      ✓ loading (170 ms)
+      ✓ success (168 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       3 passed, 3 total
+Snapshots:   2 passed, 2 total
+Time:        5.448 s
+Ran all test suites.
+
+Watch Usage: Press w to show more.
+```
+
+#### UI Unit Test Tips
+
+- The `@testing-library/react` package provides a test renderer as well as helpers for dealing with hooks and component state
+- Snapshots alone generally aren't enough, you should do some assertions to validate component behavior
+- Hooks can be tested in isolation from components using the `act` helper.
+
+#### Snapshot Tests
+
+We use a technique called "Snapshots" to record the rendered output of components and track them in version control over time. Snapshots are not really tests, since they don't have any explicity assertions. Think of them more as a record of the output of a component.
+
+When combined with the `styled-components` integration, snapshots give us a way to track styling logic over time. This can be very helpful in debugging styling issues that would otherwise be hard to understand.
+
+After any changes to styling logic, you should expect to update snapshots, else unit tests will fail.
+
+To update snapshots:
+
+```
+yarn test -u
+```
+
 ### How to do local dev on the UI
 
 The easiest way to dev on the UI is to use an existing cluster.

ui-cra/package.json

@@ -25,7 +25,7 @@
     "@types/react-router-dom": "^5.1.7",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/styled-components": "^5.1.9",
-    "@weaveworks/progressive-delivery": "^0.0.0-rc8",
+    "@weaveworks/progressive-delivery": "0.0.0-rc8",
     "@weaveworks/weave-gitops": "0.9.0-rc.3",
     "classnames": "^2.3.1",
     "d3-scale": "4.0.0",
@@ -95,9 +95,11 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/react": "^12.1.5",
     "@types/react-syntax-highlighter": "^13.5.2",
     "express": "^4.17.1",
     "http-proxy-middleware": "^2.0.0",
+    "jest-styled-components": "^7.0.8",
     "prettier": "^2.3.0"
   }
 }

ui-cra/src/App.tsx

@@ -1,20 +1,21 @@
-import React, { FC } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { muiTheme } from './muiTheme';
-import { MuiThemeProvider } from '@material-ui/core/styles';
 import '@fortawesome/fontawesome-free/css/all.css';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import { FC } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter } from 'react-router-dom';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { muiTheme } from './muiTheme';
 
 import {
-  theme,
-  applicationsClient,
   AppContextProvider,
+  applicationsClient,
+  theme,
 } from '@weaveworks/weave-gitops';
-import ProximaNova from './fonts/proximanova-regular.woff';
-import RobotoMono from './fonts/roboto-mono-regular.woff';
 import Background from './assets/img/background.svg';
 import ResponsiveDrawer from './components/ResponsiveDrawer';
+import RequestContextProvider from './contexts/Request';
+import ProximaNova from './fonts/proximanova-regular.woff';
+import RobotoMono from './fonts/roboto-mono-regular.woff';
 
 const GlobalStyle = createGlobalStyle`
   /* https://github.com/weaveworks/wkp-ui/pull/283#discussion_r339958886 */
@@ -65,14 +66,16 @@ const App: FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <MuiThemeProvider theme={muiTheme}>
-        <QueryClientProvider client={queryClient}>
-          <BrowserRouter basename={process.env.PUBLIC_URL}>
-            <GlobalStyle />
-            <AppContextProvider applicationsClient={applicationsClient}>
-              <ResponsiveDrawer />
-            </AppContextProvider>
-          </BrowserRouter>
-        </QueryClientProvider>
+        <RequestContextProvider fetch={window.fetch}>
+          <QueryClientProvider client={queryClient}>
+            <BrowserRouter basename={process.env.PUBLIC_URL}>
+              <GlobalStyle />
+              <AppContextProvider applicationsClient={applicationsClient}>
+                <ResponsiveDrawer />
+              </AppContextProvider>
+            </BrowserRouter>
+          </QueryClientProvider>
+        </RequestContextProvider>
       </MuiThemeProvider>
     </ThemeProvider>
   );