fix(web): test friendliness #4672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

mimarz merged 53 commits into main from fix/test-friendliness

Apr 10, 2026

.changeset/chilly-pigs-heal.md

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    ---
+    "@digdir/designsystemet-react": patch
+    "@digdir/designsystemet-web": patch
+    ---
+    **Field**: `<ds-field>` should now respect existing `aria-describedby` and `aria-invalid`

.changeset/eight-taxes-cut.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-react": patch
+    ---
+    **Pagination:** fix `PaginationButton` missing some `Button` props

.changeset/free-bobcats-dream.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-react": patch
+    ---
+    **Tabs**: Now supports programmatically triggering click on controlled `Tabs`

.changeset/lovely-kids-reflect.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-web": patch
+    ---
+    **Field:** No longer uses `CSS.supports` to play nice with Jest + JSDOM

.changeset/nasty-shrimps-watch.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-web": patch
+    ---
+    fixed some native keystrokes being ignored if readonly fields were focused

.changeset/old-boats-work.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-css": patch
+    ---
+    **Breadcrumbs:** Renders correcly as `display: block`

.changeset/pretty-bugs-enter.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-web": patch
+    ---
+    `invokers-polyfill` is now bundled inline as part of source files for better compatibility with Jest module resolving.

.changeset/sharp-bulldogs-run.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-web": patch
+    ---
+    **All components:** Renders instantly for easier test setup

.changeset/swift-shrimps-return.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@digdir/designsystemet-react": patch
+    ---
+    **Dialog:** Use `ref` in `Dialog.TriggerContext` for better performance

packages/css/src/breadcrumbs.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,10 @@ @@
       --dsc-breadcrumbs-color: var(--ds-color-text-subtle);
       --_ds-aria-label: var(--dsc-breadcrumbs-label); /* "proxy" so attrOrCSS works even if changing --ds- prefix */
+      &:not([hidden]) {
+        display: block; /* Needed for <ds-breadcrumbs> element */
+      }
       &:is([lang='nb'], [lang='nn'], [lang='no']),
       :is([lang='nb'], [lang='nn'], [lang='no']) & {
         --dsc-breadcrumbs-label: 'Du er her:'; /* Only set default label if Norwegian */
@@ Expand Down @@

packages/react/src/components/breadcrumbs/breadcrumbs.test.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { render, screen, waitFor } from '@testing-library/react';

    import { render, screen } from '@testing-library/react';

    import type { BreadcrumbsProps } from '../';

    import { Breadcrumbs } from '../';

    @@ -26,34 +26,29 @@ const renderWithRoot = (props?: BreadcrumbsProps) =>
  
      );

    describe('Breadcrumbs', () => {

      it('should render correctly with default props', async () => {

      it('should render correctly with default props', () => {

        renderWithRoot();

        expect(await screen.findByRole('navigation')).toBeInTheDocument();

        expect(screen.getByRole('navigation')).toBeInTheDocument();

      });

    });

    describe('Breadcrumbs.List', () => {

      it('should render with aria-current on last item', async () => {

      it('should render with aria-current on last item', () => {

        renderWithRoot();

        await waitFor(() => {

          const links = screen.getAllByRole('link');

          expect(links.at(-1)).toHaveAttribute('aria-current', 'page');

        });

        const links = screen.getAllByRole('link');

        expect(links.at(-1)).toHaveAttribute('aria-current', 'page');

        expect(links.at(0)).not.toHaveAttribute('aria-current', 'page');

        expect(links.at(1)).not.toHaveAttribute('aria-current', 'page');

        expect(links.at(2)).not.toHaveAttribute('aria-current', 'page');

      });

      it('should move aria-current to item when re-rendering', async () => {

      it('should move aria-current to item when re-rendering', () => {

        renderWithRoot();

        await waitFor(() => {

          const links = screen.getAllByRole('link');

          expect(links.at(-1)).toHaveAttribute('aria-current', 'page');

        });

        const links = screen.getAllByRole('link');

        expect(links.at(-1)).toHaveAttribute('aria-current', 'page');

        // Re-render with additional level

        render(

    @@ -81,11 +76,7 @@ describe('Breadcrumbs.List', () => {
  
          </Breadcrumbs>,

        );

        await waitFor(() => {

          const links = screen.getAllByRole('link');

          expect(links.at(-1)).toHaveAttribute('aria-current', 'page');

        });

        const links = screen.getAllByRole('link');

        expect(links.at(-1)).toHaveAttribute('aria-current', 'page');

        expect(links.at(-2)).not.toHaveAttribute('aria-current', 'page');

      });

    });

packages/react/src/components/button/button.test.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,12 +1,6 @@
  
    import { render as renderRtl, screen } from '@testing-library/react';

    import userEvent from '@testing-library/user-event';

    import { act } from 'react';

    import type { ButtonProps } from './button';

    import { act, render, screen } from '@testing-library/react';

    import { Button } from './button';

    const user = userEvent.setup();

    describe('Button', () => {

      beforeAll(() => {

        // Spinner for loading state uses animations, which we need to mock

    @@ -16,19 +10,15 @@ describe('Button', () => {
  
      });

      it('should render as aria-disabled when aria-disabled is true regardless of variant', () => {

        render({

          'aria-disabled': true,

        });

        render(<Button aria-disabled='true' />);

        const button = screen.getByRole('button');

        expect(button).toHaveAttribute('aria-disabled');

      });

      it('should render as disabled when disabled is true regardless of variant', () => {

        render({

          disabled: true,

        });

        render(<Button disabled />);

        const button = screen.getByRole('button');

    @@ -37,41 +27,43 @@ describe('Button', () => {
  
      it('should not call onClick when disabled', async () => {

        const fn = vi.fn();

        render({

          disabled: true,

          onClick: fn,

        });

        render(<Button disabled onClick={fn} />);

        const button = screen.getByRole('button');

        await act(async () => await user.click(button));

        await act(async () => screen.getByRole('button').click());

        expect(fn).not.toHaveBeenCalled();

      });

      it('should render children as button text', () => {

        render({ children: 'different button text' });

        render(<Button>different button text</Button>);

        expect(

          screen.getByRole('button', { name: 'different button text' }),

        ).toBeInTheDocument();

      });

      it('should handle onClick event', async () => {

        const fn = vi.fn();

        render({ onClick: fn });

        await act(async () => await user.click(screen.getByRole('button')));

        render(<Button onClick={fn} />);

        await act(async () => screen.getByRole('button').click());

        expect(fn).toHaveBeenCalled();

      });

      it('should not have type attribute when asChild is true', () => {

        render({ asChild: true, children: <a href='#'>Link</a> });

        render(

          <Button asChild>

            <a href='#'>Link</a>

          </Button>,

        );

        expect(screen.getByRole('link')).not.toHaveAttribute('type');

        expect(screen.queryByRole('button')).toBeNull();

        expect(screen.queryByRole('button')).not.toBeInTheDocument();

      });

      it('should not render children when icon-only button is loading', () => {

        render({ loading: true, icon: true, children: 'Button text' });

        expect(screen.queryByText('Button text')).toBeNull();

        render(

          <Button loading icon>

            Button text

          </Button>,

        );

        expect(screen.queryByText('Button text')).not.toBeInTheDocument();

        expect(screen.getByRole('button')).toHaveAttribute('aria-busy');

      });

    });

    const render = (props?: ButtonProps) => renderRtl(<Button {...props} />);

packages/react/src/components/card/card.test.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,27 +1,22 @@
  
    import { render as renderRtl, screen } from '@testing-library/react';

    import type { CardProps } from './card';

    import { render, screen } from '@testing-library/react';

    import { Card } from './card';

    import { CardBlock } from './card-block';

    const renderCard = (props?: Partial<CardProps>) =>

      renderRtl(

        <Card title='card' {...props}>

          <CardBlock />

        </Card>,

      );

    describe('Card Component', () => {

      it('renders Card component', () => {

        renderCard();

        render(

          <Card title='card'>

            <CardBlock />

          </Card>,

        );

        expect(screen.getByTitle('card')).toBeInTheDocument();

      });

      it('renders media image if provided', () => {

        const mediaImage = 'some/media/image/path';

        renderRtl(

          <Card title='card'>

        render(

          <Card>

            <CardBlock>

              <img src={mediaImage} alt='cat' />

            </CardBlock>

packages/react/src/components/checkbox/checkbox.test.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,24 +1,20 @@
  
    import { render, screen } from '@testing-library/react';

    import userEvent from '@testing-library/user-event';

    import { act } from 'react';

    import { act, render, screen } from '@testing-library/react';

    import { Checkbox } from './checkbox';

    describe('Checkbox', () => {

      test('has correct value and label', async () => {

      test('has correct value and label', () => {

        render(<Checkbox label='label' value='test' />);

        expect(await screen.findByLabelText('label')).toBeDefined();

        expect(screen.getByLabelText('label')).toBeDefined();

        expect(screen.getByDisplayValue('test')).toBeDefined();

      });

      test('has correct description', async () => {

      test('has correct description', () => {

        render(<Checkbox label='test' value='test' description='description' />);

        expect(

          await screen.findByRole('checkbox', { description: 'description' }),

          screen.getByRole('checkbox', { description: 'description' }),

        ).toBeDefined();

      });

      it('calls onChange and onClick when user clicks', async () => {

        const user = userEvent.setup();

        const onChange = vi.fn();

        const onClick = vi.fn();

    @@ -37,15 +33,14 @@ describe('Checkbox', () => {
  
        expect(radio.checked).toBeFalsy();

        await act(async () => await user.click(radio));

        await act(async () => radio.click());

        expect(onChange).toHaveBeenCalledTimes(1);

        expect(onClick).toHaveBeenCalledTimes(1);

        expect(radio.checked).toBeTruthy();

      });

      it('does not call onChange or onClick when user clicks and the radio is disabled', async () => {

        const user = userEvent.setup();

        const onChange = vi.fn();

        const onClick = vi.fn();

    @@ -60,15 +55,14 @@ describe('Checkbox', () => {
  
        );

        const radio = screen.getByRole('checkbox');

        await act(async () => await user.click(radio));

        await act(async () => radio.click());

        expect(radio).toBeDisabled();

        expect(onClick).not.toHaveBeenCalled();

        expect(onChange).not.toHaveBeenCalled();

      });

      it('does not call onChange when user clicks and the radio is readOnly', async () => {

        const user = userEvent.setup();

        const onChange = vi.fn();

        render(

    @@ -81,7 +75,7 @@ describe('Checkbox', () => {
  
        );

        const radio = screen.getByRole('checkbox');

        await act(async () => await user.click(radio));

        await act(async () => radio.click());

        expect(radio).toHaveAttribute('readonly');

        expect(onChange).not.toHaveBeenCalled();

packages/react/src/components/details/details.test.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,10 +1,8 @@
  
    import { render, screen } from '@testing-library/react';

    import userEvent from '@testing-library/user-event';

    import { act, render, screen } from '@testing-library/react';

    import type { JSX } from 'react';

    import { Details, type DetailsProps } from './';

    const user = userEvent.setup();

    const VOID = () => {};

    const TestComponent = (rest: DetailsProps): JSX.Element => {

    @@ -47,7 +45,7 @@ describe('Details', () => {
  
        const detailsExpandButton = screen.getByTestId('summary');

        expect(detailsExpandButton.parentElement).toHaveAttribute('open');

        await user.click(detailsExpandButton);

        expect(detailsExpandButton.parentElement).toHaveAttribute('open');

        await act(async () => detailsExpandButton.click());

        expect(detailsExpandButton.parentElement).toHaveAttribute('open'); // Let React controll state before checking

      });

    });

packages/react/src/components/dialog/dialog-trigger-context.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,10 +1,11 @@
  
    import type { ReactNode } from 'react';

    import { createContext, useState } from 'react';

    import { createContext, useRef } from 'react';

    type DialogContext = { id?: string; modal?: boolean };

    export const Context = createContext<

      DialogContext & { setContext?: (context: DialogContext) => void }

    >({});

    export const Context = createContext<React.RefObject<HTMLDialogElement | null>>(

      {

        current: null,

      },

    );

    export type DialogTriggerContextProps = { children: ReactNode };

    @@ -20,10 +21,9 @@ export type DialogTriggerContextProps = { children: ReactNode };
  
     * </Dialog.TriggerContext>

     */

    export const DialogTriggerContext = (rest: DialogTriggerContextProps) => {

      const [state, setState] = useState<DialogContext>({});

      const setContext = (next: DialogContext) => setState({ ...state, ...next });

      const contextRef = useRef<HTMLDialogElement>(null);

      return <Context.Provider value={{ ...state, setContext }} {...rest} />;

      return <Context.Provider value={contextRef} {...rest} />;

    };

    DialogTriggerContext.displayName = 'DialogTriggerContext';

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): test friendliness #4672

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!