test: Add test utils in studio-components

frontend/libs/studio-components/src/components/StudioBooleanToggleGroup/StudioBooleanToggleGroup.test.tsx

@@ -1,9 +1,19 @@
-import type { RefObject } from 'react';
-import React, { createRef } from 'react';
+import type { ForwardedRef } from 'react';
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { render, screen, within } from '@testing-library/react';
 import type { StudioBooleanToggleGroupProps } from './StudioBooleanToggleGroup';
 import { StudioBooleanToggleGroup } from './StudioBooleanToggleGroup';
 import userEvent from '@testing-library/user-event';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
+
+// Test data:
+const trueLabel = 'True';
+const falseLabel = 'False';
+const defaultProps: StudioBooleanToggleGroupProps = {
+  trueLabel,
+  falseLabel,
+};
 
 describe('StudioBooleanToggleGroup', () => {
   it('Renders a toggle group with toggles with the given labels', () => {
@@ -75,23 +85,16 @@ describe('StudioBooleanToggleGroup', () => {
   });
 
   it('Forwards the ref object to the toggle group element if given', () => {
-    const ref = createRef<HTMLDivElement>();
-    const { container } = renderBooleanToggle({}, ref);
-    expect(ref.current).toBe(container.firstChild); // eslint-disable-line testing-library/no-node-access
+    testRefForwarding<HTMLDivElement>((ref) => renderBooleanToggle({}, ref));
   });
 
   const getTrueToggle = () => screen.getByRole('radio', { name: trueLabel });
   const getFalseToggle = () => screen.getByRole('radio', { name: falseLabel });
 });
 
-const trueLabel = 'True';
-const falseLabel = 'False';
-const defaultProps: StudioBooleanToggleGroupProps = {
-  trueLabel,
-  falseLabel,
-};
-
-const renderBooleanToggle = (
+function renderBooleanToggle(
   props: Partial<StudioBooleanToggleGroupProps> = {},
-  ref?: RefObject<HTMLDivElement>,
-) => render(<StudioBooleanToggleGroup {...defaultProps} {...props} ref={ref} />);
+  ref?: ForwardedRef<HTMLDivElement>,
+): RenderResult {
+  return render(<StudioBooleanToggleGroup {...defaultProps} {...props} ref={ref} />);
+}

frontend/libs/studio-components/src/components/StudioButton/StudioButton.test.tsx

@@ -1,9 +1,12 @@
-import type { RefObject } from 'react';
-import React, { createRef } from 'react';
+import type { ForwardedRef } from 'react';
+import React from 'react';
 import type { StudioButtonProps } from './StudioButton';
 import { StudioButton } from './StudioButton';
 import { render, screen } from '@testing-library/react';
 import type { IconPlacement } from '../../types/IconPlacement';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
 
 // Mocks:
 jest.mock('./StudioButton.module.css', () => ({
@@ -16,7 +19,7 @@ describe('StudioButton', () => {
   it('Renders a button with the given content', () => {
     const children = 'Button content';
     renderButton({ children });
-    expect(screen.getByRole('button', { name: children })).toBeInTheDocument();
+    expect(getButtonByName(children)).toBeInTheDocument();
   });
 
   it.each(iconPlacementCases)(
@@ -36,22 +39,21 @@ describe('StudioButton', () => {
       const iconTestId = 'icon';
       const icon = <span data-testid={iconTestId} />;
       renderButton({ icon, iconPlacement, children });
-      expect(screen.getByRole('button', { name: children })).toBeInTheDocument();
+      expect(getButtonByName(children)).toBeInTheDocument();
       expect(screen.getByTestId('icon')).toBeInTheDocument();
     },
   );
 
+  it('Appends custom attributes to the button element', () => {
+    testCustomAttributes(renderButton, getButton);
+  });
+
   it('Appends given classname to internal classname', () => {
-    const className = 'test-class';
-    const { container } = renderButton({ className });
-    expect(container.firstChild).toHaveClass(className); // eslint-disable-line testing-library/no-node-access
-    expect(container.firstChild).toHaveClass('studioButton'); // eslint-disable-line testing-library/no-node-access
+    testRootClassNameAppending((className) => renderButton({ className }));
   });
 
-  it('Forwards the ref object to the button element if given', () => {
-    const ref = createRef<HTMLButtonElement>();
-    renderButton({ children: 'Test' }, ref);
-    expect(ref.current).toBe(screen.getByRole('button'));
+  it('Forwards the ref to the button element if given', () => {
+    testRefForwarding<HTMLButtonElement>((ref) => renderButton({}, ref), getButton);
   });
 
   it('Supports render asChild', () => {
@@ -65,5 +67,9 @@ describe('StudioButton', () => {
   });
 });
 
-const renderButton = (props: StudioButtonProps, ref?: RefObject<HTMLButtonElement>) =>
+const renderButton = (props: StudioButtonProps, ref?: ForwardedRef<HTMLButtonElement>) =>
   render(<StudioButton {...props} ref={ref} />);
+
+const getButton = (): HTMLButtonElement => screen.getByRole('button') as HTMLButtonElement;
+const getButtonByName = (name: string): HTMLButtonElement =>
+  screen.getByRole('button', { name }) as HTMLButtonElement;

frontend/libs/studio-components/src/components/StudioCenter/StudioCenter.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { StudioCenter } from './StudioCenter';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
 
 // Mocks:
 jest.mock('./SchemaEditor.module.css', () => ({
@@ -19,9 +20,6 @@ describe('StudioCenter', () => {
   });
 
   it('Appends given classname to internal classname', () => {
-    const className = 'test-class';
-    const { container } = render(<StudioCenter className={className} />);
-    expect(container.firstChild).toHaveClass(className); // eslint-disable-line testing-library/no-node-access
-    expect(container.firstChild).toHaveClass('root'); // eslint-disable-line testing-library/no-node-access
+    testRootClassNameAppending((className) => render(<StudioCenter className={className} />));
   });
 });

frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.test.tsx

@@ -1,6 +1,10 @@
-import React, { createRef } from 'react';
+import type { ForwardedRef } from 'react';
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { StudioCodeFragment } from './StudioCodeFragment';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
 
 jest.mock('./StudioCodeFragment.module.css', () => ({
   code: 'code',
@@ -15,21 +19,17 @@ describe('StudioCodeFragment', () => {
   });
 
   it('Appends given classname to internal classname', () => {
-    const className = 'test-class';
-    const { container } = render(<StudioCodeFragment className={className} />);
-    expect(container.firstChild).toHaveClass(className);
-    expect(container.firstChild).toHaveClass('code');
+    testRootClassNameAppending((className) => render(<StudioCodeFragment className={className} />));
   });
 
   it('Adds any additonal props to the element', () => {
-    const dataTestId = 'test';
-    render(<StudioCodeFragment data-testid={dataTestId} />);
-    expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
+    const renderComponent = (attributes) => render(<StudioCodeFragment {...attributes} />);
+    testCustomAttributes(renderComponent);
   });
 
   it('Forwards the ref object to the code element if given', () => {
-    const ref = createRef<HTMLElement>();
-    const { container } = render(<StudioCodeFragment ref={ref} />);
-    expect(ref.current).toBe(container.firstChild);
+    const renderComponent = (ref: ForwardedRef<HTMLElement>) =>
+      render(<StudioCodeFragment ref={ref} />);
+    testRefForwarding(renderComponent);
   });
 });

frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.test.tsx

@@ -1,9 +1,10 @@
-import type { RefObject } from 'react';
+import type { ForwardedRef } from 'react';
 import React from 'react';
 import { render as rtlRender, screen } from '@testing-library/react';
 import type { StudioDecimalInputProps } from './StudioDecimalInput';
 import { StudioDecimalInput } from './StudioDecimalInput';
 import userEvent from '@testing-library/user-event';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
 
 const description = 'description';
 const onChange = jest.fn();
@@ -166,15 +167,15 @@ describe('StudioDecimalInput', () => {
   });
 
   it('Accepts a ref prop', () => {
-    const ref = React.createRef<HTMLInputElement>();
-    render({}, ref);
-    expect(ref.current).toBe(screen.getByRole('textbox'));
+    const renderComponent = (ref: ForwardedRef<HTMLInputElement>) => render({}, ref);
+    const getTextbox = () => screen.getByRole('textbox');
+    testRefForwarding(renderComponent, getTextbox);
   });
 });
 
 const render = (
   props: Partial<StudioDecimalInputProps> = {},
-  ref?: RefObject<HTMLInputElement>,
+  ref?: ForwardedRef<HTMLInputElement>,
 ) => {
   const allProps: StudioDecimalInputProps = {
     ...defaultProps,

frontend/libs/studio-components/src/components/StudioDeleteButton/StudioDeleteButton.test.tsx

@@ -1,10 +1,11 @@
-import type { RefObject } from 'react';
-import React, { createRef } from 'react';
+import type { ForwardedRef } from 'react';
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { StudioDeleteButton } from './StudioDeleteButton';
 import type { StudioDeleteButtonProps } from './StudioDeleteButton';
 import userEvent from '@testing-library/user-event';
 import { StudioButton } from '../StudioButton';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
 
 describe('StudioDeleteButton', () => {
   afterEach(jest.clearAllMocks);
@@ -55,9 +56,7 @@ describe('StudioDeleteButton', () => {
   });
 
   it('Forwards the ref object to the button element if given', () => {
-    const ref = createRef<HTMLButtonElement>();
-    renderDeleteButton({}, ref);
-    expect(ref.current).toBe(getDeleteButton());
+    testRefForwarding<HTMLButtonElement>((ref) => renderDeleteButton({}, ref), getDeleteButton);
   });
 
   it('Supports polymorphism', () => {
@@ -70,7 +69,8 @@ describe('StudioDeleteButton', () => {
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
-  const getDeleteButton = () => screen.getByRole('button', { name: buttonLabel });
+  const getDeleteButton = (): HTMLButtonElement =>
+    screen.getByRole('button', { name: buttonLabel });
 });
 
 const confirmMessage = 'Er du sikker på at du vil slette dette?';
@@ -83,5 +83,5 @@ const defaultProps: StudioDeleteButtonProps = {
 };
 const renderDeleteButton = (
   props: Partial<StudioDeleteButtonProps> = {},
-  ref?: RefObject<HTMLButtonElement>,
+  ref?: ForwardedRef<HTMLButtonElement>,
 ) => render(<StudioDeleteButton {...defaultProps} {...props} ref={ref} />);

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx

@@ -4,6 +4,7 @@ import { StudioIconTextfield } from './StudioIconTextfield';
 import type { StudioIconTextfieldProps } from './StudioIconTextfield';
 import { KeyVerticalIcon } from '@studio/icons';
 import userEvent from '@testing-library/user-event';
+import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
 
 describe('StudioIconTextfield', () => {
   it('render the icon', async () => {
@@ -39,12 +40,8 @@ describe('StudioIconTextfield', () => {
   });
 
   it('should forward the rest of the props to the input', () => {
-    renderStudioIconTextfield({
-      icon: <div />,
-      label: 'Your ID',
-      disabled: true,
-    });
-    expect(screen.getByLabelText('Your ID')).toBeDisabled();
+    const getTextbox = (): HTMLInputElement => screen.getByRole('textbox') as HTMLInputElement;
+    testCustomAttributes<HTMLInputElement>(renderStudioIconTextfield, getTextbox);
   });
 });
 const renderStudioIconTextfield = (props: StudioIconTextfieldProps) => {

frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StudioLabelWrapper } from './StudioLabelWrapper';
 import { render, screen } from '@testing-library/react';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
 
 jest.mock('./StudioLabelWrapper.module.css', () => ({
   studioLabelWrapper: 'studioLabelWrapper',
@@ -31,17 +33,10 @@ describe('StudioLabelWrapper', () => {
   );
 
   it('Appends given classname to internal classname', () => {
-    const className = 'test-class';
-    const { container } = render(
-      <StudioLabelWrapper className={className}>Test</StudioLabelWrapper>,
-    );
-    expect(container.firstChild).toHaveClass(className);
-    expect(container.firstChild).toHaveClass('studioLabelWrapper');
+    testRootClassNameAppending((className) => render(<StudioLabelWrapper className={className} />));
   });
 
   it('Forwards the ref object to the span element if given', () => {
-    const ref = React.createRef<HTMLSpanElement>();
-    const { container } = render(<StudioLabelWrapper ref={ref}>Test</StudioLabelWrapper>);
-    expect(ref.current).toBe(container.firstChild);
+    testRefForwarding<HTMLSpanElement>((ref) => render(<StudioLabelWrapper ref={ref} />));
   });
 });

frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.test.tsx

@@ -1,9 +1,11 @@
-import type { RefObject } from 'react';
+import type { ForwardedRef } from 'react';
 import React from 'react';
 import type { StudioPropertyButtonProps } from './StudioPropertyButton';
 import { StudioPropertyButton } from './StudioPropertyButton';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { testRootClassNameAppending } from '../../../test-utils/testRootClassNameAppending';
+import { testRefForwarding } from '../../../test-utils/testRefForwarding';
 
 // Test data:
 const property = 'Test property';
@@ -37,15 +39,11 @@ describe('StudioPropertyButton', () => {
   });
 
   it('Appends the given class name', () => {
-    const className = 'test-class';
-    renderButton({ className });
-    expect(screen.getByRole('button', { name: property })).toHaveClass(className);
+    testRootClassNameAppending((className) => renderButton({ className }));
   });
 
   it('Forwards a ref to the button', () => {
-    const ref = React.createRef<HTMLButtonElement>();
-    renderButton({}, ref);
-    expect(ref.current).toBe(screen.getByRole('button'));
+    testRefForwarding<HTMLButtonElement>((ref) => renderButton({}, ref), getButton);
   });
 
   it('Calls the onClick function when the button is clicked', async () => {
@@ -58,11 +56,13 @@ describe('StudioPropertyButton', () => {
 
   it('Renders a compact button when the compact prop is true', () => {
     renderButton({ compact: true });
-    expect(screen.getByRole('button')).toHaveClass('compact');
+    expect(getButton()).toHaveClass('compact');
   });
 });
 
 const renderButton = (
   props: Partial<StudioPropertyButtonProps> = {},
-  ref?: RefObject<HTMLButtonElement>,
+  ref?: ForwardedRef<HTMLButtonElement>,
 ) => render(<StudioPropertyButton {...defaultProps} {...props} ref={ref} />);
+
+const getButton = (): HTMLButtonElement => screen.getByRole('button');