chore: Restore consistency in white space in test files (#1398)

packages/react/src/Accordion/AccordionSection.test.tsx

@@ -41,9 +41,13 @@ describe('Accordion section', () => {
     const sectionContent = getByText(testContent)
 
     expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded')
+
     fireEvent.click(button)
+
     expect(sectionContent).toHaveClass('ams-accordion__panel--expanded')
+
     fireEvent.click(button)
+
     expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded')
   })
 

packages/react/src/AspectRatio/AspectRatio.test.tsx

@@ -47,7 +47,6 @@ describe('Aspect ratio', () => {
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('extra')
-
     expect(component).toHaveClass('ams-aspect-ratio')
   })
 

packages/react/src/Breadcrumb/Breadcrumb.test.tsx

@@ -6,20 +6,26 @@ import '@testing-library/jest-dom'
 describe('Breadcrumb', () => {
   it('renders', () => {
     render(<Breadcrumb />)
+
     const component = screen.getByRole('navigation')
+
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     render(<Breadcrumb />)
+
     const component = screen.getByRole('navigation')
+
     expect(component).toHaveClass('ams-breadcrumb')
   })
 
   it('renders an additional class name', () => {
     render(<Breadcrumb className="extra" />)
+
     const component = screen.getByRole('navigation')
+
     expect(component).toHaveClass('ams-breadcrumb extra')
   })
 

packages/react/src/Breadcrumb/BreadcrumbLink.test.tsx

@@ -17,9 +17,11 @@ describe('Breadcrumb link', () => {
     render(<BreadcrumbLink href="/" />)
 
     const item = screen.getByRole('listitem')
+
     expect(item).toHaveClass('ams-breadcrumb__item')
 
     const link = screen.getByRole('link')
+
     expect(link).toHaveClass('ams-breadcrumb__link')
   })
 
@@ -33,12 +35,15 @@ describe('Breadcrumb link', () => {
 
   it('renders the href attribute', () => {
     render(<BreadcrumbLink href="/" />)
+
     const component = screen.getByRole('link')
+
     expect(component).toHaveAttribute('href', '/')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLAnchorElement>()
+
     render(<BreadcrumbLink href="/" ref={ref} />)
 
     const component = screen.getByRole('link')

packages/react/src/Button/Button.test.tsx

@@ -95,10 +95,8 @@ describe('Button', () => {
 
     expect(buttonPrimary).toBeInTheDocument()
     expect(buttonPrimary).toBeDisabled()
-
     expect(buttonSecondary).toBeInTheDocument()
     expect(buttonSecondary).toBeDisabled()
-
     expect(buttonTertiary).toBeInTheDocument()
     expect(buttonTertiary).toBeDisabled()
   })

packages/react/src/Card/CardHeadingGroup.test.tsx

@@ -39,6 +39,7 @@ describe('Card heading group', () => {
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
+
     const { container } = render(<CardHeadingGroup tagline="test" ref={ref} />)
 
     const component = container.querySelector(':only-child')

packages/react/src/Checkbox/Checkbox.test.tsx

@@ -13,10 +13,8 @@ describe('Checkbox', () => {
 
     expect(wrapper).toBeInTheDocument()
     expect(wrapper).toBeVisible()
-
     expect(input).toBeInTheDocument()
     expect(input).toBeVisible()
-
     expect(label).toBeInTheDocument()
     expect(label).toBeVisible()
   })
@@ -39,7 +37,6 @@ describe('Checkbox', () => {
     const wrapper = container.querySelector(':only-child')
 
     expect(wrapper).toHaveClass('extra')
-
     expect(wrapper).toHaveClass('ams-checkbox')
   })
 

packages/react/src/ErrorMessage/ErrorMessage.test.tsx

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom'
 describe('Error message', () => {
   it('renders', () => {
     render(<ErrorMessage />)
+
     const component = screen.getByRole('paragraph')
 
     expect(component).toBeInTheDocument()
@@ -14,27 +15,31 @@ describe('Error message', () => {
 
   it('renders a design system BEM class name', () => {
     render(<ErrorMessage />)
+
     const component = screen.getByRole('paragraph')
 
     expect(component).toHaveClass('ams-error-message')
   })
 
   it('renders an additional class name', () => {
     render(<ErrorMessage className="extra" />)
+
     const component = screen.getByRole('paragraph')
 
     expect(component).toHaveClass('ams-error-message extra')
   })
 
   it('renders a Dutch prefix by default', () => {
     render(<ErrorMessage />)
+
     const component = screen.getByText('Invoerfout', { exact: false })
 
     expect(component).toBeInTheDocument()
   })
 
   it('renders a custom prefix', () => {
     render(<ErrorMessage prefix="Error" />)
+
     const component = screen.getByText('Error', { exact: false })
 
     expect(component).toBeInTheDocument()
@@ -44,6 +49,7 @@ describe('Error message', () => {
     const ref = createRef<HTMLParagraphElement>()
 
     render(<ErrorMessage ref={ref} />)
+
     const component = screen.getByRole('paragraph')
 
     expect(ref.current).toBe(component)

packages/react/src/Field/Field.test.tsx

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom'
 describe('Field', () => {
   it('renders', () => {
     const { container } = render(<Field />)
+
     const component = container.querySelector(':only-child')
 
     expect(component).toBeInTheDocument()
@@ -14,20 +15,23 @@ describe('Field', () => {
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<Field />)
+
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-field')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Field className="extra" />)
+
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-field extra')
   })
 
   it('renders with the error class', () => {
     const { container } = render(<Field invalid />)
+
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-field--invalid')
@@ -37,6 +41,7 @@ describe('Field', () => {
     const ref = createRef<HTMLDivElement>()
 
     const { container } = render(<Field ref={ref} />)
+
     const component = container.querySelector(':only-child')
 
     expect(ref.current).toBe(component)

packages/react/src/FileInput/FileInput.test.tsx

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom'
 describe('File input', () => {
   it('renders', () => {
     const { container } = render(<FileInput />)
+
     const component = container.querySelector('input[type="file"]')
 
     expect(component).toBeInTheDocument()
@@ -14,13 +15,15 @@ describe('File input', () => {
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<FileInput />)
+
     const component = container.querySelector('input[type="file"]')
 
     expect(component).toHaveClass('ams-file-input')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<FileInput className="extra" />)
+
     const component = container.querySelector('input[type="file"]')
 
     expect(component).toHaveClass('ams-file-input extra')
@@ -30,6 +33,7 @@ describe('File input', () => {
     const ref = createRef<HTMLInputElement>()
 
     const { container } = render(<FileInput ref={ref} />)
+
     const component = container.querySelector('input[type="file"]')
 
     expect(ref.current).toBe(component)

packages/react/src/Grid/Grid.test.tsx

@@ -13,7 +13,6 @@ describe('Grid', () => {
     const component = container.querySelector(':only-child')
 
     expect(component).toBeInTheDocument()
-
     expect(component).toBeVisible()
   })
 
@@ -31,7 +30,6 @@ describe('Grid', () => {
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('extra')
-
     expect(component).toHaveClass('ams-grid')
   })
 

packages/react/src/Grid/GridCell.test.tsx

@@ -6,67 +6,88 @@ import '@testing-library/jest-dom'
 describe('Grid cell', () => {
   it('renders', () => {
     const { container } = render(<Grid.Cell />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<Grid.Cell />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('ams-grid__cell')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Grid.Cell className="extra" />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('ams-grid__cell extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
+
     const { container } = render(<Grid.Cell ref={ref} />)
+
     const component = container.querySelector(':only-child')
+
     expect(ref.current).toBe(component)
   })
 
   it('renders no class names for undefined values for start and span', () => {
     const { container } = render(<Grid.Cell />)
+
     const elementWithSpanClass = container.querySelector('[class*="ams-grid__cell--span"]')
     const elementWithStartClass = container.querySelector('[class*="ams-grid__cell--start"]')
+
     expect(elementWithSpanClass).not.toBeInTheDocument()
     expect(elementWithStartClass).not.toBeInTheDocument()
   })
 
   it('renders class names for single number values for start and span', () => {
     const { container } = render(<Grid.Cell span={4} start={2} />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('ams-grid__cell--span-4 ams-grid__cell--start-2')
   })
 
   it('renders class names for a single number value for start', () => {
     const { container } = render(<Grid.Cell span={8} />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('ams-grid__cell--span-8')
   })
 
   it('renders class names for a single number value for span', () => {
     const { container } = render(<Grid.Cell start={6} />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('ams-grid__cell--start-6')
   })
 
   it('renders class names for a single number for span and array values for start', () => {
     const { container } = render(<Grid.Cell span={8} start={{ narrow: 2, medium: 4, wide: 6 }} />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass(
       'ams-grid__cell--span-8 ams-grid__cell--start-2 ams-grid__cell--start-4-medium ams-grid__cell--start-6-wide',
     )
   })
 
   it('renders class names for array values for span and a single number for start', () => {
     const { container } = render(<Grid.Cell span={{ narrow: 3, medium: 5, wide: 7 }} start={2} />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass(
       'ams-grid__cell--span-3 ams-grid__cell--span-5-medium ams-grid__cell--span-7-wide ams-grid__cell--start-2',
     )
@@ -76,21 +97,27 @@ describe('Grid cell', () => {
     const { container } = render(
       <Grid.Cell span={{ narrow: 2, medium: 4, wide: 6 }} start={{ narrow: 1, medium: 3, wide: 5 }} />,
     )
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass(
       'ams-grid__cell--span-2 ams-grid__cell--span-4-medium ams-grid__cell--span-6-wide ams-grid__cell--start-1 ams-grid__cell--start-3-medium ams-grid__cell--start-5-wide',
     )
   })
 
   it('renders the correct class name for the “all” value of span', () => {
     const { container } = render(<Grid.Cell span="all" />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('ams-grid__cell--span-all')
   })
 
   it('renders a custom tag', () => {
     render(<Grid.Cell as="article" />)
+
     const cell = screen.getByRole('article')
+
     expect(cell).toBeInTheDocument()
   })
 })

packages/react/src/Heading/Heading.test.tsx

@@ -75,22 +75,27 @@ describe('Heading', () => {
       name: 'Size level 1',
       level: 1,
     })
+
     const sizeLevel2 = screen.getByRole('heading', {
       name: 'Size level 2',
       level: 1,
     })
+
     const sizeLevel3 = screen.getByRole('heading', {
       name: 'Size level 3',
       level: 1,
     })
+
     const sizeLevel4 = screen.getByRole('heading', {
       name: 'Size level 4',
       level: 1,
     })
+
     const sizeLevel5 = screen.getByRole('heading', {
       name: 'Size level 5',
       level: 1,
     })
+
     const sizeLevel6 = screen.getByRole('heading', {
       name: 'Size level 6',
       level: 1,