Enhancement/10091-storybook-dependencies-latest-nodejs

.github/workflows/browserslist-db-update.yml

@@ -59,13 +59,8 @@ jobs:
       - name: Setup Node.js (.nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      # npm@7 is the minimum version required for c2corg/browserslist-update-action@v2.
-      # TODO: Remove this step once our node base version comes with npm@7 or greater.
-      - name: Install npm globally
-        run: npm run install-global-npm
+          node-version-file: .nvmrc
+          cache: npm
 
       - name: Update Browserslist database and create PR if applicable
         uses: c2corg/browserslist-update-action@v2

.github/workflows/compressed-size.yml

@@ -38,17 +38,12 @@ jobs:
       - name: Setup Node.js (.nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      # nvm@7 is the minimum version required for npm workspace support.
-      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
-      # This can be removed once our node base version comes with nvm@7 or greater.
-      - name: Install npm Globally
-        run: npm run install-global-npm
+          node-version-file: .nvmrc
+          cache: npm
 
       - uses: preactjs/compressed-size-action@v2
         with:
+          install-script: npm i --workspace=assets --include-workspace-root
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           pattern: './dist/assets/**/*.{css,js}'
           # The sub-match below will be replaced by asterisks.

.github/workflows/e2e-tests.yml

@@ -100,17 +100,11 @@ jobs:
       - name: Setup Node.js (.nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      # nvm@7 is the minimum version required for npm workspace support.
-      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
-      # This can be removed once our node base version comes with nvm@7 or greater.
-      - name: Install npm Globally
-        run: npm run install-global-npm
+          node-version-file: .nvmrc
+          cache: npm
 
       - name: npm install
-        run: npm ci
+        run: npm i --workspaces --include-workspace-root
 
       - name: Build
         run: npm run build:test

.github/workflows/js-css-lint-test.yml

@@ -46,32 +46,46 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  js-css-lint-test:
-    name: JS + CSS
+  css-lint:
+    name: CSS Lint
     runs-on: ubuntu-latest
     timeout-minutes: 20
     steps:
       - uses: actions/checkout@v4
-      - name: Setup Node.js (.nvmrc)
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      # nvm@7 is the minimum version required for npm workspace support.
-      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
-      # This can be removed once our node base version comes with nvm@7 or greater.
-      - name: Install npm Globally
-        run: npm run install-global-npm
-
+          node-version-file: .nvmrc
+          cache: npm
       - name: npm install
-        run: npm ci
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
+        run: npm i -w assets --include-workspace-root
       - name: CSS Lint
         run: npm run lint:css
+  js-lint:
+    name: JS Lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - name: npm install
+        run: npm i -w assets -w storybook -w tests/js -w tests/e2e --include-workspace-root
       - name: JS Lint
         run: npm run lint:js
+  js-test:
+    name: JS Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - name: npm install
+        run: npm i -w assets -w storybook -w tests/js --include-workspace-root
       - name: Jest Tests
         id: test-js
         run: npm run test:js

.github/workflows/storybook.yml

@@ -71,12 +71,8 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: npm
-      # npm@7 is the minimum version required for this repository.
-      # TODO: Remove this step once our node base version comes with npm@7 or greater.
-      - name: Install npm globally
-        run: npm run install-global-npm
       - name: npm install
-        run: npm ci
+        run: npm i -w assets -w storybook -w tests/js --include-workspace-root
       - name: Build Storybook
         run: npm run build:storybook
       - name: Upload artifacts
@@ -164,11 +160,7 @@ jobs:
         with:
           node-version-file: .nvmrc
           cache: npm
-      # npm@7 is the minimum version required for this repository.
-      # TODO: Remove this step once our node base version comes with npm@7 or greater.
-      - name: Install npm globally
-        run: npm run install-global-npm
       - name: npm install
-        run: npm ci
-      - name: Test Storybook
-        run: npm run test:storybook
+        run: npm i -w assets -w storybook -w tests/js --include-workspace-root
+      # - name: Test Storybook
+      #   run: npm run test:storybook

.github/workflows/visual-regression.yml

@@ -41,25 +41,16 @@ jobs:
       - name: Setup Node.js (.nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      # nvm@7 is the minimum version required for npm workspace support.
-      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
-      # This can be removed once our node base version comes with nvm@7 or greater.
-      - name: Install npm Globally
-        run: npm run install-global-npm
-
+          node-version-file: .nvmrc
+          cache: npm
       - name: npm install
-        run: npm ci
-
+        run: npm i -w assets -w tests/backstop -w storybook -w tests/js --include-workspace-root
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: google-site-kit-bot
           password: ${{ secrets.GH_BOT_TOKEN }}
-
       - name: Run Backstopjs
         run: npm run test:visualtest
       - name: Upload artifacts

.github/workflows/zips.yml

@@ -114,16 +114,10 @@ jobs:
       - name: Setup Node.js (.nvmrc)
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-      # nvm@7 is the minimum version required for npm workspace support.
-      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
-      # This can be removed once our node base version comes with nvm@7 or greater.
-      - name: Install npm Globally
-        run: npm run install-global-npm
+          node-version-file: .nvmrc
+          cache: npm
       - name: npm install
-        run: |
-          npm ci
+        run: npm i --include-workspace-root -w assets
       - name: Create destination directory and update file permissions
         run: |
           mkdir -p "${{ github.ref }}"

.nvmrc

@@ -1 +1 @@
-14
+22

assets/js/components/Header.test.js

@@ -23,6 +23,7 @@ import {
 	provideModules,
 	provideUserAuthentication,
 	provideUserInfo,
+	waitForDefaultTimeouts,
 } from '../../../tests/js/test-utils';
 import { VIEW_CONTEXT_MAIN_DASHBOARD } from '@/js/googlesitekit/constants';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
@@ -46,11 +47,13 @@ describe( 'Header', () => {
 		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( [] );
 	} );
 
-	it( 'renders', () => {
+	it( 'renders', async () => {
 		render( <Header />, {
 			registry,
 			viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 		} );
+
+		await act( waitForDefaultTimeouts );
 	} );
 
 	it( 'can render a subheader', async () => {

assets/js/components/JoyrideTooltip.stories.js

@@ -36,20 +36,20 @@ DefaultTooltip.args = {
 	target: '.target',
 };
 DefaultTooltip.scenario = {
-	delay: 300,
+	delay: 200, // Slight delays are required to ensure the tooltip is fully rendered even with animations disabled.
 };
 
 export const PlacementTooltip = Template.bind( {} );
 PlacementTooltip.storyName = 'Tooltip with Custom Placement';
 PlacementTooltip.args = {
-	title: 'Tooltip with Top Placement',
-	content: 'This tooltip is positioned at the top of the target element.',
+	title: 'Tooltip with Bottom Placement',
+	content: 'This tooltip is positioned at the bottom of the target element.',
 	dismissLabel: 'Got it',
 	target: '.target',
-	placement: 'top',
+	placement: 'bottom',
 };
 PlacementTooltip.scenario = {
-	delay: 300,
+	delay: 200,
 };
 
 export const MobileModalTooltip = Template.bind( {} );
@@ -65,7 +65,7 @@ MobileModalTooltip.args = {
 	disableOverlay: false,
 };
 MobileModalTooltip.scenario = {
-	delay: 300,
+	delay: 200,
 };
 
 export default {

assets/js/components/OverlayNotification/AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification.test.js

@@ -19,7 +19,7 @@
 /**
  * Internal dependencies
  */
-import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../tests/js/utils/zeroReports';
+import { replaceValuesInAnalytics4ReportWithZeroData } from '@/js/util/zero-reports';
 import {
 	act,
 	createTestRegistry,

assets/js/components/ReportError.test.js

@@ -24,12 +24,13 @@ import {
 	provideModuleRegistrations,
 	provideModules,
 	provideUserInfo,
+	waitForDefaultTimeouts,
 } from '../../../tests/js/utils';
 import {
 	ERROR_CODE_MISSING_REQUIRED_SCOPE,
 	ERROR_REASON_INSUFFICIENT_PERMISSIONS,
 } from '@/js/util/errors';
-import { fireEvent, render } from '../../../tests/js/test-utils';
+import { act, fireEvent, render } from '../../../tests/js/test-utils';
 import ReportError from './ReportError';
 import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
@@ -94,7 +95,7 @@ describe( 'ReportError', () => {
 		invalidateResolutionSpy.mockReset();
 	} );
 
-	it( 'renders the error message', () => {
+	it( 'renders the error message', async () => {
 		const { container } = render(
 			<ReportError
 				moduleSlug={ moduleName }
@@ -112,6 +113,8 @@ describe( 'ReportError', () => {
 		expect( container.querySelector( 'p' ).textContent ).toEqual(
 			'Test error message'
 		);
+
+		await act( waitForDefaultTimeouts );
 	} );
 
 	it( 'renders the error message without HTML tags', async () => {

assets/js/components/adminbar/AdminBarApp.stories.js

@@ -28,7 +28,7 @@ import {
 	setupSearchConsoleZeroData,
 	setupAnalytics4ZeroData,
 	setupAnalytics4MockReportsWithNoDataInComparisonDateRange,
-} from './common-GA4.stories';
+} from './common-GA4-stories';
 import { Provider as ViewContextProvider } from '@/js/components/Root/ViewContextContext';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
 import AdminBarApp from './AdminBarApp';

assets/js/components/adminbar/AdminBarClicks.stories.js

@@ -25,7 +25,7 @@ import {
 	setupSearchConsoleGatheringData,
 	setupSearchConsoleMockReports,
 	widgetDecorators,
-} from './common-GA4.stories';
+} from './common-GA4-stories';
 import AdminBarClicks from './AdminBarClicks';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
 

assets/js/components/adminbar/AdminBarImpressions.stories.js

@@ -25,7 +25,7 @@ import {
 	setupSearchConsoleGatheringData,
 	setupSearchConsoleMockReports,
 	widgetDecorators,
-} from './common-GA4.stories';
+} from './common-GA4-stories';
 import AdminBarImpressions from './AdminBarImpressions';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
 

assets/js/components/adminbar/AdminBarSessionsGA4.stories.js

@@ -28,7 +28,7 @@ import {
 	setupAnalytics4MockReports,
 	widgetDecorators,
 	setupAnalytics4MockReportsWithNoDataInComparisonDateRange,
-} from './common-GA4.stories';
+} from './common-GA4-stories';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
 import AdminBarSessionsGA4 from './AdminBarSessionsGA4';
 

assets/js/components/adminbar/AdminBarUniqueVisitorsGA4.stories.js

@@ -28,7 +28,7 @@ import {
 	setupAnalytics4Error,
 	widgetDecorators,
 	setupAnalytics4MockReportsWithNoDataInComparisonDateRange,
-} from './common-GA4.stories';
+} from './common-GA4-stories';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
 import AdminBarUniqueVisitorsGA4 from './AdminBarUniqueVisitorsGA4';
 

assets/js/components/adminbar/AdminBarWidgets.stories.js

@@ -32,7 +32,7 @@ import {
 	widgetDecorators,
 	setupAnalytics4Loading,
 	setupAnalytics4MockReports,
-} from './common-GA4.stories';
+} from './common-GA4-stories';
 import { Provider as ViewContextProvider } from '@/js/components/Root/ViewContextContext';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { VIEW_CONTEXT_ADMIN_BAR_VIEW_ONLY } from '@/js/googlesitekit/constants';

assets/js/components/adminbar/common-GA4.stories.js → assets/js/components/adminbar/common-GA4-stories.js

@@ -26,12 +26,12 @@ import {
 } from '../../../../tests/js/utils';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
-import { provideSearchConsoleMockReport } from '@/js/modules/search-console/util/data-mock';
-import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../tests/js/utils/zeroReports';
+import { replaceValuesInAnalytics4ReportWithZeroData } from '@/js/util/zero-reports';
 import {
 	getAnalytics4MockResponse,
 	provideAnalyticsReportWithoutDateRangeData,
 } from '@/js/modules/analytics-4/utils/data-mock';
+import { provideSearchConsoleMockReport } from '@/js/modules/search-console/util/data-mock';
 import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import { DAY_IN_SECONDS } from '@/js/util';
@@ -257,6 +257,7 @@ export function setupAnalytics4GatheringData(
 	const propertyID = properties[ 0 ]._id;
 	// Set the property creation timestamp to one and a half days ago, so that
 	// the property is considered to be in the gathering data state.
+	// eslint-disable-next-line sitekit/no-direct-date
 	const createTime = new Date(
 		Date.now() - DAY_IN_SECONDS * 1.5 * 1000
 	).toISOString();