@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/src/molecules/RadioGroup/RadioGroup.test.tsx

@@ -1,107 +0,0 @@
-import { render } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
-import userEvent from '@testing-library/user-event'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import RadioGroup from './RadioGroup'
-import RadioOption from './RadioOption'
-import { useRadioGroup } from './useRadioGroup'
-
-describe('RadioGroup', () => {
-  it('Should render radio group with radio option', () => {
-    const onChange = jest.fn()
-
-    const { getByTestId, getByRole } = render(
-      <RadioGroup name="radio-group" selectedValue="radio" onChange={onChange}>
-        <RadioOption value="radio" label="Radio 1" />
-      </RadioGroup>
-    )
-
-    const radio = getByRole('radio', { name: 'Radio 1' })
-
-    expect(radio).toBeInTheDocument()
-    expect(getByTestId('store-radio-option')).toBeInTheDocument()
-  })
-  it('Should render RadioOption Children', () => {
-    const onChange = jest.fn()
-    const { getByRole } = render(
-      <RadioGroup
-        name="radio-group"
-        selectedValue="radio-1"
-        onChange={onChange}
-      >
-        <RadioOption value="radio-1" label="Radio 1">
-          <h1>Radio Group 1</h1>
-        </RadioOption>
-      </RadioGroup>
-    )
-
-    expect(getByRole('heading')).toHaveTextContent('Radio Group 1')
-  })
-  it('Should pass name from RadioGroup to RadioOptions', () => {
-    const onChange = jest.fn()
-
-    const { container } = render(
-      <RadioGroup
-        name="radio-group"
-        selectedValue="radio-1"
-        onChange={onChange}
-      >
-        <RadioOption value="radio-1" label="Radio 1" />
-        <RadioOption value="radio-2" label="Radio 2" />
-      </RadioGroup>
-    )
-
-    const options = container.querySelectorAll('[name="radio-group"]')
-
-    expect(options).toHaveLength(2)
-  })
-
-  it('Should emit onChange with right value', () => {
-    const onChange = jest.fn()
-
-    const { getByTestId } = render(
-      <RadioGroup
-        name="radio-group"
-        selectedValue="radio-1"
-        onChange={onChange}
-      >
-        <RadioOption value="radio-1" label="Radio 1">
-          Radio 1
-        </RadioOption>
-        <RadioOption
-          value="radio-2"
-          label="Radio 2"
-          testId="store-radio2-option"
-        >
-          Radio 2
-        </RadioOption>
-      </RadioGroup>
-    )
-
-    const radio2 = getByTestId('store-radio2-option')
-
-    userEvent.click(radio2)
-
-    const [[event]] = onChange.mock.calls
-
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(event.target.value).toEqual('radio-2')
-  })
-
-  it('Should render useRadioGroup hook', () => {
-    const WrapperRadioGroup = ({ children }: { children: ReactNode }) => (
-      <RadioGroup name="radio-group" selectedValue="radio-1">
-        {children}
-      </RadioGroup>
-    )
-
-    const { result } = renderHook(() => useRadioGroup(), {
-      wrapper: WrapperRadioGroup,
-    })
-
-    expect(result.current.name).toEqual('radio-group')
-    expect(result.current.selectedValue).toEqual('radio-1')
-  })
-})

package/src/molecules/SearchInput/SearchInput.test.tsx

@@ -1,34 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import type { SearchInputProps } from './SearchInput'
-import SearchInput from './SearchInput'
-
-const Wrapper = (props: Partial<SearchInputProps>) => (
-  <SearchInput testId="search-input" onSubmit={(value) => value} {...props} />
-)
-
-describe('SearchInput', () => {
-  it('`data-fs-search-input-form` is present', () => {
-    const { getByTestId } = render(<Wrapper />)
-
-    expect(getByTestId('search-input')).toHaveAttribute(
-      'data-fs-search-input-form'
-    )
-  })
-
-  it('`data-fs-search-input` is present and applied to `Input`', () => {
-    const { getByTestId } = render(<Wrapper data-fs-search-input />)
-
-    expect(getByTestId('store-input')).toHaveAttribute('data-fs-search-input')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<Wrapper />)
-
-      expect(await axe(getByTestId('search-input'))).toHaveNoViolations()
-    })
-  })
-})

package/src/molecules/SkuSelector/SkuSelector.test.tsx

@@ -1,42 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import SkuSelector from './SkuSelector'
-
-const SkuSelectorTest = () => {
-  const options = [
-    { label: 'Option round', value: 'Round' },
-    { label: 'Option square', value: 'Square' },
-  ]
-
-  return <SkuSelector variant="label" options={options} activeValue="Square" />
-}
-
-describe('SkuSelector', () => {
-  describe('Data attributes', () => {
-    it('should have `data-fs-sku-selector` attribute', () => {
-      const { getByTestId } = render(<SkuSelectorTest />)
-
-      expect(getByTestId('store-sku-selector')).toHaveAttribute(
-        'data-fs-sku-selector'
-      )
-    })
-
-    it('should have `data-fs-sku-selector-variant` attribute', () => {
-      const { getByTestId } = render(<SkuSelectorTest />)
-
-      expect(getByTestId('store-sku-selector')).toHaveAttribute(
-        'data-fs-sku-selector-variant'
-      )
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<SkuSelectorTest />)
-
-      expect(await axe(getByTestId('store-sku-selector'))).toHaveNoViolations()
-    })
-  })
-})

package/src/molecules/Table/Table.test.tsx

@@ -1,233 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-
-import Table from './Table'
-import TableHead from './TableHead'
-import TableRow from './TableRow'
-import TableBody from './TableBody'
-import TableCell from './TableCell'
-import TableFooter from './TableFooter'
-
-describe('Table', () => {
-  describe('Data attributes', () => {
-    it('should render a simple table with all expected data-attributes', () => {
-      const { getByTestId, queryAllByTestId } = render(
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell variant="header">Name</TableCell>
-              <TableCell variant="header">Age</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              <TableCell>John</TableCell>
-              <TableCell>25</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Carter</TableCell>
-              <TableCell>25</TableCell>
-            </TableRow>
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Age</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      )
-
-      const table = getByTestId('store-table')
-
-      expect(table).toHaveAttribute('data-fs-table')
-
-      const tableHead = getByTestId('store-table-head')
-
-      expect(tableHead).toHaveAttribute('data-table-head')
-
-      const tableBody = getByTestId('store-table-body')
-
-      expect(tableBody).toHaveAttribute('data-table-body')
-
-      const tableFooter = getByTestId('store-table-footer')
-
-      expect(tableFooter).toHaveAttribute('data-table-footer')
-
-      const tableRows = queryAllByTestId('store-table-row')
-
-      expect(tableRows).toHaveLength(4)
-      tableRows.forEach((row) => {
-        expect(row).toHaveAttribute('data-table-row')
-      })
-
-      const tableCells = queryAllByTestId('store-table-cell')
-
-      // Make sure 8 cells were rendered and all contain the
-      // data-table-cell attribute.
-      expect(tableCells).toHaveLength(8)
-      tableCells.forEach((row) => {
-        expect(row).toHaveAttribute('data-table-cell')
-      })
-
-      // Make sure that 2 header cells and 6 data cells were rendered, with their
-      // corresponding attributes.
-      expect(table.querySelectorAll('[data-table-cell=header]')).toHaveLength(2)
-      expect(table.querySelectorAll('[data-table-cell=data]')).toHaveLength(6)
-    })
-  })
-
-  // WAI-ARIA tests
-  // https://www.w3.org/WAI/tutorials/tables/
-  describe('Table WAI-ARIA Specifications', () => {
-    describe('Tables with one header', () => {
-      it('should have no violations on a table with header cells in the top row only', async () => {
-        const { container } = render(
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell variant="header">Name</TableCell>
-                <TableCell variant="header">Age</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>John</TableCell>
-                <TableCell>25</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Carter</TableCell>
-                <TableCell>25</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        )
-
-        expect(await axe(container)).toHaveNoViolations()
-      })
-
-      it('should have no violations on a table with header cells in the first column only', async () => {
-        const { container } = render(
-          <Table>
-            <TableBody>
-              <TableRow>
-                <TableCell variant="header">Date</TableCell>
-                <TableCell>12 February</TableCell>
-                <TableCell>24 March</TableCell>
-                <TableCell>14 April</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell variant="header">Event</TableCell>
-                <TableCell>Waltz with Strauss</TableCell>
-                <TableCell>The Obelisks</TableCell>
-                <TableCell>The What</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell variant="header">Venue</TableCell>
-                <TableCell>Main Hall</TableCell>
-                <TableCell>West Wing</TableCell>
-                <TableCell>Main Hall</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        )
-
-        expect(await axe(container)).toHaveNoViolations()
-      })
-
-      // https://www.w3.org/WAI/WCAG21/Techniques/html/H63
-      it('should have no violations on a table with ambiguous data, where scope should be used', async () => {
-        const { container } = render(
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell variant="header" scope="col">
-                  Last Name
-                </TableCell>
-                <TableCell variant="header" scope="col">
-                  First Name
-                </TableCell>
-                <TableCell variant="header" scope="col">
-                  City
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>Phoenix</TableCell>
-                <TableCell>Imari</TableCell>
-                <TableCell>Henry</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Zeki</TableCell>
-                <TableCell>Rome</TableCell>
-                <TableCell>Min</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Apirka</TableCell>
-                <TableCell>Kelly</TableCell>
-                <TableCell>Brynn</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        )
-
-        expect(await axe(container)).toHaveNoViolations()
-      })
-    })
-
-    describe('Tables with two headers', () => {
-      it('should have no violations on a table with header cells in the top row and first column', async () => {
-        const { container } = render(
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell />
-                <TableCell variant="header" scope="col">
-                  Monday
-                </TableCell>
-                <TableCell variant="header" scope="col">
-                  Tuesday
-                </TableCell>
-                <TableCell variant="header" scope="col">
-                  Wednesday
-                </TableCell>
-                <TableCell variant="header" scope="col">
-                  Thursday
-                </TableCell>
-                <TableCell variant="header" scope="col">
-                  Friday
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell variant="header" scope="row">
-                  09:00 - 11:00
-                </TableCell>
-                <TableCell>Closed</TableCell>
-                <TableCell>Open</TableCell>
-                <TableCell>Open</TableCell>
-                <TableCell>Closed</TableCell>
-                <TableCell>Closed</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell variant="header" scope="row">
-                  11:00 - 13:00
-                </TableCell>
-                <TableCell>Open</TableCell>
-                <TableCell>Open</TableCell>
-                <TableCell>Closed</TableCell>
-                <TableCell>Closed</TableCell>
-                <TableCell>Closed</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        )
-
-        expect(await axe(container)).toHaveNoViolations()
-      })
-    })
-  })
-})

package/src/organisms/Hero/Hero.test.tsx

@@ -1,60 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Hero from './Hero'
-import HeroImage from './HeroImage'
-import HeroHeading from './HeroHeading'
-
-const HeroTest = () => {
-  return (
-    <Hero data-custom-attribute>
-      <HeroImage>
-        <img
-          alt="Quest 2 Controller on a table"
-          src="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
-        />
-      </HeroImage>
-      <HeroHeading>
-        <h3>Get yo know our next release</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        <a href="/">Shop Now</a>
-      </HeroHeading>
-    </Hero>
-  )
-}
-
-describe('Hero', () => {
-  describe('Data attributes', () => {
-    const { getByTestId } = render(<HeroTest />)
-
-    const hero = getByTestId('store-hero')
-    const heroImage = getByTestId('store-hero-image')
-    const heroHeading = getByTestId('store-hero-heading')
-
-    it('`Hero` component should have `data-fs-hero` attribute', () => {
-      expect(hero).toHaveAttribute('data-fs-hero')
-    })
-
-    it('`Hero` component should have custom data attribute `data-custom-attribute`', () => {
-      expect(hero).toHaveAttribute('data-custom-attribute')
-    })
-
-    it('`HeroImage` component should have `data-hero-image` attribute', () => {
-      expect(heroImage).toHaveAttribute('data-hero-image')
-    })
-
-    it('`HeroHeading` component should have `data-hero-heading` attribute', () => {
-      expect(heroHeading).toHaveAttribute('data-hero-heading')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<HeroTest />)
-
-      expect(await axe(getByTestId('store-hero'))).toHaveNoViolations()
-      expect(await axe(getByTestId('store-hero'))).toHaveNoIncompletes()
-    })
-  })
-})

package/src/organisms/OutOfStock/OutOfStock.test.tsx

@@ -1,122 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import { OutOfStockMessage, OutOfStockTitle } from '.'
-import Button from '../../atoms/Button'
-import Input from '../../atoms/Input'
-import Label from '../../atoms/Label'
-import OutOfStock from './OutOfStock'
-
-const SimpleOutOfStock = () => (
-  <OutOfStock>
-    <OutOfStockTitle>
-      Text <span>icon</span>
-    </OutOfStockTitle>
-    <OutOfStockMessage>Notify me when available</OutOfStockMessage>
-    <Label>
-      Email
-      <Input />
-    </Label>
-    <Button>Notify me</Button>
-  </OutOfStock>
-)
-
-describe('OutOfStock', () => {
-  it('`Out Of Stock` components should have corrects attributes', () => {
-    render(<SimpleOutOfStock />)
-
-    const outOfStock = screen.getByTestId('store-out-of-stock')
-    const outOfStockTitle = screen.getByTestId('store-out-of-stock-title')
-    const outOfStockMessage = screen.getByTestId('store-out-of-stock-message')
-    const outOfStockForm = screen.getByTestId('store-out-of-stock-form')
-
-    expect(outOfStock).toHaveAttribute('data-fs-out-of-stock')
-    expect(outOfStockForm).toHaveAttribute('data-out-of-stock-form')
-    expect(outOfStockTitle).toHaveAttribute('data-out-of-stock-title')
-    expect(outOfStockMessage).toHaveAttribute('data-out-of-stock-message')
-  })
-
-  it('Should emit event', () => {
-    const onSubmitMock = jest.fn((e) => e.preventDefault())
-
-    render(
-      <OutOfStock onSubmit={onSubmitMock}>
-        <OutOfStockTitle>Out of Stock</OutOfStockTitle>
-        <Input name="email" />
-        <Button type="submit">Notify me</Button>
-      </OutOfStock>
-    )
-
-    const outOfStockEventButton = screen.getByTestId('store-button')
-
-    userEvent.click(outOfStockEventButton)
-
-    expect(onSubmitMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('Should not render message', () => {
-    render(
-      <OutOfStock>
-        <OutOfStockTitle>Out of Stock</OutOfStockTitle>
-        <Input name="email" />
-        <Button type="submit">Notify me</Button>
-      </OutOfStock>
-    )
-
-    const message = screen.queryByTestId('store-out-of-stock-message')
-
-    expect(message).not.toBeInTheDocument()
-  })
-})
-
-describe('Accessibility', () => {
-  it('should not have violations or incompletes', async () => {
-    const { container } = render(<SimpleOutOfStock />)
-
-    expect(await axe(container)).toHaveNoViolations()
-    expect(await axe(container)).toHaveNoIncompletes()
-  })
-
-  it('Out of Stock component should be a `section`', () => {
-    render(<SimpleOutOfStock />)
-    const outOfStock = screen.getByTestId('store-out-of-stock')
-
-    expect(outOfStock.tagName).toEqual('SECTION')
-  })
-
-  it('Out of Stock `title` component should be a `heading 2` as default', () => {
-    render(<SimpleOutOfStock />)
-    const outOfStockTitle = screen.getByTestId('store-out-of-stock-title')
-
-    expect(outOfStockTitle.tagName).toEqual('H2')
-  })
-
-  it('Out of Stock `message` should be a `paragraph` as default', () => {
-    render(<SimpleOutOfStock />)
-    const outOfStockMessage = screen.getByTestId('store-out-of-stock-message')
-
-    expect(outOfStockMessage.tagName).toEqual('P')
-  })
-
-  it('Out of Stock should render `title` as heading 1 and `message` as span', () => {
-    render(
-      <OutOfStock>
-        <OutOfStockTitle as="h1">Head Out Os Stock</OutOfStockTitle>
-        <OutOfStockMessage as="span">Head Out Os Stock</OutOfStockMessage>
-        <Label>
-          Email
-          <Input />
-        </Label>
-        <Button>Notify me</Button>
-      </OutOfStock>
-    )
-
-    const outOfStockMessage = screen.getByTestId('store-out-of-stock-message')
-    const outOfStockTitle = screen.getByTestId('store-out-of-stock-title')
-
-    expect(outOfStockTitle.tagName).toEqual('H1')
-    expect(outOfStockMessage.tagName).toEqual('SPAN')
-  })
-})

package/src/setupTests.ts

@@ -1,7 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
-import { toHaveNoViolations } from 'jest-axe'
-
-import { toHaveNoIncompletes } from './utils/toHaveNoIncomplete'
-
-expect.extend(toHaveNoViolations)
-expect.extend(toHaveNoIncompletes)

package/src/utils/toHaveNoIncomplete.ts

@@ -1,76 +0,0 @@
-import type { AxeResults } from 'axe-core'
-import { printReceived, matcherHint } from 'jest-matcher-utils'
-import chalk from 'chalk'
-
-// This code is based on jest-axe library.
-// https://github.com/nickcolley/jest-axe
-export const toHaveNoIncompletes = {
-  toHaveNoIncompletes: (results: AxeResults) => {
-    if (typeof results.incomplete === 'undefined') {
-      throw new Error('No incompletes found in aXe results object')
-    }
-
-    const reporter = (incompletes: AxeResults['incomplete']) => {
-      if (incompletes.length === 0) {
-        return []
-      }
-
-      const lineBreak = '\n\n'
-      const horizontalLine = '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500'
-
-      return incompletes
-        .map((incomplete) => {
-          const errorBody = incomplete.nodes
-            .map((node) => {
-              const selector = node.target.join(', ')
-              const expectedText = `Expected the HTML found at $('${selector}') to have no incompletes:${lineBreak}`
-
-              return `${
-                expectedText + chalk.grey(node.html) + lineBreak
-              }Received:${lineBreak}${printReceived(
-                `${incomplete.help} (${incomplete.id})`
-              )}${lineBreak}${chalk.yellow(node.failureSummary)}${lineBreak}${
-                incomplete.helpUrl
-                  ? `You can find more information on this issue here: \n${chalk.blue(
-                      incomplete.helpUrl
-                    )}`
-                  : ''
-              }`
-            })
-            .join(lineBreak)
-
-          return errorBody
-        })
-        .join(lineBreak + horizontalLine + lineBreak)
-    }
-
-    const { incomplete: incompletes } = results
-    const formatedIncompletes = reporter(incompletes)
-    const pass = formatedIncompletes.length === 0
-
-    const message = () => {
-      if (pass) {
-        return ''
-      }
-
-      return (
-        `${matcherHint('.toHaveNoIncompletes')}\n\n` + `${formatedIncompletes}`
-      )
-    }
-
-    return { actual: incompletes, message, pass }
-  },
-}
-
-declare global {
-  // eslint-disable-next-line
-  namespace jest {
-    interface Matchers<R> {
-      toHaveNoIncompletes(): R
-    }
-  }
-
-  // axe-core depends on a global Node
-  // eslint-disable-next-line
-  interface Node {}
-}