Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: remove deprecated queries (#228)
Closes #223

BREAKING CHANGE: This removes the deprecated queries `ByValue` and `BySelectText`. Use `ByDisplayValue` instead.
  • Loading branch information
Kent C. Dodds committed Apr 25, 2019
1 parent 9b975a8 commit 253d677
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 126 deletions.
69 changes: 28 additions & 41 deletions src/__tests__/element-queries.js
Expand Up @@ -8,15 +8,15 @@ beforeEach(() => {
test('query can return null', () => {
const {
queryByLabelText,
queryBySelectText,
queryByDisplayValue,
queryByPlaceholderText,
queryByText,
queryByTestId,
queryByAltText,
} = render('<div />')
expect(queryByTestId('LucyRicardo')).toBeNull()
expect(queryByLabelText('LucyRicardo')).toBeNull()
expect(queryBySelectText('LucyRicardo')).toBeNull()
expect(queryByDisplayValue('LucyRicardo')).toBeNull()
expect(queryByPlaceholderText('LucyRicardo')).toBeNull()
expect(queryByText('LucyRicardo')).toBeNull()
expect(queryByAltText('LucyRicardo')).toBeNull()
Expand All @@ -25,27 +25,18 @@ test('query can return null', () => {
test('get throws a useful error message', () => {
const {
getByLabelText,
getBySelectText,
getByDisplayValue,
getByPlaceholderText,
getByText,
getByTestId,
getByAltText,
getByTitle,
getByValue,
getByRole,
} = render('<div />')
expect(() => getByLabelText('LucyRicardo'))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find a label with the text of: LucyRicardo
<div>
<div />
</div>"
`)
expect(() => getBySelectText('LucyRicardo'))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find a <select> element with the selected option's text: LucyRicardo
<div>
<div />
</div>"
Expand Down Expand Up @@ -86,7 +77,8 @@ test('get throws a useful error message', () => {
<div />
</div>"
`)
expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
expect(() => getByDisplayValue('LucyRicardo'))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with the value: LucyRicardo.
<div>
Expand Down Expand Up @@ -285,20 +277,20 @@ test('query/get title element of SVG', () => {
})

test('query/get element by its value', () => {
const {getByValue, queryByValue} = render(`
const {getByDisplayValue, queryByDisplayValue} = render(`
<div>
<input placeholder="name" type="text"/>
<input placeholder="lastname" type="text" value="Norris"/>
<input placeholder="email" type="text"/>
</div>
`)

expect(getByValue('Norris').placeholder).toEqual('lastname')
expect(queryByValue('Norris').placeholder).toEqual('lastname')
expect(getByDisplayValue('Norris').placeholder).toEqual('lastname')
expect(queryByDisplayValue('Norris').placeholder).toEqual('lastname')
})

test('query/get select by text with the default option selected', () => {
const {getBySelectText, queryBySelectText} = render(`
const {getByDisplayValue, queryByDisplayValue} = render(`
<select id="state-select">
<option value="">State</option>
<option value="AL">Alabama</option>
Expand All @@ -307,12 +299,12 @@ test('query/get select by text with the default option selected', () => {
</select>
`)

expect(getBySelectText('State').id).toEqual('state-select')
expect(queryBySelectText('State').id).toEqual('state-select')
expect(getByDisplayValue('State').id).toEqual('state-select')
expect(queryByDisplayValue('State').id).toEqual('state-select')
})

test('query/get select by text with one option selected', () => {
const {getBySelectText, queryBySelectText} = render(`
const {getByDisplayValue, queryByDisplayValue} = render(`
<select id="state-select">
<option value="">State</option>
<option value="AL">Alabama</option>
Expand All @@ -321,12 +313,12 @@ test('query/get select by text with one option selected', () => {
</select>
`)

expect(getBySelectText('Alaska').id).toEqual('state-select')
expect(queryBySelectText('Alaska').id).toEqual('state-select')
expect(getByDisplayValue('Alaska').id).toEqual('state-select')
expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
})

test('query/get select by text with multiple options selected', () => {
const {getBySelectText, queryBySelectText} = render(`
const {getByDisplayValue, queryByDisplayValue} = render(`
<select multiple id="state-select">
<option value="">State</option>
<option selected value="AL">Alabama</option>
Expand All @@ -335,8 +327,8 @@ test('query/get select by text with multiple options selected', () => {
</select>
`)

expect(getBySelectText('Alabama').id).toEqual('state-select')
expect(queryBySelectText('Alaska').id).toEqual('state-select')
expect(getByDisplayValue('Alabama').id).toEqual('state-select')
expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
})

describe('query by test id', () => {
Expand Down Expand Up @@ -374,7 +366,7 @@ test('getAll* matchers return an array', () => {
getAllByAltText,
getAllByTestId,
getAllByLabelText,
getAllBySelectText,
getAllByDisplayValue,
getAllByPlaceholderText,
getAllByText,
getAllByRole,
Expand Down Expand Up @@ -412,8 +404,8 @@ test('getAll* matchers return an array', () => {
expect(getAllByTestId('poster')).toHaveLength(3)
expect(getAllByPlaceholderText(/The Rock/)).toHaveLength(1)
expect(getAllByLabelText('User Name')).toHaveLength(1)
expect(getAllBySelectText('Japanese cars')).toHaveLength(1)
expect(getAllBySelectText(/cars$/)).toHaveLength(2)
expect(getAllByDisplayValue('Japanese cars')).toHaveLength(1)
expect(getAllByDisplayValue(/cars$/)).toHaveLength(2)
expect(getAllByText(/^where/i)).toHaveLength(1)
expect(getAllByRole(/container/i)).toHaveLength(1)
})
Expand All @@ -423,11 +415,10 @@ test('getAll* matchers throw for 0 matches', () => {
getAllByAltText,
getAllByTestId,
getAllByLabelText,
getAllBySelectText,
getAllByDisplayValue,
getAllByPlaceholderText,
getAllByText,
getAllByRole,
getAllByDisplayValue,
} = render(`
<div role="container">
<label>No Matches Please</label>
Expand All @@ -438,7 +429,7 @@ test('getAll* matchers throw for 0 matches', () => {
expect(() => getAllByAltText('nope')).toThrow()
expect(() => getAllByLabelText('nope')).toThrow()
expect(() => getAllByLabelText('no matches please')).toThrow()
expect(() => getAllBySelectText('nope')).toThrow()
expect(() => getAllByDisplayValue('nope')).toThrow()
expect(() => getAllByPlaceholderText('nope')).toThrow()
expect(() => getAllByText('nope')).toThrow()
expect(() => getAllByRole('nope')).toThrow()
Expand All @@ -450,7 +441,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
queryAllByAltText,
queryAllByTestId,
queryAllByLabelText,
queryAllBySelectText,
queryAllByDisplayValue,
queryAllByPlaceholderText,
queryAllByText,
queryAllByRole,
Expand All @@ -461,7 +452,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
expect(queryAllByTestId('nope')).toHaveLength(0)
expect(queryAllByAltText('nope')).toHaveLength(0)
expect(queryAllByLabelText('nope')).toHaveLength(0)
expect(queryAllBySelectText('nope')).toHaveLength(0)
expect(queryAllByDisplayValue('nope')).toHaveLength(0)
expect(queryAllByPlaceholderText('nope')).toHaveLength(0)
expect(queryAllByText('nope')).toHaveLength(0)
expect(queryAllByRole('nope')).toHaveLength(0)
Expand Down Expand Up @@ -629,24 +620,18 @@ test('get throws a useful error message without DOM in Cypress', () => {
document.defaultView.Cypress = {}
const {
getByLabelText,
getBySelectText,
getByPlaceholderText,
getByText,
getByTestId,
getByAltText,
getByTitle,
getByValue,
getByDisplayValue,
} = render('<div />')
expect(() =>
getByLabelText('LucyRicardo'),
).toThrowErrorMatchingInlineSnapshot(
`"Unable to find a label with the text of: LucyRicardo"`,
)
expect(() =>
getBySelectText('LucyRicardo'),
).toThrowErrorMatchingInlineSnapshot(
`"Unable to find a <select> element with the selected option's text: LucyRicardo"`,
)
expect(() =>
getByPlaceholderText('LucyRicardo'),
).toThrowErrorMatchingInlineSnapshot(
Expand All @@ -664,7 +649,9 @@ test('get throws a useful error message without DOM in Cypress', () => {
expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(
`"Unable to find an element with the title: LucyRicardo."`,
)
expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(
expect(() =>
getByDisplayValue('LucyRicardo'),
).toThrowErrorMatchingInlineSnapshot(
`"Unable to find an element with the value: LucyRicardo."`,
)
})
Expand Down
20 changes: 8 additions & 12 deletions src/__tests__/text-matchers.js
Expand Up @@ -39,14 +39,14 @@ cases(
query: `Dwayne 'The Rock' Johnson`,
queryFn: `queryAllByPlaceholderText`,
},
queryAllBySelectText: {
'queryAllByDisplayValue (for select)': {
dom: `
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>`,
query: `Option 1`,
queryFn: `queryAllBySelectText`,
queryFn: `queryAllByDisplayValue`,
},
queryAllByText: {
dom: `<p>Some content</p>`,
Expand Down Expand Up @@ -99,14 +99,14 @@ cases(
query: /^Dwayne/,
queryFn: `queryAllByPlaceholderText`,
},
queryAllBySelectText: {
'queryAllByDisplayValue (for select)': {
dom: `
<select>
<option> Option 1 </option>
<option>Option 2</option>
</select>`,
query: `Option 1`,
queryFn: `queryAllBySelectText`,
queryFn: `queryAllByDisplayValue`,
},
queryAllByText: {
dom: `
Expand Down Expand Up @@ -161,14 +161,14 @@ cases(
query: `Dwayne 'The Rock' Johnson`,
queryFn: `queryAllByPlaceholderText`,
},
queryAllBySelectText: {
'queryAllByDisplayValue (for select)': {
dom: `
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>`,
query: `Option 1`,
queryFn: `queryAllBySelectText`,
queryFn: `queryAllByDisplayValue`,
},
queryAllByLabelText: {
dom: `
Expand Down Expand Up @@ -235,9 +235,9 @@ cases(
dom: `<input placeholder="User ${LRM}name" />`,
queryFn: 'queryAllByPlaceholderText',
},
queryAllBySelectText: {
'queryAllByDisplayValue (for select)': {
dom: `<select><option>User ${LRM}name</option></select>`,
queryFn: 'queryAllBySelectText',
queryFn: 'queryAllByDisplayValue',
},
queryAllByText: {
dom: `<div>User ${LRM}name</div>`,
Expand All @@ -251,10 +251,6 @@ cases(
dom: `<div title="User ${LRM}name" />`,
queryFn: 'queryAllByTitle',
},
queryAllByValue: {
dom: `<input value="User ${LRM}name" />`,
queryFn: 'queryAllByValue',
},
queryAllByDisplayValue: {
dom: `<input value="User ${LRM}name" />`,
queryFn: 'queryAllByDisplayValue',
Expand Down
61 changes: 0 additions & 61 deletions src/queries.js
Expand Up @@ -137,27 +137,6 @@ function queryByTitle(...args) {
return firstResultOrNull(queryAllByTitle, ...args)
}

function queryAllBySelectText(
container,
text,
{exact = true, collapseWhitespace, trim, normalizer} = {},
) {
const matcher = exact ? matches : fuzzyMatches
const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
return Array.from(container.querySelectorAll('select')).filter(selectNode => {
const selectedOptions = Array.from(selectNode.options).filter(
option => option.selected,
)
return selectedOptions.some(optionNode =>
matcher(getNodeText(optionNode), optionNode, text, matchNormalizer),
)
})
}

function queryBySelectText(...args) {
return firstResultOrNull(queryAllBySelectText, ...args)
}

function getTestIdAttribute() {
return getConfig().testIdAttribute
}
Expand All @@ -168,8 +147,6 @@ const queryByTestId = (...args) =>
queryByAttribute(getTestIdAttribute(), ...args)
const queryAllByTestId = (...args) =>
queryAllByAttribute(getTestIdAttribute(), ...args)
const queryByValue = queryByAttribute.bind(null, 'value')
const queryAllByValue = queryAllByAttribute.bind(null, 'value')
const queryByRole = queryByAttribute.bind(null, 'role')
const queryAllByRole = queryAllByAttribute.bind(null, 'role')

Expand Down Expand Up @@ -251,21 +228,6 @@ function getByTitle(...args) {
return firstResultOrNull(getAllByTitle, ...args)
}

function getAllByValue(container, value, ...rest) {
const els = queryAllByValue(container, value, ...rest)
if (!els.length) {
throw getElementError(
`Unable to find an element with the value: ${value}.`,
container,
)
}
return els
}

function getByValue(...args) {
return firstResultOrNull(getAllByValue, ...args)
}

function getAllByPlaceholderText(container, text, ...rest) {
const els = queryAllByPlaceholderText(container, text, ...rest)
if (!els.length) {
Expand Down Expand Up @@ -346,21 +308,6 @@ function getByRole(...args) {
return firstResultOrNull(getAllByRole, ...args)
}

function getAllBySelectText(container, text, ...rest) {
const els = queryAllBySelectText(container, text, ...rest)
if (!els.length) {
throw getElementError(
`Unable to find a <select> element with the selected option's text: ${text}`,
container,
)
}
return els
}

function getBySelectText(...args) {
return firstResultOrNull(getAllBySelectText, ...args)
}

function getAllByDisplayValue(container, value, ...rest) {
const els = queryAllByDisplayValue(container, value, ...rest)
if (!els.length) {
Expand Down Expand Up @@ -425,10 +372,6 @@ export {
queryAllByAltText,
getByAltText,
getAllByAltText,
queryBySelectText,
queryAllBySelectText,
getBySelectText,
getAllBySelectText,
queryByTestId,
queryAllByTestId,
getByTestId,
Expand All @@ -437,10 +380,6 @@ export {
queryAllByTitle,
getByTitle,
getAllByTitle,
queryByValue,
queryAllByValue,
getByValue,
getAllByValue,
queryByDisplayValue,
queryAllByDisplayValue,
getByDisplayValue,
Expand Down

0 comments on commit 253d677

Please sign in to comment.