diff --git a/packages/core/admin/admin/src/components/LanguageProvider/tests/index.test.js b/packages/core/admin/admin/src/components/LanguageProvider/tests/index.test.js index fb3c1e462f..cbb7dbea59 100644 --- a/packages/core/admin/admin/src/components/LanguageProvider/tests/index.test.js +++ b/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 userEvent from '@testing-library/user-event'; +import { render, screen, fireEvent } from '@testing-library/react'; 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(() => { - userEvent.click(screen.getByText('CHANGE')); - }); + fireEvent.click(screen.getByText('CHANGE')); expect(screen.getByText('Français')).toBeInTheDocument(); expect(localStorage.getItem('strapi-admin-language')).toEqual('fr'); diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js index 6642016d99..08ce6a0437 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js +++ b/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') diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js index d8e14e01f7..e5522bc74b 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/plugins.test.js +++ b/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')); - userEvent.click(screen.getByTestId('Collections-button')); - userEvent.click(screen.getByRole('option', { name: `Made by Strapi (13)` })); + await user.click(screen.getByTestId('filters-button')); + await user.click(screen.getByTestId('Collections-button')); + await user.click(screen.getByRole('option', { name: `Made by Strapi (13)` })); await waitForReload(); - userEvent.click(screen.getByTestId('filters-button')); - userEvent.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` })); - userEvent.click(screen.getByRole('option', { name: `Verified (29)` })); + await user.click(screen.getByTestId('filters-button')); + await user.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` })); + 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')); - userEvent.click(screen.getByTestId('Categories-button')); - userEvent.click(screen.getByRole('option', { name: `Custom fields (4)` })); + await user.click(screen.getByTestId('filters-button')); + await user.click(screen.getByTestId('Categories-button')); + await user.click(screen.getByRole('option', { name: `Custom fields (4)` })); await waitForReload(); - userEvent.click(screen.getByTestId('filters-button')); - userEvent.click(screen.getByRole('button', { name: `1 category selected Custom fields` })); - userEvent.click(screen.getByRole('option', { name: `Monitoring (1)` })); + await user.click(screen.getByTestId('filters-button')); + await user.click(screen.getByRole('button', { name: `1 category selected Custom fields` })); + 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'); }); diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js index 44655e47d3..5f85d4b98c 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/providers.test.js +++ b/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); - userEvent.click(filtersButton); + await user.click(providersTab); + 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')); - userEvent.click(screen.getByTestId('Collections-button')); - userEvent.click(screen.getByRole('option', { name: `Made by Strapi (6)` })); + const user = userEvent.setup(); + + 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')); - userEvent.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` })); - userEvent.click(screen.getByRole('option', { name: `Verified (6)` })); + await user.click(screen.getByTestId('filters-button')); + await user.click(screen.getByRole('button', { name: `1 collection selected Made by Strapi` })); + 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') diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js index d3ddce5a74..058024e173 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js +++ b/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'); - userEvent.type(screen.getByLabelText(/url/i), 'https://google.fr'); + fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'My webhook' } }); + 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); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js index 6294b31982..a0f405f573 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js +++ b/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(); diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..386a54f246 --- /dev/null +++ b/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; + } +} + +
+
+
+
+
+
+
+
+

+ Single Sign-On +

+
+ +
+

+ Configure the settings for the Single Sign-On feature. +

+
+
+
+
+

+ Settings +

+
+
+
+
+
+
+ +
+ +

+ Create new user on SSO login if no account exists +

+
+
+
+
+
+
+
+
+ +
+ Default role +
+ +
+ +
+
+
+

+ It will attach the new authenticated user to the selected role +

+
+
+
+
+
+
+
+ + + + +`; diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js index cfdff04b4f..315bbc9df0 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js +++ b/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(` - .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; - } - } - -
-
-
-
-
-
-
-
-

- Single Sign-On -

-
- -
-

- Configure the settings for the Single Sign-On feature. -

-
-
-
-
-

- Settings -

-
-
-
-
-
-
- -
- -

- Create new user on SSO login if no account exists -

-
-
-
-
-
-
-
-
- -
- Default role -
- -
- -
-
-
-

- It will attach the new authenticated user to the selected role -

-
-
-
-
-
-
-
- - - - - `); + expect(firstChild).toMatchSnapshot(); }); 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(); }); diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/AssetCardBase.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/AssetCardBase.test.js index 0ed1892a29..1b364679b5 100644 --- a/packages/core/upload/admin/src/components/AssetCard/tests/AssetCardBase.test.js +++ b/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(); - userEvent.tab(); + await user.tab(); + await user.tab(); const button = getAllByRole('button')[1]; diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js b/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js index 8426173e9c..7a95519db4 100644 --- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js +++ b/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('', () => { }); it('open confirm box on close if data has changed', () => { - renderCompo(); + const { getByRole } = renderCompo(); - userEvent.type(screen.getByLabelText('Alternative text'), 'Test'); - fireEvent.click(screen.getByText('Cancel')); + fireEvent.change(getByRole('textbox', { name: /alternative text/i }), { + target: { value: 'Test' }, + }); + fireEvent.click(getByRole('button', { name: /cancel/i })); expect(window.confirm).toBeCalled(); }); diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js index f823f287ee..7ead595d13 100644 --- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js +++ b/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(); }); });