Dependabot/npm and yarn/frontend/storybook 8.5.x

.github/workflows/frontend.yml

@@ -29,3 +29,10 @@ jobs:
       run: |
         make ci
       working-directory: frontend
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: frontend/playwright-report/
+        retention-days: 3

frontend/.gitignore

@@ -26,6 +26,9 @@ node_modules
 yarn-error.log
 src/js/icons/*.json
 
+/storybook-static/
+playwright-failed
+
 # Playwright
 /test-results/
 /playwright-report/

frontend/.storybook/main.ts

@@ -0,0 +1,22 @@
+import { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+  ],
+
+  framework: '@storybook/react-webpack5',
+  staticDirs: ['../public'],
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  }
+};
+
+export default config;

frontend/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './NebraskaTheme';
 
 addons.setConfig({

frontend/.storybook/preview.js

@@ -1,35 +1,43 @@
 import React from 'react';
 import themesConf from '../src/lib/themes';
-import { StylesProvider } from '@mui/styles';
 import '../src/i18n/config';
 import ThemeProviderNexti18n from '../src/i18n/ThemeProviderNexti18n';
 import { StyledEngineProvider } from '@mui/material/styles';
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
 
 const darkTheme = themesConf['dark'];
 const lightTheme = themesConf['light'];
 
+const isProd = process.env.NODE_ENV === 'production';
+
+// Use stable class names in development & test, but not in production
+const generateClassName = !isProd
+  ? createGenerateClassName({
+      productionPrefix: 'mui',
+      disableGlobal: true,
+      seed: 'stable', // Ensures stable class names
+    })
+  : undefined; // In production, let MUI handle class name generation
+
 const withThemeProvider = (Story, context) => {
-  const backgroundColor = context.globals.backgrounds ? context.globals.backgrounds.value : 'light';
+  const backgroundColor = context.globals.backgrounds?.value || 'light';
   const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
 
-  const ourThemeProvider = (
+  const themeProvider = (
     <StyledEngineProvider injectFirst>
       <ThemeProviderNexti18n theme={theme}>
         <Story {...context} />
       </ThemeProviderNexti18n>
     </StyledEngineProvider>
   );
-  if (process.env.NODE_ENV !== 'test') {
-    return ourThemeProvider;
-  } else {
-    const generateClassName = (rule, styleSheet) =>
-      `${styleSheet?.options.classNamePrefix}-${rule.key}`;
-
-    return (
-      <StylesProvider generateClassName={generateClassName}>{ourThemeProvider}</StylesProvider>
-    );
-  }
+
+  return !isProd ? (
+    <StylesProvider generateClassName={generateClassName}>{themeProvider}</StylesProvider>
+  ) : (
+    themeProvider
+  );
 };
+
 export const decorators = [withThemeProvider];
 
 export const globalTypes = {
@@ -51,5 +59,5 @@ export const parameters = {
       { name: 'dark', value: 'dark' },
     ],
   },
-  actions: { argTypesRegex: '^on[A-Z].*' },
 };
+export const tags = ['autodocs'];

frontend/.storybook/test-runner.ts

@@ -0,0 +1,29 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  // Hook that is executed before the test runner starts running tests
+  setup() {
+    // Add your configuration here.
+  },
+  /* Hook to execute before a story is initially visited before being rendered in the browser.
+   * The page argument is the Playwright's page object for the story.
+   * The context argument is a Storybook object containing the story's id, title, and name.
+   */
+  // async preVisit(page, context) {
+  // },
+  /* Hook to execute after a story is visited and fully rendered.
+   * The page argument is the Playwright's page object for the story
+   * The context argument is a Storybook object containing the story's id, title, and name.
+   */
+  async postVisit(page, _) {
+    const elementHandler = await page.$('#storybook-root');
+    if (elementHandler) {
+      const innerHTML = await elementHandler.innerHTML();
+      expect(innerHTML).toMatchSnapshot();
+    } else {
+      throw new Error("The '#storybook-root' element was not found. elementHandler is null!");
+    }
+  },
+};
+
+export default config;

frontend/Makefile

@@ -15,9 +15,13 @@ install: node_modules
 install-ci:
 	npm ci
 
+.PHONY: install-playwright
+install-playwright:
+	npx playwright install --with-deps
+
 .PHONY: build
 build: install
-	npm run build
+	NODE_ENV=production npm run build
 
 .PHONY: test
 test:
@@ -35,8 +39,23 @@ tsc:
 i18n:
 	npm run i18n
 
+.PHONY: test-storybook-ci
+test-storybook-ci:
+	# Build Storybook
+	NODE_ENV=test npm run build-storybook --quiet
+
+	# Serve Storybook and run tests in parallel
+	npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+		"npx http-server storybook-static --port 6006 --silent" \
+		"npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook"
+
+.PHONY: test-playwright-ci
+test-playwright-ci:
+	# Run Playwright tests and capture failure
+	npx playwright test 
+
 .PHONY: ci
-ci: install-ci lint test build tsc
+ci: install-ci lint test install-playwright test-storybook-ci test-playwright-ci tsc build 
 
 node_modules:
 	npm install

frontend/e2e/README.md

@@ -4,7 +4,7 @@
 ```sh
 cd frontend
 npm install
-npx playwright install
+npx playwright install --with-deps
 ```
 
 ### 🚀 Run Tests  

frontend/e2e/package.spec.ts

@@ -12,6 +12,7 @@ test.describe('Packages', () => {
     await page.goto('http://localhost:8002/');
     await createApplication(page, appName, appId);
 
+    await page.reload();
     await expect(page.getByRole('list')).toContainText(appName);
     await expect(page.getByRole('list')).toContainText(appId);
   });