Skip to content

fix(prefer-user-event): format list of userEvent methods correctly #311

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 2 commits into from
Apr 4, 2021
Merged

fix(prefer-user-event): format list of userEvent methods correctly #311

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
1ccc45a
fix(prefer-user-event): format list of userEvent methods correctly
Belco90 Apr 4, 2021
20b655d
test(prefer-user-event): check error data in all invalid cases
Belco90 Apr 4, 2021
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
16 changes: 7 additions & 9 deletions lib/rules/prefer-user-event.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const UserEventMethods = [
type UserEventMethodsType = typeof UserEventMethods[number];

// maps fireEvent methods to userEvent. Those not found here, do not have an equivalent (yet)
export const MappingToUserEvent: Record<string, UserEventMethodsType[]> = {
export const MAPPING_TO_USER_EVENT: Record<string, UserEventMethodsType[]> = {
click: ['click', 'type', 'selectOptions', 'deselectOptions'],
change: ['upload', 'type', 'clear', 'selectOptions', 'deselectOptions'],
dblClick: ['dblClick'],
Expand All @@ -49,17 +49,15 @@ export const MappingToUserEvent: Record<string, UserEventMethodsType[]> = {
};

function buildErrorMessage(fireEventMethod: string) {
const allMethods = MappingToUserEvent[fireEventMethod].map(
(method: string) => `userEvent.${method}()`
const userEventMethods = MAPPING_TO_USER_EVENT[fireEventMethod].map(
(methodName) => `userEvent.${methodName}`
);
const { length } = allMethods;

const init = length > 2 ? allMethods.slice(0, length - 2).join(', ') : '';
const last = `${length > 1 ? ' or ' : ''}${allMethods[length - 1]}`;
return `${init}${last}`;
// TODO: when min node version is 13, we can reimplement this using `Intl.ListFormat`
return userEventMethods.join(', ').replace(/, ([a-zA-Z.]+)$/, ', or $1');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to just use Intl.ListFormat here, but it's available from node v13 so we can't stick to it until we drop node v10 and node v12 compatibility 😅

}

const fireEventMappedMethods = Object.keys(MappingToUserEvent);
const fireEventMappedMethods = Object.keys(MAPPING_TO_USER_EVENT);

export default createTestingLibraryRule<Options, MessageIds>({
name: RULE_NAME,
Expand All @@ -72,7 +70,7 @@ export default createTestingLibraryRule<Options, MessageIds>({
},
messages: {
preferUserEvent:
'Prefer using {{userEventMethods}} over fireEvent.{{fireEventMethod}}()',
'Prefer using {{userEventMethods}} over fireEvent.{{fireEventMethod}}',
},
schema: [
{
Expand Down
152 changes: 133 additions & 19 deletions tests/lib/rules/prefer-user-event.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import {
import { createRuleTester } from '../test-utils';
import { LIBRARY_MODULES } from '../../../lib/utils';
import rule, {
RULE_NAME,
MAPPING_TO_USER_EVENT,
MessageIds,
Options,
RULE_NAME,
UserEventMethods,
MappingToUserEvent,
} from '../../../lib/rules/prefer-user-event';

function createScenarioWithImport<
Expand All @@ -18,7 +18,7 @@ function createScenarioWithImport<
return LIBRARY_MODULES.reduce(
(acc: Array<T>, libraryModule) =>
acc.concat(
Object.keys(MappingToUserEvent).map((fireEventMethod) =>
Object.keys(MAPPING_TO_USER_EVENT).map((fireEventMethod) =>
callback(libraryModule, fireEventMethod)
)
),
Expand All @@ -28,6 +28,26 @@ function createScenarioWithImport<

const ruleTester = createRuleTester();

function formatUserEventMethodsMessage(fireEventMethod: string): string {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reimplemented here the same method so I don't use the very same implementation. Otherwise, it would be tricky to catch errors formatting the message.

const userEventMethods = MAPPING_TO_USER_EVENT[fireEventMethod].map(
(methodName) => `userEvent.${methodName}`
);
let joinedList = '';

for (let i = 0; i < userEventMethods.length; i++) {
const item = userEventMethods[i];
if (i === 0) {
joinedList += item;
} else if (i + 1 === userEventMethods.length) {
joinedList += `, or ${item}`;
} else {
joinedList += `, ${item}`;
}
}

return joinedList;
}

ruleTester.run(RULE_NAME, rule, {
valid: [
{
Expand Down Expand Up @@ -132,7 +152,7 @@ ruleTester.run(RULE_NAME, rule, {
userEvent.${userEventMethod}(foo)
`,
})),
...Object.keys(MappingToUserEvent).map((fireEventMethod: string) => ({
...Object.keys(MAPPING_TO_USER_EVENT).map((fireEventMethod: string) => ({
settings: {
'testing-library/utils-module': 'test-utils',
},
Expand All @@ -143,7 +163,7 @@ ruleTester.run(RULE_NAME, rule, {
fireEvent.${fireEventMethod}(foo)
`,
})),
...Object.keys(MappingToUserEvent).map((fireEventMethod: string) => ({
...Object.keys(MAPPING_TO_USER_EVENT).map((fireEventMethod: string) => ({
settings: {
'testing-library/utils-module': 'test-utils',
},
Expand All @@ -154,7 +174,7 @@ ruleTester.run(RULE_NAME, rule, {
`,
options: [{ allowedMethods: [fireEventMethod] }],
})),
...Object.keys(MappingToUserEvent).map((fireEventMethod: string) => ({
...Object.keys(MAPPING_TO_USER_EVENT).map((fireEventMethod: string) => ({
settings: {
'testing-library/utils-module': 'test-utils',
},
Expand All @@ -165,7 +185,7 @@ ruleTester.run(RULE_NAME, rule, {
`,
options: [{ allowedMethods: [fireEventMethod] }],
})),
...Object.keys(MappingToUserEvent).map((fireEventMethod: string) => ({
...Object.keys(MAPPING_TO_USER_EVENT).map((fireEventMethod: string) => ({
settings: {
'testing-library/utils-module': 'test-utils',
},
Expand Down Expand Up @@ -198,6 +218,10 @@ ruleTester.run(RULE_NAME, rule, {
messageId: 'preferUserEvent',
line: 4,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(fireEventMethod),
fireEventMethod: fireEventMethod,
},
},
],
})
Expand All @@ -208,7 +232,17 @@ ruleTester.run(RULE_NAME, rule, {
import * as dom from '${libraryModule}'
dom.fireEvent.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 3, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 3,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(fireEventMethod),
fireEventMethod: fireEventMethod,
},
},
],
})
),
...createScenarioWithImport<InvalidTestCase<MessageIds, Options>>(
Expand All @@ -217,7 +251,17 @@ ruleTester.run(RULE_NAME, rule, {
const { fireEvent } = require('${libraryModule}')
fireEvent.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 3, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 3,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(fireEventMethod),
fireEventMethod: fireEventMethod,
},
},
],
})
),
...createScenarioWithImport<InvalidTestCase<MessageIds, Options>>(
Expand All @@ -226,10 +270,20 @@ ruleTester.run(RULE_NAME, rule, {
const rtl = require('${libraryModule}')
rtl.fireEvent.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 3, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 3,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(fireEventMethod),
fireEventMethod: fireEventMethod,
},
},
],
})
),
...Object.keys(MappingToUserEvent).map(
...Object.keys(MAPPING_TO_USER_EVENT).map(
(fireEventMethod: string) =>
({
settings: {
Expand All @@ -239,10 +293,22 @@ ruleTester.run(RULE_NAME, rule, {
import * as dom from 'test-utils'
dom.fireEvent.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 3, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 3,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(
fireEventMethod
),
fireEventMethod: fireEventMethod,
},
},
],
} as const)
),
...Object.keys(MappingToUserEvent).map(
...Object.keys(MAPPING_TO_USER_EVENT).map(
(fireEventMethod: string) =>
({
settings: {
Expand All @@ -252,10 +318,22 @@ ruleTester.run(RULE_NAME, rule, {
import { fireEvent } from 'test-utils'
fireEvent.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 3, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 3,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(
fireEventMethod
),
fireEventMethod: fireEventMethod,
},
},
],
} as const)
),
...Object.keys(MappingToUserEvent).map(
...Object.keys(MAPPING_TO_USER_EVENT).map(
(fireEventMethod: string) =>
({
code: `
Expand All @@ -264,10 +342,22 @@ ruleTester.run(RULE_NAME, rule, {
import { fireEvent } from 'test-utils'
fireEvent.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 5, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 5,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(
fireEventMethod
),
fireEventMethod: fireEventMethod,
},
},
],
} as const)
),
...Object.keys(MappingToUserEvent).map(
...Object.keys(MAPPING_TO_USER_EVENT).map(
(fireEventMethod: string) =>
({
settings: {
Expand All @@ -277,14 +367,27 @@ ruleTester.run(RULE_NAME, rule, {
import { fireEvent as fireEventAliased } from 'test-utils'
fireEventAliased.${fireEventMethod}(foo)
`,
errors: [{ messageId: 'preferUserEvent', line: 3, column: 9 }],
errors: [
{
messageId: 'preferUserEvent',
line: 3,
column: 9,
data: {
userEventMethods: formatUserEventMethodsMessage(
fireEventMethod
),
fireEventMethod: fireEventMethod,
},
},
],
} as const)
),
{
code: ` // simple test to check error in detail
import { fireEvent } from '@testing-library/react'

fireEvent.click(element)
fireEvent.mouseOut(element)
`,
errors: [
{
Expand All @@ -295,10 +398,21 @@ ruleTester.run(RULE_NAME, rule, {
endColumn: 22,
data: {
userEventMethods:
'userEvent.click(), userEvent.type() or userEvent.deselectOptions()',
'userEvent.click, userEvent.type, userEvent.selectOptions, or userEvent.deselectOptions',
Copy link
Member Author

@Belco90 Belco90 Apr 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@epmatsw nice catch opening this issue! This test should have caught that, but had the wrong expected output :(

fireEventMethod: 'click',
},
},
{
messageId: 'preferUserEvent',
line: 5,
endLine: 5,
column: 7,
endColumn: 25,
data: {
userEventMethods: 'userEvent.unhover',
fireEventMethod: 'mouseOut',
},
},
],
},
],
Expand Down