diff --git a/package.json b/package.json index 0ab1bb49358..5a1b9c105fb 100644 --- a/package.json +++ b/package.json @@ -172,6 +172,7 @@ "eslint-config-prettier": "9.1.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jest": "28.6.0", + "eslint-plugin-jest-dom": "^5.4.0", "eslint-plugin-jsdoc": "48.11.0", "eslint-plugin-jsx-a11y": "6.9.0", "eslint-plugin-lodash": "7.4.0", diff --git a/public/app/features/alerting/.eslintrc b/public/app/features/alerting/.eslintrc index 5b235f3f531..82beed01b71 100644 --- a/public/app/features/alerting/.eslintrc +++ b/public/app/features/alerting/.eslintrc @@ -1,5 +1,6 @@ { - "plugins": ["testing-library"], + "plugins": ["testing-library", "jest-dom"], + "extends": ["plugin:jest-dom/recommended"], "rules": { "dot-notation": "error", "prefer-const": "error", diff --git a/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx b/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx index 224fa93a8ec..f3d8cf4e126 100644 --- a/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx +++ b/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx @@ -123,7 +123,7 @@ describe('RuleEditor cloud', () => { const switchToCloudButton = screen.getByText('Data source-managed'); expect(switchToCloudButton).toBeInTheDocument(); - expect(switchToCloudButton).not.toBeDisabled(); + expect(switchToCloudButton).toBeEnabled(); await user.click(switchToCloudButton); diff --git a/public/app/features/alerting/unified/Settings.test.tsx b/public/app/features/alerting/unified/Settings.test.tsx index 2537fb1e800..0df8f2570f1 100644 --- a/public/app/features/alerting/unified/Settings.test.tsx +++ b/public/app/features/alerting/unified/Settings.test.tsx @@ -95,7 +95,7 @@ describe('Alerting settings', () => { expect(ui.saveConfigurationButton.get()).toBeDisabled(); await waitFor(() => { - expect(ui.saveConfigurationButton.get()).not.toBeDisabled(); + expect(ui.saveConfigurationButton.get()).toBeEnabled(); }); }); diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx index ecef0d1e31d..80ac51e2501 100644 --- a/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx +++ b/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx @@ -106,18 +106,18 @@ describe('contact points', () => { const viewProvisioned = screen.getByRole('link', { name: 'view-action' }); expect(viewProvisioned).toBeInTheDocument(); - expect(viewProvisioned).not.toBeDisabled(); + expect(viewProvisioned).toBeEnabled(); const editButtons = screen.getAllByRole('link', { name: 'edit-action' }); expect(editButtons).toHaveLength(4); editButtons.forEach((button) => { - expect(button).not.toBeDisabled(); + expect(button).toBeEnabled(); }); const moreActionsButtons = screen.getAllByRole('button', { name: /More/ }); expect(moreActionsButtons).toHaveLength(5); moreActionsButtons.forEach((button) => { - expect(button).not.toBeDisabled(); + expect(button).toBeEnabled(); }); }); @@ -175,7 +175,7 @@ describe('contact points', () => { renderWithProvider(); const moreActions = screen.getByRole('button', { name: /More/ }); - expect(moreActions).not.toBeDisabled(); + expect(moreActions).toBeEnabled(); const editAction = screen.getByTestId('edit-action'); expect(editAction).toHaveAttribute('aria-disabled', 'true'); @@ -193,7 +193,7 @@ describe('contact points', () => { expect(viewAction).toBeInTheDocument(); const moreActions = screen.getByRole('button', { name: /More/ }); - expect(moreActions).not.toBeDisabled(); + expect(moreActions).toBeEnabled(); await userEvent.click(moreActions); const deleteButton = screen.getByRole('menuitem', { name: /delete/i }); @@ -237,7 +237,7 @@ describe('contact points', () => { await userEvent.click(moreActions); const deleteButton = screen.getByRole('menuitem', { name: /delete/i }); - expect(deleteButton).not.toBeDisabled(); + expect(deleteButton).toBeEnabled(); }); it('should be able to search', async () => { @@ -299,13 +299,13 @@ describe('contact points', () => { const editButtons = screen.getAllByRole('link', { name: 'edit-action' }); expect(editButtons).toHaveLength(2); editButtons.forEach((button) => { - expect(button).not.toBeDisabled(); + expect(button).toBeEnabled(); }); const moreActionsButtons = screen.getAllByRole('button', { name: /More/ }); expect(moreActionsButtons).toHaveLength(2); moreActionsButtons.forEach((button) => { - expect(button).not.toBeDisabled(); + expect(button).toBeEnabled(); }); }); }); @@ -343,7 +343,7 @@ describe('contact points', () => { const viewProvisioned = screen.getByRole('link', { name: 'view-action' }); expect(viewProvisioned).toBeInTheDocument(); - expect(viewProvisioned).not.toBeDisabled(); + expect(viewProvisioned).toBeEnabled(); // check buttons in Notification Templates const notificationTemplatesTab = screen.getByRole('tab', { name: 'Notification Templates' }); diff --git a/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.test.tsx b/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.test.tsx index 58d6d2be5f5..cb18c7c188e 100644 --- a/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.test.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.test.tsx @@ -99,7 +99,7 @@ describe('EditDefaultPolicyForm', function () { await user.click(ui.submitBtn.get()); expect(ui.error.getAll()).toHaveLength(1); - expect(ui.error.get().textContent).toBe('Repeat interval should be higher or equal to Group interval'); + expect(ui.error.get()).toHaveTextContent('Repeat interval should be higher or equal to Group interval'); expect(onSubmit).not.toHaveBeenCalled(); }); diff --git a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.test.tsx b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.test.tsx index e84ea06f48a..429cddead45 100644 --- a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.test.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.test.tsx @@ -98,7 +98,7 @@ describe('EditNotificationPolicyForm', function () { await user.click(ui.submitBtn.get()); expect(ui.error.getAll()).toHaveLength(1); - expect(ui.error.get().textContent).toBe('Repeat interval should be higher or equal to Group interval'); + expect(ui.error.get()).toHaveTextContent('Repeat interval should be higher or equal to Group interval'); expect(onSubmit).not.toHaveBeenCalled(); }); diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx index da52e6bf78b..739b10fac0e 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx @@ -78,7 +78,7 @@ describe('Policy', () => { // should be editable const editDefaultPolicy = screen.getByRole('menuitem', { name: 'Edit' }); expect(editDefaultPolicy).toBeInTheDocument(); - expect(editDefaultPolicy).not.toBeDisabled(); + expect(editDefaultPolicy).toBeEnabled(); await user.click(editDefaultPolicy); expect(onEditPolicy).toHaveBeenCalledWith(routeTree, true); @@ -118,8 +118,8 @@ describe('Policy', () => { // click "more actions" and check if we can delete await user.click(policy.getByTestId('more-actions')); - expect(screen.queryByRole('menuitem', { name: 'Edit' })).not.toBeDisabled(); - expect(screen.queryByRole('menuitem', { name: 'Delete' })).not.toBeDisabled(); + expect(screen.queryByRole('menuitem', { name: 'Edit' })).toBeEnabled(); + expect(screen.queryByRole('menuitem', { name: 'Delete' })).toBeEnabled(); await user.click(screen.getByRole('menuitem', { name: 'Delete' })); expect(onDeletePolicy).toHaveBeenCalled(); diff --git a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx index b310095991b..814fa6ee017 100644 --- a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx @@ -71,7 +71,7 @@ describe('DashboardPicker', () => { expect(panels).toHaveLength(3); panels.forEach((panel) => { - expect(panel).not.toBeDisabled(); + expect(panel).toBeEnabled(); }); }); }); diff --git a/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.test.tsx b/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.test.tsx index 0da7d7ab252..8aa889e99e2 100644 --- a/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.test.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.test.tsx @@ -80,13 +80,13 @@ describe('LabelsField with suggestions', () => { await waitFor(() => expect(screen.getAllByTestId('alertlabel-key-picker')).toHaveLength(2)); - expect(screen.getByTestId('labelsInSubform-key-0').textContent).toBe('key1'); - expect(screen.getByTestId('labelsInSubform-key-1').textContent).toBe('key2'); + expect(screen.getByTestId('labelsInSubform-key-0')).toHaveTextContent('key1'); + expect(screen.getByTestId('labelsInSubform-key-1')).toHaveTextContent('key2'); expect(screen.getAllByTestId('alertlabel-value-picker')).toHaveLength(2); - expect(screen.getByTestId('labelsInSubform-value-0').textContent).toBe('value1'); - expect(screen.getByTestId('labelsInSubform-value-1').textContent).toBe('value2'); + expect(screen.getByTestId('labelsInSubform-value-0')).toHaveTextContent('value1'); + expect(screen.getByTestId('labelsInSubform-value-1')).toHaveTextContent('value2'); }); it('Should delete a key-value combination', async () => { @@ -111,15 +111,15 @@ describe('LabelsField with suggestions', () => { expect(screen.getAllByTestId('alertlabel-key-picker')).toHaveLength(3); - expect(screen.getByTestId('labelsInSubform-key-0').textContent).toBe('key1'); - expect(screen.getByTestId('labelsInSubform-key-1').textContent).toBe('key2'); - expect(screen.getByTestId('labelsInSubform-key-2').textContent).toBe('Choose key'); + expect(screen.getByTestId('labelsInSubform-key-0')).toHaveTextContent('key1'); + expect(screen.getByTestId('labelsInSubform-key-1')).toHaveTextContent('key2'); + expect(screen.getByTestId('labelsInSubform-key-2')).toHaveTextContent('Choose key'); expect(screen.getAllByTestId('alertlabel-value-picker')).toHaveLength(3); - expect(screen.getByTestId('labelsInSubform-value-0').textContent).toBe('value1'); - expect(screen.getByTestId('labelsInSubform-value-1').textContent).toBe('value2'); - expect(screen.getByTestId('labelsInSubform-value-2').textContent).toBe('Choose value'); + expect(screen.getByTestId('labelsInSubform-value-0')).toHaveTextContent('value1'); + expect(screen.getByTestId('labelsInSubform-value-1')).toHaveTextContent('value2'); + expect(screen.getByTestId('labelsInSubform-value-2')).toHaveTextContent('Choose value'); }); it('Should be able to write new keys and values using the dropdowns', async () => { @@ -134,28 +134,28 @@ describe('LabelsField with suggestions', () => { await userEvent.type(LastKeyDropdown.getByRole('combobox'), 'key3{enter}'); await userEvent.type(LastValueDropdown.getByRole('combobox'), 'value3{enter}'); - expect(screen.getByTestId('labelsInSubform-key-2').textContent).toBe('key3'); - expect(screen.getByTestId('labelsInSubform-value-2').textContent).toBe('value3'); + expect(screen.getByTestId('labelsInSubform-key-2')).toHaveTextContent('key3'); + expect(screen.getByTestId('labelsInSubform-value-2')).toHaveTextContent('value3'); }); it('Should be able to write new keys and values using the dropdowns, case sensitive', async () => { renderLabelsWithSuggestions(); await waitFor(() => expect(screen.getAllByTestId('alertlabel-key-picker')).toHaveLength(2)); - expect(screen.getByTestId('labelsInSubform-key-0').textContent).toBe('key1'); - expect(screen.getByTestId('labelsInSubform-key-1').textContent).toBe('key2'); - expect(screen.getByTestId('labelsInSubform-value-0').textContent).toBe('value1'); - expect(screen.getByTestId('labelsInSubform-value-1').textContent).toBe('value2'); + expect(screen.getByTestId('labelsInSubform-key-0')).toHaveTextContent('key1'); + expect(screen.getByTestId('labelsInSubform-key-1')).toHaveTextContent('key2'); + expect(screen.getByTestId('labelsInSubform-value-0')).toHaveTextContent('value1'); + expect(screen.getByTestId('labelsInSubform-value-1')).toHaveTextContent('value2'); const LastKeyDropdown = within(screen.getByTestId('labelsInSubform-key-1')); const LastValueDropdown = within(screen.getByTestId('labelsInSubform-value-1')); await userEvent.type(LastKeyDropdown.getByRole('combobox'), 'KEY2{enter}'); - expect(screen.getByTestId('labelsInSubform-key-0').textContent).toBe('key1'); - expect(screen.getByTestId('labelsInSubform-key-1').textContent).toBe('KEY2'); + expect(screen.getByTestId('labelsInSubform-key-0')).toHaveTextContent('key1'); + expect(screen.getByTestId('labelsInSubform-key-1')).toHaveTextContent('KEY2'); await userEvent.type(LastValueDropdown.getByRole('combobox'), 'VALUE2{enter}'); - expect(screen.getByTestId('labelsInSubform-value-0').textContent).toBe('value1'); - expect(screen.getByTestId('labelsInSubform-value-1').textContent).toBe('VALUE2'); + expect(screen.getByTestId('labelsInSubform-value-0')).toHaveTextContent('value1'); + expect(screen.getByTestId('labelsInSubform-value-1')).toHaveTextContent('VALUE2'); }); }); diff --git a/yarn.lock b/yarn.lock index b7fb95ad489..7e831f76abf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1581,7 +1581,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:7.25.0, @babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:7.25.0, @babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.25.0 resolution: "@babel/runtime@npm:7.25.0" dependencies: @@ -15597,6 +15597,22 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-jest-dom@npm:^5.4.0": + version: 5.4.0 + resolution: "eslint-plugin-jest-dom@npm:5.4.0" + dependencies: + "@babel/runtime": "npm:^7.16.3" + requireindex: "npm:^1.2.0" + peerDependencies: + "@testing-library/dom": ^8.0.0 || ^9.0.0 || ^10.0.0 + eslint: ^6.8.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 + peerDependenciesMeta: + "@testing-library/dom": + optional: true + checksum: 10/b8b0b0249d066658a75723892bc6f52d6bcf03ff0a69fc5020548c49f740613a8f3acce647f8f04b292606d2bd0ab3372a695aa3d90b4efb19e71870bbddf637 + languageName: node + linkType: hard + "eslint-plugin-jest@npm:28.6.0": version: 28.6.0 resolution: "eslint-plugin-jest@npm:28.6.0" @@ -17636,6 +17652,7 @@ __metadata: eslint-config-prettier: "npm:9.1.0" eslint-plugin-import: "npm:^2.26.0" eslint-plugin-jest: "npm:28.6.0" + eslint-plugin-jest-dom: "npm:^5.4.0" eslint-plugin-jsdoc: "npm:48.11.0" eslint-plugin-jsx-a11y: "npm:6.9.0" eslint-plugin-lodash: "npm:7.4.0" @@ -26779,6 +26796,13 @@ __metadata: languageName: node linkType: hard +"requireindex@npm:^1.2.0": + version: 1.2.0 + resolution: "requireindex@npm:1.2.0" + checksum: 10/266d1cb31f6cbc4b6cf2e898f5bbc45581f7919bcf61bba5c45d0adb69b722b9ff5a13727be3350cde4520d7cd37f39df45d58a29854baaa4552cd6b05ae4a1a + languageName: node + linkType: hard + "requires-port@npm:^1.0.0": version: 1.0.0 resolution: "requires-port@npm:1.0.0"