chore(tests): rename Component to actual component name (#2469)

packages/dnb-eufemia/src/components/button/__tests__/Button.test.tsx

@@ -1,5 +1,5 @@
 /**
- * Component Test
+ * Button Test
  *
  */
 
@@ -9,7 +9,7 @@ import {
   axeComponent,
   loadScss,
 } from '../../../core/jest/jestSetup'
-import Component, { ButtonOnClick } from '../Button'
+import Button, { ButtonOnClick } from '../Button'
 import IconPrimary from '../../IconPrimary'
 import { fireEvent, render } from '@testing-library/react'
 import FormRow from '../../form-row/FormRow'
@@ -38,14 +38,14 @@ beforeAll(() => {
 describe('Button component', () => {
   it('has a button tag', () => {
     const title = 'title'
-    render(<Component {...props} title={title} href={null} />)
+    render(<Button {...props} title={title} href={null} />)
     const button = document.querySelector('button')
 
     expect(button.getAttribute('title')).toBe(title)
   })
 
   it('icon only has to have some extra classes', () => {
-    render(<Component icon="question" />)
+    render(<Button icon="question" />)
     const button = document.querySelector('button')
 
     // size "medium" and has icon
@@ -56,7 +56,7 @@ describe('Button component', () => {
   })
 
   it('has size set to medium when button size is default', () => {
-    render(<Component icon="question" size="default" />)
+    render(<Button icon="question" size="default" />)
     const button = document.querySelector('button')
     const icon = document.querySelector('.dnb-icon')
     expect(button.classList.contains('dnb-button--icon-size-medium')).toBe(
@@ -66,7 +66,7 @@ describe('Button component', () => {
   })
 
   it('has medium icon if button size is large', () => {
-    render(<Component text="Button" size="large" icon="question" />)
+    render(<Button text="Button" size="large" icon="question" />)
     const button = document.querySelector('button')
     const icon = document.querySelector('.dnb-icon')
     // size "large
@@ -75,64 +75,57 @@ describe('Button component', () => {
   })
 
   it('has to have a bounding tag if property is set', () => {
-    render(<Component bounding={true} />)
+    render(<Button bounding={true} />)
     expect(document.querySelector('.dnb-button__bounding')).toBeTruthy()
   })
 
   it('has a anchor tag', () => {
-    render(<Component {...props} href="https://url" icon={null} />)
+    render(<Button {...props} href="https://url" icon={null} />)
     expect(document.querySelector('a')).toBeTruthy()
     expect(document.querySelector('svg')).toBeFalsy()
   })
 
   it('has a anchor tag and includes a launch icon', () => {
     render(
-      <Component
-        {...props}
-        href="https://url"
-        target="_blank"
-        icon={null}
-      />
+      <Button {...props} href="https://url" target="_blank" icon={null} />
     )
     expect(document.querySelector('svg')).toBeTruthy()
   })
 
   it('supports anchor rel property', () => {
-    render(
-      <Component {...props} href="https://url" icon={null} rel="me" />
-    )
+    render(<Button {...props} href="https://url" icon={null} rel="me" />)
     expect(document.querySelector('a').getAttribute('rel')).toBe('me')
   })
 
   it('has a disabled attribute, once we set disabled to true', () => {
-    const { rerender } = render(<Component />)
+    const { rerender } = render(<Button />)
     expect(document.querySelector('button').hasAttribute('disabled')).toBe(
       false
     )
-    rerender(<Component disabled />)
+    rerender(<Button disabled />)
 
     expect(document.querySelector('button').hasAttribute('disabled')).toBe(
       true
     )
   })
 
   it('should be able to omit button type', () => {
-    render(<Component type="" />)
+    render(<Button type="" />)
     expect(document.querySelector('button').hasAttribute('type')).toBe(
       false
     )
   })
 
   it('should use span element if defined', () => {
-    render(<Component element="span" />)
+    render(<Button element="span" />)
     expect(document.querySelector('.dnb-button').tagName).toBe('SPAN')
     expect(
       document.querySelector('.dnb-button').getAttribute('type')
     ).toBe('button')
   })
 
   it('should support spacing props', () => {
-    render(<Component top="2rem" />)
+    render(<Button top="2rem" />)
 
     const element = document.querySelector('.dnb-button')
 
@@ -146,7 +139,7 @@ describe('Button component', () => {
   it('should inherit disabled from FormRow', () => {
     render(
       <FormRow vertical disabled>
-        <Component text="Button" />
+        <Button text="Button" />
       </FormRow>
     )
 
@@ -171,7 +164,7 @@ describe('Button component', () => {
   it('has "on_click" event which will trigger on a click', () => {
     const my_event = jest.fn()
     const myEvent = jest.fn()
-    render(<Component on_click={my_event} onClick={myEvent} />)
+    render(<Button on_click={my_event} onClick={myEvent} />)
     const button = document.querySelector('button')
     fireEvent.click(button)
     expect(my_event.mock.calls.length).toBe(1)
@@ -181,20 +174,20 @@ describe('Button component', () => {
   it('has set innerRef if ref was given', () => {
     const ref = React.createRef()
     expect(ref.current).toBe(null)
-    render(<Component {...props} innerRef={ref} />)
+    render(<Button {...props} innerRef={ref} />)
     expect(ref.current).not.toBe(null)
     expect(typeof ref.current).toBe('object')
   })
 
   it('has type of button', () => {
-    render(<Component />)
+    render(<Button />)
     const button = document.querySelector('button')
     expect(button.getAttribute('type')).toBe('button')
   })
 
   it('has alignment helper with aria-hidden', () => {
     const text = 'Button'
-    const { rerender } = render(<Component text={text} />)
+    const { rerender } = render(<Button text={text} />)
 
     expect(
       document
@@ -205,7 +198,7 @@ describe('Button component', () => {
       text
     )
 
-    rerender(<Component icon="bell" />)
+    rerender(<Button icon="bell" />)
 
     expect(
       document
@@ -216,55 +209,53 @@ describe('Button component', () => {
   })
 
   it('should validate with ARIA rules as a button', async () => {
-    const Comp = render(<Component {...props} />)
+    const Comp = render(<Button {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 
   it('should validate with ARIA rules as a anchor', async () => {
-    const Comp = render(<Component {...props} href="https://url" />)
+    const Comp = render(<Button {...props} href="https://url" />)
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 
   it('has variant set to primary as default', () => {
-    render(<Component />)
+    render(<Button />)
     const button = document.querySelector('button')
     expect(button.classList.contains('dnb-button--primary')).toBe(true)
   })
 
   it('has variant set to primary when only setting text', () => {
-    render(<Component text="Button" />)
+    render(<Button text="Button" />)
     const button = document.querySelector('button')
     expect(button.classList.contains('dnb-button--primary')).toBe(true)
   })
 
   it('has variant set to secondary when only setting icon', () => {
-    render(<Component icon="question" />)
+    render(<Button icon="question" />)
     const button = document.querySelector('button')
     expect(button.classList.contains('dnb-button--secondary')).toBe(true)
   })
 
   it('has variant tertiary', () => {
-    render(<Component text="Button" variant="tertiary" icon="question" />)
+    render(<Button text="Button" variant="tertiary" icon="question" />)
     const button = document.querySelector('button')
     expect(button.classList.contains('dnb-button--tertiary')).toBe(true)
   })
 
   it('has variant unstyled', () => {
-    render(<Component text="Button" variant="unstyled" />)
+    render(<Button text="Button" variant="unstyled" />)
     const button = document.querySelector('button')
     expect(button.classList.contains('dnb-button--unstyled')).toBe(true)
   })
 
   it('will replace icon with icon component', () => {
     const { rerender } = render(
-      <Component
-        icon={<span className="dnb-icon custom-icon">icon</span>}
-      />
+      <Button icon={<span className="dnb-icon custom-icon">icon</span>} />
     )
     expect(document.querySelector('.custom-icon')).toBeTruthy()
 
     rerender(
-      <Component
+      <Button
         icon={
           <IconPrimary icon="bell" className="custom-icon-component" />
         }
@@ -278,7 +269,7 @@ describe('Button component', () => {
   it('will only have attached event listener if one is given', () => {
     const on_click = jest.fn()
     const { rerender } = render(
-      <Component text="Button" on_click={on_click} />
+      <Button text="Button" on_click={on_click} />
     )
 
     type Button = HTMLButtonElement & { onClickHandler: ButtonOnClick }
@@ -293,7 +284,7 @@ describe('Button component', () => {
     expect(on_click).toHaveBeenCalledTimes(2)
     expect(button.onClickHandler).toHaveBeenCalledTimes(2)
 
-    rerender(<Component text="Button" onClick={undefined} />)
+    rerender(<Button text="Button" onClick={undefined} />)
 
     fireEvent.click(button)
 
@@ -305,12 +296,12 @@ describe('Button component', () => {
   it('will warn when tertiary is used without an icon', () => {
     process.env.NODE_ENV = 'development'
     global.console.log = jest.fn()
-    render(<Component text="Button" variant="tertiary" />)
+    render(<Button text="Button" variant="tertiary" />)
     expect(global.console.log).toBeCalled()
   })
 
   it('has no size when only setting text', () => {
-    render(<Component text="Button" />)
+    render(<Button text="Button" />)
     expect(document.querySelector('.dnb-button--size-medium')).toBeFalsy()
     expect(document.querySelector('.dnb-button--size-large')).toBeFalsy()
   })

packages/dnb-eufemia/src/components/checkbox/__tests__/Checkbox.test.tsx

@@ -1,5 +1,5 @@
 /**
- * Component Test
+ * Checkbox Test
  *
  */
 
@@ -11,7 +11,7 @@ import {
   loadScss,
 } from '../../../core/jest/jestSetup'
 import FormRow from '../../form-row/FormRow'
-import Component from '../Checkbox'
+import Checkbox from '../Checkbox'
 
 const props = fakeProps(require.resolve('../Checkbox'), {
   all: true,
@@ -26,7 +26,7 @@ props.label_position = 'left'
 
 describe('Checkbox component', () => {
   it('has correct state after "change" trigger', () => {
-    const { rerender } = render(<Component {...props} />)
+    const { rerender } = render(<Checkbox {...props} />)
 
     // default checked value has to be false
     expect(
@@ -44,13 +44,13 @@ describe('Checkbox component', () => {
     ).toBe(false)
 
     // also check if getDerivedStateFromProps sets the state as expected
-    rerender(<Component {...props} checked={true} />)
+    rerender(<Checkbox {...props} checked={true} />)
     expect(
       (screen.getByRole('checkbox') as HTMLInputElement).checked
     ).toBe(true)
 
     const value = 'new value'
-    rerender(<Component {...props} checked={true} value={value} />)
+    rerender(<Checkbox {...props} checked={true} value={value} />)
     expect((screen.getByRole('checkbox') as HTMLInputElement).value).toBe(
       value
     )
@@ -60,7 +60,7 @@ describe('Checkbox component', () => {
     const my_event = jest.fn()
     const myEvent = jest.fn()
     render(
-      <Component on_change={my_event} onChange={myEvent} checked={false} />
+      <Checkbox on_change={my_event} onChange={myEvent} checked={false} />
     )
     screen.getByRole('checkbox').click()
     expect(my_event.mock.calls.length).toBe(1)
@@ -77,7 +77,7 @@ describe('Checkbox component', () => {
 
       return (
         <>
-          <Component
+          <Checkbox
             checked={checked}
             on_change={({ checked }) => setChecked(checked)}
           />
@@ -133,15 +133,15 @@ describe('Checkbox component', () => {
   })
 
   it('has a disabled attribute, once we set disabled to true', () => {
-    render(<Component disabled={true} />)
+    render(<Checkbox disabled={true} />)
 
     expect(
       (screen.getByRole('checkbox') as HTMLInputElement).disabled
     ).toBe(true)
   })
 
   it('should support spacing props', () => {
-    render(<Component top="2rem" />)
+    render(<Checkbox top="2rem" />)
 
     const element = document.querySelector('.dnb-checkbox')
 
@@ -155,7 +155,7 @@ describe('Checkbox component', () => {
   it('should inherit FormRow vertical label', () => {
     render(
       <FormRow vertical disabled>
-        <Component label="Label" />
+        <Checkbox label="Label" />
       </FormRow>
     )
 
@@ -189,7 +189,7 @@ describe('Checkbox component', () => {
   })
 
   it('should validate with ARIA rules', async () => {
-    const Comp = render(<Component {...props} />)
+    const Comp = render(<Checkbox {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 })