From de11cc50b4b444a010ce55df60924a4f1a10b156 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 6 Nov 2023 11:25:32 +0100
Subject: [PATCH] Improve test descriptions

---
 packages/react/src/Accordion/Accordion.test.tsx  |  2 +-
 .../src/Accordion/AccordionSection.test.tsx      |  4 ++--
 .../src/Accordion/useFocusWithArrow.test.tsx     |  6 +++---
 .../react/src/Accordion/useFocusWithArrows.tsx   |  2 +-
 packages/react/src/Alert/Alert.test.tsx          |  2 +-
 .../react/src/AspectRatio/AspectRatio.test.tsx   |  2 +-
 .../react/src/Blockquote/Blockquote.test.tsx     |  2 +-
 packages/react/src/Card/Card.test.tsx            |  2 +-
 packages/react/src/Checkbox/Checkbox.test.tsx    |  2 +-
 packages/react/src/Footer/Footer.test.tsx        |  4 ++--
 packages/react/src/FormLabel/FormLabel.test.tsx  |  2 +-
 packages/react/src/Grid/Grid.test.tsx            |  2 +-
 packages/react/src/Grid/GridCell.test.tsx        | 16 ++++++++--------
 packages/react/src/Heading/Heading.test.tsx      |  2 +-
 packages/react/src/Highlight/Highlight.test.tsx  |  2 +-
 packages/react/src/Icon/Icon.test.tsx            |  2 +-
 packages/react/src/Link/Link.test.tsx            |  2 +-
 .../react/src/OrderedList/OrderedList.test.tsx   |  2 +-
 .../react/src/PageHeading/PageHeading.test.tsx   |  2 +-
 packages/react/src/PageMenu/PageMenu.test.tsx    |  2 +-
 packages/react/src/Paragraph/Paragraph.test.tsx  |  2 +-
 packages/react/src/Screen/Screen.test.tsx        |  2 +-
 .../react/src/TopTaskLink/TopTaskLink.test.tsx   |  2 +-
 .../src/UnorderedList/UnorderedList.test.tsx     |  2 +-
 .../src/VisuallyHidden/VisuallyHidden.test.tsx   |  2 +-
 plop-templates/react.test.tsx.hbs                |  2 +-
 26 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/Accordion/Accordion.test.tsx b/packages/react/src/Accordion/Accordion.test.tsx
index 95d3d1882a..1fa08f57a8 100644
--- a/packages/react/src/Accordion/Accordion.test.tsx
+++ b/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')
diff --git a/packages/react/src/Accordion/AccordionSection.test.tsx b/packages/react/src/Accordion/AccordionSection.test.tsx
index e03e8d2c22..ad20012d1a 100644
--- a/packages/react/src/Accordion/AccordionSection.test.tsx
+++ b/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}
diff --git a/packages/react/src/Accordion/useFocusWithArrow.test.tsx b/packages/react/src/Accordion/useFocusWithArrow.test.tsx
index bcc236ce0f..4fab3b691c 100644
--- a/packages/react/src/Accordion/useFocusWithArrow.test.tsx
+++ b/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
diff --git a/packages/react/src/Accordion/useFocusWithArrows.tsx b/packages/react/src/Accordion/useFocusWithArrows.tsx
index 695199ab22..676b4263f9 100644
--- a/packages/react/src/Accordion/useFocusWithArrows.tsx
+++ b/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]
             }
diff --git a/packages/react/src/Alert/Alert.test.tsx b/packages/react/src/Alert/Alert.test.tsx
index ef4434d611..83d3a6c226 100644
--- a/packages/react/src/Alert/Alert.test.tsx
+++ b/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')
diff --git a/packages/react/src/AspectRatio/AspectRatio.test.tsx b/packages/react/src/AspectRatio/AspectRatio.test.tsx
index ed085645cd..14a54bd765 100644
--- a/packages/react/src/AspectRatio/AspectRatio.test.tsx
+++ b/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')
diff --git a/packages/react/src/Blockquote/Blockquote.test.tsx b/packages/react/src/Blockquote/Blockquote.test.tsx
index 452c8bad19..467023899c 100644
--- a/packages/react/src/Blockquote/Blockquote.test.tsx
+++ b/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')
diff --git a/packages/react/src/Card/Card.test.tsx b/packages/react/src/Card/Card.test.tsx
index e073fd7fda..788c3238cf 100644
--- a/packages/react/src/Card/Card.test.tsx
+++ b/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" />)
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index 40ada60090..2d7625b227 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/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')
diff --git a/packages/react/src/Footer/Footer.test.tsx b/packages/react/src/Footer/Footer.test.tsx
index 2ed2256241..7997750954 100644
--- a/packages/react/src/Footer/Footer.test.tsx
+++ b/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" />)
diff --git a/packages/react/src/FormLabel/FormLabel.test.tsx b/packages/react/src/FormLabel/FormLabel.test.tsx
index 05097d6d32..d6a9527ab6 100644
--- a/packages/react/src/FormLabel/FormLabel.test.tsx
+++ b/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')
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index 16d75e9e34..5d62772910 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/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')
diff --git a/packages/react/src/Grid/GridCell.test.tsx b/packages/react/src/Grid/GridCell.test.tsx
index bcefeafff8..371d154512 100644
--- a/packages/react/src/Grid/GridCell.test.tsx
+++ b/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,7 +30,7 @@ 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"]')
@@ -38,25 +38,25 @@ describe('Grid.Cell', () => {
     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(
@@ -64,7 +64,7 @@ describe('Grid.Cell', () => {
     )
   })
 
-  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(
@@ -72,7 +72,7 @@ describe('Grid.Cell', () => {
     )
   })
 
-  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 }} />,
     )
diff --git a/packages/react/src/Heading/Heading.test.tsx b/packages/react/src/Heading/Heading.test.tsx
index cf39a7ae29..f39c66aba2 100644
--- a/packages/react/src/Heading/Heading.test.tsx
+++ b/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')
diff --git a/packages/react/src/Highlight/Highlight.test.tsx b/packages/react/src/Highlight/Highlight.test.tsx
index 8fdc21508f..7d09ea9e8b 100644
--- a/packages/react/src/Highlight/Highlight.test.tsx
+++ b/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')
diff --git a/packages/react/src/Icon/Icon.test.tsx b/packages/react/src/Icon/Icon.test.tsx
index 59950d93d3..a0185e6ac2 100644
--- a/packages/react/src/Icon/Icon.test.tsx
+++ b/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')
diff --git a/packages/react/src/Link/Link.test.tsx b/packages/react/src/Link/Link.test.tsx
index f53921a27c..8953cbabf8 100644
--- a/packages/react/src/Link/Link.test.tsx
+++ b/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')
diff --git a/packages/react/src/OrderedList/OrderedList.test.tsx b/packages/react/src/OrderedList/OrderedList.test.tsx
index eeba49d203..8933a3e7e6 100644
--- a/packages/react/src/OrderedList/OrderedList.test.tsx
+++ b/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')
 
diff --git a/packages/react/src/PageHeading/PageHeading.test.tsx b/packages/react/src/PageHeading/PageHeading.test.tsx
index e8bdb0d01b..b18c15d0d6 100644
--- a/packages/react/src/PageHeading/PageHeading.test.tsx
+++ b/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')
diff --git a/packages/react/src/PageMenu/PageMenu.test.tsx b/packages/react/src/PageMenu/PageMenu.test.tsx
index c1d26c683d..4b232dc215 100644
--- a/packages/react/src/PageMenu/PageMenu.test.tsx
+++ b/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')
diff --git a/packages/react/src/Paragraph/Paragraph.test.tsx b/packages/react/src/Paragraph/Paragraph.test.tsx
index a4f73c4e79..af25f67558 100644
--- a/packages/react/src/Paragraph/Paragraph.test.tsx
+++ b/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')
diff --git a/packages/react/src/Screen/Screen.test.tsx b/packages/react/src/Screen/Screen.test.tsx
index 83ad5fb519..a5eb1e1ef5 100644
--- a/packages/react/src/Screen/Screen.test.tsx
+++ b/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')
diff --git a/packages/react/src/TopTaskLink/TopTaskLink.test.tsx b/packages/react/src/TopTaskLink/TopTaskLink.test.tsx
index 6a166ed9f6..b68ef9de64 100644
--- a/packages/react/src/TopTaskLink/TopTaskLink.test.tsx
+++ b/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', {
diff --git a/packages/react/src/UnorderedList/UnorderedList.test.tsx b/packages/react/src/UnorderedList/UnorderedList.test.tsx
index 088046db04..d18ad19f1f 100644
--- a/packages/react/src/UnorderedList/UnorderedList.test.tsx
+++ b/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')
 
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx
index f473a1fec2..79684088ed 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx
+++ b/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')
diff --git a/plop-templates/react.test.tsx.hbs b/plop-templates/react.test.tsx.hbs
index 258fa0ee39..fa7eda0e41 100644
--- a/plop-templates/react.test.tsx.hbs
+++ b/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')