chore: fix and re-enable playwright tests after using Layout from Alt…

…inn Components library
digdir · Dec 12, 2024 · 7a3259b · 7a3259b
1 parent ff75093
commit 7a3259b
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 80 deletions.
diff --git a/packages/frontend/src/app.spec.tsx b/packages/frontend/src/app.spec.tsx
@@ -8,7 +8,7 @@ describe('App Smoke Test', async () => {
     server.listen();
   });
 
-  it.skip('renders without crashing', () => {
+  it('renders without crashing', () => {
     const { getByRole } = customRender(<App />);
     const appElement = getByRole('main');
     expect(appElement).toBeTruthy();

diff --git a/packages/frontend/src/pages/Inbox/Inbox.tsx b/packages/frontend/src/pages/Inbox/Inbox.tsx
@@ -237,7 +237,7 @@ export const Inbox = ({ viewType }: InboxProps) => {
   }
 
   return (
-    <main>
+    <div>
       <section className={styles.filtersArea}>
         <div className={styles.gridContainer}>
           <div className={styles.filterSaveContainer}>
@@ -347,6 +347,6 @@ export const Inbox = ({ viewType }: InboxProps) => {
           );
         })}
       </section>
-    </main>
+    </div>
   );
 };
diff --git a/packages/frontend/src/pages/SavedSearches/SavedSearchesPage.tsx b/packages/frontend/src/pages/SavedSearches/SavedSearchesPage.tsx
@@ -34,7 +34,7 @@ export const SavedSearchesPage = () => {
 
   if (!savedSearches?.length) {
     return (
-      <main>
+      <div>
         <section className={styles.filtersArea}>
           <div className={styles.gridContainer}>
             <div className={styles.filterSaveContainer}>
@@ -46,12 +46,12 @@ export const SavedSearchesPage = () => {
           <div className={styles.title}>{t('savedSearches.title', { count: 0 })}</div>
           <span>{t('savedSearches.noSearchesFound')}</span>
         </section>
-      </main>
+      </div>
     );
   }
 
   return (
-    <main>
+    <div>
       <section className={styles.filtersArea}>
         <div className={styles.gridContainer}>
           <div className={styles.filterSaveContainer}>
@@ -101,6 +101,6 @@ export const SavedSearchesPage = () => {
         }}
       />
       <ConfirmDeleteDialog ref={deleteDialogRef} savedSearchId={selectedDeleteItem} />
-    </main>
+    </div>
   );
 };
diff --git a/packages/frontend/tests/stories/dialogDetails.spec.ts b/packages/frontend/tests/stories/dialogDetails.spec.ts
@@ -2,11 +2,12 @@ import { expect, test } from '@playwright/test';
 import { appURL } from '../';
 
 test.describe('Dialog details', () => {
-  test.skip('Checking that opening a dialog details page shows the correct number of messages', async ({ page }) => {
+  test('Checking that opening a dialog details page shows the correct number of messages', async ({ page }) => {
     await page.goto(appURL);
-    await expect(page.getByRole('link', { name: 'Innboks' })).toBeVisible();
-    await expect(page.getByTestId('sidebar').getByRole('list')).toContainText('2');
+    await expect(page.getByRole('menuitem', { name: 'Innboks' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Innboks' }).locator('[data-color="alert"]')).toContainText('2');
+
     await page.getByRole('link', { name: 'Arbeidsavklaringspenger' }).click();
-    await expect(page.getByTestId('sidebar').getByRole('list')).toContainText('1');
+    await expect(page.getByRole('menuitem', { name: 'Innboks' })).toContainText('1');
   });
 });
diff --git a/packages/frontend/tests/stories/flatPartySubParty.spec.ts b/packages/frontend/tests/stories/flatPartySubParty.spec.ts
@@ -27,27 +27,28 @@ test.describe('Flattened parties and subparties', () => {
     await expect(page.getByRole('link', { name: 'Sub party message' })).toBeVisible();
   });
 
-  test.skip('Search input shows flatened messages based on chosen party', async ({ page }) => {
-    await page.getByPlaceholder('Søk i innboks').click();
-    await expect(page.getByPlaceholder('Søk i innboks')).toBeVisible();
+  test('Search input shows flatened messages based on chosen party', async ({ page }) => {
+    await page.getByPlaceholder('Søk').click();
+    await expect(page.getByPlaceholder('Søk')).toBeVisible();
+
+    await page.getByPlaceholder('Søk').fill('test');
+
+    await expect(page.getByRole('link', { name: 'Message for Test Testesen Lorem ipsum' })).toBeVisible();
 
-    await page.getByPlaceholder('Søk i innboks').fill('test');
-    await expect(
-      page.getByTestId('main-header').getByRole('link', { name: 'Message for Test Testesen' }),
-    ).toBeVisible();
     await expect(page.getByTestId('main-header').getByRole('link', { name: 'Main party message' })).not.toBeVisible();
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+    await page.getByPlaceholder('Søk').press('Enter');
 
     await page.getByRole('button', { name: 'Test Testesen' }).click();
     await page.getByText('TTestbedrift AS2').click();
 
-    await page.getByPlaceholder('Søk i innboks').fill('party');
+    await page.getByPlaceholder('Søk').fill('party');
     await expect(
       page.getByTestId('main-header').getByRole('link', { name: 'Message for Test Testesen' }),
     ).not.toBeVisible();
-    await expect(page.getByTestId('main-header').getByRole('link', { name: 'Main party message' })).toBeVisible();
-    await expect(page.getByTestId('main-header').getByRole('link', { name: 'Sub party message' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'Main party message' })).toBeVisible();
+    //TO-DO fix search should not filter out sub party messages #1562
+    // await expect(page.getByRole('link', { name: 'Sub party message' })).toBeVisible();
 
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+    await page.getByPlaceholder('Søk').press('Enter');
   });
 });
diff --git a/packages/frontend/tests/stories/inboxItemPage.spec.ts b/packages/frontend/tests/stories/inboxItemPage.spec.ts
@@ -2,12 +2,12 @@ import { type Page, expect, test } from '@playwright/test';
 import { appURL } from '../';
 
 test.describe('InboxItemPage', () => {
-  test.skip('Check message opening, archiving and deleting', async ({ page }: { page: Page }) => {
-    const arkivLink = page.getByRole('link', { name: 'Arkiv' });
-    const arkivLinkCount = arkivLink.locator('div > div > span');
+  test('Check message opening, archiving and deleting', async ({ page }: { page: Page }) => {
+    const arkivLink = page.getByRole('menuitem', { name: 'Arkiv' });
+    const arkivLinkCount = arkivLink.locator('span:text("1")');
 
-    const papirkurvLink = page.getByRole('link', { name: 'Papirkurv' });
-    const papirkurvLinkCount = papirkurvLink.locator('span');
+    const papirkurvLink = page.getByRole('menuitem', { name: 'Papirkurv' });
+    const papirkurvLinkCount = papirkurvLink.locator('span:text("1")');
 
     await page.goto(appURL);
     await expect(page.locator('h2').filter({ hasText: /^Skatten din for 2022$/ })).toBeVisible();
@@ -21,7 +21,7 @@ test.describe('InboxItemPage', () => {
 
     await page.getByRole('button', { name: 'Flytt til arkiv' }).click();
     await page.locator('span').filter({ hasText: /^Flyttet til arkiv$/ });
-    await expect(arkivLinkCount).toHaveText('1');
+    await expect(arkivLinkCount).toBeVisible();
 
     await arkivLink.click();
     await expect(page.getByRole('heading', { name: 'arkivert' })).toBeVisible();
@@ -31,7 +31,7 @@ test.describe('InboxItemPage', () => {
     await page.getByRole('button', { name: 'Flytt til papirkurv' }).click();
     await page.locator('span').filter({ hasText: /^Flyttet til papirkurv$/ });
     await expect(arkivLinkCount).not.toBeVisible();
-    await expect(papirkurvLinkCount).toHaveText('1');
+    await expect(papirkurvLinkCount).toBeVisible();
 
     await papirkurvLink.click();
     await expect(page.getByRole('heading', { name: '1 i papirkurv' })).toBeVisible();

diff --git a/packages/frontend/tests/stories/loginPartyContext.spec.ts b/packages/frontend/tests/stories/loginPartyContext.spec.ts
@@ -92,40 +92,42 @@ test.describe('LoginPartyContext', () => {
     await expect(page.getByRole('link', { name: 'This is a message 1 for Firma AS' })).toBeVisible();
   });
 
-  test.skip('Searchbar input adds search params', async ({ page }: { page: Page }) => {
+  test('Searchbar input adds search params', async ({ page }: { page: Page }) => {
     expect(new URL(page.url()).searchParams.has('search')).toBe(false);
-    await page.getByPlaceholder('Søk i innboks').click();
-    await expect(page.getByPlaceholder('Søk i innboks')).toBeVisible();
-    await page.getByPlaceholder('Søk i innboks').fill('skatten din');
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+    await page.getByPlaceholder('Søk').click();
+    await expect(page.getByPlaceholder('Søk')).toBeVisible();
+    await page.getByPlaceholder('Søk').fill('skatten din');
+    await page.getByPlaceholder('Søk').press('Enter');
     const searchParams = new URL(page.url()).searchParams;
     expect(searchParams.has('search')).toBe(true);
     expect(searchParams.get('search')).toBe('skatten din');
 
     await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible();
     await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible();
 
-    await page.reload();
-    await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible();
-    await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible();
+    //TO-DO Fix updating messages based on search params (reload and go-back btn) #1559
+    // await page.reload();
+    // await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible();
+    // await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible();
   });
 
-  test.skip('Go-back button deletes search bar value', async ({ page }: { page: Page }) => {
-    await page.getByPlaceholder('Søk i innboks').click();
-    await expect(page.getByPlaceholder('Søk i innboks')).toBeVisible();
-    await page.getByPlaceholder('Søk i innboks').fill('skatten din');
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+  test('Go-back button deletes search bar value', async ({ page }: { page: Page }) => {
+    await page.getByPlaceholder('Søk').click();
+    await expect(page.getByPlaceholder('Søk')).toBeVisible();
+    await page.getByPlaceholder('Søk').fill('skatten din');
+    await page.getByPlaceholder('Søk').press('Enter');
 
-    let searchParams = new URL(page.url()).searchParams;
+    const searchParams = new URL(page.url()).searchParams;
     expect(searchParams.has('search')).toBe(true);
     expect(searchParams.get('search')).toBe('skatten din');
     await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).toBeVisible();
     await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).not.toBeVisible();
 
-    await page.goBack();
-    searchParams = new URL(page.url()).searchParams;
-    expect(searchParams.has('search')).toBe(false);
-    await expect(page.getByPlaceholder('Søk i innboks')).toBeEmpty();
-    await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).toBeVisible();
+    //TO-DO Fix updating messages based on search params (reload and go-back btn) #1559
+    // await page.goBack();
+    // searchParams = new URL(page.url()).searchParams;
+    // expect(searchParams.has('search')).toBe(false);
+    // await expect(page.getByPlaceholder('Søk')).toBeEmpty();
+    // await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø' })).toBeVisible();
   });
 });
diff --git a/packages/frontend/tests/stories/messageNavigation.spec.ts b/packages/frontend/tests/stories/messageNavigation.spec.ts
@@ -35,14 +35,14 @@ test.describe('Message navigation', () => {
     await expect(page.getByTestId('pageLayout-background')).toHaveClass(/.*isCompany.*/);
   });
 
-  test.skip('Back button navigates to previous page the message has been opened from', async ({ page }) => {
+  test('Back button navigates to previous page the message has been opened from', async ({ page }) => {
     await page.goto(pageWithMockOrganizations);
 
     await expect(page.locator('h2').filter({ hasText: /^Skatten din for 2022$/ })).toBeVisible();
     await page.getByRole('link', { name: 'Skatten din for 2022' }).click();
     await page.getByRole('button', { name: 'Flytt til papirkurv' }).click();
 
-    await page.getByRole('link', { name: 'Papirkurv' }).click();
+    await page.getByRole('menuitem', { name: 'Papirkurv' }).click();
     await page.getByRole('link', { name: 'Skatten din for 2022' }).click();
     await page.getByRole('button', { name: 'Tilbake' }).click();
     await expect(page.getByRole('heading', { name: 'i papirkurv' })).toBeVisible();

diff --git a/packages/frontend/tests/stories/savedSearch.spec.ts b/packages/frontend/tests/stories/savedSearch.spec.ts
@@ -2,53 +2,61 @@ import { expect, test } from '@playwright/test';
 import { appURL } from '../';
 
 test.describe('Saved search', () => {
-  test.skip('Create and deletesaved search', async ({ page }) => {
+  test('Create and deletesaved search', async ({ page }) => {
     await page.goto(appURL);
     await page.getByRole('button', { name: 'Legg til filter' }).click();
     await page.getByText('Avsender').click();
     await page.getByLabel('Fra Oslo kommune').check();
     await page.mouse.click(200, 0, { button: 'left' });
     await page.getByRole('button', { name: 'Lagre søk' }).click();
-    await expect(page.getByTestId('sidebar').getByRole('list')).toContainText('1');
-    await page.getByRole('link', { name: 'Lagrede søk' }).click();
+
+    await expect(
+      page.getByRole('menuitem', { name: 'Lagrede søk' }).locator('span[data-color="subtle"]'),
+    ).toContainText('1');
+    await page.getByRole('menuitem', { name: 'Lagrede søk' }).click();
     await expect(page.getByRole('main')).toContainText('1 lagret søk');
+
     await page.locator('section').filter({ hasText: '1 lagret søkI Innboks: Oslo' }).getByRole('button').click();
     await page.getByText('Slett').click();
     await page.getByRole('button', { name: 'Ja, forsett' }).click();
     await expect(page.getByRole('main')).toContainText('Du har ingen lagrede søk');
   });
 
-  test.skip('Saved search based on searchbar value', async ({ page }) => {
+  test('Saved search based on searchbar value', async ({ page }) => {
     await page.goto(appURL);
-    await page.getByPlaceholder('Søk i innboks').click();
-    await expect(page.getByPlaceholder('Søk i innboks')).toBeVisible();
-    await page.getByPlaceholder('Søk i innboks').fill('skatten');
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+    await page.getByPlaceholder('Søk').click();
+    await expect(page.getByPlaceholder('Søk')).toBeVisible();
+    await page.getByPlaceholder('Søk').fill('skatten');
+    await page.getByPlaceholder('Søk').press('Enter');
+
     await page.getByRole('button', { name: 'Lagre søk' }).click();
     await expect(page.getByRole('button', { name: 'Lagret søk' })).toBeVisible();
-    await expect(page.getByRole('link', { name: 'Lagrede søk' }).locator('span')).toHaveText('1');
+    await expect(
+      page.getByRole('menuitem', { name: 'Lagrede søk' }).locator('span[data-color="subtle"]'),
+    ).toContainText('1');
 
-    await page.getByPlaceholder('Søk i innboks').click();
-    await page.getByPlaceholder('Søk i innboks').fill('skatten din');
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+    await page.getByPlaceholder('Søk').click();
+    await page.getByPlaceholder('Søk').fill('skatten din');
+    await page.getByPlaceholder('Søk').press('Enter');
     await expect(page.getByRole('button', { name: 'Lagret søk' })).not.toBeVisible();
     await expect(page.getByRole('button', { name: 'Lagre søk' })).toBeVisible();
   });
 
-  test.skip('Saved search link shows correct result', async ({ page }) => {
+  test('Saved search link shows correct result', async ({ page }) => {
     await page.goto(appURL);
 
     await page.getByRole('button', { name: 'Test Testesen' }).click();
     await page.getByText('Testbedrift AS Avd Oslo').click();
     await expect(page.getByTestId('pageLayout-background')).toHaveClass(/.*isCompany.*/);
     await expect(page.getByRole('link', { name: 'Innkalling til sesjon' })).toBeVisible();
 
-    await page.getByPlaceholder('Søk i innboks').click();
-    await expect(page.getByPlaceholder('Søk i innboks')).toBeVisible();
-    await page.getByPlaceholder('Søk i innboks').fill('innkalling');
-    await page.getByPlaceholder('Søk i innboks').press('Enter');
+    await page.getByPlaceholder('Søk').click();
+    await expect(page.getByPlaceholder('Søk')).toBeVisible();
+    await page.getByPlaceholder('Søk').fill('innkalling');
+    await page.getByPlaceholder('Søk').press('Enter');
+
     await page.getByRole('button', { name: 'Lagre søk' }).click();
-    await page.getByRole('link', { name: 'Lagrede søk' }).click();
+    await page.getByRole('menuitem', { name: 'Lagrede søk' }).click();
 
     await expect(page.getByRole('link', { name: 'I Innboks: «innkalling»' })).toBeVisible();
     await page.getByRole('link', { name: 'I Innboks: «innkalling»' }).click();

diff --git a/packages/frontend/tests/stories/sidebar.spec.ts b/packages/frontend/tests/stories/sidebar.spec.ts
@@ -2,19 +2,19 @@ import { expect, test } from '@playwright/test';
 import { appURL } from '../';
 
 test.describe('Sidebar menu', () => {
-  test.skip('Checking all items in sidebar', async ({ page }) => {
+  test('Checking all items in sidebar', async ({ page }) => {
     await page.goto(appURL);
-    await page.getByRole('link', { name: 'Utkast' }).click();
+    await page.getByRole('menuitem', { name: 'Utkast' }).click();
     await expect(page.getByRole('heading', { name: 'utkast' })).toBeVisible();
-    await page.getByRole('link', { name: 'Sendt' }).click();
+    await page.getByRole('menuitem', { name: 'Sendt' }).click();
     await expect(page.getByRole('heading', { name: 'sendt' })).toBeVisible();
-    await page.getByRole('link', { name: 'Lagrede søk' }).click();
+    await page.getByRole('menuitem', { name: 'Lagrede søk' }).click();
     await expect(page.getByText('Du har ingen lagrede søk')).toBeVisible();
-    await page.getByRole('link', { name: 'Arkiv' }).click();
+    await page.getByRole('menuitem', { name: 'Arkiv' }).click();
     await expect(page.getByRole('heading', { name: 'Ingen arkiverte meldinger' })).toBeVisible();
-    await page.getByRole('link', { name: 'Papirkurv' }).click();
+    await page.getByRole('menuitem', { name: 'Papirkurv' }).click();
     await expect(page.getByRole('heading', { name: 'Ingen meldinger i papirkurv' })).toBeVisible();
-    await page.getByRole('link', { name: 'Innboks' }).click();
+    await page.getByRole('menuitem', { name: 'Innboks' }).click();
     await expect(page.getByRole('link', { name: 'Melding om bortkjøring av sn' })).toBeVisible();
   });
 });
diff --git a/packages/frontend/tests/stories/smoke.spec.ts b/packages/frontend/tests/stories/smoke.spec.ts
@@ -2,12 +2,12 @@ import { expect, test } from '@playwright/test';
 import { appURL } from '..';
 
 test.describe('Smoke test', () => {
-  test.skip('should show header, aside, main and footer', async ({ page }) => {
+  test('should show header, aside, main and footer', async ({ page }) => {
     await page.goto(appURL);
     const main = page.locator('main');
-    const aside = page.locator('[data-testid="sidebar"]');
-    const footer = page.locator('[data-testid="main-footer"]');
-    const header = page.locator('[data-testid="main-header"]');
+    const aside = page.getByRole('complementary');
+    const footer = page.getByRole('contentinfo');
+    const header = page.getByRole('button', { name: 'Meny' }).locator('xpath=ancestor::header');
 
     await expect(main).toBeVisible();
     await expect(aside).toBeVisible();