diff --git a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.test.tsx b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.test.tsx index e988ddab988..69400f3a417 100644 --- a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.test.tsx +++ b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.test.tsx @@ -391,7 +391,7 @@ describe('Switch, as AutoSaveField child, ', () => { setupSwitch(); //Is there another way to find the switch element? Filtering by name doesn't work expect( - screen.getByRole('checkbox', { + screen.getByRole('switch', { checked: false, }) ).toBeInTheDocument(); diff --git a/packages/grafana-ui/src/components/Switch/Switch.story.tsx b/packages/grafana-ui/src/components/Switch/Switch.story.tsx index 3243e072f76..40e32d406e4 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.story.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.story.tsx @@ -29,13 +29,13 @@ export const Controlled: StoryFn = (args) => {
- +
- +
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index 269463c2126..351daf346a7 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -27,6 +27,7 @@ export const Switch = forwardRef(
{ @@ -36,7 +37,7 @@ export const Switch = forwardRef( {...inputProps} ref={ref} /> -
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 5a6b585d548..c83c0813cf1 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 @@ -1,6 +1,6 @@ import { noop } from 'lodash'; import { render } from 'test/test-utils'; -import { byRole } from 'testing-library-selector'; +import { byLabelText, byRole } from 'testing-library-selector'; import { Button } from '@grafana/ui'; import { setupMswServer } from 'app/features/alerting/unified/mockApi'; @@ -16,7 +16,7 @@ import { AmRoutesExpandedForm } from './EditNotificationPolicyForm'; const ui = { error: byRole('alert'), - overrideTimingsCheckbox: byRole('checkbox', { name: /Override general timings/ }), + overrideTimingsSwitch: byLabelText(/Override general timings/), submitBtn: byRole('button', { name: /Update default policy/ }), groupWaitInput: byRole('textbox', { name: /Group wait/ }), groupIntervalInput: byRole('textbox', { name: /Group interval/ }), @@ -42,7 +42,7 @@ describe('EditNotificationPolicyForm', function () { repeat_interval: '1w2d6h', }); - expect(ui.overrideTimingsCheckbox.get()).toBeChecked(); + expect(ui.overrideTimingsSwitch.get()).toBeChecked(); expect(ui.groupWaitInput.get()).toHaveValue('1m30s'); expect(ui.groupIntervalInput.get()).toHaveValue('2d4h30m35s'); expect(ui.repeatIntervalInput.get()).toHaveValue('1w2d6h'); @@ -58,7 +58,7 @@ describe('EditNotificationPolicyForm', function () { onSubmit ); - await user.click(ui.overrideTimingsCheckbox.get()); + await user.click(ui.overrideTimingsSwitch.get()); await user.type(ui.groupWaitInput.get(), '5m25s'); await user.type(ui.groupIntervalInput.get(), '35m40s'); @@ -88,7 +88,7 @@ describe('EditNotificationPolicyForm', function () { onSubmit ); - await user.click(ui.overrideTimingsCheckbox.get()); + await user.click(ui.overrideTimingsSwitch.get()); await user.type(ui.groupWaitInput.get(), '5m25s'); await user.type(ui.groupIntervalInput.get(), '35m40s'); diff --git a/public/app/features/auth-config/ProviderConfigForm.test.tsx b/public/app/features/auth-config/ProviderConfigForm.test.tsx index 2ae4728227a..e21fe275b6e 100644 --- a/public/app/features/auth-config/ProviderConfigForm.test.tsx +++ b/public/app/features/auth-config/ProviderConfigForm.test.tsx @@ -91,8 +91,8 @@ describe('ProviderConfigForm', () => { expect(screen.getByRole('textbox', { name: /Client ID/i })).toBeInTheDocument(); expect(screen.getByRole('textbox', { name: /Client secret/i })).toBeInTheDocument(); expect(screen.getByRole('combobox', { name: /Scopes/i })).toBeInTheDocument(); - expect(screen.getByRole('checkbox', { name: /Allow Sign Up/i })).toBeInTheDocument(); - expect(screen.getByRole('checkbox', { name: /Auto login/i })).toBeInTheDocument(); + expect(screen.getByLabelText(/Allow Sign Up/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Auto login/i)).toBeInTheDocument(); expect(screen.getByRole('textbox', { name: /Sign out redirect URL/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /Save/i })).toBeInTheDocument(); expect(screen.getByRole('link', { name: /Discard/i })).toBeInTheDocument(); @@ -102,8 +102,8 @@ describe('ProviderConfigForm', () => { const { user } = setup(); await user.click(screen.getByText('User mapping')); expect(screen.getByRole('textbox', { name: /Role attribute path/i })).toBeInTheDocument(); - expect(screen.getByRole('checkbox', { name: /Role attribute strict mode/i })).toBeInTheDocument(); - expect(screen.getByRole('checkbox', { name: /Skip organization role sync/i })).toBeInTheDocument(); + expect(screen.getByLabelText(/Role attribute strict mode/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Skip organization role sync/i)).toBeInTheDocument(); }); it('renders all extra security fields correctly', async () => { @@ -114,7 +114,7 @@ describe('ProviderConfigForm', () => { expect(screen.getByRole('combobox', { name: /Team Ids/i })).toBeInTheDocument(); expect(screen.getByRole('checkbox', { name: /Use PKCE/i })).toBeInTheDocument(); expect(screen.getByRole('checkbox', { name: /Use refresh token/i })).toBeInTheDocument(); - expect(screen.getByRole('checkbox', { name: /TLS skip verify/i })).toBeInTheDocument(); + expect(screen.getByLabelText(/TLS skip verify/i)).toBeInTheDocument(); }); it('should save and enable on form submit', async () => { @@ -124,11 +124,11 @@ describe('ProviderConfigForm', () => { await user.type(screen.getByLabelText(/Client secret/i), 'test-client-secret'); // Type a scope and press enter to select it await user.type(screen.getByRole('combobox', { name: /Scopes/i }), 'user:email{enter}'); - await user.click(screen.getByRole('checkbox', { name: /Auto login/i })); + await user.click(screen.getByLabelText(/Auto login/i)); await user.click(screen.getByText('User mapping')); await user.type(screen.getByRole('textbox', { name: /Role attribute path/i }), 'new-attribute-path'); - await user.click(screen.getByRole('checkbox', { name: /Role attribute strict mode/i })); + await user.click(screen.getByLabelText(/Role attribute strict mode/i)); await user.type(screen.getByRole('combobox', { name: /Organization mapping/i }), 'Group A:1:Editor{enter}'); await user.type(screen.getByRole('combobox', { name: /Organization mapping/i }), 'Group B:2:Admin{enter}'); @@ -185,7 +185,7 @@ describe('ProviderConfigForm', () => { await user.type(screen.getByLabelText(/Client secret/i), 'test-client-secret'); // Type a scope and press enter to select it await user.type(screen.getByRole('combobox', { name: /Scopes/i }), 'user:email{enter}'); - await user.click(screen.getByRole('checkbox', { name: /Auto login/i })); + await user.click(screen.getByLabelText(/Auto login/i)); await user.click(screen.getByText('Save')); await waitFor(() => { diff --git a/public/app/features/datasources/components/BasicSettings.test.tsx b/public/app/features/datasources/components/BasicSettings.test.tsx index 893352990b4..28e49b09cf7 100644 --- a/public/app/features/datasources/components/BasicSettings.test.tsx +++ b/public/app/features/datasources/components/BasicSettings.test.tsx @@ -20,6 +20,6 @@ describe('', () => { setup(); expect(screen.getByTestId(selectors.pages.DataSource.name)).toBeInTheDocument(); - expect(screen.getByRole('checkbox', { name: /Default/ })).toBeInTheDocument(); + expect(screen.getByLabelText(/Default/)).toBeInTheDocument(); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistorySettingsTab.test.tsx b/public/app/features/explore/RichHistory/RichHistorySettingsTab.test.tsx index 3bced44a05a..8687c148488 100644 --- a/public/app/features/explore/RichHistory/RichHistorySettingsTab.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistorySettingsTab.test.tsx @@ -25,9 +25,9 @@ describe('RichHistorySettings', () => { }); it('should render component with correctly checked starredTabAsFirstTab and uncheched toggleactiveDatasourcesOnly settings', () => { setup(); - const checkboxes = screen.getAllByRole('checkbox'); - expect(checkboxes.length).toBe(2); - expect(checkboxes[0]).toHaveAttribute('checked'); - expect(checkboxes[1]).not.toHaveAttribute('checked'); + const switches = screen.getAllByRole('switch'); + expect(switches.length).toBe(2); + expect(switches[0]).toHaveAttribute('checked'); + expect(switches[1]).not.toHaveAttribute('checked'); }); }); diff --git a/public/app/features/explore/TraceView/TraceViewContainer.test.tsx b/public/app/features/explore/TraceView/TraceViewContainer.test.tsx index 7773460e920..ca88947687e 100644 --- a/public/app/features/explore/TraceView/TraceViewContainer.test.tsx +++ b/public/app/features/explore/TraceView/TraceViewContainer.test.tsx @@ -125,7 +125,7 @@ describe('TraceViewContainer', () => { await user.click(tagOption); expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); - const matchesSwitch = screen.getByRole('checkbox', { name: 'Show matches only switch' }); + const matchesSwitch = screen.getByRole('switch', { name: 'Show matches only switch' }); expect(matchesSwitch).toBeInTheDocument(); await user.click(matchesSwitch); expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(1); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.test.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.test.tsx index de1eb8a4147..da85023411c 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.test.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.test.tsx @@ -54,7 +54,7 @@ describe('', () => { it('renders show span filter matches only switch', async () => { render(); - const matchesSwitch = screen.getByRole('checkbox', { name: 'Show matches only switch' }); + const matchesSwitch = screen.getByRole('switch', { name: 'Show matches only switch' }); expect(matchesSwitch).toBeInTheDocument(); }); }); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx index cedc85d40a9..fea0ba6917a 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx @@ -260,7 +260,7 @@ describe('SpanFilters', () => { await selectAndCheckValue(user, tagKey, 'TagKey0'); await selectAndCheckValue(user, tagValue, 'TagValue0'); - const matchesSwitch = screen.getByRole('checkbox', { name: 'Show matches only switch' }); + const matchesSwitch = screen.getByRole('switch', { name: 'Show matches only switch' }); expect(matchesSwitch).not.toBeChecked(); await user.click(matchesSwitch); expect(matchesSwitch).toBeChecked(); diff --git a/public/app/features/explore/spec/helper/interactions.ts b/public/app/features/explore/spec/helper/interactions.ts index 5a3f567a6ac..3de55b6c555 100644 --- a/public/app/features/explore/spec/helper/interactions.ts +++ b/public/app/features/explore/spec/helper/interactions.ts @@ -75,9 +75,9 @@ export const switchToQueryHistoryTab = async (name: 'Settings' | 'Query History' }; export const selectStarredTabFirst = async () => { - const checkbox = withinQueryHistory().getByRole('checkbox', { - name: /Change the default active tab from “Query history” to “Starred”/, - }); + const checkbox = withinQueryHistory().getByLabelText( + /Change the default active tab from “Query history” to “Starred”/ + ); await userEvent.click(checkbox); }; diff --git a/public/app/features/logs/components/log-context/LogContextButtons.test.tsx b/public/app/features/logs/components/log-context/LogContextButtons.test.tsx index 05b3bd19f03..94d57df16a6 100644 --- a/public/app/features/logs/components/log-context/LogContextButtons.test.tsx +++ b/public/app/features/logs/components/log-context/LogContextButtons.test.tsx @@ -4,10 +4,10 @@ import userEvent from '@testing-library/user-event'; import { LogContextButtons } from './LogContextButtons'; describe('LogContextButtons', () => { - it('should call onChangeWrapLines when the checkbox is used, case 1', async () => { + it('should call onChangeWrapLines when the switch is used, case 1', async () => { const onChangeWrapLines = jest.fn(); render(); - const wrapLinesBox = screen.getByRole('checkbox', { + const wrapLinesBox = screen.getByRole('switch', { name: 'Wrap lines', }); await userEvent.click(wrapLinesBox); @@ -15,10 +15,10 @@ describe('LogContextButtons', () => { expect(onChangeWrapLines).toHaveBeenCalledWith(true); }); - it('should call onChangeWrapLines when the checkbox is used, case 2', async () => { + it('should call onChangeWrapLines when the switch is used, case 2', async () => { const onChangeWrapLines = jest.fn(); render(); - const wrapLinesBox = screen.getByRole('checkbox', { + const wrapLinesBox = screen.getByRole('switch', { name: 'Wrap lines', }); await userEvent.click(wrapLinesBox); diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx index 57656fc51ba..4d733481b7e 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx @@ -28,7 +28,7 @@ describe('DataLinks tests', () => { setup({ value: testValue }); expect(await screen.findAllByRole('button', { name: 'Remove field' })).toHaveLength(2); - expect(await screen.findAllByRole('checkbox', { name: 'Internal link' })).toHaveLength(2); + expect(await screen.findAllByLabelText('Internal link')).toHaveLength(2); }); it('should call onChange to add a new field when the add button is clicked', async () => { diff --git a/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx b/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx index b9b53f65dc1..736ebcc6a4c 100644 --- a/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx +++ b/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx @@ -232,7 +232,7 @@ describe('LokiContextUi', () => { window.localStorage.setItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS, 'true'); render(); await waitFor(() => { - expect((screen.getByRole('checkbox') as HTMLInputElement).checked).toBe(true); + expect((screen.getByRole('switch') as HTMLInputElement).checked).toBe(true); }); }); @@ -248,7 +248,7 @@ describe('LokiContextUi', () => { window.localStorage.setItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS, 'false'); render(); await waitFor(() => { - expect((screen.getByRole('checkbox') as HTMLInputElement).checked).toBe(false); + expect((screen.getByRole('switch') as HTMLInputElement).checked).toBe(false); }); }); @@ -265,7 +265,7 @@ describe('LokiContextUi', () => { window.localStorage.setItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS, 'true'); render(); await waitFor(() => { - expect(screen.getByRole('checkbox')).toBeInTheDocument(); + expect(screen.getByRole('switch')).toBeInTheDocument(); }); }); @@ -282,7 +282,7 @@ describe('LokiContextUi', () => { window.localStorage.setItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS, 'true'); render(); await waitFor(() => { - expect(screen.queryByRole('checkbox')).toBeNull(); + expect(screen.queryByRole('switch')).toBeNull(); }); }); diff --git a/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx b/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx index d5bf01737f8..5db292ff3ef 100644 --- a/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx +++ b/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx @@ -16,7 +16,7 @@ describe('AlertingSettings', () => { it('should update alerting settings', async () => { const onChange = jest.fn(); render(); - await userEvent.click(screen.getByLabelText('Toggle switch')); + await userEvent.click(screen.getByRole('switch')); expect(onChange).toHaveBeenCalledTimes(1); }); });