Chore: Update tests for @testing-library/user-event API changes

packages/core/admin/admin/src/components/LanguageProvider/tests/index.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { useIntl } from 'react-intl';
 import useLocalesProvider from '../../LocalesProvider/useLocalesProvider';
 import LanguageProvider from '../index';
@@ -54,9 +53,7 @@ describe('LanguageProvider', () => {
 
     expect(screen.getByText('English')).toBeInTheDocument();
 
-    act(() => {
+    fireEvent.click(screen.getByText('CHANGE'));
-      userEvent.click(screen.getByText('CHANGE'));
-    });
 
     expect(screen.getByText('Français')).toBeInTheDocument();
     expect(localStorage.getItem('strapi-admin-language')).toEqual('fr');

packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js

@@ -131,6 +131,7 @@ describe('Marketplace page - layout', () => {
 
   it('shows compatibility tooltip message when no version provided', async () => {
     client.clear();
+    const user = userEvent.setup();
     const { getByTestId } = render(App);
     await waitForReload();
 
@@ -142,7 +143,7 @@ describe('Marketplace page - layout', () => {
       name: /copy install command/i,
     });
 
-    userEvent.hover(button);
+    user.hover(button);
     const tooltip = getByTestId(`tooltip-Config Sync`);
 
     await waitFor(() => {
@@ -188,7 +189,7 @@ describe('Marketplace page - layout', () => {
     await waitForReload();
 
     const providersTab = screen.getByRole('tab', { name: /providers/i });
-    userEvent.click(providersTab);
+    fireEvent.click(providersTab);
 
     const nodeMailerCard = screen
       .getAllByTestId('npm-package-card')

packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js

@@ -42,6 +42,8 @@ jest.mock('@strapi/helper-plugin', () => ({
   })),
 }));
 
+const user = userEvent.setup();
+
 const client = new QueryClient({
   defaultOptions: {
     queries: {
@@ -112,9 +114,11 @@ describe('Marketplace page - plugins tab', () => {
     expect(providerCardText).toEqual(null);
   });
 
-  it('should return plugin search results matching the query', () => {
+  it('should return plugin search results matching the query', async () => {
     const input = getByPlaceholderText(renderedContainer, 'Search');
-    userEvent.type(input, 'comment');
+
+    await user.type(input, 'comment');
+
     const match = screen.getByText('Comments');
     const notMatch = screen.queryByText('Sentry');
     const provider = screen.queryByText('Cloudinary');
@@ -124,10 +128,13 @@ describe('Marketplace page - plugins tab', () => {
     expect(provider).toEqual(null);
   });
 
-  it('should return empty plugin search results given a bad query', () => {
+  it('should return empty plugin search results given a bad query', async () => {
     const input = getByPlaceholderText(renderedContainer, 'Search');
     const badQuery = 'asdf';
-    userEvent.type(input, badQuery);
+    const user = userEvent.setup();
+
+    await user.type(input, badQuery);
+
     const noResult = screen.getByText(`No result for "${badQuery}"`);
 
     expect(noResult).toBeVisible();
@@ -149,10 +156,11 @@ describe('Marketplace page - plugins tab', () => {
     expect(notInstalledText).toBeVisible();
   });
 
-  it('shows plugins filters popover', () => {
+  it('shows plugins filters popover', async () => {
     const filtersButton = screen.getByTestId('filters-button');
 
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
+
     const collectionsButton = screen.getByTestId('Collections-button');
     const categoriesButton = screen.getByTestId('Categories-button');
 
@@ -160,13 +168,14 @@ describe('Marketplace page - plugins tab', () => {
     expect(categoriesButton).toBeVisible();
   });
 
-  it('shows the collections filter options', () => {
+  it('shows the collections filter options', async () => {
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
 
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const mockedServerCollections = {
       'Made by official partners': 9,
@@ -181,13 +190,14 @@ describe('Marketplace page - plugins tab', () => {
     });
   });
 
-  it('shows the categories filter options', () => {
+  it('shows the categories filter options', async () => {
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+
+    await user.click(filtersButton);
 
     const categoriesButton = screen.getByTestId('Categories-button');
 
-    userEvent.click(categoriesButton);
+    await user.click(categoriesButton);
 
     const mockedServerCategories = {
       'Custom fields': 4,
@@ -203,13 +213,14 @@ describe('Marketplace page - plugins tab', () => {
 
   it('filters a collection option', async () => {
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const option = screen.getByRole('option', { name: `Made by Strapi (13)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
@@ -227,13 +238,14 @@ describe('Marketplace page - plugins tab', () => {
 
   it('filters a category option', async () => {
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+
+    await user.click(filtersButton);
 
     const categoriesButton = screen.getByTestId('Categories-button');
-    userEvent.click(categoriesButton);
+    await user.click(categoriesButton);
 
     const option = screen.getByRole('option', { name: `Custom fields (4)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
@@ -251,26 +263,26 @@ describe('Marketplace page - plugins tab', () => {
 
   it('filters a category and a collection option', async () => {
     // When a user clicks the filters button
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
     // They should see a select button for collections with no options selected
     const collectionsButton = screen.getByTestId('Collections-button');
     // When they click the select button
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
     // They should see a Made by Strapi option
     const collectionOption = screen.getByRole('option', { name: `Made by Strapi (13)` });
     // When they click the option
-    userEvent.click(collectionOption);
+    await user.click(collectionOption);
     // The page should reload
     await waitForReload();
     // When they click the filters button again
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
     // They should see the collections button indicating 1 option selected
-    userEvent.click(screen.getByRole('button', { name: '1 collection selected Made by Strapi' }));
+    await user.click(screen.getByRole('button', { name: '1 collection selected Made by Strapi' }));
     // They should the categories button with no options selected
     const categoriesButton = screen.getByTestId('Categories-button');
-    userEvent.click(categoriesButton);
+    await user.click(categoriesButton);
     const categoryOption = screen.getByRole('option', { name: `Custom fields (4)` });
-    userEvent.click(categoryOption);
+    await user.click(categoryOption);
     // The page should reload
     await waitForReload();
     // When the page reloads they should see a tag for the selected option
@@ -294,15 +306,15 @@ describe('Marketplace page - plugins tab', () => {
   });
 
   it('filters multiple collection options', async () => {
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
-    userEvent.click(screen.getByTestId('Collections-button'));
+    await user.click(screen.getByTestId('Collections-button'));
-    userEvent.click(screen.getByRole('option', { name: `Made by Strapi (13)` }));
+    await user.click(screen.getByRole('option', { name: `Made by Strapi (13)` }));
 
     await waitForReload();
 
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
-    userEvent.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` }));
+    await user.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` }));
-    userEvent.click(screen.getByRole('option', { name: `Verified (29)` }));
+    await user.click(screen.getByRole('option', { name: `Verified (29)` }));
 
     await waitForReload();
 
@@ -317,15 +329,15 @@ describe('Marketplace page - plugins tab', () => {
   });
 
   it('filters multiple category options', async () => {
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
-    userEvent.click(screen.getByTestId('Categories-button'));
+    await user.click(screen.getByTestId('Categories-button'));
-    userEvent.click(screen.getByRole('option', { name: `Custom fields (4)` }));
+    await user.click(screen.getByRole('option', { name: `Custom fields (4)` }));
 
     await waitForReload();
 
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
-    userEvent.click(screen.getByRole('button', { name: `1 category selected Custom fields` }));
+    await user.click(screen.getByRole('button', { name: `1 category selected Custom fields` }));
-    userEvent.click(screen.getByRole('option', { name: `Monitoring (1)` }));
+    await user.click(screen.getByRole('option', { name: `Monitoring (1)` }));
 
     await waitForReload();
 
@@ -341,20 +353,20 @@ describe('Marketplace page - plugins tab', () => {
 
   it('removes a filter option tag', async () => {
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const option = screen.getByRole('option', { name: `Made by Strapi (13)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
     const optionTag = screen.getByRole('button', { name: 'Made by Strapi' });
     expect(optionTag).toBeVisible();
 
-    userEvent.click(optionTag);
+    await user.click(optionTag);
 
     expect(optionTag).not.toBeVisible();
     expect(history.location.search).toBe('');
@@ -362,31 +374,33 @@ describe('Marketplace page - plugins tab', () => {
 
   it('only filters in the plugins tab', async () => {
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const option = screen.getByRole('option', { name: `Made by Strapi (13)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
     const collectionCards = screen.getAllByTestId('npm-package-card');
     expect(collectionCards.length).toBe(2);
 
-    userEvent.click(screen.getByRole('tab', { name: /providers/i }));
+    await user.click(screen.getByRole('tab', { name: /providers/i }));
 
     const providerCards = screen.getAllByTestId('npm-package-card');
     expect(providerCards.length).toBe(9);
 
-    userEvent.click(screen.getByRole('tab', { name: /plugins/i }));
+    await user.click(screen.getByRole('tab', { name: /plugins/i }));
     expect(collectionCards.length).toBe(2);
   });
 
-  it('shows the correct options on sort select', () => {
+  it('shows the correct options on sort select', async () => {
     const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    userEvent.click(sortButton);
+
+    await user.click(sortButton);
 
     const alphabeticalOption = screen.getByRole('option', { name: 'Alphabetical order' });
     const newestOption = screen.getByRole('option', { name: 'Newest' });
@@ -395,12 +409,12 @@ describe('Marketplace page - plugins tab', () => {
     expect(newestOption).toBeVisible();
   });
 
-  it('changes the url on sort option select', () => {
+  it('changes the url on sort option select', async () => {
     const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    userEvent.click(sortButton);
+    await user.click(sortButton);
 
     const newestOption = screen.getByRole('option', { name: 'Newest' });
-    userEvent.click(newestOption);
+    await user.click(newestOption);
     expect(history.location.search).toEqual('?sort=submissionDate:desc');
   });
 

packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js

@@ -89,8 +89,9 @@ describe('Marketplace page - providers tab', () => {
 
     await waitForReload();
 
+    const user = userEvent.setup();
     const providersTab = screen.getByRole('tab', { name: /providers/i });
-    userEvent.click(providersTab);
+    await user.click(providersTab);
 
     renderedContainer = container;
   });
@@ -114,8 +115,9 @@ describe('Marketplace page - providers tab', () => {
   });
 
   it('should return providers search results matching the query', async () => {
+    const user = userEvent.setup();
     const input = getByPlaceholderText(renderedContainer, 'Search');
-    userEvent.type(input, 'cloudina');
+    await user.type(input, 'cloudina');
     const match = screen.getByText('Cloudinary');
     const notMatch = screen.queryByText('Mailgun');
     const plugin = screen.queryByText('Comments');
@@ -125,21 +127,23 @@ describe('Marketplace page - providers tab', () => {
     expect(plugin).toEqual(null);
   });
 
-  it('should return empty providers search results given a bad query', () => {
+  it('should return empty providers search results given a bad query', async () => {
+    const user = userEvent.setup();
     const providersTab = screen.getByRole('tab', { name: /providers/i });
-    userEvent.click(providersTab);
+    await user.click(providersTab);
     const input = getByPlaceholderText(renderedContainer, 'Search');
     const badQuery = 'asdf';
-    userEvent.type(input, badQuery);
+    await user.type(input, badQuery);
     const noResult = screen.getByText(`No result for "${badQuery}"`);
 
     expect(noResult).toBeVisible();
   });
 
-  it('shows the installed text for installed providers', () => {
+  it('shows the installed text for installed providers', async () => {
+    const user = userEvent.setup();
     // Open providers tab
     const providersTab = screen.getByRole('tab', { name: /providers/i });
-    userEvent.click(providersTab);
+    await user.click(providersTab);
 
     // Provider that's already installed
     const alreadyInstalledCard = screen
@@ -156,23 +160,25 @@ describe('Marketplace page - providers tab', () => {
     expect(notInstalledText).toBeVisible();
   });
 
-  it('shows providers filters popover', () => {
+  it('shows providers filters popover', async () => {
+    const user = userEvent.setup();
     const filtersButton = screen.getByTestId('filters-button');
 
     // Only show collections filters on providers
     const providersTab = screen.getByRole('tab', { name: /providers/i });
-    userEvent.click(providersTab);
+    await user.click(providersTab);
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
     screen.getByLabelText(/no collections selected/i);
   });
 
-  it('shows the collections filter options', () => {
+  it('shows the collections filter options', async () => {
+    const user = userEvent.setup();
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
 
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const mockedServerCollections = {
       'Made by official partners': 0,
@@ -188,14 +194,15 @@ describe('Marketplace page - providers tab', () => {
   });
 
   it('filters a collection option', async () => {
+    const user = userEvent.setup();
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const option = screen.getByRole('option', { name: `Made by Strapi (6)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
@@ -212,15 +219,17 @@ describe('Marketplace page - providers tab', () => {
   });
 
   it('filters multiple collection options', async () => {
-    userEvent.click(screen.getByTestId('filters-button'));
+    const user = userEvent.setup();
-    userEvent.click(screen.getByTestId('Collections-button'));
+
-    userEvent.click(screen.getByRole('option', { name: `Made by Strapi (6)` }));
+    await user.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('Collections-button'));
+    await user.click(screen.getByRole('option', { name: `Made by Strapi (6)` }));
 
     await waitForReload();
 
-    userEvent.click(screen.getByTestId('filters-button'));
+    await user.click(screen.getByTestId('filters-button'));
-    userEvent.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` }));
+    await user.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` }));
-    userEvent.click(screen.getByRole('option', { name: `Verified (6)` }));
+    await user.click(screen.getByRole('option', { name: `Verified (6)` }));
 
     await waitForReload();
 
@@ -235,53 +244,56 @@ describe('Marketplace page - providers tab', () => {
   });
 
   it('removes a filter option tag', async () => {
+    const user = userEvent.setup();
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const option = screen.getByRole('option', { name: `Made by Strapi (6)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
     const optionTag = screen.getByRole('button', { name: 'Made by Strapi' });
     expect(optionTag).toBeVisible();
 
-    userEvent.click(optionTag);
+    await user.click(optionTag);
 
     expect(optionTag).not.toBeVisible();
     expect(history.location.search).toBe('?npmPackageType=provider&sort=name:asc');
   });
 
   it('only filters in the providers tab', async () => {
+    const user = userEvent.setup();
     const filtersButton = screen.getByTestId('filters-button');
-    userEvent.click(filtersButton);
+    await user.click(filtersButton);
 
     const collectionsButton = screen.getByTestId('Collections-button');
-    userEvent.click(collectionsButton);
+    await user.click(collectionsButton);
 
     const option = screen.getByRole('option', { name: `Made by Strapi (6)` });
-    userEvent.click(option);
+    await user.click(option);
 
     await waitForReload();
 
     const collectionCards = screen.getAllByTestId('npm-package-card');
     expect(collectionCards.length).toBe(2);
 
-    userEvent.click(screen.getByRole('tab', { name: /plugins/i }));
+    await user.click(screen.getByRole('tab', { name: /plugins/i }));
 
     const pluginCards = screen.getAllByTestId('npm-package-card');
     expect(pluginCards.length).toBe(5);
 
-    userEvent.click(screen.getByRole('tab', { name: /providers/i }));
+    await user.click(screen.getByRole('tab', { name: /providers/i }));
     expect(collectionCards.length).toBe(2);
   });
 
-  it('shows the correct options on sort select', () => {
+  it('shows the correct options on sort select', async () => {
+    const user = userEvent.setup();
     const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    userEvent.click(sortButton);
+    await user.click(sortButton);
 
     const alphabeticalOption = screen.getByRole('option', { name: 'Alphabetical order' });
     const newestOption = screen.getByRole('option', { name: 'Newest' });
@@ -290,18 +302,20 @@ describe('Marketplace page - providers tab', () => {
     expect(newestOption).toBeVisible();
   });
 
-  it('changes the url on sort option select', () => {
+  it('changes the url on sort option select', async () => {
+    const user = userEvent.setup();
     const sortButton = screen.getByRole('button', { name: /Sort by/i });
-    userEvent.click(sortButton);
+    await user.click(sortButton);
 
     const newestOption = screen.getByRole('option', { name: 'Newest' });
-    userEvent.click(newestOption);
+    await user.click(newestOption);
     expect(history.location.search).toEqual('?npmPackageType=provider&sort=submissionDate:desc');
   });
 
-  it('shows github stars and weekly downloads count for each provider', () => {
+  it('shows github stars and weekly downloads count for each provider', async () => {
+    const user = userEvent.setup();
     const providersTab = screen.getByRole('tab', { name: /providers/i });
-    userEvent.click(providersTab);
+    await user.click(providersTab);
 
     const cloudinaryCard = screen
       .getAllByTestId('npm-package-card')

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js

@@ -1,5 +1,4 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
@@ -70,11 +69,11 @@ describe('Create Webhook', () => {
 
     render(App);
 
-    userEvent.type(screen.getByLabelText(/name/i), 'My webhook');
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'My webhook' } });
-    userEvent.type(screen.getByLabelText(/url/i), 'https://google.fr');
+    fireEvent.change(screen.getByLabelText(/url/i), { target: { value: 'https://google.fr' } });
     fireEvent.click(screen.getByRole('checkbox', { name: /entry.create/i }));
 
-    userEvent.click(screen.getByRole('button', { name: /Save/i }));
+    fireEvent.click(screen.getByRole('button', { name: /Save/i }));
 
     await waitFor(() => {
       expect(handleSubmit).toHaveBeenCalledTimes(1);

packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js

@@ -320,19 +320,20 @@ describe('ADMIN | pages | SettingsPage', () => {
       },
     });
     const route = '/settings/application-infos';
+    const user = userEvent.setup();
     history.push(route);
 
     render(App);
 
     expect(screen.getByText(/App infos/)).toBeInTheDocument();
 
-    userEvent.click(screen.getByText('i18n.plugin.name'));
+    await user.click(screen.getByText('i18n.plugin.name'));
 
     await waitFor(() => {
       expect(screen.getByText(/i18n settings/)).toBeInTheDocument();
     });
 
-    userEvent.click(screen.getByText('email'));
+    await user.click(screen.getByText('email'));
 
     await waitFor(() => {
       expect(screen.getByText(/email settings/)).toBeInTheDocument();

packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,889 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] = `
+.c17 {
+  background: #ffffff;
+  padding: 24px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+}
+
+.c18 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c19 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c19 > * + * {
+  margin-top: 16px;
+}
+
+.c20 {
+  color: #32324d;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25;
+}
+
+.c14 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c11 {
+  padding-right: 8px;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #dcdce4;
+  position: relative;
+  outline: none;
+}
+
+.c8 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c8 svg > g,
+.c8 svg path {
+  fill: #ffffff;
+}
+
+.c8[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c8:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c8:focus-visible {
+  outline: none;
+}
+
+.c8:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c12 {
+  height: 100%;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 10px 16px;
+  background: #4945ff;
+  border: 1px solid #4945ff;
+}
+
+.c9 .c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c9 .c13 {
+  color: #ffffff;
+}
+
+.c9[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c9[aria-disabled='true'] .c13 {
+  color: #666687;
+}
+
+.c9[aria-disabled='true'] svg > g,
+.c9[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c9[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c9[aria-disabled='true']:active .c13 {
+  color: #666687;
+}
+
+.c9[aria-disabled='true']:active svg > g,
+.c9[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c9:hover {
+  border: 1px solid #7b79ff;
+  background: #7b79ff;
+}
+
+.c9:active {
+  border: 1px solid #4945ff;
+  background: #4945ff;
+}
+
+.c9 svg > g,
+.c9 svg path {
+  fill: #ffffff;
+}
+
+.c45 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
+}
+
+.c45:focus {
+  outline: none;
+}
+
+.c45[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.c48 {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c50 {
+  padding-left: 12px;
+}
+
+.c40 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c43 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c46 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c42 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c49 {
+  color: #32324d;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c53 {
+  color: #666687;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c41 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c41 > * + * {
+  margin-top: 4px;
+}
+
+.c44 {
+  position: relative;
+  border: 1px solid #dcdce4;
+  padding-right: 12px;
+  border-radius: 4px;
+  background: #ffffff;
+  overflow: hidden;
+  min-height: 2.5rem;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c44:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c51 {
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+}
+
+.c51 svg {
+  height: 0.6875rem;
+  width: 0.6875rem;
+}
+
+.c51 svg path {
+  fill: #666687;
+}
+
+.c52 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: none;
+  border: none;
+}
+
+.c52 svg {
+  width: 0.375rem;
+}
+
+.c47 {
+  width: 100%;
+}
+
+.c30 {
+  background: #f6f6f9;
+  padding: 4px;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #dcdce4;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c32 {
+  padding-right: 12px;
+  padding-left: 12px;
+  border-radius: 4px;
+}
+
+.c24 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c33 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c27 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c35 {
+  font-weight: 600;
+  color: #666687;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c37 {
+  font-weight: 600;
+  color: #4945ff;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c39 {
+  color: #666687;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c25 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c25 > * + * {
+  margin-top: 4px;
+}
+
+.c29 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c28 {
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+}
+
+.c31 {
+  overflow: hidden;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c31:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c34 {
+  background-color: transparent;
+  border: 1px solid #f6f6f9;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 2;
+  -webkit-flex: 1 1 50%;
+  -ms-flex: 1 1 50%;
+  flex: 1 1 50%;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.c36 {
+  background-color: #ffffff;
+  border: 1px solid #dcdce4;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 2;
+  -webkit-flex: 1 1 50%;
+  -ms-flex: 1 1 50%;
+  flex: 1 1 50%;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.c38 {
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+}
+
+.c23 {
+  max-width: 320px;
+}
+
+.c1 {
+  padding-bottom: 56px;
+}
+
+.c4 {
+  background: #f6f6f9;
+  padding-top: 40px;
+  padding-right: 56px;
+  padding-bottom: 40px;
+  padding-left: 56px;
+}
+
+.c16 {
+  padding-right: 56px;
+  padding-left: 56px;
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.c2 {
+  overflow-x: hidden;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c6 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c7 {
+  color: #32324d;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.25;
+}
+
+.c15 {
+  color: #666687;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.c3:focus-visible {
+  outline: none;
+}
+
+.c21 {
+  display: grid;
+  grid-template-columns: repeat(12,1fr);
+  gap: 16px;
+}
+
+.c22 {
+  grid-column: span 6;
+  max-width: 100%;
+}
+
+@media (max-width:68.75rem) {
+  .c22 {
+    grid-column: span 12;
+  }
+}
+
+@media (max-width:34.375rem) {
+  .c22 {
+    grid-column: span;
+  }
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1 c2"
+  >
+    <main
+      aria-labelledby="main-content-title"
+      class="c3"
+      id="main-content"
+      tabindex="-1"
+    >
+      <form>
+        <div
+          style="height: 0px;"
+        >
+          <div
+            class="c4"
+            data-strapi-header="true"
+          >
+            <div
+              class="c5"
+            >
+              <div
+                class="c6"
+              >
+                <h1
+                  class="c7"
+                >
+                  Single Sign-On
+                </h1>
+              </div>
+              <button
+                aria-disabled="true"
+                class="c8 c9"
+                data-testid="save-button"
+                disabled=""
+                type="submit"
+              >
+                <div
+                  aria-hidden="true"
+                  class="c10 c11 c12"
+                >
+                  <svg
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M20.727 2.97a.2.2 0 01.286 0l2.85 2.89a.2.2 0 010 .28L9.554 20.854a.2.2 0 01-.285 0l-9.13-9.243a.2.2 0 010-.281l2.85-2.892a.2.2 0 01.284 0l6.14 6.209L20.726 2.97z"
+                      fill="#212134"
+                    />
+                  </svg>
+                </div>
+                <span
+                  class="c13 c14"
+                >
+                  Save
+                </span>
+              </button>
+            </div>
+            <p
+              class="c15"
+            >
+              Configure the settings for the Single Sign-On feature.
+            </p>
+          </div>
+        </div>
+        <div
+          class="c16"
+        >
+          <div
+            class="c17 c18 c19"
+            spacing="4"
+          >
+            <h2
+              class="c20"
+            >
+              Settings
+            </h2>
+            <div
+              class="c21"
+            >
+              <div
+                class="c22"
+              >
+                <div
+                  class=""
+                >
+                  <div
+                    class="c23"
+                  >
+                    <div
+                      class="c24 c25"
+                      spacing="1"
+                    >
+                      <div
+                        class="c26"
+                      >
+                        <label
+                          class="c27"
+                          for="toggleinput-1"
+                        >
+                          <div
+                            class="c26"
+                          >
+                            Auto-registration
+                          </div>
+                        </label>
+                      </div>
+                      <label
+                        class="c28"
+                      >
+                        <div
+                          class="c29"
+                        >
+                          Auto-registration
+                        </div>
+                        <div
+                          class="c30 c31"
+                          display="flex"
+                        >
+                          <div
+                            aria-hidden="true"
+                            class="c32 c33 c34"
+                          >
+                            <span
+                              class="c35"
+                            >
+                              Off
+                            </span>
+                          </div>
+                          <div
+                            aria-hidden="true"
+                            class="c32 c33 c36"
+                          >
+                            <span
+                              class="c37"
+                            >
+                              On
+                            </span>
+                          </div>
+                          <input
+                            aria-disabled="false"
+                            aria-label="autoRegister"
+                            checked=""
+                            class="c38"
+                            data-testid="autoRegister"
+                            id="toggleinput-1"
+                            name="autoRegister"
+                            type="checkbox"
+                          />
+                        </div>
+                      </label>
+                      <p
+                        class="c39"
+                        id="toggleinput-1-hint"
+                      >
+                        Create new user on SSO login if no account exists
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="c22"
+              >
+                <div
+                  class=""
+                >
+                  <div>
+                    <div
+                      class="c40 c41"
+                      spacing="1"
+                    >
+                      <span
+                        class="c42"
+                        for="select-1"
+                        id="select-1-label"
+                      >
+                        <div
+                          class="c43"
+                        >
+                          Default role
+                        </div>
+                      </span>
+                      <div
+                        class="c43 c44"
+                      >
+                        <button
+                          aria-describedby="select-1-hint"
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          aria-labelledby="select-1-label select-1-content"
+                          class="c45"
+                          id="select-1"
+                          name="defaultRole"
+                          type="button"
+                        />
+                        <div
+                          class="c46 c47"
+                        >
+                          <div
+                            class="c43"
+                          >
+                            <div
+                              class="c48"
+                            >
+                              <span
+                                class="c49"
+                                id="select-1-content"
+                              >
+                                Editor
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="c43"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="c50 c51 c52"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <svg
+                                fill="none"
+                                height="1em"
+                                viewBox="0 0 14 8"
+                                width="1em"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  clip-rule="evenodd"
+                                  d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                                  fill="#32324D"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <p
+                        class="c53"
+                        id="select-1-hint"
+                      >
+                        It will attach the new authenticated user to the selected role
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </main>
+  </div>
+</div>
+`;

packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { getByLabelText, render, screen, waitFor } from '@testing-library/react';
+import { getByLabelText, render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
-import userEvent from '@testing-library/user-event';
 
 import { useRBAC } from '@strapi/helper-plugin';
 import server from './server';
@@ -53,893 +52,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
       ).toBeInTheDocument()
     );
 
-    expect(firstChild).toMatchInlineSnapshot(`
+    expect(firstChild).toMatchSnapshot();
-      .c17 {
-        background: #ffffff;
-        padding: 24px;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c18 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c19 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c19 > * + * {
-        margin-top: 16px;
-      }
-
-      .c20 {
-        color: #32324d;
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-      }
-
-      .c14 {
-        font-weight: 600;
-        color: #32324d;
-        font-size: 0.875rem;
-        line-height: 1.43;
-      }
-
-      .c11 {
-        padding-right: 8px;
-      }
-
-      .c8 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        cursor: pointer;
-        padding: 8px;
-        border-radius: 4px;
-        background: #ffffff;
-        border: 1px solid #dcdce4;
-        position: relative;
-        outline: none;
-      }
-
-      .c8 svg {
-        height: 12px;
-        width: 12px;
-      }
-
-      .c8 svg > g,
-      .c8 svg path {
-        fill: #ffffff;
-      }
-
-      .c8[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c8:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c8:focus-visible {
-        outline: none;
-      }
-
-      .c8:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c12 {
-        height: 100%;
-      }
-
-      .c9 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        padding: 10px 16px;
-        background: #4945ff;
-        border: 1px solid #4945ff;
-      }
-
-      .c9 .c10 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c9 .c13 {
-        color: #ffffff;
-      }
-
-      .c9[aria-disabled='true'] {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c9[aria-disabled='true'] .c13 {
-        color: #666687;
-      }
-
-      .c9[aria-disabled='true'] svg > g,
-      .c9[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c9[aria-disabled='true']:active {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c9[aria-disabled='true']:active .c13 {
-        color: #666687;
-      }
-
-      .c9[aria-disabled='true']:active svg > g,
-      .c9[aria-disabled='true']:active svg path {
-        fill: #666687;
-      }
-
-      .c9:hover {
-        border: 1px solid #7b79ff;
-        background: #7b79ff;
-      }
-
-      .c9:active {
-        border: 1px solid #4945ff;
-        background: #4945ff;
-      }
-
-      .c9 svg > g,
-      .c9 svg path {
-        fill: #ffffff;
-      }
-
-      .c45 {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        width: 100%;
-        background: transparent;
-        border: none;
-      }
-
-      .c45:focus {
-        outline: none;
-      }
-
-      .c45[aria-disabled='true'] {
-        cursor: not-allowed;
-      }
-
-      .c48 {
-        padding-right: 16px;
-        padding-left: 16px;
-      }
-
-      .c50 {
-        padding-left: 12px;
-      }
-
-      .c40 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c43 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-      }
-
-      .c46 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .c42 {
-        font-weight: 600;
-        color: #32324d;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c49 {
-        color: #32324d;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 0.875rem;
-        line-height: 1.43;
-      }
-
-      .c53 {
-        color: #666687;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c41 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c41 > * + * {
-        margin-top: 4px;
-      }
-
-      .c44 {
-        position: relative;
-        border: 1px solid #dcdce4;
-        padding-right: 12px;
-        border-radius: 4px;
-        background: #ffffff;
-        overflow: hidden;
-        min-height: 2.5rem;
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c44:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c51 {
-        background: transparent;
-        border: none;
-        position: relative;
-        z-index: 1;
-      }
-
-      .c51 svg {
-        height: 0.6875rem;
-        width: 0.6875rem;
-      }
-
-      .c51 svg path {
-        fill: #666687;
-      }
-
-      .c52 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        background: none;
-        border: none;
-      }
-
-      .c52 svg {
-        width: 0.375rem;
-      }
-
-      .c47 {
-        width: 100%;
-      }
-
-      .c30 {
-        background: #f6f6f9;
-        padding: 4px;
-        border-radius: 4px;
-        border-style: solid;
-        border-width: 1px;
-        border-color: #dcdce4;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-      }
-
-      .c32 {
-        padding-right: 12px;
-        padding-left: 12px;
-        border-radius: 4px;
-      }
-
-      .c24 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c26 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-      }
-
-      .c33 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-      }
-
-      .c27 {
-        font-weight: 600;
-        color: #32324d;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c35 {
-        font-weight: 600;
-        color: #666687;
-        text-transform: uppercase;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c37 {
-        font-weight: 600;
-        color: #4945ff;
-        text-transform: uppercase;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c39 {
-        color: #666687;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-      .c25 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c25 > * + * {
-        margin-top: 4px;
-      }
-
-      .c29 {
-        border: 0;
-        -webkit-clip: rect(0 0 0 0);
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-      }
-
-      .c28 {
-        position: relative;
-        display: inline-block;
-        z-index: 0;
-        width: 100%;
-      }
-
-      .c31 {
-        overflow: hidden;
-        -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c31:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c34 {
-        background-color: transparent;
-        border: 1px solid #f6f6f9;
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        z-index: 2;
-        -webkit-flex: 1 1 50%;
-        -ms-flex: 1 1 50%;
-        flex: 1 1 50%;
-        padding-top: 6px;
-        padding-bottom: 6px;
-      }
-
-      .c36 {
-        background-color: #ffffff;
-        border: 1px solid #dcdce4;
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        z-index: 2;
-        -webkit-flex: 1 1 50%;
-        -ms-flex: 1 1 50%;
-        flex: 1 1 50%;
-        padding-top: 6px;
-        padding-bottom: 6px;
-      }
-
-      .c38 {
-        height: 100%;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        z-index: 1;
-        width: 100%;
-      }
-
-      .c23 {
-        max-width: 320px;
-      }
-
-      .c1 {
-        padding-bottom: 56px;
-      }
-
-      .c4 {
-        background: #f6f6f9;
-        padding-top: 40px;
-        padding-right: 56px;
-        padding-bottom: 40px;
-        padding-left: 56px;
-      }
-
-      .c16 {
-        padding-right: 56px;
-        padding-left: 56px;
-      }
-
-      .c0 {
-        display: grid;
-        grid-template-columns: 1fr;
-      }
-
-      .c2 {
-        overflow-x: hidden;
-      }
-
-      .c5 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .c6 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-      }
-
-      .c7 {
-        color: #32324d;
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 1.25;
-      }
-
-      .c15 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
-      .c3:focus-visible {
-        outline: none;
-      }
-
-      .c21 {
-        display: grid;
-        grid-template-columns: repeat(12,1fr);
-        gap: 16px;
-      }
-
-      .c22 {
-        grid-column: span 6;
-        max-width: 100%;
-      }
-
-      @media (max-width:68.75rem) {
-        .c22 {
-          grid-column: span 12;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c22 {
-          grid-column: span;
-        }
-      }
-
-      <div
-        class="c0"
-      >
-        <div
-          class="c1 c2"
-        >
-          <main
-            aria-labelledby="main-content-title"
-            class="c3"
-            id="main-content"
-            tabindex="-1"
-          >
-            <form>
-              <div
-                style="height: 0px;"
-              >
-                <div
-                  class="c4"
-                  data-strapi-header="true"
-                >
-                  <div
-                    class="c5"
-                  >
-                    <div
-                      class="c6"
-                    >
-                      <h1
-                        class="c7"
-                      >
-                        Single Sign-On
-                      </h1>
-                    </div>
-                    <button
-                      aria-disabled="true"
-                      class="c8 c9"
-                      data-testid="save-button"
-                      disabled=""
-                      type="submit"
-                    >
-                      <div
-                        aria-hidden="true"
-                        class="c10 c11 c12"
-                      >
-                        <svg
-                          fill="none"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.727 2.97a.2.2 0 01.286 0l2.85 2.89a.2.2 0 010 .28L9.554 20.854a.2.2 0 01-.285 0l-9.13-9.243a.2.2 0 010-.281l2.85-2.892a.2.2 0 01.284 0l6.14 6.209L20.726 2.97z"
-                            fill="#212134"
-                          />
-                        </svg>
-                      </div>
-                      <span
-                        class="c13 c14"
-                      >
-                        Save
-                      </span>
-                    </button>
-                  </div>
-                  <p
-                    class="c15"
-                  >
-                    Configure the settings for the Single Sign-On feature.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="c16"
-              >
-                <div
-                  class="c17 c18 c19"
-                  spacing="4"
-                >
-                  <h2
-                    class="c20"
-                  >
-                    Settings
-                  </h2>
-                  <div
-                    class="c21"
-                  >
-                    <div
-                      class="c22"
-                    >
-                      <div
-                        class=""
-                      >
-                        <div
-                          class="c23"
-                        >
-                          <div
-                            class="c24 c25"
-                            spacing="1"
-                          >
-                            <div
-                              class="c26"
-                            >
-                              <label
-                                class="c27"
-                                for="toggleinput-1"
-                              >
-                                <div
-                                  class="c26"
-                                >
-                                  Auto-registration
-                                </div>
-                              </label>
-                            </div>
-                            <label
-                              class="c28"
-                            >
-                              <div
-                                class="c29"
-                              >
-                                Auto-registration
-                              </div>
-                              <div
-                                class="c30 c31"
-                                display="flex"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  class="c32 c33 c34"
-                                >
-                                  <span
-                                    class="c35"
-                                  >
-                                    Off
-                                  </span>
-                                </div>
-                                <div
-                                  aria-hidden="true"
-                                  class="c32 c33 c36"
-                                >
-                                  <span
-                                    class="c37"
-                                  >
-                                    On
-                                  </span>
-                                </div>
-                                <input
-                                  aria-disabled="false"
-                                  aria-label="autoRegister"
-                                  checked=""
-                                  class="c38"
-                                  data-testid="autoRegister"
-                                  id="toggleinput-1"
-                                  name="autoRegister"
-                                  type="checkbox"
-                                />
-                              </div>
-                            </label>
-                            <p
-                              class="c39"
-                              id="toggleinput-1-hint"
-                            >
-                              Create new user on SSO login if no account exists
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="c22"
-                    >
-                      <div
-                        class=""
-                      >
-                        <div>
-                          <div
-                            class="c40 c41"
-                            spacing="1"
-                          >
-                            <span
-                              class="c42"
-                              for="select-1"
-                              id="select-1-label"
-                            >
-                              <div
-                                class="c43"
-                              >
-                                Default role
-                              </div>
-                            </span>
-                            <div
-                              class="c43 c44"
-                            >
-                              <button
-                                aria-describedby="select-1-hint"
-                                aria-disabled="false"
-                                aria-expanded="false"
-                                aria-haspopup="listbox"
-                                aria-labelledby="select-1-label select-1-content"
-                                class="c45"
-                                id="select-1"
-                                name="defaultRole"
-                                type="button"
-                              />
-                              <div
-                                class="c46 c47"
-                              >
-                                <div
-                                  class="c43"
-                                >
-                                  <div
-                                    class="c48"
-                                  >
-                                    <span
-                                      class="c49"
-                                      id="select-1-content"
-                                    >
-                                      Editor
-                                    </span>
-                                  </div>
-                                </div>
-                                <div
-                                  class="c43"
-                                >
-                                  <button
-                                    aria-hidden="true"
-                                    class="c50 c51 c52"
-                                    tabindex="-1"
-                                    type="button"
-                                  >
-                                    <svg
-                                      fill="none"
-                                      height="1em"
-                                      viewBox="0 0 14 8"
-                                      width="1em"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        clip-rule="evenodd"
-                                        d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                                        fill="#32324D"
-                                        fill-rule="evenodd"
-                                      />
-                                    </svg>
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                            <p
-                              class="c53"
-                              id="select-1-hint"
-                            >
-                              It will attach the new authenticated user to the selected role
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </form>
-          </main>
-        </div>
-      </div>
-    `);
   });
 
   it('should disable the form when there is no change', async () => {
@@ -974,7 +87,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
       });
     });
 
-    userEvent.click(el);
+    fireEvent.click(el);
 
     expect(screen.getByTestId('save-button')).not.toBeDisabled();
   });

packages/core/upload/admin/src/components/AssetCard/tests/AssetCardBase.test.js

@@ -30,15 +30,16 @@ describe('AssetCardBase', () => {
       expect(onSelect).toHaveBeenCalledTimes(1);
     });
 
-    it('should call onEdit when the edit button is clicked after the card has been hovered', () => {
+    it('should call onEdit when the edit button is clicked after the card has been hovered', async () => {
       const onEdit = jest.fn();
+      const user = userEvent.setup();
       const { getAllByRole } = render({
         onEdit,
       });
 
       const [card, button] = getAllByRole('button');
 
-      userEvent.hover(card);
+      await user.hover(card);
 
       waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
 
@@ -47,19 +48,20 @@ describe('AssetCardBase', () => {
       expect(onEdit).toHaveBeenCalledTimes(1);
     });
 
-    it('should call onRemove when the remove button is clicked after the card has been hovered', () => {
+    it('should call onRemove when the remove button is clicked after the card has been hovered', async () => {
       const onRemove = jest.fn();
+      const user = userEvent.setup();
       const { getAllByRole } = render({
         onRemove,
       });
 
       const [card, button] = getAllByRole('button');
 
-      userEvent.hover(card);
+      await user.hover(card);
 
       waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
 
-      fireEvent.click(button);
+      await user.click(button);
 
       expect(onRemove).toHaveBeenCalledTimes(1);
     });
@@ -79,27 +81,29 @@ describe('AssetCardBase', () => {
   });
 
   describe('Keyboard Navigation', () => {
-    it('should focus checkbox when the card is first tabbed too', () => {
+    it('should focus checkbox when the card is first tabbed too', async () => {
+      const user = userEvent.setup();
       const { getByRole } = render({
         onSelect: jest.fn(),
         onEdit: jest.fn(),
         onRemove: jest.fn(),
       });
 
-      userEvent.tab();
+      await user.tab();
 
       expect(getByRole('checkbox')).toHaveFocus();
     });
 
-    it('should focus the edit button and change their opacity when the card is tabbed too', () => {
+    it('should focus the edit button and change their opacity when the card is tabbed too', async () => {
+      const user = userEvent.setup();
       const { getAllByRole } = render({
         onSelect: jest.fn(),
         onEdit: jest.fn(),
         onRemove: jest.fn(),
       });
 
-      userEvent.tab();
+      await user.tab();
-      userEvent.tab();
+      await user.tab();
 
       const button = getAllByRole('button')[1];
 

packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -141,10 +140,12 @@ describe('<EditAssetDialog />', () => {
     });
 
     it('open confirm box on close if data has changed', () => {
-      renderCompo();
+      const { getByRole } = renderCompo();
 
-      userEvent.type(screen.getByLabelText('Alternative text'), 'Test');
+      fireEvent.change(getByRole('textbox', { name: /alternative text/i }), {
-      fireEvent.click(screen.getByText('Cancel'));
+        target: { value: 'Test' },
+      });
+      fireEvent.click(getByRole('button', { name: /cancel/i }));
 
       expect(window.confirm).toBeCalled();
     });

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js

@@ -1346,6 +1346,7 @@ describe('Admin | containers | RoleEditPage', () => {
 
   it("can edit a users-permissions role's name and description", async () => {
     const { getByLabelText, getByRole, getByTestId, getAllByText } = makeAndRenderApp();
+    const user = userEvent.setup();
 
     // Check loading screen
     const loader = getByTestId('loader');
@@ -1361,19 +1362,20 @@ describe('Admin | containers | RoleEditPage', () => {
     expect(descriptionField).toBeInTheDocument();
 
     // Shows error when name is missing
-    await userEvent.clear(nameField);
+    await user.clear(nameField);
     expect(nameField).toHaveValue('');
-    await userEvent.clear(descriptionField);
+    await user.clear(descriptionField);
     expect(descriptionField).toHaveValue('');
 
     // Show errors after form submit
-    await userEvent.click(saveButton);
+    await user.click(saveButton);
     await waitFor(() => expect(saveButton).not.toBeDisabled());
     const errorMessages = await getAllByText(/invalid value/i);
     errorMessages.forEach((errorMessage) => expect(errorMessage).toBeInTheDocument());
   });
 
   it('can toggle the permissions accordions and actions', async () => {
+    const user = userEvent.setup();
     // Create app and wait for loading
     const { getByLabelText, queryByText, getByTestId, getByText, getAllByRole } =
       makeAndRenderApp();
@@ -1382,12 +1384,12 @@ describe('Admin | containers | RoleEditPage', () => {
 
     // Open the collapse
     const collapse = getByText(/define all allowed actions for the api::address plugin/i);
-    await userEvent.click(collapse);
+    await user.click(collapse);
     expect(getByLabelText(/select all/i)).toBeInTheDocument();
 
     // Display the selected action's bound route
     const actionCogButton = getByTestId('action-cog');
-    await userEvent.click(actionCogButton);
+    await user.click(actionCogButton);
     expect(getByText(/bound route to/i)).toBeInTheDocument();
     expect(getByText('POST')).toBeInTheDocument();
     expect(getByText('/addresses')).toBeInTheDocument();
@@ -1395,13 +1397,13 @@ describe('Admin | containers | RoleEditPage', () => {
     // Select all actions with the "select all" checkbox
     const [selectAllCheckbox, ...actionCheckboxes] = getAllByRole('checkbox');
     expect(selectAllCheckbox.checked).toBe(false);
-    await userEvent.click(selectAllCheckbox);
+    await user.click(selectAllCheckbox);
     actionCheckboxes.forEach((actionCheckbox) => {
       expect(actionCheckbox.checked).toBe(true);
     });
 
     // Close the collapse
-    await userEvent.click(collapse);
+    await user.click(collapse);
     expect(queryByText(/select all/i)).not.toBeInTheDocument();
   });
 });