@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/src/__tests__/Popover.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import Popover, {PopoverProps} from '../Popover'
-import {render, behavesAsComponent, 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)
-
-const comp = (
-  <Popover caret="top" open>
-    <Popover.Content>Hello!</Popover.Content>
-  </Popover>
-)
-
-describe('Popover', () => {
-  behavesAsComponent({Component: Popover, toRender: () => comp})
-
-  checkExports('Popover', {
-    default: Popover
-  })
-
-  describe('Popover.Content', () => {
-    behavesAsComponent({Component: Popover.Content, toRender: () => comp})
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <Popover caret="top" open>
-        <Popover.Content>Hello!</Popover.Content>
-      </Popover>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  const CARET_POSITIONS: PopoverProps['caret'][] = [
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'bottom-left',
-    'bottom-right',
-    'top-left',
-    'top-right',
-    'left-bottom',
-    'left-top',
-    'right-bottom',
-    'right-top'
-  ]
-
-  for (const pos of CARET_POSITIONS) {
-    it(`renders correctly for a caret position of ${pos}`, () => {
-      const element = (
-        <Popover caret={pos} open>
-          <Popover.Content>Hello!</Popover.Content>
-        </Popover>
-      )
-
-      expect(render(element)).toMatchSnapshot()
-    })
-  }
-
-  it('renders both elements as a <div>', () => {
-    expect(render(<Popover />).type).toEqual('div')
-    expect(render(<Popover.Content />).type).toEqual('div')
-  })
-})

package/src/__tests__/Popover.types.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import Popover from '../Popover'
-
-export function shouldAcceptCallWithNoProps() {
-  return <Popover />
-}
-
-export function shouldNotAcceptSystemProps() {
-  return (
-    <>
-      {/* @ts-expect-error system props should not be accepted */}
-      <Popover backgroundColor="palegreen" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <Popover.Content backgroundColor="paleturquoise" />
-    </>
-  )
-}

package/src/__tests__/Portal.test.tsx

@@ -1,103 +0,0 @@
-import Portal, {registerPortalRoot} from '../Portal/index'
-
-import {render} from '@testing-library/react'
-import React from 'react'
-import BaseStyles from '../BaseStyles'
-
-describe('Portal', () => {
-  it('renders a default portal into document.body (no BaseStyles present)', () => {
-    const {baseElement} = render(<Portal>123test123</Portal>)
-    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__')
-    expect(generatedRoot).toBeInstanceOf(HTMLElement)
-    expect(generatedRoot?.textContent?.trim()).toEqual('123test123')
-    baseElement.innerHTML = ''
-  })
-
-  it('renders a default portal into nearest BaseStyles element', () => {
-    const toRender = (
-      <div id="renderedRoot">
-        <BaseStyles>
-          <div id="baseStylesRoot">
-            <Portal>123test123</Portal>
-          </div>
-        </BaseStyles>
-      </div>
-    )
-
-    const {baseElement} = render(toRender)
-    const baseStylesRoot = baseElement.querySelector('#baseStylesRoot')
-    const baseStylesElement = baseStylesRoot?.parentElement
-    const generatedRoot = baseStylesElement?.querySelector('#__primerPortalRoot__')
-
-    expect(baseStylesRoot).toBeInstanceOf(HTMLElement)
-    expect(baseStylesElement).toBeInstanceOf(HTMLElement)
-    expect(generatedRoot).toBeInstanceOf(HTMLElement)
-    expect(generatedRoot?.textContent?.trim()).toEqual('123test123')
-
-    baseElement.innerHTML = ''
-  })
-
-  it('renders into the custom portal root (default root name - declarative)', () => {
-    const toRender = (
-      <div id="renderedRoot">
-        <div id="__primerPortalRoot__"></div>
-        <Portal>123test123</Portal>
-      </div>
-    )
-    const {baseElement} = render(toRender)
-    const renderedRoot = baseElement.querySelector('#renderedRoot')
-    const portalRoot = renderedRoot?.querySelector('#__primerPortalRoot__')
-
-    expect(portalRoot).toBeInstanceOf(HTMLElement)
-    expect(portalRoot?.textContent?.trim()).toEqual('123test123')
-
-    baseElement.innerHTML = ''
-  })
-
-  it('renders into the custom portal root (default root name - imperative)', () => {
-    const portalRootJSX = <div id="myPortalRoot"></div>
-    let {baseElement} = render(portalRootJSX)
-    const portalRoot = baseElement.querySelector('#myPortalRoot')
-    expect(portalRoot).toBeInstanceOf(HTMLElement)
-
-    registerPortalRoot(baseElement.querySelector('#myPortalRoot')!)
-
-    const toRender = <Portal>123test123</Portal>
-    ;({baseElement} = render(toRender))
-    expect(portalRoot?.textContent?.trim()).toEqual('123test123')
-
-    baseElement.innerHTML = ''
-  })
-
-  it('renders into multiple custom portal roots (named)', () => {
-    const portalRootJSX = (
-      <main>
-        <div id="myPortalRoot1"></div>
-        <div id="myPortalRoot2"></div>
-      </main>
-    )
-    let {baseElement} = render(portalRootJSX)
-    const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1')
-    const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2')
-    expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement)
-    expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement)
-
-    registerPortalRoot(baseElement.querySelector('#myPortalRoot1')!, 'fancyPortal1')
-    registerPortalRoot(baseElement.querySelector('#myPortalRoot2')!, 'fancyPortal2')
-
-    const toRender = (
-      <>
-        <Portal>123test123</Portal>
-        <Portal containerName="fancyPortal1">456test456</Portal>
-        <Portal containerName="fancyPortal2">789test789</Portal>
-      </>
-    )
-    ;({baseElement} = render(toRender))
-    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__')
-    expect(generatedRoot?.textContent?.trim()).toEqual('123test123')
-    expect(fancyPortalRoot1?.textContent?.trim()).toEqual('456test456')
-    expect(fancyPortalRoot2?.textContent?.trim()).toEqual('789test789')
-
-    baseElement.innerHTML = ''
-  })
-})

package/src/__tests__/Position.test.tsx

@@ -1,117 +0,0 @@
-import React from 'react'
-import {Box, Position, Absolute, Fixed, Relative, Sticky} from '..'
-import {render, behavesAsComponent, 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('position components', () => {
-  describe('Absolute', () => {
-    behavesAsComponent({Component: Absolute})
-
-    checkExports('Position', {
-      default: Position,
-      Absolute,
-      Fixed,
-      Relative,
-      Sticky
-    })
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Absolute />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: absolute', () => {
-      expect(render(<Absolute />)).toHaveStyleRule('position', 'absolute')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Absolute as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'absolute')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-
-  describe('Fixed', () => {
-    behavesAsComponent({Component: Fixed})
-
-    it('respects the "as" prop', () => {
-      expect(render(<Fixed as="span" />).type).toEqual('span')
-    })
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Fixed />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: fixed', () => {
-      expect(render(<Fixed />)).toHaveStyleRule('position', 'fixed')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Fixed as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'fixed')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-
-  describe('Relative', () => {
-    behavesAsComponent({Component: Relative})
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Relative />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: relative', () => {
-      expect(render(<Relative />)).toHaveStyleRule('position', 'relative')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Relative as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'relative')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-
-  describe('Sticky', () => {
-    behavesAsComponent({Component: Sticky})
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Sticky />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: sticky', () => {
-      expect(render(<Sticky />)).toHaveStyleRule('position', 'sticky')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Sticky as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'sticky')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-})

package/src/__tests__/ProgressBar.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import {ProgressBar} from '..'
-import {render, behavesAsComponent, 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('ProgressBar', () => {
-  behavesAsComponent({Component: ProgressBar})
-
-  checkExports('ProgressBar', {
-    default: ProgressBar
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<ProgressBar progress={80} barSize="small" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "barSize" prop', () => {
-    expect(render(<ProgressBar progress={80} barSize="small" />)).toHaveStyleRule('height', '5px')
-    expect(render(<ProgressBar progress={80} barSize="default" />)).toHaveStyleRule('height', '8px')
-    expect(render(<ProgressBar progress={80} barSize="large" />)).toHaveStyleRule('height', '10px')
-  })
-
-  it('respects the "inline" prop', () => {
-    expect(render(<ProgressBar progress={80} inline />)).toHaveStyleRule('display', 'inline-flex')
-  })
-
-  it('respects the "width" prop', () => {
-    expect(render(<ProgressBar progress={80} inline width="100px" />)).toHaveStyleRule('width', '100px')
-  })
-
-  it('respects the "progress" prop', () => {
-    expect(render(<ProgressBar progress={80} />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/Radio.test.tsx

@@ -1,174 +0,0 @@
-import React from 'react'
-import {Radio} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render, cleanup, fireEvent} from '@testing-library/react'
-import {toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import '@testing-library/jest-dom'
-
-expect.extend(toHaveNoViolations)
-
-describe('Radio', () => {
-  const defaultProps = {
-    name: 'mock',
-    value: 'mock value'
-  }
-
-  beforeEach(() => {
-    jest.resetAllMocks()
-    cleanup()
-  })
-
-  behavesAsComponent({Component: Radio})
-
-  checkExports('Radio', {
-    default: Radio
-  })
-
-  it('renders a valid radio input', () => {
-    const {getByRole} = render(<Radio {...defaultProps} />)
-
-    const radio = getByRole('radio')
-
-    expect(radio).toBeDefined()
-  })
-
-  it('renders an unchecked radio by default', () => {
-    const {getByRole} = render(<Radio {...defaultProps} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio.checked).toEqual(false)
-  })
-
-  it('accepts and applies value and name attributes', () => {
-    const {getByRole} = render(<Radio {...defaultProps} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio).toHaveAttribute('name', defaultProps.name)
-    expect(radio).toHaveAttribute('value', defaultProps.value)
-  })
-
-  it('renders an active radio when checked attribute is passed', () => {
-    const handleChange = jest.fn()
-    const {getByRole} = render(<Radio {...defaultProps} checked onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio.checked).toEqual(true)
-  })
-
-  it('accepts a change handler that can alter a single radio state', () => {
-    const handleChange = jest.fn()
-    const {getByRole} = render(<Radio {...defaultProps} onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio.checked).toEqual(false)
-
-    fireEvent.click(radio)
-    expect(handleChange).toHaveBeenCalled()
-    expect(radio.checked).toEqual(true)
-  })
-
-  it('renders correct behavior for multiple radio buttons in a group', () => {
-    const handleChange = jest.fn()
-    const RadioGroup = () => (
-      <form>
-        <Radio {...defaultProps} value="radio-one" onChange={handleChange} />
-        <Radio {...defaultProps} value="radio-two" onChange={handleChange} />
-      </form>
-    )
-    const {getByDisplayValue} = render(<RadioGroup />)
-
-    const radioOne = getByDisplayValue('radio-one') as HTMLInputElement
-    const radioTwo = getByDisplayValue('radio-two') as HTMLInputElement
-
-    expect(radioOne).not.toBeChecked()
-    expect(radioTwo).not.toBeChecked()
-
-    fireEvent.click(radioOne)
-
-    expect(radioOne).toBeChecked()
-    expect(radioTwo).not.toBeChecked()
-
-    fireEvent.click(radioTwo)
-
-    expect(radioOne).not.toBeChecked()
-    expect(radioTwo).toBeChecked()
-  })
-
-  it('renders an inactive radio state correctly', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Radio {...defaultProps} disabled onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio.disabled).toEqual(true)
-    expect(radio).not.toBeChecked()
-    expect(radio).toHaveAttribute('aria-disabled', 'true')
-
-    fireEvent.change(radio)
-
-    expect(radio.disabled).toEqual(true)
-    expect(radio).not.toBeChecked()
-    expect(radio).toHaveAttribute('aria-disabled', 'true')
-
-    // remove disabled attribute and retest
-    rerender(<Radio {...defaultProps} onChange={handleChange} />)
-
-    expect(radio).toHaveAttribute('aria-disabled', 'false')
-  })
-
-  it('renders an uncontrolled component correctly', () => {
-    const {getByRole} = render(<Radio {...defaultProps} defaultChecked />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio.checked).toEqual(true)
-  })
-
-  it('renders an aria-checked attribute correctly', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Radio {...defaultProps} checked={false} onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio).toHaveAttribute('aria-checked', 'false')
-
-    rerender(<Radio {...defaultProps} checked={true} onChange={handleChange} />)
-
-    expect(radio).toHaveAttribute('aria-checked', 'true')
-  })
-
-  it('renders an invalid aria state when validation prop indicates an error', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio).toHaveAttribute('aria-invalid', 'false')
-
-    rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="success" />)
-
-    expect(radio).toHaveAttribute('aria-invalid', 'false')
-
-    rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="error" />)
-
-    expect(radio).toHaveAttribute('aria-invalid', 'true')
-  })
-
-  it('renders an aria state indicating the field is required', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio).toHaveAttribute('aria-required', 'false')
-
-    rerender(<Radio {...defaultProps} onChange={handleChange} required />)
-
-    expect(radio).toHaveAttribute('aria-required', 'true')
-  })
-})

package/src/__tests__/SelectMenu.test.tsx

@@ -1,142 +0,0 @@
-import React from 'react'
-import {SelectMenu, Button} from '..'
-import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../SelectMenu'
-expect.extend(toHaveNoViolations)
-
-const BasicSelectMenu = ({
-  onClick,
-  as,
-  align = 'left'
-}: {
-  onClick?: SelectMenuItemProps['onClick']
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: any
-  align?: SelectMenuModalProps['align']
-}) => {
-  return (
-    <SelectMenu as={as}>
-      <Button as="summary">Projects</Button>
-      <SelectMenu.Modal title="Projects" align={align}>
-        <SelectMenu.List>
-          <SelectMenu.Item selected href="#">
-            Primer Components bugs
-          </SelectMenu.Item>
-          <SelectMenu.Item onClick={onClick} as={as} data-test="menu-item" href="#">
-            Primer Components roadmap
-          </SelectMenu.Item>
-          <SelectMenu.Divider>stuff</SelectMenu.Divider>
-          <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
-          <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
-          <SelectMenu.Footer>footer</SelectMenu.Footer>
-        </SelectMenu.List>
-      </SelectMenu.Modal>
-    </SelectMenu>
-  )
-}
-
-const MenuWithTabs = ({onClick}: {onClick?: SelectMenuTabProps['onClick']}) => {
-  return (
-    <SelectMenu initialTab="Organization">
-      <Button as="summary">Projects</Button>
-      <SelectMenu.Modal title="Projects">
-        <SelectMenu.Tabs>
-          <SelectMenu.Tab index={0} onClick={onClick} data-test="repo-tab" tabName="Repository" />
-          <SelectMenu.Tab index={1} tabName="Organization" />
-        </SelectMenu.Tabs>
-        <SelectMenu.TabPanel tabName="Repository">
-          <SelectMenu.Item href="#">Primer Components bugs</SelectMenu.Item>
-          <SelectMenu.Item href="#">Primer Components roadmap</SelectMenu.Item>
-          <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
-          <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
-        </SelectMenu.TabPanel>
-        <SelectMenu.TabPanel tabName="Organization">
-          <SelectMenu.Item href="#"> Project 2</SelectMenu.Item>
-        </SelectMenu.TabPanel>
-        <SelectMenu.Footer>Showing 3 of 3</SelectMenu.Footer>
-      </SelectMenu.Modal>
-    </SelectMenu>
-  )
-}
-
-describe('SelectMenu', () => {
-  checkExports('SelectMenu', {
-    default: SelectMenu
-  })
-
-  for (const Comp of [
-    SelectMenu.List,
-    SelectMenu.Divider,
-    SelectMenu.Filter,
-    SelectMenu.Item,
-    SelectMenu.List,
-    SelectMenu.Modal,
-    SelectMenu.Tabs,
-    SelectMenu.Tab,
-    SelectMenu.TabPanel,
-    SelectMenu.Header
-  ]) {
-    it('sets a valid displayName', () => {
-      expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
-    })
-  }
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<BasicSelectMenu />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('does not allow the "as" prop on SelectMenu', () => {
-    const component = mount(<BasicSelectMenu as="span" />)
-    expect(component.find('details').length).toEqual(1)
-  })
-
-  it('shows correct initial tab', () => {
-    const testInstance = renderRoot(<MenuWithTabs />)
-    expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization')
-  })
-
-  it('clicking on a tab opens the tab', () => {
-    const component = mount(<MenuWithTabs />)
-    const tab = component.find("[data-test='repo-tab']").first()
-    tab.simulate('click')
-    expect(tab.getDOMNode().attributes.getNamedItem('aria-selected')).toBeTruthy()
-  })
-
-  it('selected items have aria-checked', () => {
-    const testInstance = renderRoot(<BasicSelectMenu />)
-    expect(testInstance.findByProps({'aria-checked': true}).props.children[1]).toBe('Primer Components bugs')
-  })
-
-  it('clicking on a list item calls user provided onClick handler', () => {
-    const mockClick = jest.fn()
-    const component = mount(<BasicSelectMenu onClick={mockClick} />)
-    const item = component.find("[data-test='menu-item']").first()
-    item.simulate('click')
-    expect(mockClick.mock.calls.length).toEqual(1)
-  })
-
-  it('clicking on a tab calls user provided onClick handler', () => {
-    const mockClick = jest.fn()
-    const component = mount(<MenuWithTabs onClick={mockClick} />)
-    const item = component.find("[data-test='repo-tab']").first()
-    item.simulate('click')
-    expect(mockClick.mock.calls.length).toEqual(1)
-  })
-
-  it('clicking on an item closes the modal', () => {
-    const component = mount(<BasicSelectMenu />)
-    const item = component.find("[data-test='menu-item']").first()
-    item.simulate('click')
-    expect(component.getDOMNode().attributes.getNamedItem('open')).toBeFalsy()
-  })
-
-  it('right-aligned modal has right: 0px', () => {
-    expect(render(<BasicSelectMenu align="right" />)).toMatchSnapshot()
-  })
-})