Improve test descriptions (#713)

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

@@ -13,7 +13,7 @@ describe('Accordion', () => {
     expect(accordion).toBeVisible()
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Accordion headingLevel={1} className="test" />)
 
     const accordion = container.querySelector('.amsterdam-accordion')

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

@@ -71,7 +71,7 @@ describe('Accordion', () => {
     expect(sectionQuery).toBeInTheDocument()
   })
 
-  it('doesnt render a section HTML tag when the section prop is false', () => {
+  it('does not render a section HTML tag when the section prop is false', () => {
     render(
       <Accordion headingLevel={1} section={false}>
         <Accordion.Section label={testLabel}>{testContent}</Accordion.Section>
@@ -110,7 +110,7 @@ describe('Accordion', () => {
     expect(icon).toBeInTheDocument()
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(
       <Accordion.Section label={testLabel} className="test">
         {testContent}

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

@@ -32,13 +32,13 @@ describe('useFocusWithArrows', () => {
     onFocusThreeMock.mockReset()
   })
 
-  it('should set the focus when using the Arrow keys', () => {
+  it('sets focus when using arrow keys', () => {
     const Component = getComponent()
     const { container } = render(<Component />)
     const firstChild = container.firstChild as HTMLElement
     expect(onFocusOneMock).not.toHaveBeenCalled()
 
-    // 4 times, so we can check if there are no other elements focussed after reaching the last one
+    // 4 times, so we can check if there are no other elements focused after reaching the last one
     Array.from(Array(4).keys()).forEach(() => {
       fireEvent.keyDown(firstChild, {
         key: KeyboardKeys.ArrowDown,
@@ -59,7 +59,7 @@ describe('useFocusWithArrows', () => {
     expect(onFocusOneMock).toHaveBeenCalledTimes(2)
   })
 
-  it('should rotate the focussed elements', () => {
+  it('rotates focused elements', () => {
     const Component = getComponent(true)
     const { container } = render(<Component />)
     const firstChild = container.firstChild as HTMLElement

packages/react/src/Accordion/useFocusWithArrows.tsx

@@ -41,7 +41,7 @@ const useFocusWithArrows = (ref: RefObject<HTMLDivElement>, rotating = false, ho
         case next: {
           if (getIndex(activeElement) !== focusableEls.length - 1) {
             el = focusableEls[getIndex(activeElement) + 1]
-            // If there is nothing focussed yet, set the focus on the first element
+            // If there is nothing focused yet, set the focus on the first element
             if (activeElement && !focusableEls.includes(activeElement)) {
               el = focusableEls[0]
             }

packages/react/src/Alert/Alert.test.tsx

@@ -21,7 +21,7 @@ describe('Alert', () => {
     expect(component).toHaveClass('amsterdam-alert')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Alert className="extra" />)
 
     const component = container.querySelector(':only-child')

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

@@ -41,7 +41,7 @@ describe('Aspect ratio', () => {
     expect(extraWide.firstChild).toHaveClass('amsterdam-aspect-ratio--extra-wide')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<AspectRatio className="extra" />)
 
     const component = container.querySelector(':only-child')

packages/react/src/Blockquote/Blockquote.test.tsx

@@ -33,7 +33,7 @@ describe('Blockquote', () => {
     expect(quote).toHaveClass('amsterdam-blockquote')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Blockquote className="extra" />)
 
     const quote = container.querySelector(':only-child')

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

@@ -27,7 +27,7 @@ describe('Card', () => {
     expect(cardLink).toHaveClass('amsterdam-card__link')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const cardRender = render(<Card className="extra" />)
     const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" className="extra" />)
     const cardLinkRender = render(<Card.Link href="/" className="extra" />)

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

@@ -33,7 +33,7 @@ describe('Checkbox', () => {
     expect(label).toHaveClass('amsterdam-checkbox__label')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Checkbox className="extra" />)
 
     const wrapper = container.querySelector(':only-child')

packages/react/src/Footer/Footer.test.tsx

@@ -4,7 +4,7 @@ import { Footer } from './Footer'
 import '@testing-library/jest-dom'
 
 describe('Footer', () => {
-  it('renders a HTML footer element', () => {
+  it('renders an HTML footer element', () => {
     render(<Footer />)
 
     const footer = screen.getByRole('contentinfo')
@@ -27,7 +27,7 @@ describe('Footer', () => {
     expect(footerBottom).toHaveClass('amsterdam-footer__bottom')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const footerRender = render(<Footer className="extra" />)
     const { container: footerTopRender } = render(<Footer.Top className="extra" />)
     const { container: footerBottomRender } = render(<Footer.Bottom className="extra" />)

packages/react/src/FormLabel/FormLabel.test.tsx

@@ -67,7 +67,7 @@ describe('Form label', () => {
     expect(label).not.toBeVisible()
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<FormLabel className="large" htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')

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

@@ -17,7 +17,7 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Grid className="extra" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('extra')

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

@@ -17,7 +17,7 @@ describe('Grid.Cell', () => {
     expect(component).toHaveClass('amsterdam-grid-cell')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Grid.Cell className="extra" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid-cell extra')
@@ -30,49 +30,49 @@ describe('Grid.Cell', () => {
     expect(ref.current).toBe(component)
   })
 
-  it('generates no class names for undefined values for start and span', () => {
+  it('renders no class names for undefined values for start and span', () => {
     const { container } = render(<Grid.Cell />)
     const elementWithSpanClass = container.querySelector('[class*="amsterdam-grid-cell--span"]')
     const elementWithStartClass = container.querySelector('[class*="amsterdam-grid-cell--start"]')
     expect(elementWithSpanClass).not.toBeInTheDocument()
     expect(elementWithStartClass).not.toBeInTheDocument()
   })
 
-  it('generates class names for single number values for start and span', () => {
+  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('amsterdam-grid-cell--span-4 amsterdam-grid-cell--start-2')
   })
 
-  it('generates class names for a single number value for start', () => {
+  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('amsterdam-grid-cell--span-8')
   })
 
-  it('generates class names for a single number value for span', () => {
+  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('amsterdam-grid-cell--start-6')
   })
 
-  it('generates class names for a single number for span and array values for start', () => {
+  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(
       'amsterdam-grid-cell--span-8 amsterdam-grid-cell--start-2 amsterdam-grid-cell--start-4-medium amsterdam-grid-cell--start-6-wide',
     )
   })
 
-  it('generates class names for array values for span and a single number for start', () => {
+  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(
       'amsterdam-grid-cell--span-3 amsterdam-grid-cell--span-5-medium amsterdam-grid-cell--span-7-wide amsterdam-grid-cell--start-2',
     )
   })
 
-  it('generates class names for an array of three numbers for start and span', () => {
+  it('renders class names for an array of three numbers for start and span', () => {
     const { container } = render(
       <Grid.Cell span={{ narrow: 2, medium: 4, wide: 6 }} start={{ narrow: 1, medium: 3, wide: 5 }} />,
     )

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

@@ -116,7 +116,7 @@ describe('Heading', () => {
     expect(richText).toBeInTheDocument()
   })
 
-  it('can have an additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Heading className="large" />)
 
     const heading = container.querySelector(':only-child')

packages/react/src/Highlight/Highlight.test.tsx

@@ -21,7 +21,7 @@ describe('Highlight', () => {
     expect(component).toHaveClass('amsterdam-highlight')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Highlight className="extra" />)
 
     const component = container.querySelector(':only-child')

packages/react/src/Icon/Icon.test.tsx

@@ -43,7 +43,7 @@ describe('Icon', () => {
     expect(level7.firstChild).toHaveClass('amsterdam-icon--size-7')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Icon svg={AlertIcon} className="large" />)
 
     const icon = container.querySelector(':only-child')

packages/react/src/Link/Link.test.tsx

@@ -60,7 +60,7 @@ describe('Link', () => {
     expect(link).toHaveClass('amsterdam-link amsterdam-link--on-background-dark')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Link className="large" />)
     const link = container.querySelector(':only-child')
     expect(link).toHaveClass('large')

packages/react/src/OrderedList/OrderedList.test.tsx

@@ -18,7 +18,7 @@ describe('Ordered List', () => {
     expect(list).toHaveClass('amsterdam-ordered-list')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<OrderedList className="large" />)
     const list = container.querySelector(':only-child')
 

packages/react/src/PageHeading/PageHeading.test.tsx

@@ -23,7 +23,7 @@ describe('PageHeading', () => {
     expect(component).toHaveClass('amsterdam-page-heading')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<PageHeading className="extra" />)
 
     const component = container.querySelector(':only-child')

packages/react/src/PageMenu/PageMenu.test.tsx

@@ -48,7 +48,7 @@ describe('page menu', () => {
     expect(ref.current).toBe(component)
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<PageMenu className="intro" />)
 
     const component = container.querySelector(':only-child')

packages/react/src/Paragraph/Paragraph.test.tsx

@@ -74,7 +74,7 @@ describe('Paragraph', () => {
     expect(paragraph).toHaveClass('amsterdam-paragraph--inverse-color')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Paragraph className="intro" />)
 
     const paragraph = container.querySelector(':only-child')

packages/react/src/Screen/Screen.test.tsx

@@ -29,7 +29,7 @@ describe('Screen', () => {
     expect(component).toHaveClass('amsterdam-screen--extra-wide')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<Screen className="extra" />)
 
     const component = container.querySelector(':only-child')

packages/react/src/TopTaskLink/TopTaskLink.test.tsx

@@ -29,7 +29,7 @@ describe('Top task link', () => {
     expect(description).toHaveClass('amsterdam-top-task-link__description')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     render(<TopTaskLink href="/" label="Label" className="extra" />)
 
     const link = screen.getByRole('link', {

packages/react/src/UnorderedList/UnorderedList.test.tsx

@@ -18,7 +18,7 @@ describe('Unordered List', () => {
     expect(list).toHaveClass('amsterdam-unordered-list')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<UnorderedList className="large" />)
     const list = container.querySelector(':only-child')
 

packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx

@@ -21,7 +21,7 @@ describe('Visually hidden', () => {
     expect(component).toHaveClass('amsterdam-visually-hidden')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<VisuallyHidden className="extra" />)
 
     const component = container.querySelector(':only-child')

plop-templates/react.test.tsx.hbs

@@ -21,7 +21,7 @@ describe('{{sentenceCase name}}', () => {
     expect(component).toHaveClass('amsterdam-{{kebabCase name}}')
   })
 
-  it('can have a additional class name', () => {
+  it('renders an additional class name', () => {
     const { container } = render(<{{pascalCase name}} className="extra" />)
 
     const component = container.querySelector(':only-child')