Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(EbayListbox): Add EbayListbox and use it with ListboxButton #381

Closed
wants to merge 2 commits into from
Closed

feat(EbayListbox): Add EbayListbox and use it with ListboxButton #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c31f096
feat(EbayListbox): Add EbayListbox and use it with ListboxButton
HenriqueLimas Dec 19, 2024
8f2fc37
Fix issues from country code dropdown
HenriqueLimas Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
"ignoreJSX": "all"
}],
"react/jsx-indent-props": [2, 4],
"react/jsx-no-bind": "off",
"react/jsx-indent": [2, 4],

// airbnb-overrides
Expand Down
4 changes: 4 additions & 0 deletions config/jest/setup-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import '@testing-library/jest-dom'

// Makeup-js uses these methods, but they are not implemented in jsdom
Element.prototype.scrollIntoView = jest.fn();
Element.prototype.scroll = jest.fn();

if (typeof window.URL.createObjectURL === 'undefined') {
Object.defineProperty(window.URL, 'createObjectURL', { value: () => {} });
}
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,12 @@
},
"dependencies": {
"classnames": "^2.2.6",
"makeup-expander": "^0.10.1",
"makeup-active-descendant": "^0.7.3",
"makeup-expander": "^0.11.3",
"makeup-keyboard-trap": "^0.4.1",
"makeup-prevent-scroll-keys": "^0.3.2",
"makeup-screenreader-trap": "^0.4.1",
"makeup-typeahead": "^0.3.2",
"react-remove-scroll": "^2.2.0"
},
"devDependencies": {
Expand Down
55 changes: 37 additions & 18 deletions src/ebay-listbox-button/__tests__/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
/// <reference types="@testing-library/jest-dom" />

import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { act, render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { eventOfType } from '../../common/event-utils/__tests__/helpers'
import { EbayListboxButton, EbayListboxButtonOption } from '..'

Expand All @@ -20,7 +23,7 @@ describe('<EbayListboxButton>', () => {
</>
)
const buttonElement = screen.getByRole('button')
const expandBtnTextId = screen.getByText('Option 2').id
const expandBtnTextId = screen.getAllByText('Option 2')[0].id

return { buttonElement, expandBtnTextId }
}
Expand Down Expand Up @@ -115,7 +118,7 @@ describe('<EbayListboxButton>', () => {

describe('when the button is clicked', () => {
beforeEach(async () => {
await fireEvent.click(screen.getByRole('button'))
await userEvent.click(screen.getByRole('button'))
})
it('then it has expanded the listbox', () => {
expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `true`)
Expand All @@ -130,12 +133,12 @@ describe('<EbayListboxButton>', () => {
})
describe('when the button is clicked again', () => {
beforeEach(async () => {
await fireEvent.click(screen.getByRole('button'))
await userEvent.click(screen.getByRole('button'))
})
it('then it has collapsed the listbox', () => {
expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `false`)
})
xit('focus should move to button', () => {
it('focus should move to button', () => {
const button = screen.getByRole('button')
jest.runAllTimers()
expect(button).toHaveFocus()
Expand All @@ -154,10 +157,14 @@ describe('<EbayListboxButton>', () => {
<EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
</EbayListboxButton>
)
fireEvent.click(screen.getByRole('button'))
act(() => {
userEvent.click(screen.getByRole('button'))
})

const index = 0
fireEvent.mouseDown(screen.getAllByRole('option')[index])
fireEvent.click(screen.getAllByRole('option')[index])
act(() => {
userEvent.click(screen.getAllByRole('option')[index])
})

expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index, selected: ['AA'], wasClicked: true })
})
Expand All @@ -171,18 +178,24 @@ describe('<EbayListboxButton>', () => {
<EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
</EbayListboxButton>
)
fireEvent.click(screen.getByRole('button'))

fireEvent.mouseDown(screen.getAllByRole('option')[0])
fireEvent.click(screen.getAllByRole('option')[0])
act(() => {
userEvent.click(screen.getByRole('button'))
userEvent.click(screen.getAllByRole('option')[0])
})

expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 0, selected: ['AA'], wasClicked: true })

fireEvent.mouseDown(screen.getAllByRole('option')[1])
fireEvent.click(screen.getAllByRole('option')[1])
act(() => {
userEvent.click(screen.getAllByRole('option')[1])
})

expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 1, selected: ['BB'], wasClicked: true })

fireEvent.mouseDown(screen.getAllByRole('option')[2])
fireEvent.click(screen.getAllByRole('option')[2])
act(() => {
userEvent.click(screen.getAllByRole('option')[2])
})

expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 2, selected: ['CC'], wasClicked: true })
})
})
Expand All @@ -196,7 +209,10 @@ describe('<EbayListboxButton>', () => {
<EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
</EbayListboxButton>
)
fireEvent.click(screen.getByRole('button'))

act(() => {
userEvent.click(screen.getByRole('button'))
})

expect(spy).toHaveBeenCalledWith()
})
Expand All @@ -212,8 +228,11 @@ describe('<EbayListboxButton>', () => {
</EbayListboxButton>
)
const button = screen.getByRole('button')
fireEvent.click(button)
fireEvent.click(button)

act(() => {
userEvent.click(button)
userEvent.click(button)
})

expect(spy).toHaveBeenCalledWith()
})
Expand Down
12 changes: 6 additions & 6 deletions src/ebay-listbox-button/__tests__/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export const Default = () => (
<>
<EbayListboxButton
value="BB"
onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
onCollapse={() => action('onCollapse')()}
onExpand={() => action('onExpand')()}
onChange={action('onChange')}
onCollapse={action('onCollapse')}
onExpand={action('onExpand')}
>
<EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
<EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
Expand All @@ -37,7 +37,7 @@ export const PreselectedIndex = () => (
export const DefaultNoSelectedOption = () => (
<>
<EbayListboxButton
onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
onChange={(e: ChangeEvent, props?: ChangeEventProps) => action('onChange')(e, props)}
>
<EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
<EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
Expand Down Expand Up @@ -143,7 +143,7 @@ export const TooManyOptions = () => (
<EbayListboxButtonOption value="VV">Option 22</EbayListboxButtonOption>
<EbayListboxButtonOption value="YY">Option 23</EbayListboxButtonOption>
<EbayListboxButtonOption value="XX">Option 24</EbayListboxButtonOption>
<EbayListboxButtonOption value="YY">Option 25</EbayListboxButtonOption>
<EbayListboxButtonOption value="WW">Option 25</EbayListboxButtonOption>
<EbayListboxButtonOption value="ZZ">Option 26</EbayListboxButtonOption>
<EbayListboxButtonOption value="11">Option 27</EbayListboxButtonOption>
<EbayListboxButtonOption value="22">Option 28</EbayListboxButtonOption>
Expand All @@ -157,7 +157,7 @@ export const TooManyOptions = () => (
<EbayListboxButtonOption value="100">Option 36</EbayListboxButtonOption>
<EbayListboxButtonOption value="101">Option 37</EbayListboxButtonOption>
<EbayListboxButtonOption value="102">Option 38</EbayListboxButtonOption>
<EbayListboxButtonOption value="102">Option 39</EbayListboxButtonOption>
<EbayListboxButtonOption value="103">Option 39</EbayListboxButtonOption>
</EbayListboxButton>
</>
)
Expand Down
25 changes: 13 additions & 12 deletions src/ebay-listbox-button/__tests__/render.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/// <reference types="@testing-library/jest-dom" />

import React from 'react'
import { render, within } from '@testing-library/react'
import { composeStories } from '@storybook/react'
Expand All @@ -19,15 +21,15 @@ describe('ebay-listbox-button rendering', () => {
it('renders default listbox button correctly', () => {
const { container } = render(<Default />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
expect(button).toHaveAttribute('aria-haspopup', 'listbox')
expect(button).toHaveAttribute('type', 'button')
expect(button.querySelector('svg')).toMatchSnapshot()

const select = listboxButton.querySelector('select')
const select = listboxButton.querySelector('select') as HTMLElement
expect(select).toHaveClass('listbox-button__native')
expect(select).toHaveAttribute('hidden', '')

Expand All @@ -40,7 +42,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders preselected index correctly', () => {
const { container } = render(<PreselectedIndex />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
Expand All @@ -52,7 +54,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders default listbox button without selected option correctly', () => {
const { container } = render(<DefaultNoSelectedOption />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: '-' })
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
Expand All @@ -64,7 +66,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders borderless listbox button correctly', () => {
const { container } = render(<Borderless />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
expect(button).toHaveClass('btn btn--borderless')
expect(button).toHaveAttribute('aria-expanded', 'false')
Expand All @@ -76,7 +78,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders fluid listbox button correctly', () => {
const { container } = render(<Fluid />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
expect(listboxButton).toHaveClass('listbox-button--fluid')
const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
expect(button).toHaveClass('btn btn--form')
Expand All @@ -89,11 +91,10 @@ describe('ebay-listbox-button rendering', () => {
it('renders disabled state correctly', () => {
const { container } = render(<DisabledState />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
expect(button).toHaveAttribute('aria-haspopup', 'listbox')

expect(button).toHaveAttribute('type', 'button')
expect(button).toHaveAttribute('disabled')
expect(button.querySelector('svg')).toMatchSnapshot()
Expand All @@ -102,7 +103,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders invalid state correctly', () => {
const { container } = render(<InvalidState />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
Expand All @@ -115,7 +116,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders prefix label correctly', () => {
const { container } = render(<PrefixLabel />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button', { name: 'Selected: Option 2' })
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
Expand All @@ -127,7 +128,7 @@ describe('ebay-listbox-button rendering', () => {
it('renders floating label correctly', () => {
const { container } = render(<FloatingLabel />)

const listboxButton: HTMLElement = container.querySelector('.listbox-button')
const listboxButton: HTMLElement = container.querySelector('.listbox-button') as HTMLElement
const button = within(listboxButton).getByRole('button')
expect(button).toHaveClass('btn btn--form')
expect(button).toHaveAttribute('aria-expanded', 'false')
Expand Down
3 changes: 1 addition & 2 deletions src/ebay-listbox-button/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { default as EbayListboxButton } from './listbox-button'
export { default as EbayListboxButtonOption } from './listbox-button-option'
export * from './listbox-button'
40 changes: 0 additions & 40 deletions src/ebay-listbox-button/listbox-button-option.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading