@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-calendar/__tests__/index.spec.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+
+import { waitFor, fireEvent, render, screen, act } from '@testing-library/react'
+import { eventOfType } from '../../common/event-utils/__tests__/helpers'
+import { EbayCalendar } from '../index'
+
+jest
+    .useFakeTimers()
+    .setSystemTime(new Date('2024-01-05').getTime())
+
+describe('<EbayCalendar />', () => {
+    it('should change day focused as we navigate with keyboard', async () => {
+        render(<EbayCalendar interactive selected="2024-01-01" />)
+        const day = screen.getByText('1')
+        act(() => { day.focus() })
+        fireEvent.keyDown(day, { key: 'ArrowRight' })
+        await waitFor(() => expect(screen.getByText('2')).toHaveFocus())
+        fireEvent.keyDown(day, { key: 'ArrowDown' })
+        await waitFor(() => expect(screen.getByText('9')).toHaveFocus())
+        fireEvent.keyDown(day, { key: 'ArrowLeft' })
+        await waitFor(() => expect(screen.getByText('8')).toHaveFocus())
+        fireEvent.keyDown(day, { key: 'ArrowUp' })
+        await waitFor(() => expect(screen.getByText('1')).toHaveFocus())
+    })
+
+    it('should call onFocus with the date that has focus', async () => {
+        const onFocus = jest.fn()
+        render(<EbayCalendar interactive selected="2024-01-01" onFocus={onFocus} />)
+        const day = screen.getByText('1')
+        day.focus()
+        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-01' }))
+        fireEvent.keyDown(day, { key: 'ArrowRight' })
+        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-02' }))
+        fireEvent.keyDown(day, { key: 'ArrowDown' })
+        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-09' }))
+        fireEvent.keyDown(day, { key: 'ArrowLeft' })
+        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-08' }))
+        fireEvent.keyDown(day, { key: 'ArrowUp' })
+        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-01' }))
+
+        await waitFor(() => expect(onFocus).toHaveBeenCalledTimes(5))
+    })
+
+    it('should call onSelect with event and passed iso date on selection', () => {
+        const onSelect = jest.fn()
+        render(<EbayCalendar interactive onSelect={onSelect} selected="2024-01-05" />)
+        const day = screen.getByText('1')
+        fireEvent.click(day)
+        expect(onSelect).toHaveBeenCalledWith(eventOfType('click'), { iso: '2024-01-01' })
+    })
+
+    it('should go to next month on page down', () => {
+        render(<EbayCalendar interactive selected="2024-01-01" />)
+        const day = screen.getByText('1')
+        expect(screen.queryByText('February 2024')).not.toBeInTheDocument()
+        fireEvent.keyDown(day, { key: 'PageDown' })
+        expect(screen.getByText('February 2024')).toBeInTheDocument()
+    })
+
+    it('should go on previous month on page up', () => {
+        render(<EbayCalendar interactive selected="2024-01-01" />)
+        const day = screen.getByText('1')
+        expect(screen.queryByText('December 2023')).not.toBeInTheDocument()
+        fireEvent.keyDown(day, { key: 'PageUp' })
+        expect(screen.getByText('December 2023')).toBeInTheDocument()
+    })
+
+    it('should focus on first day of the month on home', async () => {
+        render(<EbayCalendar interactive selected="2024-01-15" />)
+        const day = screen.getByText('15')
+        fireEvent.keyDown(day, { key: 'Home' })
+        await waitFor(() => expect(screen.getByText('1')).toHaveFocus())
+    })
+
+    it('should focus on last day of the month on end', async () => {
+        render(<EbayCalendar interactive selected="2024-02-15" />)
+        const day = screen.getByText('15')
+        fireEvent.keyDown(day, { key: 'End' })
+        await waitFor(() => expect(screen.getByText('29')).toHaveFocus())
+    })
+
+    it('should set aria-pressed for the selected day only', () => {
+        render(<EbayCalendar interactive selected="2024-01-13" />)
+        const day = screen.getByText('13')
+        expect(day).toHaveAttribute('aria-pressed', 'true')
+
+        const nonSelected = screen.getByText('1')
+        expect(nonSelected).not.toHaveAttribute('aria-pressed')
+    })
+
+    it('should support multiple selected dates', () => {
+        render(<EbayCalendar interactive selected={['2024-01-13', '2024-01-14']} />)
+        const day1 = screen.getByText('13')
+        expect(day1).toHaveAttribute('aria-pressed', 'true')
+
+        const day2 = screen.getByText('14')
+        expect(day2).toHaveAttribute('aria-pressed', 'true')
+    })
+})

package/src/ebay-calendar/__tests__/index.stories.tsx

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { EbayCalendar } from '../index'
+import { EbayCalendarProps } from '../calendar'
+
+const story: Meta<typeof EbayCalendar> = {
+    component: EbayCalendar,
+    title: 'building blocks/ebay-calendar'
+}
+
+export const Default: StoryObj<EbayCalendarProps> = {}
+
+export const Interactive: StoryObj<EbayCalendarProps> = {
+    args: {
+        interactive: true,
+        selected: '2024-01-03'
+    }
+}
+
+export const MultipleMonths: StoryObj<EbayCalendarProps> = {
+    args: {
+        interactive: true,
+        numMonths: 2,
+        selected: '2024-01-03'
+    }
+}
+
+export const Navigable: StoryObj<EbayCalendarProps> = {
+    args: {
+        interactive: true,
+        navigable: true,
+        numMonths: 2,
+        selected: '2024-01-03'
+    }
+}
+
+export const RangeSelected: StoryObj<EbayCalendarProps> = {
+    args: {
+        interactive: true,
+        range: true,
+        numMonths: 2,
+        selected: ['2024-01-03', '2025-02-01']
+    }
+}
+
+export const DisableBeforeAndAfter: StoryObj<EbayCalendarProps> = {
+    args: {
+        interactive: true,
+        navigable: true,
+        range: true,
+        numMonths: 2,
+        selected: ['2024-01-03', '2025-02-01'],
+        disableBefore: '2024-01-03',
+        disableAfter: '2025-02-01'
+    }
+}
+
+export const DisableWeekdays: StoryObj<EbayCalendarProps> = {
+    args: {
+        interactive: true,
+        numMonths: 2,
+        disableWeekdays: [0, 6]
+    }
+}
+
+export default story

package/src/ebay-calendar/__tests__/render.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, Navigable, RangeSelected } from './index.stories'
+
+jest
+    .useFakeTimers()
+    .setSystemTime(new Date('2024-03-05').getTime())
+
+const DefaultStory = composeStory(Default, Meta)
+const NavigableStory = composeStory(Navigable, Meta)
+const RangeSelectedStory = composeStory(RangeSelected, Meta)
+
+describe('ebay-calendar rendering', () => {
+    it('renders default story correctly', () => {
+        const { container } = render(<DefaultStory />)
+        expect(container.querySelector('.calendar')).toBeInTheDocument()
+        expect(container.querySelector('.calendar__body')).toBeInTheDocument()
+        expect(container.querySelector('.calendar__cell--current').textContent.length).toBeGreaterThan(0)
+        expect(screen.getByRole('table')).toBeInTheDocument()
+        expect(screen.getByText('Sun')).toBeInTheDocument()
+        expect(screen.getByText('Mon')).toBeInTheDocument()
+        expect(screen.getByText('Tue')).toBeInTheDocument()
+        expect(screen.getByText('Wed')).toBeInTheDocument()
+        expect(screen.getByText('Thu')).toBeInTheDocument()
+        expect(screen.getByText('Fri')).toBeInTheDocument()
+        expect(screen.getByText('Sat')).toBeInTheDocument()
+    })
+
+    it('renders navigable story correctly', async () => {
+        const { container } = render(<NavigableStory />)
+        expect(container.querySelector('.calendar')).toBeInTheDocument()
+
+        const buttonPrev = screen.getByLabelText('Show February 2024')
+        expect(buttonPrev).toHaveClass('icon-btn icon-btn--small icon-btn--transparent')
+        expect(buttonPrev).toHaveAttribute('type', 'button')
+        const svgPrev = buttonPrev.querySelector('svg')
+        expect(svgPrev).toMatchSnapshot()
+
+        const buttonNext = screen.getByLabelText('Show May 2024')
+        expect(buttonNext).toHaveClass('icon-btn icon-btn--small icon-btn--transparent')
+        expect(buttonNext).toHaveAttribute('type', 'button')
+        const svgNext = buttonNext.querySelector('svg')
+        expect(svgNext).toMatchSnapshot()
+
+        const [month1, month2] = screen.getAllByRole('heading', { level: 3 })
+        expect(month1.textContent).toEqual('March 2024')
+        expect(month2.textContent).toEqual('April 2024')
+
+        expect(screen.getByRole('table', { name: 'March 2024' })).toBeInTheDocument()
+        expect(screen.getByRole('table', { name: 'April 2024' })).toBeInTheDocument()
+
+        // todo: fix it in code
+        // const selectedDate = screen.getByLabelText('3-selected');
+
+        // await waitFor(() =>
+        // expect(selectedDate).toBeInTheDocument()
+        // expect(selectedDate).toHaveAttribute('data-iso', '2024-01-03')
+        // , { timeout: 5000 })
+    })
+
+    // todo: finish after bug fix
+    it.skip('renders range selected story correctly', () => {
+        const { container } = render(<RangeSelectedStory />)
+        expect(container.querySelector('.calendar')).toBeInTheDocument()
+        expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+})