Merge pull request #2595 from navikt/ny/meldinger-e2e

Litt accessibility & e2e test for meldinger

Author: LudvigHz

e2e/meldinger.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+
+test('Select melding', async ({ page }) => {
+    await page.goto('/new/person/meldinger');
+
+    const meldingerList = page.getByRole('region', { name: 'Tråder' });
+    await expect(meldingerList).toBeVisible();
+    const meldingerCards = meldingerList.getByTestId('traaditem');
+    expect((await meldingerCards.all()).length).toBeGreaterThan(5);
+
+    await meldingerCards.first().getByRole('button').click();
+
+    const meldingerDetails = page.getByRole('region', { name: 'Dialogdetaljer' });
+
+    await expect(meldingerDetails).toBeVisible();
+});
+
+test('Send melding i tråd', async ({ page }) => {
+    await page.goto('/new/person/meldinger');
+    const traadToClick = page.getByTestId('traaditem').nth(2);
+    await expect(traadToClick).toBeVisible();
+    await traadToClick.getByRole('button').click();
+
+    await page.getByRole('button', { name: 'Svar' }).click();
+
+    await page.getByRole('textbox').fill('playwright test melding');
+    await page.getByRole('button', { name: 'Send til Aremark' }).click();
+
+    const meldingerList = page.getByLabel('Dialogdetaljer').getByLabel('Meldinger');
+    const newMelding = meldingerList.getByText('playwright test melding');
+
+    await expect(newMelding).toBeVisible();
+});
+
+test('Send ny melding', async ({ page }) => {
+    await page.goto('/new/person/meldinger');
+
+    await page.getByRole('textbox').fill('playwright new melding');
+    await page.getByLabel('Temagruppe').selectOption('Pensjon');
+    await page.getByRole('button', { name: 'Send til Aremark' }).click();
+
+    const newTraad = page.getByTestId('traaditem').first();
+    await expect(newTraad).toContainText('Referat');
+    await expect(newTraad).toContainText('Tema:Pensjon');
+
+    await newTraad.getByRole('button').click();
+
+    const meldingerDetails = page.getByRole('region', { name: 'Dialogdetaljer' });
+    await expect(meldingerDetails.getByRole('heading').first()).toHaveText('Referat - Pensjon');
+
+    const meldingerList = page.getByLabel('Dialogdetaljer').getByLabel('Meldinger');
+    const meldinger = meldingerList.getByRole('list');
+    await expect(meldinger).toHaveCount(1);
+    await expect(meldinger.first().getByRole('paragraph').first()).toHaveText('playwright new melding');
+});

e2e/smoketest.spec.ts

@@ -3,13 +3,12 @@ import { expect, test } from '@playwright/test';
 test('smoketest', async ({ page }) => {
     await page.goto('/');
 
-    // Expect a title "to contain" a substring.
     await expect(page).toHaveTitle(/Modia Personoversikt/);
 });
 
 test('User pages', async ({ page }) => {
     await page.goto('/person/oversikt');
 
     const personLoaded = page.getByTestId('visittkort:person');
-    await expect(personLoaded).toHaveText(/Aremark Testfamilien/i, { timeout: 10000 });
+    await expect(personLoaded).toHaveText(/Aremark Testfamilien/i);
 });

playwright.config.ts

@@ -31,6 +31,9 @@ export default defineConfig({
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry'
     },
+    expect: {
+        timeout: process.env.CI ? 15000 : 8000
+    },
 
     /* Configure projects for major browsers */
     projects: [
@@ -43,7 +46,8 @@ export default defineConfig({
     /* Run your local dev server before starting the tests */
     webServer: {
         env: {
-            VITE_E2E: 'true'
+            VITE_E2E: 'true',
+            VITE_MOCK_ENABLED: 'true'
         },
         timeout: 3 * 60 * 1000,
         command: 'pnpm run start',

src/components/Meldinger/Detail/index.tsx

@@ -82,7 +82,7 @@ const TraadDetailContent = ({ traadId }: { traadId: string }) => {
 
     return (
         <Card as={VStack} padding="2" minHeight="0">
-            <VStack minHeight="0" gap="2">
+            <VStack minHeight="0" gap="2" as="section" aria-label="Dialogdetaljer">
                 <TraadMeta traad={traad} />
                 <HStack gap="4">
                     <Button variant="secondary-neutral" size="small">
@@ -156,7 +156,7 @@ const Meldinger = ({ meldinger }: { meldinger: Traad['meldinger'] }) => {
     const { search } = useAtomValue(meldingerFilterAtom);
     const highlightRule = useMemo(() => createDynamicHighlightingRule((search ?? '').split(' ')), [search]);
     return (
-        <VStack gap="10" align="baseline" paddingBlock="0 16">
+        <VStack gap="10" align="baseline" paddingBlock="0 16" as="section" aria-label="Meldinger">
             {meldinger.map((m) => {
                 const erFraNav = erMeldingFraNav(m.meldingstype);
                 return (

src/components/Meldinger/List/TraadItem.tsx

@@ -81,6 +81,7 @@ export const TraadItem = ({
 
     return (
         <Card
+            data-testid="traaditem"
             padding="2"
             className={twMerge(
                 'cursor-pointer hover:bg-[var(--ax-bg-neutral-moderate-hover)] group',
@@ -114,8 +115,13 @@ export const TraadItem = ({
                     <Button
                         variant="tertiary-neutral"
                         size="small"
+                        name="Åpne"
+                        aria-label="Åpne"
                         icon={
-                            <ChevronRightIcon className="translate-x-0 group-hover:translate-x-1 transition-transform" />
+                            <ChevronRightIcon
+                                aria-hidden
+                                className="translate-x-0 group-hover:translate-x-1 transition-transform"
+                            />
                         }
                     />
                 </VStack>

src/components/Meldinger/List/index.tsx

@@ -39,7 +39,7 @@ const Traader = () => {
         [traader]
     );
     const filteredMeldinger = useFilterMeldinger(sortedTraader, filters);
-    const navigate = useNavigate({ from: '/person/meldinger' });
+    const navigate = useNavigate({ from: '/new/person/meldinger' });
 
     const handleClick = useCallback(
         (traadId: string) => {
@@ -64,6 +64,12 @@ const Traader = () => {
     return (
         <>
             <PaginatedList
+                paginationSrHeading={{
+                    tag: 'h3',
+                    text: 'Trådlistepaginering'
+                }}
+                aria-label="Tråder"
+                as="section"
                 selectedKey={traadId}
                 items={filteredMeldinger}
                 keyExtractor={(item) => item.traadId}

src/components/Meldinger/index.tsx

@@ -6,7 +6,7 @@ import { TraadList } from './List';
 
 export const MeldingerPage = () => {
     return (
-        <HStack gap="4" minHeight="0" flexGrow="1" paddingBlock="0 2">
+        <HStack gap="4" minHeight="0" flexGrow="1" paddingBlock="0 2" wrap={false}>
             <VStack height="100%" minWidth="16em">
                 <HStack justify="space-between">
                     <Heading size="xsmall">Innboks</Heading>

src/components/PaginatedList/index.tsx

@@ -1,21 +1,26 @@
 import { Pagination, VStack } from '@navikt/ds-react';
 import { chunk } from 'lodash';
-import { type JSX, useEffect, useMemo, useState } from 'react';
+import { type ComponentProps, type ComponentPropsWithRef, type JSX, useEffect, useMemo, useState } from 'react';
 
-type Props<T, KeyType> = {
+type Props<T, KeyType> = Omit<ComponentPropsWithRef<typeof VStack>, 'as'> & {
     items: T[];
     pageSize?: number;
     renderItem: ({ item }: { item: T }) => JSX.Element;
     keyExtractor: (item: T) => KeyType;
     selectedKey?: KeyType;
+    as?: ComponentPropsWithRef<typeof VStack>['as'];
+    paginationSrHeading?: ComponentProps<typeof Pagination>['srHeading'];
 };
 
 export const PaginatedList = <T, KeyType extends string | number>({
     items,
     pageSize = 10,
     renderItem: RenderComp,
     keyExtractor,
-    selectedKey
+    selectedKey,
+    as,
+    paginationSrHeading,
+    ...rest
 }: Props<T, KeyType>) => {
     const [page, setPage] = useState(0);
     const pages = useMemo(() => chunk(items, pageSize), [items, pageSize]);
@@ -34,13 +39,14 @@ export const PaginatedList = <T, KeyType extends string | number>({
     }, [selectedKey, pages, keyExtractor]);
 
     return (
-        <VStack gap="2" justify="space-between" flexGrow="1" minHeight="0">
+        <VStack as={as ?? 'div'} gap="2" justify="space-between" flexGrow="1" minHeight="0" {...rest}>
             <VStack gap="2" paddingInline="0 2" overflowY="scroll">
                 {renderItems?.map((item) => (
                     <RenderComp item={item} key={keyExtractor(item)} />
                 ))}
             </VStack>
             <Pagination
+                srHeading={paginationSrHeading}
                 size="small"
                 page={page + 1}
                 siblingCount={0}