Fix asynchronous tests (#165)

* downgrade jsdom

* use consistent checkout and setup node actions

* remove caches from github actions workflows

* use string template literals in our test component to ensure new line characters are not causing our test to fail

* adjust wait for calls in useFetchConfig spec file

* Revert "downgrade jsdom"

This reverts commit 0fa9aaf.

* increment docker metadata action version usage

* increment package version

.github/workflows/build-image.yaml

@@ -26,11 +26,11 @@ jobs:
         working-directory: .
     steps:
       - name: 'Checkout'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: 'Docker meta'
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: ghcr.io/${{ github.repository_owner }}/${{ inputs.image_name }}
           tags: ${{ inputs.image_tags }}

.github/workflows/coverage.yaml

@@ -2,7 +2,7 @@ name: 'Coverage'
 
 on:
   release:
-    types: [published]
+    types: [ published ]
 
 jobs:
   report:
@@ -12,13 +12,12 @@ jobs:
 
     steps:
       - name: 'Checkout'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: 'Setup Node.js'
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'npm'
 
       - name: 'Install dependencies'
         run: npm ci

.github/workflows/dependency-review.yaml

@@ -19,7 +19,7 @@ jobs:
     if: github.repository == 'usepa/haztrak'
     steps:
       - name: 'Checkout'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3

.github/workflows/deploy-dev.yaml

@@ -32,7 +32,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'npm'
 
       - name: 'Install dependencies'
         run: npm ci

.github/workflows/test.yaml

@@ -3,9 +3,9 @@ name: 'Tests'
 
 on:
   pull_request:
-    branches: ['main']
+    branches: [ 'main' ]
   push:
-    branches-ignore: ['main']
+    branches-ignore: [ 'main' ]
   workflow_call:
 
 jobs:
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20]
+        node-version: [ 20 ]
     steps:
       - name: 'Checkout'
         uses: actions/checkout@v4
@@ -23,7 +23,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
 
       - name: 'Install Dependencies'
         run: npm ci
@@ -38,17 +37,15 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20]
+        node-version: [ 20 ]
     steps:
       - name: 'Checkout'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: 'Setup Node'
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
 
       - name: 'Install Dependencies'
         run: npm ci
@@ -61,11 +58,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: 'Docker meta'
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: ghcr.io/${{ github.repository_owner }}/the-manifest-game
 
@@ -83,14 +80,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: 'Setup Node'
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
 
       - name: 'Install Dependencies'
         run: npm ci

package.json

@@ -1,7 +1,7 @@
 {
   "name": "the-manifest-game",
   "private": true,
-  "version": "0.9.4",
+  "version": "0.9.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/hooks/useFetchConfig/useFetchConfig.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import { useFetchConfig } from 'hooks/useFetchConfig/useFetchConfig';
-import { http, HttpResponse } from 'msw';
+import { delay, http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
@@ -37,14 +37,12 @@ const TestComponent = () => {
         {config
           ? Object.values(config).map((item) => (
               <li key={item.id}>
-                data id: {item.id} - {item.hidden ? 'hidden' : 'visible'}
+                {`data id: ${item.id} - ${item.hidden ? 'hidden' : 'visible'}`}
                 {/*List the children on the node*/}
                 <ul>
                   {item.data.children &&
                     item.data.children.map((child, index) => (
-                      <li key={index}>
-                        node {item.id} child {child}
-                      </li>
+                      <li key={index}>{`node ${item.id} child ${child}`}</li>
                     ))}
                 </ul>
               </li>
@@ -63,25 +61,24 @@ describe('useFetchConfig', () => {
   });
   test('parses the config into a DecisionTree', async () => {
     render(<TestComponent />);
-    expect(screen.queryByText(/data/i)).not.toBeInTheDocument();
-    await waitFor(() => screen.queryByText(/data/i));
+    await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
     expect(screen.queryByText(/data id: 1/i)).toBeInTheDocument();
   });
   test('sets the first node in the array to visible and the rest to hidden', async () => {
     server.use(
-      http.get('/default.json', () =>
-        HttpResponse.json({
+      http.get('/default.json', () => {
+        delay();
+        return HttpResponse.json({
           nodes: [
             { id: '1', type: 'default', label: 'foo', data: { children: [] } },
             { id: '2', type: 'default', label: 'bar', data: { children: [] } },
             { id: '3', type: 'BoolNode', label: 'bool', data: { yesId: '3', noId: '5' } },
           ],
-        })
-      )
+        });
+      })
     );
     render(<TestComponent />);
-    expect(screen.queryByText(/data/i)).not.toBeInTheDocument();
-    await waitFor(() => screen.queryByText(/data/i));
+    await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
     expect(screen.queryByText('data id: 1 - visible')).toBeInTheDocument();
     expect(screen.queryByText('data id: 2 - hidden')).toBeInTheDocument();
     expect(screen.queryByText('data id: 3 - hidden')).toBeInTheDocument();
@@ -93,8 +90,7 @@ describe('useFetchConfig', () => {
       })
     );
     render(<TestComponent />);
-    expect(screen.queryByText(/data/i)).not.toBeInTheDocument();
-    await waitFor(() => screen.queryByText(/data/i));
+    await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
     expect(screen.queryByText('error')).toBeInTheDocument();
   });
   test('takes boolean node yes and no ID elements and adds them to the children array', async () => {
@@ -110,8 +106,7 @@ describe('useFetchConfig', () => {
       )
     );
     render(<TestComponent />);
-    expect(screen.queryByText(/data/i)).not.toBeInTheDocument();
-    await waitFor(() => screen.queryByText(/data/i));
+    await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
     expect(screen.queryByText('node 1 child 2')).toBeInTheDocument();
     expect(screen.queryByText('node 1 child 3')).toBeInTheDocument();
   });