@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/AnchoredOverlay.tsx

@@ -0,0 +1,151 @@
+import React, {useCallback, useState} from 'react'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import {Button, SSRProvider} from '../index'
+import theme from '../theme'
+import BaseStyles from '../BaseStyles'
+import {ThemeProvider} from '../ThemeProvider'
+expect.extend(toHaveNoViolations)
+
+type TestComponentSettings = {
+  initiallyOpen?: boolean
+  onOpenCallback?: (gesture: string) => void
+  onCloseCallback?: (gesture: string) => void
+}
+
+const AnchoredOverlayTestComponent = ({
+  initiallyOpen = false,
+  onOpenCallback,
+  onCloseCallback
+}: TestComponentSettings = {}) => {
+  const [open, setOpen] = useState(initiallyOpen)
+  const onOpen = useCallback(
+    (gesture: string) => {
+      setOpen(true)
+      onOpenCallback?.(gesture)
+    },
+    [onOpenCallback]
+  )
+  const onClose = useCallback(
+    (gesture: string) => {
+      setOpen(true)
+      onCloseCallback?.(gesture)
+    },
+    [onCloseCallback]
+  )
+  return (
+    <ThemeProvider theme={theme}>
+      <SSRProvider>
+        <BaseStyles>
+          <AnchoredOverlay
+            open={open}
+            onOpen={onOpen}
+            onClose={onClose}
+            renderAnchor={props => <Button {...props}>Anchor Button</Button>}
+          >
+            <button type="button">Focusable Child</button>
+          </AnchoredOverlay>
+        </BaseStyles>
+      </SSRProvider>
+    </ThemeProvider>
+  )
+}
+
+describe('AnchoredOverlay', () => {
+  behavesAsComponent({
+    Component: AnchoredOverlay,
+    systemPropArray: [],
+    options: {skipAs: true, skipSx: true},
+    toRender: () => <AnchoredOverlayTestComponent />
+  })
+
+  checkExports('AnchoredOverlay', {
+    default: undefined,
+    AnchoredOverlay
+  })
+
+  it('should have no axe violations when open', async () => {
+    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true}></AnchoredOverlayTestComponent>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('should have no axe violations when closed', async () => {
+    const {container} = HTMLRender(<AnchoredOverlayTestComponent></AnchoredOverlayTestComponent>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('should call onOpen when the anchor is clicked', () => {
+    const mockOpenCallback = jest.fn()
+    const mockCloseCallback = jest.fn()
+    const anchoredOverlay = HTMLRender(
+      <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />
+    )
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
+    fireEvent.click(anchor)
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(1)
+    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-click')
+    expect(mockCloseCallback).toHaveBeenCalledTimes(0)
+  })
+
+  it('should call onOpen when the anchor activated by a key press', () => {
+    const mockOpenCallback = jest.fn()
+    const mockCloseCallback = jest.fn()
+    const anchoredOverlay = HTMLRender(
+      <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />
+    )
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
+    fireEvent.keyDown(anchor, {key: ' '})
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(1)
+    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-key-press')
+    expect(mockCloseCallback).toHaveBeenCalledTimes(0)
+  })
+
+  it('should call onClose when the user clicks off of the overlay', () => {
+    const mockOpenCallback = jest.fn()
+    const mockCloseCallback = jest.fn()
+    const anchoredOverlay = HTMLRender(
+      <AnchoredOverlayTestComponent
+        initiallyOpen={true}
+        onOpenCallback={mockOpenCallback}
+        onCloseCallback={mockCloseCallback}
+      />
+    )
+    fireEvent.mouseDown(anchoredOverlay.baseElement)
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(0)
+    expect(mockCloseCallback).toHaveBeenCalledTimes(1)
+    expect(mockCloseCallback).toHaveBeenCalledWith('click-outside')
+  })
+
+  it('should call onClose when the escape key is pressed', async () => {
+    const mockOpenCallback = jest.fn()
+    const mockCloseCallback = jest.fn()
+    const anchoredOverlay = HTMLRender(
+      <AnchoredOverlayTestComponent
+        initiallyOpen={true}
+        onOpenCallback={mockOpenCallback}
+        onCloseCallback={mockCloseCallback}
+      />
+    )
+    const overlay = await anchoredOverlay.findByRole('none')
+    fireEvent.keyDown(overlay, {key: 'Escape'})
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(0)
+    expect(mockCloseCallback).toHaveBeenCalledTimes(1)
+    expect(mockCloseCallback).toHaveBeenCalledWith('escape')
+  })
+
+  it('should render consistently when open', () => {
+    const anchoredOverlay = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
+    expect(anchoredOverlay).toMatchSnapshot()
+  })
+})

package/src/__tests__/Avatar.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {Avatar} from '..'
+import theme from '../theme'
+import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import {COMMON} from '../constants'
+expect.extend(toHaveNoViolations)
+
+describe('Avatar', () => {
+  behavesAsComponent({Component: Avatar, systemPropArray: [COMMON]})
+
+  checkExports('Avatar', {
+    default: Avatar
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Avatar src="primer.png" />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders small by default', () => {
+    const size = 20
+    const result = render(<Avatar src="primer.png" />)
+    expect(result.props.width).toEqual(size)
+    expect(result.props.height).toEqual(size)
+  })
+
+  it('respects the size prop', () => {
+    const result = render(<Avatar size={40} src="primer.png" alt="github" />)
+    expect(result.props.width).toEqual(40)
+    expect(result.props.height).toEqual(40)
+  })
+
+  it('passes through the src prop', () => {
+    expect(render(<Avatar src="primer.png" alt="" />).props.src).toEqual('primer.png')
+  })
+
+  it('respects margin props', () => {
+    expect(render(<Avatar m={2} src="primer.png" alt="" />)).toHaveStyleRule('margin', px(theme.space[2]))
+  })
+})

package/src/__tests__/AvatarStack.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {AvatarStack} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+const avatarComp = (
+  <AvatarStack>
+    <img src="https://avatars.githubusercontent.com/primer" alt="" />
+    <img src="https://avatars.githubusercontent.com/github" alt="" />
+    <img src="https://avatars.githubusercontent.com/primer" alt="" />
+    <img src="https://avatars.githubusercontent.com/github" alt="" />
+  </AvatarStack>
+)
+
+const rightAvatarComp = (
+  <AvatarStack alignRight>
+    <img src="https://avatars.githubusercontent.com/primer" alt="" />
+    <img src="https://avatars.githubusercontent.com/github" alt="" />
+    <img src="https://avatars.githubusercontent.com/primer" alt="" />
+    <img src="https://avatars.githubusercontent.com/github" alt="" />
+  </AvatarStack>
+)
+
+describe('Avatar', () => {
+  behavesAsComponent({Component: AvatarStack, systemPropArray: [COMMON], toRender: () => avatarComp})
+
+  checkExports('AvatarStack', {
+    default: AvatarStack
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(avatarComp)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects alignRight props', () => {
+    expect(render(rightAvatarComp)).toMatchSnapshot()
+  })
+})

package/src/__tests__/BorderBox.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import theme from '../theme'
+import {BorderBox} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {LAYOUT, COMMON, BORDER, FLEX} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('BorderBox', () => {
+  behavesAsComponent({Component: BorderBox, systemPropArray: [LAYOUT, COMMON, BORDER, FLEX]})
+
+  checkExports('BorderBox', {
+    default: BorderBox
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<BorderBox />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders borders', () => {
+    expect(render(<BorderBox borderColor="success.emphasis" />)).toHaveStyleRule(
+      'border-color',
+      theme.colorSchemes.light.colors.border?.success
+    )
+    expect(render(<BorderBox borderBottom={0} />)).toHaveStyleRule('border-bottom', '0')
+  })
+
+  it('renders border radius', () => {
+    expect(render(<BorderBox borderRadius={2} />)).toHaveStyleRule('border-radius', theme.radii[2])
+  })
+
+  // the test returns the box shadow value without spaces, so had to manually provide the expected string here
+  it('renders box shadow', () => {
+    expect(render(<BorderBox boxShadow="shadow.small" />)).toHaveStyleRule(
+      'box-shadow',
+      theme.colorSchemes.light.shadows.shadow?.small
+    )
+  })
+})

package/src/__tests__/Box.tsx

@@ -0,0 +1,43 @@
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import 'babel-polyfill'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import React from 'react'
+import {Box} from '..'
+import {COMMON, FLEX, LAYOUT} from '../constants'
+import theme from '../theme'
+import {behavesAsComponent, checkExports, render} from '../utils/testing'
+expect.extend(toHaveNoViolations)
+
+describe('Box', () => {
+  behavesAsComponent({Component: Box, systemPropArray: [COMMON, LAYOUT, FLEX]})
+
+  checkExports('Box', {
+    default: Box
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Box />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders margin', () => {
+    expect(render(<Box m={1} theme={theme} />)).toMatchSnapshot()
+    expect(render(<Box m={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
+    expect(render(<Box m={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
+  })
+
+  it('renders padding', () => {
+    expect(render(<Box p={1} theme={theme} />)).toMatchSnapshot()
+    expect(render(<Box p={[0, 1, 2, 3]} theme={theme} />)).toMatchSnapshot()
+    expect(render(<Box p={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
+  })
+
+  it('respects display', () => {
+    expect(render(<Box display="inline" />)).toMatchSnapshot()
+    expect(render(<Box display="inline-block" />)).toMatchSnapshot()
+    expect(render(<Box display="none" />)).toMatchSnapshot()
+    expect(render(<Box display={['none', 'none', 'block']} theme={theme} />)).toMatchSnapshot()
+  })
+})

package/src/__tests__/BranchName.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {BranchName} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('BranchName', () => {
+  behavesAsComponent({Component: BranchName, systemPropArray: [COMMON]})
+
+  checkExports('BranchName', {
+    default: BranchName
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<BranchName />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders an <a> by default', () => {
+    expect(render(<BranchName />).type).toEqual('a')
+  })
+})

package/src/__tests__/Breadcrumb.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {Breadcrumb} from '..'
+import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('Breadcrumb', () => {
+  behavesAsComponent({Component: Breadcrumb, systemPropArray: [COMMON]})
+
+  checkExports('Breadcrumb', {
+    default: Breadcrumb
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Breadcrumb />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <nav>', () => {
+    expect(render(<Breadcrumb />).type).toEqual('nav')
+  })
+
+  it('adds the Breadcrumb class', () => {
+    expect(rendersClass(<Breadcrumb />, 'Breadcrumb')).toEqual(true)
+  })
+})

package/src/__tests__/BreadcrumbItem.tsx

@@ -0,0 +1,32 @@
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import 'babel-polyfill'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import React from 'react'
+import {Breadcrumb} from '..'
+import {COMMON} from '../constants'
+import {behavesAsComponent, render} from '../utils/testing'
+expect.extend(toHaveNoViolations)
+
+describe('Breadcrumb.Item', () => {
+  behavesAsComponent({Component: Breadcrumb.Item, systemPropArray: [COMMON]})
+
+  it('renders an <a> by default', () => {
+    expect(render(<Breadcrumb.Item />).type).toEqual('a')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Breadcrumb.Item />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects the "selected" prop', () => {
+    expect(render(<Breadcrumb.Item selected />)).toMatchSnapshot()
+  })
+
+  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
+    expect(render(<Breadcrumb.Item as={Link} to="#" />)).toMatchSnapshot()
+  })
+})

package/src/__tests__/Button.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import {
+  Button,
+  ButtonPrimary,
+  ButtonClose,
+  ButtonDanger,
+  ButtonOutline,
+  ButtonInvisible,
+  ButtonGroup,
+  ButtonTableList
+} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON, FLEX, LAYOUT, TYPOGRAPHY} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}
+
+describe('Button', () => {
+  behavesAsComponent({Component: Button, systemPropArray: [COMMON, LAYOUT]})
+
+  checkExports('Button', {
+    default: Button,
+    ButtonPrimary,
+    ButtonDanger,
+    ButtonOutline,
+    ButtonInvisible,
+    ButtonGroup,
+    ButtonTableList,
+    ButtonClose
+  })
+
+  it('renders a <button>', () => {
+    expect(render(<Button />).type).toEqual('button')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Button>Click here</Button>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('preserves "onClick" prop', () => {
+    expect(render(<Button onClick={noop} />).props.onClick).toEqual(noop)
+  })
+
+  it('respects width props', () => {
+    expect(render(<Button width={200} />)).toHaveStyleRule('width', '200px')
+  })
+
+  it('respects the "disabled" prop', () => {
+    const item = render(<Button disabled />)
+    expect(item.props.disabled).toEqual(true)
+    expect(item).toMatchSnapshot()
+  })
+
+  it('respects the "variant" prop', () => {
+    expect(render(<Button variant="small" />)).toHaveStyleRule('font-size', '12px')
+    expect(render(<Button variant="large" />)).toHaveStyleRule('font-size', '16px')
+  })
+
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect(render(<Button variant="small" fontSize={20} />)).toHaveStyleRule('font-size', '20px')
+  })
+})
+
+describe('ButtonPrimary', () => {
+  behavesAsComponent({Component: ButtonPrimary, systemPropArray: [COMMON, LAYOUT]})
+
+  it('renders a <button>', () => {
+    expect(render(<ButtonPrimary />).type).toEqual('button')
+  })
+
+  it('renders correct disabled styles', () => {
+    const item = render(<ButtonPrimary disabled />)
+    expect(item).toMatchSnapshot()
+  })
+})
+
+describe('ButtonDanger', () => {
+  behavesAsComponent({Component: ButtonDanger, systemPropArray: [COMMON, LAYOUT]})
+
+  it('renders a <button>', () => {
+    expect(render(<ButtonDanger />).type).toEqual('button')
+  })
+
+  it('renders correct disabled styles', () => {
+    const item = render(<ButtonDanger disabled />)
+    expect(item).toMatchSnapshot()
+  })
+})
+
+describe('ButtonOutline', () => {
+  behavesAsComponent({Component: ButtonOutline, systemPropArray: [COMMON, LAYOUT]})
+
+  it('renders a <button> by default', () => {
+    expect(render(<ButtonOutline />).type).toEqual('button')
+  })
+
+  it('renders correct disabled styles', () => {
+    const item = render(<ButtonOutline disabled />)
+    expect(item).toMatchSnapshot()
+  })
+})
+
+describe('ButtonInvisible', () => {
+  behavesAsComponent({Component: ButtonOutline, systemPropArray: [COMMON, LAYOUT]})
+
+  it('renders a <button> by default', () => {
+    expect(render(<ButtonInvisible />).type).toEqual('button')
+  })
+
+  it('renders correct disabled styles', () => {
+    const item = render(<ButtonInvisible disabled />)
+    expect(item).toMatchSnapshot()
+  })
+})
+
+describe('ButtonGroup', () => {
+  behavesAsComponent({Component: ButtonGroup, systemPropArray: [COMMON, FLEX, LAYOUT]})
+})
+
+describe('ButtonTableList', () => {
+  behavesAsComponent({Component: ButtonTableList, systemPropArray: [COMMON, TYPOGRAPHY, LAYOUT]})
+})

package/src/__tests__/Caret.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Caret, {CaretProps} from '../Caret'
+import {render, checkExports} from '../utils/testing'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('Caret', () => {
+  it('renders <svg>', () => {
+    expect(render(<Caret />).type).toEqual('svg')
+  })
+
+  checkExports('Caret', {
+    default: Caret
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Caret />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders cardinal directions', () => {
+    for (const location of ['top', 'right', 'bottom', 'left']) {
+      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
+    }
+    for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
+      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
+    }
+    for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) {
+      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
+    }
+  })
+})

package/src/__tests__/CircleBadge.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {CircleBadge} from '..'
+import {CheckIcon} from '@primer/octicons-react'
+import {render, mount, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+const imgInput = <img alt="" src="primer.jpg" />
+
+describe('CircleBadge', () => {
+  behavesAsComponent({
+    Component: CircleBadge,
+    systemPropArray: [COMMON],
+    toRender: () => <CircleBadge>{imgInput}</CircleBadge>
+  })
+
+  checkExports('CircleBadge', {
+    default: CircleBadge
+  })
+
+  describe('CircleBadge.Icon', () => {
+    behavesAsComponent({
+      Component: CircleBadge.Icon,
+      systemPropArray: [COMMON],
+      toRender: () => <CircleBadge.Icon icon={CheckIcon} />
+    })
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<CircleBadge variant="large" size={20} />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects the inline prop', () => {
+    expect(render(<CircleBadge inline />)).toMatchSnapshot()
+  })
+
+  it('respects the variant prop', () => {
+    expect(render(<CircleBadge variant="large" />)).toMatchSnapshot()
+  })
+
+  it('uses the size prop to override the variant prop', () => {
+    expect(render(<CircleBadge variant="large" size={20} />)).toMatchSnapshot()
+  })
+
+  it('applies title', () => {
+    expect(
+      render(
+        <CircleBadge as="a" title="primer logo">
+          {imgInput}
+        </CircleBadge>
+      ).props['title']
+    ).toEqual('primer logo')
+  })
+
+  it('preserves child class names', () => {
+    const comp = mount(
+      <CircleBadge>
+        <img className="primer" alt="" src="primer.jpg" />
+      </CircleBadge>
+    )
+    expect(comp.find('img').hasClass('primer')).toEqual(true)
+  })
+})