diff --git a/src/__tests__/suggestions.js b/src/__tests__/suggestions.js index 581f3994..39353d1b 100644 --- a/src/__tests__/suggestions.js +++ b/src/__tests__/suggestions.js @@ -72,7 +72,9 @@ test(`should not suggest if the suggestion would give different results`, () => test('should suggest by label over title', () => { renderIntoDocument(``) - expect(() => screen.getByTitle('foo')).toThrowError(/getByLabelText\('bar'\)/) + expect(() => screen.getByTitle('foo')).toThrowError( + /getByLabelText\(\/bar\/i\)/, + ) }) test('should not suggest if there would be mixed suggestions', () => { @@ -178,7 +180,7 @@ test('should suggest getByLabelText when no role available', () => { ``, ) expect(() => screen.getByTestId('foo')).toThrowError( - /getByLabelText\('Username'\)/, + /getByLabelText\(\/username\/i\)/, ) }) @@ -191,7 +193,7 @@ test(`should suggest getByLabel on non form elements`, () => { `) expect(() => screen.getByTestId('foo')).toThrowError( - /getByLabelText\('Section One'\)/, + /getByLabelText\(\/section one\/i\)/, ) }) @@ -230,7 +232,7 @@ test(`should suggest label over placeholder text`, () => { ) expect(() => screen.getByPlaceholderText('Username')).toThrowError( - /getByLabelText\('Username'\)/, + /getByLabelText\(\/username\/i\)/, ) }) @@ -238,7 +240,7 @@ test(`should suggest getByPlaceholderText`, () => { renderIntoDocument(``) expect(() => screen.getByTestId('foo')).toThrowError( - /getByPlaceholderText\('Username'\)/, + /getByPlaceholderText\(\/username\/i\)/, ) }) @@ -246,7 +248,7 @@ test(`should suggest getByText for simple elements`, () => { renderIntoDocument(`
hello there
`) expect(() => screen.getByTestId('foo')).toThrowError( - /getByText\('hello there'\)/, + /getByText\(\/hello there\/i\)/, ) }) @@ -256,7 +258,7 @@ test(`should suggest getByDisplayValue`, () => { document.getElementById('lastName').value = 'Prine' // RIP John Prine expect(() => screen.getByTestId('lastName')).toThrowError( - /getByDisplayValue\('Prine'\)/, + /getByDisplayValue\(\/prine\/i\)/, ) }) @@ -269,10 +271,10 @@ test(`should suggest getByAltText`, () => { `) expect(() => screen.getByTestId('input')).toThrowError( - /getByAltText\('last name'\)/, + /getByAltText\(\/last name\/i\)/, ) expect(() => screen.getByTestId('area')).toThrowError( - /getByAltText\('Computer'\)/, + /getByAltText\(\/computer\/i\)/, ) }) @@ -285,27 +287,29 @@ test(`should suggest getByTitle`, () => { `) expect(() => screen.getByTestId('delete')).toThrowError( - /getByTitle\('Delete'\)/, + /getByTitle\(\/delete\/i\)/, ) expect(() => screen.getAllByTestId('delete')).toThrowError( - /getAllByTitle\('Delete'\)/, + /getAllByTitle\(\/delete\/i\)/, ) expect(() => screen.queryByTestId('delete')).toThrowError( - /queryByTitle\('Delete'\)/, + /queryByTitle\(\/delete\/i\)/, ) expect(() => screen.queryAllByTestId('delete')).toThrowError( - /queryAllByTitle\('Delete'\)/, + /queryAllByTitle\(\/delete\/i\)/, ) expect(() => screen.queryAllByTestId('delete')).toThrowError( - /queryAllByTitle\('Delete'\)/, + /queryAllByTitle\(\/delete\/i\)/, ) expect(() => screen.queryAllByTestId('delete')).toThrowError( - /queryAllByTitle\('Delete'\)/, + /queryAllByTitle\(\/delete\/i\)/, ) // Since `ByTitle` and `ByText` will both return the element // `getByText` will always be the suggested query as it is higher up the list. - expect(() => screen.getByTestId('svg')).toThrowError(/getByText\('Close'\)/) + expect(() => screen.getByTestId('svg')).toThrowError( + /getByText\(\/close\/i\)/, + ) }) test('getSuggestedQuery handles `variant` and defaults to `get`', () => { @@ -343,9 +347,9 @@ test('getSuggestedQuery returns rich data for tooling', () => { expect(getSuggestedQuery(div)).toMatchObject({ queryName: 'Text', queryMethod: 'getByText', - queryArgs: ['cancel'], + queryArgs: [/cancel/i], variant: 'get', }) - expect(getSuggestedQuery(div).toString()).toEqual(`getByText('cancel')`) + expect(getSuggestedQuery(div).toString()).toEqual(`getByText(/cancel/i)`) }) diff --git a/src/suggestions.js b/src/suggestions.js index ff960d68..a8b3f0e6 100644 --- a/src/suggestions.js +++ b/src/suggestions.js @@ -30,8 +30,12 @@ function escapeRegExp(string) { return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string } +function getRegExpMatcher(string) { + return new RegExp(string.toLowerCase(), 'i') +} + function makeSuggestion(queryName, content, {variant = 'get', name}) { - const queryArgs = [content] + const queryArgs = [queryName === 'Role' ? content : getRegExpMatcher(content)] if (name) { queryArgs.push({name: new RegExp(escapeRegExp(name.toLowerCase()), 'i')}) @@ -45,12 +49,17 @@ function makeSuggestion(queryName, content, {variant = 'get', name}) { queryArgs, variant, toString() { - const options = queryArgs[1] - ? `, { ${Object.entries(queryArgs[1]) + let [text, options] = queryArgs + + text = typeof text === 'string' ? `'${text}'` : text + + options = options + ? `, { ${Object.entries(options) .map(([k, v]) => `${k}: ${v}`) .join(', ')} }` : '' - return `${queryMethod}('${content}'${options})` + + return `${queryMethod}(${text}${options})` }, } }