Merge branch 'fix-flaky-test' into nested-routes-for-catalogue-#1218

.env.production

@@ -2,4 +2,5 @@ VITE_APP_INVENTORY_MANAGEMENT_SYSTEM_BUILD_DIRECTORY=/
 # Must be explicitly set to false to ensure it is assigned properly (ensuring msw is excluded)
 VITE_APP_INCLUDE_MSW=false
 VITE_APP_BUILD_STANDALONE=false
+VITE_APP_INCLUDE_CODECOV=false
 USE_API_SETTINGS=false

.github/workflows/ci-build.yml

@@ -30,14 +30,43 @@ jobs:
         run: yarn lint
 
       - name: Run unit tests
-        run: yarn test
+        run: yarn test --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
       - name: Upload coverage reports to Codecov
         if: success()
         uses: codecov/codecov-action@1e68e06f1dbfde0e4cefc87efeba9e4643565303 # v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
 
+      - name: Upload test results to Codecov
+        if: ${{ !cancelled() }}
+        uses: codecov/test-results-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+  bundle_analysis:
+    name: Bundle Analysis
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: |
+          yarn --immutable
+
+      - name: Build app for production
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+        run: yarn build
+
   e2e-tests:
     name: End-to-End (with mock data) Tests
     runs-on: ubuntu-latest

codecov.yml

@@ -9,3 +9,32 @@ coverage:
         target: 75
 ignore:
   - "inventory-management-system/src/mocks"
+
+# Post comment if there are changes in bundle size of any size
+comment:
+     require_bundle_changes: True
+
+# Post comment if there are changes in bundle size exceeding 1Kb
+comment:
+     require_bundle_changes: True
+     bundle_change_threshold: "1Kb"
+
+# Post comment if there are changes in bundle size increases more than 1Mb
+comment:
+     require_bundle_changes: "bundle_increase"
+     bundle_change_threshold: "1Mb"
+
+# Post informational status (never fails) with threshold of 5%
+# This is the default configuration
+bundle_analysis:
+     warning_threshold: "5%"
+     status: "informational"
+
+# Disable commit status
+bundle_analysis:
+     status: False
+
+# Post commit status that will fail if change is larger than threshold of 10MB
+bundle_analysis:
+     warning_threshold: "10MB"
+     status: True

cypress/e2e/with_mock_data/systems.cy.ts

@@ -578,10 +578,18 @@ describe('Systems', () => {
   });
 
   it('edits a system from a landing page', () => {
+    Cypress.on('uncaught:exception', (err) => {
+      if (err.message.includes('ResizeObserver')) {
+        return false;
+      }
+    });
     cy.visit('/systems/65328f34a40ff5301575a4e3');
 
     cy.findByRole('button', { name: 'systems page actions menu' }).click();
-    cy.findByText('Edit').click();
+    cy.findByRole('menuitem', { name: 'Edit' }).should('exist');
+    cy.findByRole('menuitem', { name: 'Edit' }).click();
+
+    cy.findByRole('dialog', { name: 'Edit System' }).should('exist');
 
     cy.findByLabelText('Name *').clear();
     cy.findByLabelText('Name *').type('System name');

package.json

@@ -17,7 +17,6 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/uuid": "^10.0.0",
     "@uppy/aws-s3": "^4.1.0",
     "@uppy/core": "^4.2.2",
     "@uppy/dashboard": "^4.1.0",
@@ -45,7 +44,6 @@
     "react-router-dom": "^6.23.1",
     "single-spa-react": "6.0.2",
     "typescript": "^5.4.5",
-    "uuid": "^11.0.0",
     "vite": "^5.2.12",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "zod": "^3.23.8"
@@ -79,6 +77,7 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "@babel/eslint-parser": "7.25.9",
+    "@codecov/vite-plugin": "^1.7.0",
     "@eslint/compat": "1.2.4",
     "@eslint/js": "9.17.0",
     "@tanstack/eslint-plugin-query": "5.62.1",

src/admin/units/units.component.test.tsx

@@ -15,9 +15,12 @@ describe('Units', () => {
   it('renders table correctly', async () => {
     const view = createView();
 
-    await waitFor(() => {
-      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-    });
+    await waitFor(
+      () => {
+        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+      },
+      { timeout: 10000 }
+    );
 
     await waitFor(() => {
       expect(screen.getByText('megapixels')).toBeInTheDocument();

src/catalogue/category/catalogueCategoryDialog.component.test.tsx

@@ -335,7 +335,7 @@ describe('Catalogue Category Dialog', () => {
       });
 
       expect(onClose).toHaveBeenCalled();
-    }, 10000);
+    });
 
     it('create a catalogue category with content being catalogue items and deletes an catalogue item property', async () => {
       createView();
@@ -432,7 +432,7 @@ describe('Catalogue Category Dialog', () => {
       });
 
       expect(onClose).toHaveBeenCalled();
-    }, 10000);
+    });
 
     it('create a catalogue category with content being catalogue items (allowed_values list of numbers)', async () => {
       createView();
@@ -812,7 +812,7 @@ describe('Catalogue Category Dialog', () => {
       expect(nameHelperTexts.length).toBe(1);
 
       expect(onClose).not.toHaveBeenCalled();
-    }, 10000);
+    });
 
     it('clears formFields when catalogue content is catalogue categories', async () => {
       createView();
@@ -840,7 +840,7 @@ describe('Catalogue Category Dialog', () => {
       expect(screen.queryByText('radius')).not.toBeInTheDocument();
       expect(screen.queryByText('millimeters')).not.toBeInTheDocument();
       expect(screen.queryByText('Yes')).not.toBeInTheDocument();
-    }, 10000);
+    });
 
     it('displays duplicate values and invalid type errors (allowed_values list of numbers)', async () => {
       createView();
@@ -928,7 +928,7 @@ describe('Catalogue Category Dialog', () => {
       const duplicateHelperTexts2 = screen.queryByText('Duplicate value.');
 
       expect(duplicateHelperTexts2).not.toBeInTheDocument();
-    }, 15000);
+    }, 20000);
 
     it('displays invalid type errors (allowed_values list of numbers)', async () => {
       createView();
@@ -962,7 +962,7 @@ describe('Catalogue Category Dialog', () => {
       expect(incorrectTypeHelperTexts.length).toEqual(1);
 
       expect(onClose).not.toHaveBeenCalled();
-    }, 10000);
+    });
 
     it('displays duplicate values values with different significant figures (allowed_values list of numbers)', async () => {
       createView();
@@ -997,7 +997,7 @@ describe('Catalogue Category Dialog', () => {
       expect(duplicateHelperTexts.length).toEqual(2);
 
       expect(onClose).not.toHaveBeenCalled();
-    }, 10000);
+    });
 
     it('displays error if the allowed values list is empty', async () => {
       createView();
@@ -1066,7 +1066,7 @@ describe('Catalogue Category Dialog', () => {
       expect(listHelperTexts.length).toEqual(2);
 
       expect(onClose).not.toHaveBeenCalled();
-    }, 10000);
+    });
 
     it('displays duplicate values error (allowed_values list of string)', async () => {
       createView();

src/common/images/imageGallery.component.test.tsx

@@ -39,7 +39,8 @@ describe('Image Gallery', () => {
       expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
     );
 
-    expect(screen.getAllByText('logo1.png').length).toEqual(8);
+    expect((await screen.findAllByText('logo1.png')).length).toEqual(8);
+
     expect(baseElement).toMatchSnapshot();
   });
 

src/systems/systemItemsTable.component.test.tsx

@@ -486,7 +486,7 @@ describe('SystemItemsTable', () => {
         { timeout: 4000 }
       );
 
-      expect(screen.getAllByRole('combobox')[0]).toHaveValue('New');
+      expect((await screen.findAllByRole('combobox'))[0]).toHaveValue('New');
       expect(screen.getAllByRole('combobox')[1]).toHaveValue('In Use');
     });
 

src/testUtils.tsx

@@ -178,34 +178,6 @@ export const getItemsBySystemId = (systemId: string): Item[] => {
   return ItemsJSON.filter((item) => item.system_id === systemId);
 };
 
-/* This counter and the function below it are used for forcing UUID's to be deterministic */
-let globalUUIDCounter = 0;
-const generateUUIDBytes = (): Uint8Array => {
-  const byteArray = new Uint8Array(16);
-  for (let i = 0; i < byteArray.length; i++) {
-    byteArray[i] = (globalUUIDCounter + i) % 256; // Ensuring the value stays within byte range
-  }
-  globalUUIDCounter++;
-  return byteArray;
-};
-
-/* Mock uuid's generated for snapshot tests to ensure they are deterministic rather than random */
-export const mockUUIDv4 = () => {
-  globalUUIDCounter = 0;
-  vi.mock('uuid', async () => {
-    const uuid = await vi.importActual('uuid');
-    return {
-      ...uuid,
-      v4: vi.fn(() =>
-        // @ts-expect-error Unknown as don't want to import here
-        uuid.v4({
-          random: generateUUIDBytes(),
-        })
-      ),
-    };
-  });
-};
-
 export const CREATED_MODIFIED_TIME_VALUES = {
   created_time: '2024-01-01T12:00:00.000+00:00',
   modified_time: '2024-01-02T13:10:10.000+00:00',

vite.config.ts

@@ -63,6 +63,15 @@ export default defineConfig(({ mode }) => {
   // Allow hot reloading of json files in public folder when in development
   if (env.NODE_ENV === 'development') plugins.push(jsonHMR());
 
+  if (env.VITE_APP_INCLUDE_CODECOV === 'true')
+    plugins.push(
+      codecovVitePlugin({
+        enableBundleAnalysis: env.CODECOV_TOKEN !== undefined,
+        bundleName: 'inventory-management-system',
+        uploadToken: env.CODECOV_TOKEN,
+      })
+    );
+
   const config: UserConfig = {
     plugins: plugins,
     server: {