Merge pull request #1239 from ral-facilities/fix-flaky-test

Fix flaky test

.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

@@ -38,6 +38,12 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
 
+      - name: Upload test results to Codecov
+        if: ${{ !cancelled() }}
+        uses: codecov/test-results-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
   e2e-tests:
     name: End-to-End (with mock data) Tests
     runs-on: ubuntu-latest
@@ -147,6 +153,30 @@ jobs:
         with:
           name: Inventory management system (with api) Screenshots
           path: cypress/screenshots
+  bundle_analysis:
+    # This job triggers only if all the other jobs succeed.
+    needs: [lint-and-unit-test, e2e-tests, e2e-tests-api]
+    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
 
   docker:
     # This job triggers only if all the other jobs succeed. It builds the Docker image and if successful,

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,19 @@ describe('Systems', () => {
   });
 
   it('edits a system from a landing page', () => {
+    // Catch error to avoid the CI failing unnecessarily
+    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

@@ -4,6 +4,7 @@
   "type": "module",
   "private": true,
   "dependencies": {
+    "@codecov/vite-plugin": "1.7.0",
     "@date-io/date-fns": "3.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",

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();
@@ -1498,4 +1498,4 @@ describe('Catalogue Category Dialog', () => {
       expect(onClose).toHaveBeenCalled();
     });
   });
-}, 10000);
+}, 15000);

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');
     });
 

vite.config.ts

@@ -1,3 +1,4 @@
+import { codecovVitePlugin } from '@codecov/vite-plugin';
 import react from '@vitejs/plugin-react';
 import browserslistToEsbuild from 'browserslist-to-esbuild';
 import fs from 'node:fs';
@@ -63,6 +64,16 @@ export default defineConfig(({ mode }) => {
   // Allow hot reloading of json files in public folder when in development
   if (env.NODE_ENV === 'development') plugins.push(jsonHMR());
 
+  // Allow codecov bundle analysis
+  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: {
@@ -162,6 +173,12 @@ export default defineConfig(({ mode }) => {
           'src/main.tsx',
         ],
       },
+      reporters: [
+        'default',
+        // Extra for codecov test analysis
+        ...(env.CI ? ['junit'] : []),
+      ],
+      outputFile: env.CI ? { junit: 'test-report.junit.xml' } : undefined,
     },
   };
 });