Feat: Component Tests (nightwatchjs#17)

* Add: basic component test for Header and Footer

* updated @nightwatch/react plugin

* updated chromedriver

* Update node.js.yml

* updated test task

* update nightwatch to alpha

* update: GA workflow to include 20.x nodejs

---------

Co-authored-by: Andrei Rusu <[email protected]>
Co-authored-by: Andrei Rusu <[email protected]>

.eslintrc.json

@@ -6,6 +6,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended"
   ],
   "overrides": [],
@@ -14,7 +15,11 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["react", "@typescript-eslint", "react-hooks"],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "react-hooks"
+  ],
   "settings": {
     "react": {
       "version": "detect"

.github/workflows/node.js.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -28,28 +28,27 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run lint -- --quiet
-    - run: npm i nightwatch
-    - run: npm run test
-    - name: Setup Pages
-      uses: actions/configure-pages@v3
-    - name: Upload artifact
-      uses: actions/upload-pages-artifact@v1
-      with:
-        path: './tests_output/nightwatch-html-report'
-    - name: Deploy to GitHub Pages
-      id: deployment
-      uses: actions/deploy-pages@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint -- --quiet
+      - run: npm test
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "./tests_output/nightwatch-html-report"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
     outputs:
       url: ${{ steps.deployment.outputs.page_url }}

.gitignore

@@ -30,3 +30,4 @@ html/
 vrt/
 *.tgz
 tests_output
+.cache

nightwatch.conf.ts

@@ -14,7 +14,7 @@
 module.exports = {
   // An array of folders (excluding subfolders) where your tests are located;
   // if this is not specified, the test source must be passed as the second argument to the test runner.
-  src_folders: ['nightwatch'],
+  src_folders: ['nightwatch/components'],
 
   // See https://nightwatchjs.org/guide/concepts/page-object-model.html
   page_objects_path: [],

nightwatch/components/footer.spec.tsx

@@ -0,0 +1,21 @@
+import Footer from '../../src/components/Footer';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import GlobalStyles from '../../src/components/GlobalStyles';
+import { GlobalContext } from '../../src/contexts/GlobalContext';
+
+export default {
+  title: 'Footer Component',
+  component: Footer
+};
+
+export const FooterComponent = () => (
+  <>
+    <GlobalStyles />
+    <Footer />
+  </>
+);
+
+FooterComponent.test = async (browser) => {
+  browser.pause(1000);
+  // expect(FooterComponent).to.be.visible;
+};

nightwatch/components/header.spec.tsx

@@ -0,0 +1,25 @@
+import Header from '../../src/components/Header';
+import GlobalStyles from '../../src/components/GlobalStyles';
+import { GlobalContextProvider } from '../utils/TestGlobalContextProvider';
+
+export default {
+  title: 'Header Component',
+  component: Header
+};
+
+export const HeaderComponent = () => (
+  <>
+    <GlobalContextProvider
+      value={{
+        metadata: { date: '2022-12-21T09:07:54.770Z' }
+      }}>
+      <GlobalStyles />
+      <Header />
+    </GlobalContextProvider>
+  </>
+);
+
+HeaderComponent.test = async (browser) => {
+  browser.pause(1000);
+  // expect(HeaderComponent).to.be.visible;
+};

nightwatch/tsconfig.json

@@ -8,6 +8,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "allowJs": true,
+    "jsx": "react-jsx",
     "forceConsistentCasingInFileNames": true
   }
 }

nightwatch/utils/TestGlobalContextProvider.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { GlobalContext } from '../../src/contexts/GlobalContext';
+
+type GlobalContextProps = {
+  children: ReactNode;
+  value: any;
+};
+
+export const GlobalContextProvider: React.FC<GlobalContextProps> = ({ children, value }) => {
+  return <GlobalContext.Provider value={value}>{children}</GlobalContext.Provider>;
+};