@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/src/common/{hint-text.test.tsx → HintText.test.tsx}

@@ -1,43 +1,43 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import HintText from './hint-text';
+import HintText from './HintText';
 
-const id = 'hint-text';
-const content = 'Hint text';
+const HINT_TEXT_ID = 'hint-text';
+const HINT_TEXT_CONTENT = 'Hint text';
 
 test('hint test renders correctly', () => {
     render(
         <HintText data-testid="hint-text"
-            id={id}
-            text={content}
+            id={HINT_TEXT_ID}
+            text={HINT_TEXT_CONTENT}
         />
     );
 
     const hintText = screen.getByTestId('hint-text');
     expect(hintText).toHaveClass('ds_hint-text');
-    expect(hintText).toHaveAttribute('id', id);
+    expect(hintText).toHaveAttribute('id', HINT_TEXT_ID);
     expect(hintText.tagName).toEqual('P');
-    expect(hintText.textContent).toEqual(content);
+    expect(hintText.textContent).toEqual(HINT_TEXT_CONTENT);
 });
 
 test('hint test with children instead of text', () => {
     render(
         <HintText data-testid="hint-text"
-            id={id}
+            id={HINT_TEXT_ID}
         >
-            <span>{content}</span>
+            <span>{HINT_TEXT_CONTENT}</span>
         </HintText>
     );
 
     const hintText = screen.getByTestId('hint-text');
-    expect(hintText.innerHTML).toEqual(`<span>${content}</span>`);
+    expect(hintText.innerHTML).toEqual(`<span>${HINT_TEXT_CONTENT}</span>`);
 });
 
 test('passing additional props', () => {
     render(
         <HintText data-testid="hint-text"
-            id={id}
-            text={content}
+            id={HINT_TEXT_ID}
+            text={HINT_TEXT_CONTENT}
             data-test="foo"
         />
     );

package/src/common/{icon.test.tsx → Icon.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Icon from './icon';
+import Icon from './Icon';
 
-const iconName = 'Search';
+const ICON_NAME = 'Search';
 
 test('icon renders correctly', () => {
     render(
         <Icon data-testid="icon"
-            icon={iconName}
+            icon={ICON_NAME}
         />
     );
 
@@ -20,24 +20,24 @@ test('icon renders correctly', () => {
 });
 
 test('icon with class name', () => {
-    const className = 'foo';
+    const CLASSNAME = 'foo';
 
     render(
         <Icon data-testid="icon"
-            icon={iconName}
-            className={className}
+            icon={ICON_NAME}
+            className={CLASSNAME}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveClass('foo', 'ds_icon');
+    expect(icon).toHaveClass(CLASSNAME);
 });
 
 test('icon with fill', () => {
     render(
         <Icon data-testid="icon"
-            icon={iconName}
+            icon={ICON_NAME}
             fill
         />
     );
@@ -48,32 +48,32 @@ test('icon with fill', () => {
 });
 
 test('icon with size', () => {
-    const size = 48;
+    const ICON_SIZE = 48;
 
     render(
         <Icon data-testid="icon"
-            icon={iconName}
-            iconSize={size}
+            icon={ICON_NAME}
+            iconSize={ICON_SIZE}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveClass(`ds_icon--${size}`);
+    expect(icon).toHaveClass(`ds_icon--${ICON_SIZE}`);
 });
 
 test('icon with aria label', () => {
-    const label = 'My icon';
+    const ARIA_LABEL = 'My icon';
 
     render(
         <Icon data-testid="icon"
-            icon={iconName}
-            ariaLabel={label}
+            icon={ICON_NAME}
+            ariaLabel={ARIA_LABEL}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveAttribute('aria-label', label);
+    expect(icon).toHaveAttribute('aria-label', ARIA_LABEL);
     expect(icon).not.toHaveAttribute('aria-hidden');
 });

package/src/common/{screen-reader-text.test.tsx → ScreenReaderText.test.tsx}

@@ -1,20 +1,20 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import ScreenReaderText from './screen-reader-text';
+import ScreenReaderText from './ScreenReaderText';
 
-const content = 'My content';
+const CONTENT = 'My content';
 
 test('screen reader text renders correctly', () => {
     render(
         <ScreenReaderText>
-            {content}
+            {CONTENT}
         </ScreenReaderText>
     );
 
     const srtext = document.querySelector('span');
 
     expect(srtext).toHaveClass('visually-hidden');
-    expect(srtext?.textContent).toEqual(content)
+    expect(srtext?.textContent).toEqual(CONTENT)
 });
 
 test('passing additional props', () => {
@@ -22,7 +22,7 @@ test('passing additional props', () => {
         <ScreenReaderText
             data-test="foo"
         >
-            {content}
+            {CONTENT}
         </ScreenReaderText>
     );
 

package/src/common/{wrapper-tag.test.tsx → WrapperTag.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import WrapperTag from './wrapper-tag';
+import WrapperTag from './WrapperTag';
 
-const content = 'My content';
+const CONTENT = 'My content';
 
 test('wrapper tag renders correctly', () => {
     render(
         <WrapperTag id="foo">
-            {content}
+            {CONTENT}
         </WrapperTag>
     );
 
@@ -21,7 +21,7 @@ test('wrapper tag widh tag name', () => {
         <WrapperTag id="foo"
             tagName="section"
         >
-            {content}
+            {CONTENT}
         </WrapperTag>
     );
 
@@ -33,7 +33,7 @@ test('wrapper tag widh tag name', () => {
 test('passing additional props', () => {
     render(
         <WrapperTag id="foo" data-test="foo">
-            {content}
+            {CONTENT}
         </WrapperTag>
     );
 

package/src/components/{accordion/accordion.test.tsx → Accordion/Accordion.test.tsx}

@@ -1,18 +1,18 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Accordion from './accordion';
+import Accordion from './Accordion';
 
-const id = 'my-accordion';
-const itemId = 'my-accordion-item';
-const titleText = 'Healthcare for veterans';
-const contentText = `Veterans are entitled to the same healthcare as any citizen. And there
+const ACCORDION_ID = 'my-accordion';
+const ACCORDION_ITEM_ID = 'my-accordion-item';
+const TITLE_TEXT = 'Healthcare for veterans';
+const CONTENT_TEXT = `Veterans are entitled to the same healthcare as any citizen. And there
     are health care options and support available specifically for veterans`;
 
 test('accordion renders correctly', () => {
-    const defaultHeaderLevel = 'h3';
+    const DEFAULT_HEADING_LEVEL = 'h3';
 
     render(
-        <Accordion id={id} data-testid={id}>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID}>
             <Accordion.Item id="accordion-1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -30,7 +30,7 @@ test('accordion renders correctly', () => {
         </Accordion>
     );
 
-    const accordion = screen.getByTestId(id);
+    const accordion = screen.getByTestId(ACCORDION_ID);
     const openAllButton = document.querySelector('.ds_accordion__open-all');
     const accordionItems = document.querySelectorAll('.ds_accordion-item');
     const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
@@ -45,12 +45,12 @@ test('accordion renders correctly', () => {
 
     expect(accordionItems.length).toEqual(3);
 
-    expect(firstAccordionTitle?.tagName).toEqual(defaultHeaderLevel.toUpperCase());
+    expect(firstAccordionTitle?.tagName).toEqual(DEFAULT_HEADING_LEVEL.toUpperCase());
 });
 
 test('accordion without open all', () => {
     render(
-        <Accordion id={id} data-testid={id} hideOpenAll>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
             <Accordion.Item id="accordion-1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -75,7 +75,7 @@ test('accordion without open all', () => {
 
 test('empty accordion has no open all', () => {
     render(
-        <Accordion id={id} data-testid={id} hideOpenAll>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
         </Accordion>
     );
 
@@ -84,11 +84,11 @@ test('empty accordion has no open all', () => {
     expect(openAllButton).toBeNull();
 })
 
-test('accordion with custom header level', () => {
-    const headerLevel = 'h2';
+test('accordion with custom heading level', () => {
+    const HEADING_LEVEL = 'h2';
 
     render(
-        <Accordion id={id} data-testid={id} headerLevel={headerLevel}>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} headingLevel={HEADING_LEVEL}>
             <Accordion.Item id="accordion-1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -99,37 +99,37 @@ test('accordion with custom header level', () => {
     );
 
     const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
-    expect(firstAccordionTitle?.tagName).toEqual(headerLevel.toUpperCase());
+    expect(firstAccordionTitle?.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
 test('passing additional props to accordion', () => {
     render(
-        <Accordion id={id} data-testid={id} data-test="foo">
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">
         </Accordion>
     );
 
-    const accordion = screen.getByTestId(id);
+    const accordion = screen.getByTestId(ACCORDION_ID);
     expect(accordion?.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {
     render(
-        <Accordion id={id} data-testid={id} className="foo">
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} className="foo">
         </Accordion>
     );
 
-    const accordion = screen.getByTestId(id);
+    const accordion = screen.getByTestId(ACCORDION_ID);
     expect(accordion).toHaveClass('foo', 'ds_accordion');
 });
 
 test('accordion item renders correctly', () => {
     render(
-        <Accordion.Item id={itemId} data-testid={itemId} title={titleText}>
-            <p>{contentText}</p>
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+            <p>{CONTENT_TEXT}</p>
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     const input = within(accordionItem).getByRole('checkbox');
     const header = document.querySelector('.ds_accordion-item__header');
     const title = header?.querySelector('.ds_accordion-item__title');
@@ -138,16 +138,16 @@ test('accordion item renders correctly', () => {
     const body = document.querySelector('.ds_accordion-item__body');
 
     expect(accordionItem).toHaveClass('ds_accordion-item');
-    expect(accordionItem).toHaveAttribute('id', itemId);
+    expect(accordionItem).toHaveAttribute('id', ACCORDION_ITEM_ID);
 
     expect(input).toHaveClass('ds_accordion-item__control', 'visually-hidden')
-    expect(input).toHaveAttribute('id', `${itemId}-control`);
+    expect(input).toHaveAttribute('id', `${ACCORDION_ITEM_ID}-control`);
 
     expect(header?.tagName).toEqual('DIV');
 
-    expect(title).toHaveAttribute('id', `panel-${itemId}-heading`);
+    expect(title).toHaveAttribute('id', `panel-${ACCORDION_ITEM_ID}-heading`);
     expect(title?.tagName).toEqual('H3');
-    expect(title?.textContent).toEqual(titleText);
+    expect(title?.textContent).toEqual(TITLE_TEXT);
 
     expect(indicator?.tagName).toEqual('SPAN');
 
@@ -156,12 +156,12 @@ test('accordion item renders correctly', () => {
     expect(label?.textContent).toEqual('Show this section');
     expect(label?.children[0]).toHaveClass('visually-hidden');
 
-    expect(body?.innerHTML).toEqual(`<p>${contentText}</p>`);
+    expect(body?.innerHTML).toEqual(`<p>${CONTENT_TEXT}</p>`);
 });
 
 test('accordion items without ID are given unique IDs', () => {
     render(
-        <Accordion id={id} data-testid={id} hideOpenAll>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
             <Accordion.Item data-testid="item1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -194,12 +194,12 @@ test('accordion items without ID are given unique IDs', () => {
 
 test('open accordion item', () => {
     render(
-        <Accordion.Item open id={itemId} data-testid={itemId} title={titleText}>
-            <p>{contentText}</p>
+        <Accordion.Item open id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+            <p>{CONTENT_TEXT}</p>
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     const input = within(accordionItem).getByRole('checkbox');
 
     expect(input).toHaveAttribute('checked');
@@ -207,7 +207,7 @@ test('open accordion item', () => {
 
 test('passing additional props to accordion item', () => {
     render(
-        <Accordion.Item id={itemId} data-testid={itemId} title="Healthcare for veterans" data-test="foo">
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title="Healthcare for veterans" data-test="foo">
             <p>Veterans are entitled to the same healthcare as any citizen. And there
                 are health care options and support available specifically for veterans.</p>
             <p>If you have a health condition that’s related to your service, you’re
@@ -215,13 +215,13 @@ test('passing additional props to accordion item', () => {
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     expect(accordionItem?.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {
     render(
-        <Accordion.Item id={itemId} data-testid={itemId} title="Healthcare for veterans" className="foo">
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title="Healthcare for veterans" className="foo">
             <p>Veterans are entitled to the same healthcare as any citizen. And there
                 are health care options and support available specifically for veterans.</p>
             <p>If you have a health condition that’s related to your service, you’re
@@ -229,6 +229,6 @@ test('passing additional CSS classes', () => {
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     expect(accordionItem).toHaveClass('foo', 'ds_accordion-item');
 });

package/src/components/{accordion/accordion.tsx → Accordion/Accordion.tsx}

@@ -1,5 +1,5 @@
 import React, { Children, useEffect, useRef } from 'react';
-import WrapperTag from '../../common/wrapper-tag';
+import WrapperTag from '../../common/WrapperTag';
 // @ts-ignore
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
 
@@ -8,7 +8,7 @@ let accordionItemCounter = 0;
 const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
     children,
     className,
-    headerLevel = 'h3',
+    headingLevel = 'h3',
     id: rawId,
     open = false,
     title,
@@ -39,7 +39,7 @@ const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
                 <WrapperTag
                     id={`panel-${processedId}-heading`}
                     className="ds_accordion-item__title"
-                    tagName={headerLevel}
+                    tagName={headingLevel}
                 >
                     {title}
                 </WrapperTag>
@@ -62,7 +62,7 @@ const Accordion: React.FC<SGDS.Component.Accordion>
     & { Item: React.FC<SGDS.Component.Accordion.Item> } = ({
     children,
     className,
-    headerLevel = 'h3',
+    headingLevel = 'h3',
     hideOpenAll,
     ...props
 }) => {
@@ -79,7 +79,7 @@ const Accordion: React.FC<SGDS.Component.Accordion>
     }
 
     function processChild(child: any) {
-        return React.cloneElement(child, { headerLevel: headerLevel });
+        return React.cloneElement(child, { headingLevel: headingLevel });
     }
 
     return (

package/src/components/{aspect-box/aspect-box.test.tsx → AspectBox/AspectBox.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import AspectBox from './aspect-box';
+import { render } from '@testing-library/react';
+import AspectBox from './AspectBox';
 
 test('aspect box renders correctly', () => {
     render(

package/src/components/{back-to-top/back-to-top.test.tsx → BackToTop/BackToTop.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import BackToTop from './back-to-top';
+import BackToTop from './BackToTop';
 
 test('back to top renders correctly', () => {
     render(

package/src/components/{back-to-top/back-to-top.tsx → BackToTop/BackToTop.tsx}

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
+import Icon from '../../common/Icon';
 // @ts-ignore
 import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
-import Icon from '../../common/icon';
 
 const BackToTop: React.FC<SGDS.Component.BackToTop> = ({
     className,

package/src/components/{breadcrumbs/breadcrumbs.test.tsx → Breadcrumbs/Breadcrumbs.test.tsx}

@@ -1,8 +1,8 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Breadcrumbs from './breadcrumbs';
+import Breadcrumbs from './Breadcrumbs';
 
-const items = [
+const ITEMS = [
     { href: 'home', title: 'Home' },
     { href: 'category', title: 'Category' },
     { title: 'Page' }
@@ -10,7 +10,7 @@ const items = [
 
 test('renders correctly', () => {
     render(
-        <Breadcrumbs items={items} />
+        <Breadcrumbs items={ITEMS} />
     );
 
     const nav = screen.getByRole('navigation');
@@ -25,7 +25,7 @@ test('renders correctly', () => {
     expect(list).toHaveClass('ds_breadcrumbs');
 
     // check items
-    expect(listItems.length).toEqual(items.length);
+    expect(listItems.length).toEqual(ITEMS.length);
 
     listItems.forEach((item, index) => {
         expect(item).toHaveClass('ds_breadcrumbs__item');
@@ -49,7 +49,7 @@ test('renders with last item hidden', () => {
     render(
         <Breadcrumbs
             hideLastItem
-            items={items}
+            items={ITEMS}
         />
     );
 
@@ -67,7 +67,7 @@ test('renders with last item hidden', () => {
 test('passing additional props', () => {
     render(
         <Breadcrumbs
-            items={items}
+            items={ITEMS}
             data-test="foo"
         />
     );
@@ -79,7 +79,7 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Breadcrumbs
-            items={items}
+            items={ITEMS}
             className="foo"
         />
     );

package/src/components/{button/button.test.tsx → Button/Button.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Button from './button';
+import Button from './Button';
 
 test('renders correctly', () => {
     render(

package/src/components/{button/button.tsx → Button/Button.tsx}

@@ -1,6 +1,6 @@
-import Icon from '../../common/icon';
-import ScreenReaderText from '../../common/screen-reader-text';
-import WrapperTag from '../../common/wrapper-tag';
+import Icon from '../../common/Icon';
+import ScreenReaderText from '../../common/ScreenReaderText';
+import WrapperTag from '../../common/WrapperTag';
 
 const Button: React.FC<SGDS.Component.Button> = ({
     buttonStyle,

package/src/components/{checkbox/checkbox.test.tsx → Checkbox/Checkbox.test.tsx}

@@ -1,9 +1,9 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import CheckboxGroup, { Checkbox } from './checkbox';
+import CheckboxGroup, { Checkbox } from './Checkbox';
 
 test('checkbox group renders correct children', () => {
-    const items = [
+    const ITEMS = [
         {
             id: 'universal-credit',
             label: 'Universal Credit',
@@ -25,18 +25,18 @@ test('checkbox group renders correct children', () => {
     ];
 
     render(
-        <CheckboxGroup items={items} />
+        <CheckboxGroup items={ITEMS} />
     );
 
     const checkboxes = screen.getAllByRole('checkbox');
     const groupContainer = checkboxes[0].parentElement?.parentElement;
-    expect(checkboxes.length).toEqual(items.length);
+    expect(checkboxes.length).toEqual(ITEMS.length);
     expect(groupContainer).toHaveClass('ds_checkboxes', 'ds_field-group');
 });
 
 test('checkbox group passes all expected item params', () => {
-    const onBlurFn = vi.fn();
-    const onChangeFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
 
     render(
         <CheckboxGroup small items={[
@@ -46,8 +46,8 @@ test('checkbox group passes all expected item params', () => {
                 hintText: 'hint text',
                 id: 'myid',
                 label: 'label text',
-                onBlur: {onBlurFn},
-                onChange: {onChangeFn},
+                onBlur: {ONBLUR_FUNCTION},
+                onChange: {ONCHANGE_FUNCTION},
                 small: true
             }
         ]}/>
@@ -65,10 +65,10 @@ test('checkbox group passes all expected item params', () => {
     expect(checkbox).toHaveAttribute('aria-describedby', hintText.id);
 
     // fireEvent.blur(checkbox);
-    // expect(onBlurFn).toHaveBeenCalled();
+    // expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 
     // fireEvent.click(checkbox);
-    // expect(onChangeFn).toHaveBeenCalled();
+    // expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('individual checkbox renders correctly', () => {
@@ -116,31 +116,31 @@ test('exclusive checkbox', () => {
 });
 
 test('checkbox with blur fn', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
 
     render(
-        <Checkbox onBlur={onBlurFn} label="Pension Credit" id="pensioncredit" />
+        <Checkbox onBlur={ONBLUR_FUNCTION} label="Pension Credit" id="pensioncredit" />
     );
 
     const checkbox = screen.getByRole('checkbox');
 
     fireEvent.blur(checkbox);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('checkbox with change fn', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
 
     render(
-        <Checkbox onChange={onChangeFn} label="Pension Credit" id="pensioncredit" />
+        <Checkbox onChange={ONCHANGE_FUNCTION} label="Pension Credit" id="pensioncredit" />
     );
 
     const checkbox = screen.getByRole('checkbox');
 
     fireEvent.click(checkbox);
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('checkbox with hint text', () => {