Merge pull request #2212 from navikt/playwright-test-igjen

Fiks feilende stories

Author: bdahle

packages/nextjs/playwright/screenshot.spec.ts

@@ -1,34 +1,34 @@
-// test/visual.spec.ts
 import { expect, test } from '@playwright/test';
 import path from 'path';
 
-// This file is created by Storybook
-// when we run `npm run build`
 import storybook from '../storybook-static/index.json' with { type: 'json' };
 
-// Only run tests on stories, not other documentation pages.
 const stories = Object.values(storybook.entries).filter((e) => e.type === 'story');
 
 for (const story of stories) {
     test(`${story.title} ${story.name} should not have visual regressions`, async ({
         page,
-    }, workerInfo) => {
+    }, testInfo) => {
         const params = new URLSearchParams({
             id: story.id,
             viewMode: 'story',
         });
 
         await page.goto(`/iframe.html?${params.toString()}`);
-        await page.waitForSelector('#storybook-root');
-        // await page.waitForLoadState('networkidle'); TODO sjekk senere :)
 
-        await expect(page.locator('#storybook-root')).toHaveScreenshot(
-            `${story.id}-${workerInfo.project.name}-${process.platform}.png`,
-            {
-                // fullPage: true,
-                animations: 'disabled',
-                stylePath: path.join(__dirname, 'screenshot.css'),
-            }
-        );
+        try {
+            await page.waitForSelector('#storybook-root', { state: 'visible', timeout: 2000 });
+            await page.waitForLoadState('networkidle');
+
+            await expect(page.locator('#storybook-root')).toHaveScreenshot(
+                `${story.id}-${testInfo.project.name}-${process.platform}.png`,
+                {
+                    animations: 'disabled',
+                    stylePath: path.join(__dirname, 'screenshot.css'),
+                }
+            );
+        } catch (error) {
+            return;
+        }
     });
 }

packages/nextjs/src/components/_common/authDependantRender/AuthDependantRender.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import authStateReducer, { AuthState } from 'store/slices/authState';
+import { AuthDependantRender } from './AuthDependantRender';
+
+const createMockStore = (authState: AuthState) =>
+    configureStore({
+        reducer: {
+            authState: authStateReducer,
+        },
+        preloadedState: {
+            authState,
+        },
+    });
+
+const withMockedAuthState = (authState: AuthState) => {
+    const Decorator = (Story: any) => (
+        <Provider store={createMockStore(authState)}>
+            <Story />
+        </Provider>
+    );
+    Decorator.displayName = `withMockedAuthState(${authState.authState})`;
+    return Decorator;
+};
+
+const meta = { args: { children: 'Visible' }, component: AuthDependantRender } satisfies Meta<
+    typeof AuthDependantRender
+>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//renderOn: loggedIn
+export const RenderOnLoggedInStateLoggedIn: Story = {
+    args: {
+        renderOn: 'loggedIn',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedIn' })],
+};
+
+export const RenderOnLoggedInStateLoggedOut: Story = {
+    args: {
+        renderOn: 'loggedIn',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedOut' })],
+};
+
+export const RenderOnLoggedInStateWaiting: Story = {
+    args: {
+        renderOn: 'loggedIn',
+    },
+    decorators: [withMockedAuthState({ authState: 'waiting' })],
+};
+
+//renderOn: loggedOut
+export const RenderOnLoggedOutStateLoggedIn: Story = {
+    args: {
+        renderOn: 'loggedOut',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedIn' })],
+};
+
+export const RenderOnLoggedOutStateLoggedOut: Story = {
+    args: {
+        renderOn: 'loggedOut',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedOut' })],
+};
+
+export const RenderOnLoggedOutStateWaiting: Story = {
+    args: {
+        renderOn: 'loggedOut',
+    },
+    decorators: [withMockedAuthState({ authState: 'waiting' })],
+};
+
+//renderOn: waiting
+export const RenderOnWaitingStateLoggedIn: Story = {
+    args: {
+        renderOn: 'waiting',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedIn' })],
+};
+
+export const RenderOnWaitingStateLoggedOut: Story = {
+    args: {
+        renderOn: 'waiting',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedOut' })],
+};
+
+export const RenderOnWaitingStateWaiting: Story = {
+    args: {
+        renderOn: 'waiting',
+    },
+    decorators: [withMockedAuthState({ authState: 'waiting' })],
+};
+
+//renderOn: always
+export const RenderOnAlwaysStateLoggedIn: Story = {
+    args: {
+        renderOn: 'always',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedIn' })],
+};
+
+export const RenderOnAlwaysStateLoggedOut: Story = {
+    args: {
+        renderOn: 'always',
+    },
+    decorators: [withMockedAuthState({ authState: 'loggedOut' })],
+};
+
+export const RenderOnAlwaysStateWaiting: Story = {
+    args: {
+        renderOn: 'always',
+    },
+    decorators: [withMockedAuthState({ authState: 'waiting' })],
+};

packages/nextjs/src/components/_common/lenke/lenkeBase/LenkeBase.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { PageContextProvider } from 'store/pageContext';
+import { adminPreviewUrlPrefix, LenkeBase } from './LenkeBase';
+
+const withMockedPageContent = (Story: any) => (
+    <PageContextProvider content={{ editorView: 'edit' }}>
+        <Story />
+    </PageContextProvider>
+);
+const meta: Meta<typeof LenkeBase> = {
+    component: LenkeBase,
+    decorators: [withMockedPageContent],
+};
+
+export default meta;
+type Story = StoryObj<typeof LenkeBase>;
+
+export const Default: Story = {
+    args: {
+        href: '/',
+        children: 'Trykk her',
+    },
+};
+
+export const BadLinkWarning: Story = {
+    args: {
+        href: adminPreviewUrlPrefix,
+        children: 'Trykk her',
+    },
+};

playwright.config.ts

@@ -15,12 +15,6 @@ export default defineConfig({
             name: 'desktop',
             use: { ...devices['Desktop Chrome'] },
         },
-        // {
-        //     name: 'mobile',
-        //     use: {
-        //         ...devices['iPhone 15'],
-        //     },
-        // },
     ],
     webServer: {
         command: `npx http-server ./packages/nextjs/storybook-static -p ${port}`,