mirror of
https://github.com/strapi/strapi.git
synced 2025-10-28 08:32:08 +00:00
Chore: Update tests for @testing-library/user-event API changes
This commit is contained in:
Gustav Hansen
parent
ea0ab221c3
commit
9ffd38f6c9
@ -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');
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
<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>
|
||||
`);
|
||||
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();
|
||||
});
|
||||
|
||||
@ -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];
|
||||
|
||||
|
||||
@ -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.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();
|
||||
});
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user