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

package/src/atoms/TextArea/TextArea.test.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-
-import TextArea from './TextArea'
-
-const testId = 'store-textarea'
-
-describe('TextArea', () => {
-  it('data-fs-textarea is present', () => {
-    const { getByTestId } = render(<TextArea testId={testId} />)
-
-    expect(getByTestId(testId)).toHaveAttribute('data-fs-textarea')
-  })
-
-  it('state is error', () => {
-    const { getByTestId } = render(<TextArea testId={testId} variant="error" />)
-
-    expect(getByTestId(testId)).toHaveAttribute('data-error', 'true')
-    expect(getByTestId(testId)).not.toHaveAttribute('data-success')
-  })
-
-  it('state is success', () => {
-    const { getByTestId } = render(
-      <TextArea testId={testId} variant="success" />
-    )
-
-    expect(getByTestId(testId)).toHaveAttribute('data-success', 'true')
-    expect(getByTestId(testId)).not.toHaveAttribute('data-error')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations using aria-label', async () => {
-      const { container } = render(
-        <TextArea
-          aria-label="label textarea for test"
-          testId="store-textarea"
-        />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using aria-labelledby', async () => {
-      const { container } = render(
-        <>
-          <span id="label">My test label</span>
-          <TextArea aria-labelledby="label" testId="store-textarea" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using placeholder', async () => {
-      const { container } = render(
-        <TextArea
-          placeholder="Accessibility placeholder"
-          testId="store-textarea"
-        />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using id with explicit label', async () => {
-      const { container } = render(
-        <>
-          <label htmlFor="textarea">My test label</label>
-          <TextArea id="textarea" testId="store-textarea" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-  })
-})

package/src/hooks/useSlider/useSlider.test.ts

@@ -1,176 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import useSlider from './useSlider'
-
-describe('useSlider', () => {
-  it('should initialize sliderState correctly', () => {
-    const expectedSliderState = {
-      currentItem: 0,
-      currentPage: 0,
-      sliding: false,
-      slideDirection: 'next',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    }
-
-    const { result: returnValue } = renderHook(() =>
-      useSlider({
-        totalItems: 5,
-        itemsPerPage: 2,
-        infiniteMode: false,
-      })
-    )
-
-    const receivedSliderState = returnValue.current.sliderState
-
-    expect(receivedSliderState).toEqual(expectedSliderState)
-  })
-
-  it('should go to next page and update state accordingly', () => {
-    const { result } = renderHook(() =>
-      useSlider({
-        totalItems: 5,
-        itemsPerPage: 2,
-        infiniteMode: false,
-      })
-    )
-
-    const finalState = {
-      currentItem: 2,
-      currentPage: 1,
-      sliding: true,
-      slideDirection: 'next',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    }
-
-    const { sliderDispatch } = result.current
-
-    act(() => {
-      sliderDispatch({ type: 'NEXT_PAGE' })
-    })
-
-    expect(result.current.sliderState).toEqual(finalState)
-  })
-
-  it('should go to previous page and update state accordingly', () => {
-    const { result } = renderHook(() =>
-      useSlider({
-        totalItems: 5,
-        itemsPerPage: 2,
-        infiniteMode: false,
-      })
-    )
-
-    const { sliderDispatch } = result.current
-
-    act(() => {
-      sliderDispatch({ type: 'PREVIOUS_PAGE' })
-    })
-
-    expect(result.current.sliderState).toEqual({
-      currentItem: 4,
-      currentPage: 2,
-      sliding: true,
-      slideDirection: 'previous',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    })
-
-    act(() => {
-      sliderDispatch({ type: 'PREVIOUS_PAGE' })
-    })
-
-    expect(result.current.sliderState).toEqual({
-      currentItem: 2,
-      currentPage: 1,
-      sliding: true,
-      slideDirection: 'previous',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    })
-  })
-
-  it('should go to a certain page and update state accordingly', () => {
-    const { result } = renderHook(() =>
-      useSlider({
-        totalItems: 5,
-        itemsPerPage: 2,
-        infiniteMode: false,
-      })
-    )
-
-    const { sliderDispatch } = result.current
-
-    act(() => {
-      sliderDispatch({
-        type: 'GO_TO_PAGE',
-        payload: {
-          pageIndex: 1,
-          shouldSlide: true,
-        },
-      })
-    })
-
-    expect(result.current.sliderState).toEqual({
-      currentItem: 2,
-      currentPage: 1,
-      sliding: true,
-      slideDirection: 'next',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    })
-
-    act(() => {
-      sliderDispatch({
-        type: 'GO_TO_PAGE',
-        payload: {
-          pageIndex: 2,
-          shouldSlide: true,
-        },
-      })
-    })
-
-    expect(result.current.sliderState).toEqual({
-      currentItem: 4,
-      currentPage: 2,
-      sliding: true,
-      slideDirection: 'next',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    })
-
-    act(() => {
-      sliderDispatch({
-        type: 'GO_TO_PAGE',
-        payload: {
-          pageIndex: 0,
-          shouldSlide: true,
-        },
-      })
-    })
-
-    expect(result.current.sliderState).toEqual({
-      currentItem: 0,
-      currentPage: 0,
-      sliding: true,
-      slideDirection: 'previous',
-      totalItems: 5,
-      itemsPerPage: 2,
-      totalPages: 3,
-      infinite: false,
-    })
-  })
-})

package/src/molecules/Accordion/Accordion.test.tsx

@@ -1,226 +0,0 @@
-import { render, fireEvent, cleanup } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React, { useState } from 'react'
-
-import Accordion from './Accordion'
-import AccordionItem from './AccordionItem'
-import AccordionButton from './AccordionButton'
-import AccordionPanel from './AccordionPanel'
-
-const TestAccordion = () => {
-  const [indices, setIndices] = useState<number[]>([])
-  const onChange = (index: number) => {
-    if (indices.includes(index)) {
-      setIndices(indices.filter((currentIndex) => currentIndex !== index))
-    } else {
-      setIndices([...indices, index])
-    }
-  }
-
-  return (
-    <Accordion
-      aria-label="test accordion"
-      indices={indices}
-      onChange={onChange}
-    >
-      <AccordionItem>
-        <AccordionButton>Clothing</AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Shorts</a>
-            </li>
-            <li>
-              <a href="/">Sweatshirt</a>
-            </li>
-            <li>
-              <a href="/">Tank tops</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-
-      <AccordionItem>
-        <AccordionButton>Sale</AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Smartphones</a>
-            </li>
-            <li>
-              <a href="/">TVs</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-describe('Accordion', () => {
-  let accordion: HTMLElement
-  let items: HTMLElement[]
-  let buttons: HTMLElement[]
-  let panels: HTMLElement[]
-
-  beforeEach(() => {
-    const { getByTestId, getAllByTestId } = render(<TestAccordion />)
-
-    accordion = getByTestId('store-accordion')
-    items = getAllByTestId('store-accordion-item')
-    buttons = getAllByTestId('store-accordion-button')
-    panels = getAllByTestId('store-accordion-panel')
-  })
-
-  afterEach(cleanup)
-
-  it('should show panel specified by `indices`', () => {
-    const { getAllByTestId } = render(
-      <Accordion indices={[1]} onChange={() => null}>
-        <AccordionItem>
-          <AccordionButton />
-          <AccordionPanel testId="store-accordion-panel-mock" />
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionButton />
-          <AccordionPanel testId="store-accordion-panel-mock" />
-        </AccordionItem>
-      </Accordion>
-    )
-
-    const panelsMock = getAllByTestId('store-accordion-panel-mock')
-
-    expect(panelsMock[0]).not.toBeVisible()
-    expect(panelsMock[1]).toBeVisible()
-  })
-
-  it('should prevent duplicate IDs when using the `prefixID` attribute', () => {
-    const { getAllByTestId } = render(
-      <>
-        <Accordion indices={[]} onChange={() => null}>
-          <AccordionItem prefixId="filter">
-            <AccordionButton testId="data-accordion-button" />
-            <AccordionPanel testId="data-accordion-panel" />
-          </AccordionItem>
-        </Accordion>
-        <Accordion indices={[]} onChange={() => null}>
-          <AccordionItem prefixId="footer">
-            <AccordionButton testId="data-accordion-button" />
-            <AccordionPanel testId="data-accordion-panel" />
-          </AccordionItem>
-        </Accordion>
-      </>
-    )
-
-    const allPanels = getAllByTestId('data-accordion-panel')
-    const allButtons = getAllByTestId('data-accordion-button')
-
-    // Attributes
-    expect(allPanels[0]).toHaveAttribute('id', 'filter-panel--0')
-    expect(allPanels[1]).toHaveAttribute('id', 'footer-panel--0')
-    expect(allButtons[0]).toHaveAttribute('id', 'filter-button--0')
-    expect(allButtons[1]).toHaveAttribute('id', 'footer-button--0')
-
-    // Equality assertions
-    expect(allPanels[0].id).not.toEqual(allPanels[1].id)
-    expect(allButtons[0].id).not.toEqual(allButtons[1].id)
-  })
-
-  describe('Data attributes', () => {
-    it('`Accordion` component should have `data-fs-accordion` attribute', () => {
-      expect(accordion).toHaveAttribute('data-fs-accordion')
-    })
-
-    it('`AccordionItem` component should have `data-accordion-item` attribute', () => {
-      for (const item of items) {
-        expect(item).toHaveAttribute('data-accordion-item')
-      }
-    })
-
-    it('`AccordionButton` component should have `data-accordion-button` attribute', () => {
-      for (const button of buttons) {
-        expect(button).toHaveAttribute('data-accordion-button')
-      }
-    })
-
-    it('`AccordionPanel` component should have `data-accordion-panel` attribute', () => {
-      for (const panel of panels) {
-        expect(panel).toHaveAttribute('data-accordion-panel')
-      }
-    })
-  })
-
-  describe('User actions', () => {
-    it('clicking item should call `onChange` function', () => {
-      const mockOnChange = jest.fn()
-      const { getByTestId } = render(
-        <Accordion onChange={mockOnChange} indices={[]}>
-          <AccordionItem>
-            <AccordionButton testId="store-accordion-button-mock" />
-          </AccordionItem>
-        </Accordion>
-      )
-
-      const button = getByTestId('store-accordion-button-mock')
-
-      fireEvent.click(button)
-      expect(mockOnChange).toHaveBeenCalledTimes(1)
-    })
-
-    it('should move focus to the next focusable button on `ArrowDown` press', () => {
-      buttons[1].focus()
-      expect(buttons[1]).toHaveFocus()
-      fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' })
-      expect(buttons[0]).toHaveFocus()
-    })
-
-    it('should move focus to the previous focusable button on `ArrowUp` press', () => {
-      buttons[1].focus()
-      expect(buttons[1]).toHaveFocus()
-      fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' })
-      expect(buttons[0]).toHaveFocus()
-    })
-  })
-
-  describe('Accessibility', () => {
-    // WAI-ARIA tests
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#accordion
-    it('should not have violations', async () => {
-      expect(await axe(document.body)).toHaveNoViolations()
-
-      // Open a panel and check again
-      fireEvent.click(buttons[0])
-      expect(await axe(document.body)).toHaveNoViolations()
-    })
-
-    it('`role` should be set to `region` for panel elements', () => {
-      for (const panel of panels) {
-        expect(panel).toHaveAttribute('role', 'region')
-      }
-    })
-
-    it('`aria-labelledby` for panel elements should point to the corresponding button', () => {
-      panels.forEach((panel, index) => {
-        expect(panel).toHaveAttribute(
-          'aria-labelledby',
-          buttons[index].getAttribute('id')
-        )
-      })
-    })
-
-    it('`aria-controls` for button elements should point to the corresponding panel', () => {
-      buttons.forEach((button, index) => {
-        expect(button).toHaveAttribute(
-          'aria-controls',
-          panels[index].getAttribute('id')
-        )
-      })
-    })
-
-    it('`aria-expanded` should be true only for active button', () => {
-      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false')
-      fireEvent.click(buttons[0])
-      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true')
-    })
-  })
-})

package/src/molecules/AggregateRating/AggregateRating.test.tsx

@@ -1,87 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import AggregateRating from './AggregateRating'
-
-const fillCheck = (value: number) => {
-  if (value >= 1) {
-    return 'full'
-  }
-
-  if (0 < value && value < 1) {
-    return 'partial'
-  }
-
-  return 'empty'
-}
-
-describe('AggregateRating', () => {
-  it('`data-fs-aggregate-rating` is present', () => {
-    const { getByTestId } = render(
-      <AggregateRating value={2}>
-        <span />
-        <span />
-        <span />
-        <span />
-        <span />
-      </AggregateRating>
-    )
-
-    expect(getByTestId('store-aggregate-rating')).toHaveAttribute(
-      'data-fs-aggregate-rating'
-    )
-  })
-
-  it('has the correct aggregate rating item data attribute', () => {
-    const { queryAllByTestId, rerender } = render(
-      <AggregateRating value={2}>
-        <span />
-      </AggregateRating>
-    )
-
-    // Test 5 random values and sizes in Aggregate Rating component.
-    for (let i = 1; i <= 5; i += 1) {
-      // Random value between 1 and 10
-      const numberOfElements = Math.ceil(Math.random() * 10)
-      const value = parseFloat((Math.random() * numberOfElements).toFixed(1))
-
-      rerender(
-        <AggregateRating value={value}>
-          {Array.from({ length: numberOfElements })}
-        </AggregateRating>
-      )
-
-      const ratingItems = queryAllByTestId('store-aggregate-rating-item')
-
-      // Validate if it's rendering with the correct number of ratings.
-      expect(ratingItems).toHaveLength(numberOfElements)
-
-      // Validate if each rating element has the correct attribute.
-      for (
-        let currentItemNumber = 0;
-        currentItemNumber < numberOfElements;
-        currentItemNumber += 1
-      ) {
-        expect(ratingItems[currentItemNumber]).toHaveAttribute(
-          'data-fs-aggregate-rating-item',
-          fillCheck(value - currentItemNumber)
-        )
-      }
-    }
-  })
-
-  it('AXE Test', async () => {
-    render(
-      <AggregateRating value={3}>
-        <span />
-        <span />
-        <span />
-        <span />
-        <span />
-      </AggregateRating>
-    )
-
-    expect(await axe(document.body)).toHaveNoViolations()
-  })
-})

package/src/molecules/Alert/Alert.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Alert from './Alert'
-
-describe('Alert', () => {
-  describe('Data attributes', () => {
-    it('should have `data-fs-alert` attribute', () => {
-      const { getByTestId } = render(<Alert>Testing</Alert>)
-
-      expect(getByTestId('store-alert')).toHaveAttribute('data-fs-alert')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<Alert />)
-
-      expect(await axe(getByTestId('store-alert'))).toHaveNoViolations()
-    })
-  })
-})

package/src/molecules/Banner/Banner.test.tsx

@@ -1,67 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Banner from './Banner'
-import BannerImage from './BannerImage'
-import BannerContent from './BannerContent'
-import BannerLink from './BannerLink'
-
-const BannerTest = () => {
-  return (
-    <Banner data-custom-attribute>
-      <BannerImage>
-        <img
-          alt="A person with hands on the pocket, carrying a round straw bag"
-          src="https://storecomponents.vtex.app/assets/fit-in/1280x613/center/middle/https%3A%2F%2Fstorecomponents.vtexassets.com%2Fassets%2Fvtex.file-manager-graphql%2Fimages%2Fedce348c-068c-4fb9-91f2-7d235d596e0f___b2822f893b14f87337d08f07f0e520ab.jpg"
-        />
-      </BannerImage>
-      <BannerContent>
-        <div>
-          <h3>Get yo know our next release</h3>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </div>
-        <BannerLink>Shop now</BannerLink>
-      </BannerContent>
-    </Banner>
-  )
-}
-
-describe('Banner', () => {
-  describe('Data attributes', () => {
-    const { getByTestId } = render(<BannerTest />)
-
-    const banner = getByTestId('store-banner')
-    const bannerImage = getByTestId('store-banner-image')
-    const bannerContent = getByTestId('store-banner-content')
-    const bannerLink = getByTestId('store-banner-link')
-
-    it('`Banner` component should have `data-fs-banner` attribute', () => {
-      expect(banner).toHaveAttribute('data-fs-banner')
-    })
-
-    it('`Banner` component should have custom data attribute `data-custom-attribute`', () => {
-      expect(banner).toHaveAttribute('data-custom-attribute')
-    })
-
-    it('`BannerImage` component should have `data-banner-image` attribute', () => {
-      expect(bannerImage).toHaveAttribute('data-banner-image')
-    })
-
-    it('`BannerContent` component should have `data-banner-content` attribute', () => {
-      expect(bannerContent).toHaveAttribute('data-banner-content')
-    })
-
-    it('`BannerLink` component should have `data-banner-link` attribute', () => {
-      expect(bannerLink).toHaveAttribute('data-banner-link')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<BannerTest />)
-
-      expect(await axe(getByTestId('store-banner'))).toHaveNoViolations()
-    })
-  })
-})