From 64694d58cba975ab991c9d44f5305b7fdb0911ce Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Tue, 31 Dec 2024 09:19:11 -0800 Subject: [PATCH] test: Fix testing-library/no-await-sync-events violations --- eslint.config.mjs | 3 +-- .../environmentPageFilter/index.spec.tsx | 4 ++-- .../organizations/hybridFilter.spec.tsx | 16 ++++++++-------- .../projectPageFilter/index.spec.tsx | 6 +++--- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index d095ece9f0501a..927408c3829ec4 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -945,7 +945,7 @@ export default typescript.config([ plugins: jestDom.configs['flat/recommended'].plugins, }, { - name: 'testing-library/react - ts files', + name: 'testing-library/react', files: ['**/*.spec.{ts,js,tsx,jsx}', 'tests/js/**/*.{ts,js,tsx,jsx}'], ...testingLibrary.configs['flat/react'], rules: { @@ -959,7 +959,6 @@ export default typescript.config([ files: ['**/*.spec.{tsx,jsx}', 'tests/js/**/*.{tsx,jsx}'], ...testingLibrary.configs['flat/react'], rules: { - 'testing-library/no-await-sync-events': 'warn', // TODO(ryan953): Fix the violations, then delete this line 'testing-library/no-container': 'warn', // TODO(ryan953): Fix the violations, then delete this line 'testing-library/no-node-access': 'warn', // TODO(ryan953): Fix the violations, then delete this line 'testing-library/no-render-in-lifecycle': 'warn', // TODO(ryan953): Fix the violations, then delete this line diff --git a/static/app/components/organizations/environmentPageFilter/index.spec.tsx b/static/app/components/organizations/environmentPageFilter/index.spec.tsx index 4d2d98fd6bf0b9..8d6c6363c55516 100644 --- a/static/app/components/organizations/environmentPageFilter/index.spec.tsx +++ b/static/app/components/organizations/environmentPageFilter/index.spec.tsx @@ -76,8 +76,8 @@ describe('EnvironmentPageFilter', function () { await userEvent.click(screen.getByRole('button', {name: 'All Envs'})); // Select prod & stage by clicking on their checkboxes - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select prod'})); - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select stage'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select prod'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select stage'})); // Click "Apply" await userEvent.click(screen.getByRole('button', {name: 'Apply'})); diff --git a/static/app/components/organizations/hybridFilter.spec.tsx b/static/app/components/organizations/hybridFilter.spec.tsx index 68661ecab69f9a..4bc239c5b28e24 100644 --- a/static/app/components/organizations/hybridFilter.spec.tsx +++ b/static/app/components/organizations/hybridFilter.spec.tsx @@ -63,8 +63,8 @@ describe('ProjectPageFilter', function () { // Clicking on the checkboxes in Option One & Option Two _adds_ the options to the // current selection state (multiple selection mode) await userEvent.click(screen.getByRole('button', {expanded: false})); - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option One'})); - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option Two'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option One'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option Two'})); expect(screen.getByRole('checkbox', {name: 'Select Option One'})).toBeChecked(); expect(screen.getByRole('checkbox', {name: 'Select Option Two'})).toBeChecked(); @@ -92,10 +92,10 @@ describe('ProjectPageFilter', function () { which: 17, ctrlKey: true, }; - await fireEvent.keyDown(screen.getByRole('grid'), ctrlKeyOpts); // Press & hold Ctrl + fireEvent.keyDown(screen.getByRole('grid'), ctrlKeyOpts); // Press & hold Ctrl await userEvent.click(screen.getByRole('row', {name: 'Option One'})); - await fireEvent.click(screen.getByRole('row', {name: 'Option Two'})); - await fireEvent.keyUp(screen.getByRole('grid'), ctrlKeyOpts); // Release Ctrl + fireEvent.click(screen.getByRole('row', {name: 'Option Two'})); + fireEvent.keyUp(screen.getByRole('grid'), ctrlKeyOpts); // Release Ctrl expect(screen.getByRole('checkbox', {name: 'Select Option One'})).not.toBeChecked(); expect(screen.getByRole('checkbox', {name: 'Select Option Two'})).not.toBeChecked(); @@ -110,7 +110,7 @@ describe('ProjectPageFilter', function () { // Open the menu, select Option One await userEvent.click(screen.getByRole('button', {expanded: false})); - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option One'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option One'})); // Press Cancel await userEvent.click(screen.getByRole('button', {name: 'Cancel'})); @@ -140,7 +140,7 @@ describe('ProjectPageFilter', function () { expect(screen.queryByRole('button', {name: 'Reset'})).not.toBeInTheDocument(); // Select Option Two, Reset button shows up - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option Two'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option Two'})); expect(screen.getByRole('checkbox', {name: 'Select Option Two'})).toBeChecked(); expect(screen.getByRole('button', {name: 'Reset'})).toBeInTheDocument(); @@ -181,7 +181,7 @@ describe('ProjectPageFilter', function () { // focused to activate it. With RTL, however, onChange events aren't fired on Space // key press (https://github.com/testing-library/react-testing-library/issues/122), // so we'll have to simulate a click event instead. - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option One'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select Option One'})); expect(screen.getByRole('checkbox', {name: 'Select Option One'})).toBeChecked(); // Click "Apply" button, onChange is called diff --git a/static/app/components/organizations/projectPageFilter/index.spec.tsx b/static/app/components/organizations/projectPageFilter/index.spec.tsx index 4a116187aae2d6..2a2f37c3da2fd1 100644 --- a/static/app/components/organizations/projectPageFilter/index.spec.tsx +++ b/static/app/components/organizations/projectPageFilter/index.spec.tsx @@ -83,11 +83,11 @@ describe('ProjectPageFilter', function () { await userEvent.click(screen.getByRole('button', {name: 'My Projects'})); // Deselect project-1 & project-2 by clicking on their checkboxes - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select project-1'})); - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select project-2'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select project-1'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select project-2'})); // Select project-3 by clicking on its checkbox - await fireEvent.click(screen.getByRole('checkbox', {name: 'Select project-3'})); + fireEvent.click(screen.getByRole('checkbox', {name: 'Select project-3'})); // Click "Apply" await userEvent.click(screen.getByRole('button', {name: 'Apply'}));