@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/__tests__/AnchoredOverlay.tsx

@@ -1,151 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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)
-  })
-})