Skip to content

fix: remove deprecated queries #228

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

Merged
merged 1 commit into from
Mar 19, 2019
Merged

fix: remove deprecated queries #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/__tests__/__snapshots__/element-queries.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`get throws a useful error message 1`] = `
`;

exports[`get throws a useful error message 2`] = `
"Unable to find a <select> element with the selected option's text: LucyRicardo
"Unable to find an element with the value: LucyRicardo.

<div>
<div />
Expand Down Expand Up @@ -74,7 +74,7 @@ exports[`get throws a useful error message 9`] = `

exports[`get throws a useful error message without DOM in Cypress 1`] = `"Unable to find a label with the text of: LucyRicardo"`;

exports[`get throws a useful error message without DOM in Cypress 2`] = `"Unable to find a <select> element with the selected option's text: LucyRicardo"`;
exports[`get throws a useful error message without DOM in Cypress 2`] = `"Unable to find an element with the value: LucyRicardo."`;

exports[`get throws a useful error message without DOM in Cypress 3`] = `"Unable to find an element with the placeholder text of: LucyRicardo"`;

Expand Down
57 changes: 27 additions & 30 deletions src/__tests__/element-queries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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,25 +25,24 @@ 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')).toThrowErrorMatchingSnapshot()
expect(() => getBySelectText('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() =>
getByPlaceholderText('LucyRicardo'),
).toThrowErrorMatchingSnapshot()
expect(() => getByText('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingSnapshot()
})

Expand Down Expand Up @@ -216,20 +215,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 @@ -238,12 +237,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 @@ -252,12 +251,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 @@ -266,8 +265,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 @@ -305,7 +304,7 @@ test('getAll* matchers return an array', () => {
getAllByAltText,
getAllByTestId,
getAllByLabelText,
getAllBySelectText,
getAllByDisplayValue,
getAllByPlaceholderText,
getAllByText,
getAllByRole,
Expand Down Expand Up @@ -343,8 +342,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 @@ -354,11 +353,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 @@ -369,7 +367,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 @@ -381,7 +379,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
queryAllByAltText,
queryAllByTestId,
queryAllByLabelText,
queryAllBySelectText,
queryAllByDisplayValue,
queryAllByPlaceholderText,
queryAllByText,
queryAllByRole,
Expand All @@ -392,7 +390,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 @@ -560,24 +558,23 @@ 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')).toThrowErrorMatchingSnapshot()
expect(() => getBySelectText('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() =>
getByPlaceholderText('LucyRicardo'),
).toThrowErrorMatchingSnapshot()
expect(() => getByText('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
})

test('getByText ignores script tags by default', () => {
Expand Down
20 changes: 8 additions & 12 deletions src/__tests__/text-matchers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Loading