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

package/src/molecules/Modal/Modal.test.tsx

@@ -1,241 +0,0 @@
-import type { ReactNode } from 'react'
-import React, { useState } from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-
-import Modal from './Modal'
-import Button from '../../atoms/Button'
-import Input from '../../atoms/Input'
-
-const modalTestId = 'store-modal'
-
-const TestModal = ({
-  children,
-  onDismiss: mockOnDismiss,
-}: {
-  children?: ReactNode
-  onDismiss?: () => void
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const handleOpen = () => {
-    setIsOpen(true)
-  }
-
-  const onDismiss = () => {
-    setIsOpen(false)
-    mockOnDismiss?.()
-  }
-
-  return (
-    <>
-      <Button testId="trigger" onClick={handleOpen}>
-        OpenModal
-      </Button>
-      <Modal isOpen={isOpen} testId={modalTestId} onDismiss={onDismiss}>
-        <Input testId="first-input" />
-        <Button testId="first-button" />
-        {children}
-      </Modal>
-    </>
-  )
-}
-
-describe('Modal', () => {
-  it('The attribute data-fs-modal-content should be present', () => {
-    const { getByTestId } = render(
-      <Modal aria-label="test modal" testId="store-modal" isOpen>
-        Foo
-      </Modal>
-    )
-
-    expect(getByTestId('store-modal')).toHaveAttribute(
-      'data-fs-modal-content'
-    )
-  })
-
-  it('Modal should only be rendered if isOpen is true', () => {
-    // Check that modal won't be rendered
-    const { getByTestId } = render(<TestModal />)
-
-    expect(document.querySelector(`[data-testid="${modalTestId}"]`)).toBeNull()
-
-    fireEvent.click(getByTestId('trigger'))
-
-    expect(getByTestId('store-modal')).toBeInTheDocument()
-  })
-})
-
-describe('Modal WAI-ARIA Specifications', () => {
-  // WAI-ARIA tests
-  // https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
-  it('AXE Test', async () => {
-    render(
-      <Modal aria-label="test modal" testId="store-modal" isOpen>
-        Foo
-      </Modal>
-    )
-
-    expect(await axe(document.body)).toHaveNoViolations()
-    // This is disabled because the useTrapFocus use sentinel div elements
-    // with tabindex and aria-hidden true. This is intentionally, because
-    // these divs shouldn't be considered to accessibility API.
-    expect(
-      await axe(document.body, {
-        rules: { 'aria-hidden-focus': { enabled: false } },
-      })
-    ).toHaveNoIncompletes()
-  })
-
-  it('Focus first element', () => {
-    const { getByTestId } = render(<TestModal />)
-
-    // Open the modal
-    fireEvent.click(getByTestId('trigger'))
-
-    // Check if the first tabbable is focused
-    expect(getByTestId('first-input')).toHaveFocus()
-  })
-
-  it('Loop focus', () => {
-    const { getByTestId } = render(<TestModal />)
-
-    // Open the modal
-    fireEvent.click(getByTestId('trigger'))
-
-    expect(getByTestId('first-input')).toHaveFocus()
-
-    // Simulate loop back: from first to last element
-    fireEvent.keyDown(document.activeElement!, {
-      key: 'Tab',
-      shiftKey: true,
-    })
-
-    fireEvent.focus(getByTestId('beforeElement'))
-    expect(getByTestId('first-button')).toHaveFocus()
-
-    // Simulate loop back: from last to first element
-    fireEvent.keyDown(document.activeElement!, {
-      key: 'Tab',
-    })
-
-    fireEvent.focus(getByTestId('afterElement'))
-    expect(getByTestId('first-input')).toHaveFocus()
-  })
-
-  it('Loop focus inside the child modal', () => {
-    const { getByTestId, getAllByTestId } = render(
-      <TestModal>
-        <TestModal />
-      </TestModal>
-    )
-
-    // Open the first modal
-    fireEvent.click(getByTestId('trigger'))
-
-    const [, secondTrigger] = getAllByTestId('trigger')
-
-    // Open the internal modal
-    fireEvent.click(secondTrigger)
-
-    // Check if the first input of the internal modal is focused
-    expect(secondTrigger).not.toHaveFocus()
-    expect(getAllByTestId('first-input')[1]).toHaveFocus()
-
-    // Simulate loop back: from first to last element of the internal modal
-    fireEvent.keyDown(document.activeElement!, {
-      key: 'Tab',
-      shiftKey: true,
-    })
-
-    fireEvent.focus(getAllByTestId('beforeElement')[1])
-    const [firstButton, secondButton] = getAllByTestId('first-button')
-
-    expect(secondButton).toHaveFocus()
-    expect(firstButton).not.toHaveFocus()
-  })
-
-  it('Focus last element before the modal was opened', () => {
-    const { getByTestId } = render(<TestModal />)
-    const triggerModalButton = getByTestId('trigger')
-
-    // Focus the trigger button that's outside the modal
-    triggerModalButton.focus()
-    expect(triggerModalButton).toHaveFocus()
-
-    fireEvent.click(triggerModalButton)
-
-    // Modal focused something inside, so make sure that's not focused
-    expect(triggerModalButton).not.toHaveFocus()
-
-    // Close the modal
-    fireEvent.click(getByTestId('store-overlay'))
-
-    // Make sure that modal focused back the trigger button after close.
-    expect(triggerModalButton).toHaveFocus()
-  })
-
-  it('Call onDismiss when press escape without tabbable children', () => {
-    const mockDismiss = jest.fn()
-    const { getByTestId } = render(
-      <Modal isOpen testId="store-modal" onDismiss={mockDismiss}>
-        Not focable content
-      </Modal>
-    )
-
-    fireEvent.keyDown(getByTestId('store-modal'), { key: 'Escape' })
-    expect(mockDismiss).toHaveBeenCalled()
-  })
-
-  it('Call onDismiss when press escape with tabbable children', () => {
-    const mockDismiss = jest.fn()
-    const { getByTestId } = render(<TestModal onDismiss={mockDismiss} />)
-
-    fireEvent.click(getByTestId('trigger'))
-
-    // Pressing any key other than 'Escape' won't close the modal
-    fireEvent.keyPress(getByTestId('store-modal'), { key: 'j' })
-    expect(mockDismiss).not.toHaveBeenCalled()
-
-    // Press Escape
-    fireEvent.keyDown(getByTestId('store-modal'), {
-      key: 'Escape',
-    })
-
-    expect(mockDismiss).toHaveBeenCalled()
-  })
-
-  it('Call only the onDismiss from internal modal when press escape', () => {
-    const mockExternalDismiss = jest.fn()
-    const mockInternalDismiss = jest.fn()
-    const { getByTestId, getAllByTestId } = render(
-      <TestModal onDismiss={mockExternalDismiss}>
-        <TestModal onDismiss={mockInternalDismiss} />
-      </TestModal>
-    )
-
-    fireEvent.click(getByTestId('trigger'))
-    fireEvent.click(getAllByTestId('trigger')[1])
-
-    expect(getAllByTestId('store-modal')[1]).toBeInTheDocument()
-
-    // Press Escape on internal modal. Only the internal modal should close
-    fireEvent.keyDown(getAllByTestId('store-modal')[1], {
-      key: 'Escape',
-    })
-
-    expect(mockExternalDismiss).not.toHaveBeenCalled()
-    expect(mockInternalDismiss).toHaveBeenCalled()
-  })
-
-  it('Call onDismiss when click outside the modal', () => {
-    const mockDismiss = jest.fn()
-    const { getByTestId } = render(<TestModal onDismiss={mockDismiss} />)
-
-    fireEvent.click(getByTestId('trigger'))
-
-    // Close the modal
-    fireEvent.click(getByTestId('store-overlay'))
-
-    expect(mockDismiss).toHaveBeenCalled()
-  })
-})

package/src/molecules/OrderSummary/OrderSummary.test.tsx

@@ -1,103 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import OrderSummary from './OrderSummary'
-
-const ELEMENT_NOT_FOUND_MESSAGE = 'Unable to find an element by:'
-
-describe('OrderSummary', () => {
-  it('should have `data-fs-order-summary` attribute', () => {
-    const { getByTestId } = render(<OrderSummary />)
-
-    expect(getByTestId('store-order-summary')).toHaveAttribute(
-      'data-fs-order-summary'
-    )
-  })
-
-  it('should always render total labels and values elements', async () => {
-    const { getByTestId } = render(<OrderSummary />)
-
-    expect(getByTestId('store-order-summary-total-label')).toBeInTheDocument()
-    expect(getByTestId('store-order-summary-total-value')).toBeInTheDocument()
-  })
-
-  it('should not render subtotal or discount labels and values if subtotalValue or discountValue are not provided', async () => {
-    const { getByTestId } = render(
-      <OrderSummary totalLabel="Total" totalValue="250$" />
-    )
-
-    expect(() =>
-      getByTestId('store-order-summary-subtotal-label')
-    ).toThrowError(ELEMENT_NOT_FOUND_MESSAGE)
-    expect(() => getByTestId('store-order-summary-subtotal-value')).toThrow(
-      ELEMENT_NOT_FOUND_MESSAGE
-    )
-
-    expect(() => getByTestId('store-order-summary-discount-label')).toThrow(
-      ELEMENT_NOT_FOUND_MESSAGE
-    )
-    expect(() => getByTestId('store-order-summary-discount-value')).toThrow(
-      ELEMENT_NOT_FOUND_MESSAGE
-    )
-  })
-
-  it('should render subtotal label and value if subtotalValue is provided', async () => {
-    const { getByTestId } = render(
-      <OrderSummary
-        subtotalLabel="Subtotal"
-        totalLabel="Total"
-        subtotalValue="300$"
-        totalValue="250$"
-      />
-    )
-
-    expect(
-      getByTestId('store-order-summary-subtotal-label')
-    ).toBeInTheDocument()
-    expect(getByTestId('store-order-summary-subtotal-label')).toHaveTextContent(
-      'Subtotal'
-    )
-
-    expect(
-      getByTestId('store-order-summary-subtotal-value')
-    ).toBeInTheDocument()
-    expect(getByTestId('store-order-summary-subtotal-value')).toHaveTextContent(
-      '300$'
-    )
-  })
-
-  it('should render discount label and value if discountValue is provided', async () => {
-    const { getByTestId } = render(
-      <OrderSummary
-        subtotalLabel="Subtotal"
-        totalLabel="Total"
-        subtotalValue="300$"
-        totalValue="250$"
-        discountLabel="Discount"
-        discountValue="-50$"
-      />
-    )
-
-    expect(
-      getByTestId('store-order-summary-discount-label')
-    ).toBeInTheDocument()
-    expect(getByTestId('store-order-summary-discount-label')).toHaveTextContent(
-      'Discount'
-    )
-    expect(
-      getByTestId('store-order-summary-discount-value')
-    ).toBeInTheDocument()
-    expect(getByTestId('store-order-summary-discount-value')).toHaveTextContent(
-      '-50$'
-    )
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<OrderSummary />)
-
-      expect(await axe(getByTestId('store-order-summary'))).toHaveNoViolations()
-    })
-  })
-})

package/src/molecules/PaymentMethods/PaymentMethods.test.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import PaymentMethods from './PaymentMethods'
-
-describe('Payment methods', () => {
-  let paymentMethodsData: HTMLElement
-
-  beforeEach(() => {
-    const { getByTestId } = render(
-      <PaymentMethods title="I am a title">
-        <h3>I am a flag</h3>
-      </PaymentMethods>
-    )
-
-    paymentMethodsData = getByTestId('store-payment-methods')
-  })
-
-  it('should have `data-fs-payment-methods` attribute', () => {
-    expect(paymentMethodsData).toHaveAttribute('data-fs-payment-methods')
-  })
-
-  it('Should render PaymentMethods Children', () => {
-    expect(paymentMethodsData).toHaveTextContent('I am a flag')
-  })
-
-  it('Should render PaymentMethods title', () => {
-    expect(paymentMethodsData).toHaveTextContent('I am a title')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      expect(await axe(paymentMethodsData)).toHaveNoViolations()
-    })
-  })
-})

package/src/molecules/PriceRange/PriceRange.test.tsx

@@ -1,70 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import PriceRange from './PriceRange'
-
-function formatter(price: number) {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(price)
-}
-
-const props = {
-  formatter,
-  min: {
-    absolute: 0,
-    selected: 0,
-  },
-  max: {
-    absolute: 100,
-    selected: 100,
-  },
-  ariaLabel: 'My price range',
-}
-
-describe('PriceRange', () => {
-  it('`data-fs-price-range` is present', () => {
-    const { getByTestId } = render(<PriceRange {...props} />)
-
-    expect(getByTestId('store-price-range')).toHaveAttribute(
-      'data-fs-price-range'
-    )
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { container } = render(<PriceRange {...props} />)
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have expected aria and role attributes', () => {
-      const { getByTestId } = render(<PriceRange {...props} />)
-
-      // check aria-valuemin, aria-valuemax
-      expect(
-        getByTestId('store-price-range').querySelectorAll('[aria-valuemin="0"]')
-      ).toHaveLength(2)
-      expect(
-        getByTestId('store-price-range').querySelectorAll(
-          '[aria-valuemax="100"]'
-        )
-      ).toHaveLength(2)
-
-      expect(
-        getByTestId('store-price-range').querySelector('[aria-valuenow="0"]')
-      ).toBeInTheDocument()
-
-      expect(
-        getByTestId('store-price-range').querySelector('[aria-valuenow="100"]')
-      ).toBeInTheDocument()
-
-      // check role slider. input type=range has implicit role slider
-      expect(
-        getByTestId('store-price-range').querySelectorAll('input[type="range"]')
-      ).toHaveLength(2)
-    })
-  })
-})

package/src/molecules/ProductCard/ProductCard.test.tsx

@@ -1,75 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import ProductCard from './ProductCard'
-import ProductCardImage from './ProductCardImage'
-import ProductCardContent from './ProductCardContent'
-import ProductCardActions from './ProductCardActions'
-
-const TestProductCard = () => {
-  return (
-    <ProductCard>
-      <ProductCardImage>
-        <div>An image</div>
-      </ProductCardImage>
-      <ProductCardContent>
-        <h3>A title</h3>
-        <p>A little text here: The quick brown fox jumps over the lazy dog.</p>
-      </ProductCardContent>
-      <ProductCardActions>
-        <button>A button</button>
-      </ProductCardActions>
-    </ProductCard>
-  )
-}
-
-describe('ProductCard', () => {
-  let productCard: HTMLElement
-  let productCardImage: HTMLElement
-  let productCardContent: HTMLElement
-  let productCardActions: HTMLElement
-  let productCardContainer: HTMLElement
-
-  beforeEach(() => {
-    const { getByTestId, container } = render(<TestProductCard />)
-
-    productCardContainer = container
-    productCard = getByTestId('store-product-card')
-    productCardImage = getByTestId('store-product-card-image')
-    productCardContent = getByTestId('store-product-card-content')
-    productCardActions = getByTestId('store-product-card-actions')
-  })
-
-  describe('Data attributes', () => {
-    it('`ProductCard` component should have `data-fs-product-card` attribute', () => {
-      expect(productCard).toHaveAttribute('data-fs-product-card')
-    })
-
-    it('`ProductCardContent` component should have `data-product-card-content` attribute', () => {
-      expect(productCardContent).toHaveAttribute('data-product-card-content')
-    })
-
-    it('`ProductCardImage` component should have `data-product-card-image` attribute', () => {
-      expect(productCardImage).toHaveAttribute('data-product-card-image')
-    })
-
-    it('`ProductCardActions` component should have `data-product-card-actions` attribute', () => {
-      expect(productCardActions).toHaveAttribute('data-product-card-actions')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should not have violations', async () => {
-      expect(await axe(productCardContainer)).toHaveNoViolations()
-    })
-
-    it('`ProductCard` component should be an `article`', () => {
-      expect(productCard.tagName).toEqual('ARTICLE')
-    })
-
-    it('`productCardContent` component should be an `section`', () => {
-      expect(productCardContent.tagName).toEqual('SECTION')
-    })
-  })
-})

package/src/molecules/QuantitySelector/QuantitySelector.test.tsx

@@ -1,93 +0,0 @@
-import { render } from '@testing-library/react'
-import React, { useState } from 'react'
-import userEvent from '@testing-library/user-event'
-import { axe } from 'jest-axe'
-
-import QuantitySelector from '.'
-
-describe('QuantitySelector', () => {
-  it('should render', () => {
-    const { getByTestId } = render(
-      <QuantitySelector
-        name="quantity-selector"
-        quantity={1}
-        leftButtonProps={{ icon: <span>-</span> }}
-        rightButtonProps={{ icon: <span>+</span> }}
-        inputProps={{ readOnly: true }}
-      />
-    )
-
-    expect(getByTestId('store-quantity-selector')).toBeInTheDocument()
-  })
-
-  it('should render with the correct quantity', () => {
-    const { getByLabelText } = render(
-      <QuantitySelector
-        name="quantity-selector"
-        quantity={123}
-        leftButtonProps={{ icon: <span>-</span> }}
-        rightButtonProps={{ icon: <span>+</span> }}
-        inputProps={{ readOnly: true }}
-      />
-    )
-
-    expect(getByLabelText('Quantity')).toHaveValue('123')
-  })
-
-  it('should update correctly according to event changes', () => {
-    const QuantitySelectorTest = () => {
-      const [quantity, setQuantity] = useState(1)
-
-      return (
-        <QuantitySelector
-          name="quantity-selector"
-          quantity={quantity}
-          leftButtonProps={{
-            icon: <span>-</span>,
-            onClick: () => {
-              setQuantity((curr) => curr - 1)
-            },
-          }}
-          rightButtonProps={{
-            icon: <span>+</span>,
-            onClick: () => {
-              setQuantity((curr) => curr + 1)
-            },
-          }}
-          inputProps={{ readOnly: true }}
-        />
-      )
-    }
-
-    const { getByLabelText } = render(<QuantitySelectorTest />)
-
-    expect(getByLabelText('Quantity')).toHaveValue('1')
-
-    const rightButton = getByLabelText('Increment Quantity')
-    const leftButton = getByLabelText('Decrement Quantity')
-
-    userEvent.click(rightButton)
-    expect(getByLabelText('Quantity')).toHaveValue('2')
-    userEvent.click(leftButton)
-    expect(getByLabelText('Quantity')).toHaveValue('1')
-  })
-
-  describe('QuantitySelector Accessibility', () => {
-    it('should pass the AXE tests', async () => {
-      render(
-        <main>
-          <QuantitySelector
-            name="quantity-selector"
-            quantity={1}
-            leftButtonProps={{ icon: <span>-</span> }}
-            rightButtonProps={{ icon: <span>+</span> }}
-            inputProps={{ readOnly: true }}
-          />
-        </main>
-      )
-
-      expect(await axe(document.body)).toHaveNoViolations()
-      expect(await axe(document.body)).toHaveNoIncompletes()
-    })
-  })
-})