Skip to content

Commit

Permalink
refactor(select a11y): address post-rebase issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mohammer5
Mohammer5 committed Nov 7, 2024
1 parent 49c1785 commit d8efd07
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 137 deletions.
4 changes: 2 additions & 2 deletions collections/forms/i18n/en.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
"POT-Creation-Date: 2024-11-04T09:32:49.754Z\n"
"PO-Revision-Date: 2024-11-04T09:32:49.755Z\n"
"POT-Creation-Date: 2024-11-07T00:44:30.575Z\n"
"PO-Revision-Date: 2024-11-07T00:44:30.576Z\n"

msgid "Upload file"
msgstr "Upload file"
Expand Down
98 changes: 32 additions & 66 deletions components/select/src/single-select-a11y/single-select-a11y.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,38 +55,38 @@ export function SingleSelectA11y({
options,
idPrefix,
onChange,
autoFocus,
className,
clearText,
clearable,
customOption,
dataTest,
dense,
disabled,
empty,
error,
filterHelpText,
filterLabel,
filterPlaceholder,
filterValue,
filterable,
labelledBy,
loading,
menuLoadingText,
menuMaxHeight,
noMatchText,
optionUpdateStrategy,
placeholder,
prefix,
tabIndex,
valid,
value,
warning,
valueLabel: _valueLabel,
onBlur,
onEndReached,
onFilterChange,
onFocus,
autoFocus = false,
className = '',
clearText = '',
clearable = false,
customOption = undefined,
dataTest = 'dhis2-singleselecta11y',
dense = false,
disabled = false,
empty = false,
error = false,
filterHelpText = '',
filterLabel = '',
filterPlaceholder = '',
filterValue = '',
filterable = false,
labelledBy = '',
loading = false,
menuLoadingText = '',
menuMaxHeight = '288px',
noMatchText = '',
optionUpdateStrategy = 'polite',
placeholder = '',
prefix = '',
tabIndex = '0',
valid = false,
value = '',
warning = false,
valueLabel: _valueLabel = '',
onBlur = () => undefined,
onEndReached = () => undefined,
onFilterChange = () => undefined,
onFocus = () => undefined,
}) {
const comboBoxId = `${idPrefix}-combo`
const valueLabel =
Expand Down Expand Up @@ -263,40 +263,6 @@ export function SingleSelectA11y({
)
}

SingleSelectA11y.defaultProps = {
autoFocus: false,
className: '',
clearText: '',
clearable: false,
customOption: undefined,
dataTest: 'dhis2-singleselecta11y',
dense: false,
disabled: false,
empty: false,
error: false,
filterHelpText: '',
filterLabel: '',
filterPlaceholder: '',
filterValue: '',
filterable: false,
labelledBy: '',
loading: false,
menuLoadingText: '',
menuMaxHeight: '288px',
noMatchText: '',
optionUpdateStrategy: 'polite',
placeholder: '',
prefix: '',
tabIndex: '0',
valid: false,
value: '',
warning: false,
valueLabel: '',
onBlur: () => undefined,
onFilterChange: () => undefined,
onFocus: () => undefined,
}

SingleSelectA11y.propTypes = {
/** necessary for IDs that are required for accessibility **/
idPrefix: PropTypes.string.isRequired,
Expand Down
67 changes: 24 additions & 43 deletions components/select/src/single-select-a11y/single-select-a11y.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,31 @@
import '@testing-library/jest-dom/extend-expect'
import '@testing-library/jest-dom'
import { render, fireEvent, screen } from '@testing-library/react'
import React from 'react'
import { SingleSelectA11y } from './single-select-a11y.js'

describe('<SingleSelectA11y />', () => {
beforeAll(() => {
const consoleError = console.error
jest.spyOn(console, 'error').mockImplementation((...args) => {
const [message, dynamicContent] = args

if (
message.startsWith(
'Warning: An update to %s inside a test was not wrapped in act(...)'
) &&
dynamicContent === 'Popper'
) {
return
}

consoleError(...args)
})
})

afterAll(() => {
console.error.mockRestore()
})

it('should accept an onBlur handler', () => {
const onBlur = jest.fn()

Expand Down Expand Up @@ -124,7 +146,7 @@ describe('<SingleSelectA11y />', () => {
fireEvent.click(screen.getByRole('combobox'))

const listbox = screen.getByRole('listbox')
const menu = listbox.parentNode.parentNode
const menu = listbox.parentNode.parentNode.parentNode
expect(menu.style.maxHeight).toBe('100px')
})

Expand Down Expand Up @@ -398,47 +420,6 @@ describe('<SingleSelectA11y />', () => {
expect(screen.getByLabelText('Custom filter label')).not.toBeNull()
})

it('should not allow duplicate option values', () => {
const onFilterChange = jest.fn()
const consoleError = jest.fn()

jest.spyOn(console, 'error').mockImplementation(consoleError)

render(
<SingleSelectA11y
filterable
filterLabel="Custom filter label"
onFilterChange={onFilterChange}
noMatchText="No options found"
idPrefix="a11y"
value=""
valueLabel=""
onChange={jest.fn()}
options={[
{ value: '', label: 'None' },
{ value: 'foo', label: 'Foo' },
{ value: 'bar', label: 'Bar' },
{ value: 'foo', label: 'Foo' },
]}
/>
)

fireEvent.click(screen.getByRole('combobox'))

// @TODO: For some reason this is called three times
// Is this because of unnecessary re-renders?
expect(consoleError).toHaveBeenNthCalledWith(
1,
expect.stringContaining(
'Encountered two children with the same key'
),
'foo',
expect.anything()
)

console.error.mockRestore()
})

it('should display the selected option', () => {
const onChange = jest.fn()

Expand Down
1 change: 1 addition & 0 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
rootDir: '.',
setupFilesAfterEnv: [
'<rootDir>/jest.globals.config.js',
'<rootDir>/jest.enzyme.config.js',
'<rootDir>/jest.testing-library.config.js',
],
Expand Down
1 change: 1 addition & 0 deletions jest.config.shared.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module.exports = {
setupFilesAfterEnv: [
`${__dirname}/jest.globals.config.js`,
`${__dirname}/jest.enzyme.config.js`,
`${__dirname}/jest.testing-library.config.js`,
],
Expand Down
11 changes: 11 additions & 0 deletions jest.globals.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* IntersectionObserver
*/

window.IntersectionObserver =
global.IntersectionObserver = class IntersectionObserver {
observe() {}
unobserve() {}
disconnect() {}
takeRecords() {}
}
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"@svgr/cli": "^5.5.0",
"@testing-library/cypress": "^8",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.2",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.0.1",
"@testing-library/react-hooks": "^7.0.1",
"@testing-library/user-event": "^14.5.2",
Expand All @@ -83,8 +83,8 @@
"rimraf": "^3.0.2",
"wait-on": "^6.0.0"
},
"resolutions": {
"react": "16.13.1",
"react-dom": "16.13.1"
"overrides": {
"react": "$react",
"react-dom": "$react"
}
}
32 changes: 10 additions & 22 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4558,7 +4558,7 @@
lz-string "^1.5.0"
pretty-format "^27.0.2"

"@testing-library/jest-dom@^6.6.2":
"@testing-library/jest-dom@^6.6.3":
version "6.6.3"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz#26ba906cf928c0f8172e182c6fe214eb4f9f2bd2"
integrity sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==
Expand Down Expand Up @@ -15888,15 +15888,13 @@ react-docgen@^7.0.0:
resolve "^1.22.1"
strip-indent "^4.0.0"

react-dom@16.13.1, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.3.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.19.1"
scheduler "^0.23.2"

react-element-to-jsx-string@^15.0.0:
version "15.0.0"
Expand Down Expand Up @@ -16126,14 +16124,12 @@ react-textarea-autosize@^8.3.2:
use-composed-ref "^1.3.0"
use-latest "^1.2.1"

react@16.13.1, "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18, react@^18.3.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18, react@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"

read-cache@^1.0.0:
version "1.0.0"
Expand Down Expand Up @@ -16924,14 +16920,6 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"

scheduler@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

scheduler@^0.23.2:
version "0.23.2"
resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz"
Expand Down

0 comments on commit d8efd07

Please sign in to comment.