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

package/src/molecules/Breadcrumb/Breadcrumb.test.tsx

@@ -1,124 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Breadcrumb from './Breadcrumb'
-
-describe('Breadcrumb', () => {
-  it('`data-fs-breadcrumb` is present', () => {
-    const { getByTestId } = render(<Breadcrumb />)
-
-    expect(getByTestId('store-breadcrumb')).toHaveAttribute(
-      'data-fs-breadcrumb'
-    )
-  })
-
-  it('has the correct breadcrumb size and active item is always the last breadcrumb item', () => {
-    const { queryAllByTestId, rerender } = render(<Breadcrumb />)
-
-    // Test 10 different breadcrumbs, from 1 level to 10 levels.
-    for (let breadcrumbSize = 1; breadcrumbSize <= 10; breadcrumbSize += 1) {
-      // Creates a generic breadcrumb data.
-      const breadcrumb = Array.from(
-        { length: breadcrumbSize },
-        (_: undefined, index: number) => ({
-          text: `Level ${index}`,
-        })
-      )
-
-      rerender(
-        <Breadcrumb>
-          {breadcrumb.map(({ text }) => (
-            <span key={text}>{text}</span>
-          ))}
-        </Breadcrumb>
-      )
-
-      const breadcrumbItems = queryAllByTestId('store-breadcrumb-item')
-
-      // Validate that breadcrumb is rendering with the correct size.
-      expect(breadcrumbItems).toHaveLength(breadcrumbSize)
-      // Validate if the last element has the 'data-breadcrumb-item=current' active attribute.
-      expect(breadcrumbItems[breadcrumbSize - 1]).toHaveAttribute(
-        'data-breadcrumb-item',
-        'current'
-      )
-
-      // Get all elements except the last one.
-      breadcrumbItems.pop()
-
-      // Validate that no other element has the 'data-breadcrumb-item=current' attribute
-      breadcrumbItems.forEach((item) => {
-        expect(item).not.toHaveAttribute('data-breadcrumb-item', 'current')
-      })
-
-      // Validate that all elements have the 'data-breadcrumb-item' attribute,
-      // regardless of value
-      breadcrumbItems.forEach((item) => {
-        expect(item).toHaveAttribute('data-breadcrumb-item')
-      })
-    }
-  })
-
-  it('renders an <ol> with valid HTML as children (only <li>s)', () => {
-    const { getByRole } = render(
-      <Breadcrumb divider="/">
-        <a href="/office">Office</a>
-        <a href="/office/chairs">Chairs</a>
-      </Breadcrumb>
-    )
-
-    const listItems = getByRole('list').children
-
-    for (const item of Array.from(listItems)) {
-      expect(item.nodeName).toEqual('LI')
-    }
-
-    expect(listItems).toHaveLength(2)
-  })
-
-  it('renders `n - 1` dividers, where `n` is the number of list items', () => {
-    const { queryAllByText } = render(
-      <Breadcrumb divider={<span>~</span>}>
-        <a href="/office">Office</a>
-        <a href="/office/chairs">Chairs</a>
-        <a href="/office/chairs/tulip">Tulip</a>
-      </Breadcrumb>
-    )
-
-    const dividers = queryAllByText('~')
-
-    for (const divider of Array.from(dividers)) {
-      expect(divider).toHaveAttribute('aria-hidden', 'true')
-    }
-
-    expect(dividers).toHaveLength(2)
-  })
-
-  it('Should not render null values', () => {
-    const { getAllByTestId } = render(
-      <Breadcrumb>
-        <a href="/office">Office</a>
-        <a href="/office/chairs">Chairs</a>
-        <a href="/office/chairs/tulip">Tulip</a>
-        {false && <a href="/office/chairs/tulip/red">Tulip Red</a>}
-        {null}
-      </Breadcrumb>
-    )
-
-    expect(getAllByTestId('store-breadcrumb-item')).toHaveLength(3)
-  })
-
-  it('AXE Test', async () => {
-    render(
-      <Breadcrumb aria-label="test modal" divider="/">
-        <span>Home</span>
-        <span>Level 1</span>
-        <span>Level 2</span>
-      </Breadcrumb>
-    )
-
-    expect(await axe(document.body)).toHaveNoViolations()
-    expect(await axe(document.body)).toHaveNoIncompletes()
-  })
-})

package/src/molecules/Bullets/Bullets.test.tsx

@@ -1,128 +0,0 @@
-import { render, act, fireEvent } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Bullets from './Bullets'
-
-describe('Bullets', () => {
-  it('should have `data-fs-bullets` attribute', () => {
-    const { getByTestId } = render(
-      <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
-    )
-
-    expect(getByTestId('store-bullets')).toHaveAttribute('data-fs-bullets')
-  })
-
-  it('should render 5 bullets with `data-fs-bullet` attribute', () => {
-    const { queryAllByTestId } = render(
-      <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
-    )
-
-    const bulletItems = queryAllByTestId('store-bullets-bullet')
-
-    expect(bulletItems).toHaveLength(5)
-
-    bulletItems.forEach((bullet) =>
-      expect(bullet).toHaveAttribute('data-fs-bullet')
-    )
-  })
-
-  it('should render only the currently active bullet with an `aria-selected` equal to true', () => {
-    const { queryAllByTestId } = render(
-      <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
-    )
-
-    const bulletItems = queryAllByTestId('store-bullets-bullet')
-
-    // eslint-disable-next-line prefer-destructuring
-    const expectedActiveBullet = bulletItems[2]
-
-    expect(bulletItems).toHaveLength(5)
-    expect(expectedActiveBullet).toHaveAttribute('aria-selected', 'true')
-
-    // Remove the currently active bullet, at index 2
-    bulletItems.splice(2, 1)
-    // Validate that no other element has the 'aria-selected' equal to true
-    bulletItems.forEach((bullet) => {
-      expect(bullet).toHaveAttribute('aria-selected', 'false')
-    })
-  })
-
-  it('should ensure that onClick is called with the correct bullet index', () => {
-    const updateCurrentBulletMock = jest.fn()
-
-    const { queryAllByTestId } = render(
-      <Bullets
-        totalQuantity={5}
-        activeBullet={2}
-        onClick={updateCurrentBulletMock}
-      />
-    )
-
-    const bulletItems = queryAllByTestId('store-bullets-bullet')
-
-    expect(bulletItems).toHaveLength(5)
-
-    // Each bullet is rendered with a <Button /> inside, and the button gets
-    // the onClick handler.
-
-    act(() => {
-      // 'click' the bullet at index 3 (the 4th visible bullet)
-      fireEvent.click(bulletItems[3])
-    })
-
-    expect(updateCurrentBulletMock).toHaveBeenCalledTimes(1)
-    expect(updateCurrentBulletMock).toHaveBeenCalledWith(expect.any(Object), 3)
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations on a default use case', async () => {
-      const { getByTestId } = render(
-        <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
-      )
-
-      expect(await axe(getByTestId('store-bullets'))).toHaveNoViolations()
-    })
-
-    it('should have no violations with ariaControlsGenerator', async () => {
-      const { container } = render(
-        <>
-          <div id="item-1">content for bullets</div>
-          <Bullets
-            totalQuantity={1}
-            activeBullet={0}
-            onClick={() => null}
-            ariaControlsGenerator={(idx: number) => `item-${idx + 1}`}
-          />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have expected roles and aria-controls attributes', () => {
-      const { getAllByRole, getByTestId } = render(
-        <>
-          <div id="item-1">content for bullets</div>
-          <div id="item-2">content for bullets</div>
-          <Bullets
-            totalQuantity={2}
-            activeBullet={0}
-            onClick={() => null}
-            ariaControlsGenerator={(idx: number) => `item-${idx + 1}`}
-          />
-        </>
-      )
-
-      // Check roles
-      expect(getAllByRole('tablist')).toHaveLength(1)
-      expect(getAllByRole('tab')).toHaveLength(2)
-      expect(getAllByRole('tab', { selected: true })).toHaveLength(1)
-
-      // Check bullets aria-controls
-      expect(
-        getByTestId('store-bullets').querySelectorAll('[aria-controls]')
-      ).toHaveLength(2)
-    })
-  })
-})

package/src/molecules/Card/Card.test.tsx

@@ -1,68 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Card from './Card'
-import CardImage from './CardImage'
-import CardContent from './CardContent'
-import CardActions from './CardActions'
-
-const TestCard = () => {
-  return (
-    <Card>
-      <CardImage>
-        <div>An image</div>
-      </CardImage>
-      <CardContent>
-        <h3>A title</h3>
-        <p>89.90</p>
-        <div>A tag</div>
-      </CardContent>
-      <CardActions>
-        <button>A button</button>
-      </CardActions>
-    </Card>
-  )
-}
-
-describe('Card', () => {
-  let card: HTMLElement
-  let cardImage: HTMLElement
-  let cardContent: HTMLElement
-  let cardActions: HTMLElement
-  let cardContainer: HTMLElement
-
-  beforeEach(() => {
-    const { getByTestId, container } = render(<TestCard />)
-
-    cardContainer = container
-    card = getByTestId('store-card')
-    cardImage = getByTestId('store-card-image')
-    cardContent = getByTestId('store-card-content')
-    cardActions = getByTestId('store-card-actions')
-  })
-
-  describe('Data attributes', () => {
-    it('`Card` component should have `data-fs-card` attribute', () => {
-      expect(card).toHaveAttribute('data-fs-card')
-    })
-
-    it('`CardContent` component should have `data-card-content` attribute', () => {
-      expect(cardContent).toHaveAttribute('data-card-content')
-    })
-
-    it('`CardImage` component should have `data-card-image` attribute', () => {
-      expect(cardImage).toHaveAttribute('data-card-image')
-    })
-
-    it('`CardActions` component should have `data-card-actions` attribute', () => {
-      expect(cardActions).toHaveAttribute('data-card-actions')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should not have violations', async () => {
-      expect(await axe(cardContainer)).toHaveNoViolations()
-    })
-  })
-})