mirror of
https://github.com/strapi/strapi.git
synced 2025-10-30 17:37:26 +00:00
chore(admin): convert UseCasePage to TS (#18477)
This commit is contained in:
Gustav Hansen
GitHub
parent
e62ab74959
commit
b9d72cb234
@ -28,7 +28,7 @@ import { useEnterprise } from '../../hooks/useEnterprise';
|
|||||||
import { createRoute, makeUniqueRoutes } from '../../utils';
|
import { createRoute, makeUniqueRoutes } from '../../utils';
|
||||||
import AuthPage from '../AuthPage';
|
import AuthPage from '../AuthPage';
|
||||||
import { NotFoundPage } from '../NotFoundPage';
|
import { NotFoundPage } from '../NotFoundPage';
|
||||||
import UseCasePage from '../UseCasePage';
|
import { UseCasePage } from '../UseCasePage';
|
||||||
|
|
||||||
import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
|
import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
@ -17,8 +17,8 @@ import { useIntl } from 'react-intl';
|
|||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import { Logo } from '../../components/UnauthenticatedLogo';
|
import { Logo } from '../components/UnauthenticatedLogo';
|
||||||
import { LayoutContent, UnauthenticatedLayout } from '../../layouts/UnauthenticatedLayout';
|
import { LayoutContent, UnauthenticatedLayout } from '../layouts/UnauthenticatedLayout';
|
||||||
|
|
||||||
export const options = [
|
export const options = [
|
||||||
{
|
{
|
||||||
@ -69,19 +69,19 @@ const TypographyCenter = styled(Typography)`
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const UseCasePage = () => {
|
export const UseCasePage = () => {
|
||||||
const toggleNotification = useNotification();
|
const toggleNotification = useNotification();
|
||||||
const { push, location } = useHistory();
|
const { push, location } = useHistory();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const [role, setRole] = useState();
|
const [role, setRole] = React.useState<string | number | null>(null);
|
||||||
const [otherRole, setOtherRole] = useState('');
|
const [otherRole, setOtherRole] = React.useState('');
|
||||||
const { post } = useFetchClient();
|
const { post } = useFetchClient();
|
||||||
|
|
||||||
const { firstname, email } = auth.getUserInfo();
|
const { firstname, email } = auth.get('userInfo') ?? {};
|
||||||
const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true });
|
const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true });
|
||||||
const isOther = role === 'other';
|
const isOther = role === 'other';
|
||||||
|
|
||||||
const handleSubmit = async (event, skipPersona) => {
|
const handleSubmit = async (event: React.FormEvent, skipPersona: boolean) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
try {
|
try {
|
||||||
await post('https://analytics.strapi.io/register', {
|
await post('https://analytics.strapi.io/register', {
|
||||||
@ -133,7 +133,7 @@ const UseCasePage = () => {
|
|||||||
})}
|
})}
|
||||||
// onClear={() => setRole(null)}
|
// onClear={() => setRole(null)}
|
||||||
// clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
|
// clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
|
||||||
onChange={setRole}
|
onChange={(value) => setRole(value)}
|
||||||
value={role}
|
value={role}
|
||||||
>
|
>
|
||||||
{options.map(({ intlLabel, value }) => (
|
{options.map(({ intlLabel, value }) => (
|
||||||
@ -159,7 +159,7 @@ const UseCasePage = () => {
|
|||||||
</LayoutContent>
|
</LayoutContent>
|
||||||
<Flex justifyContent="center">
|
<Flex justifyContent="center">
|
||||||
<Box paddingTop={4}>
|
<Box paddingTop={4}>
|
||||||
<TextButton onClick={() => handleSubmit(true)}>
|
<TextButton onClick={(event) => handleSubmit(event, true)}>
|
||||||
{formatMessage({
|
{formatMessage({
|
||||||
id: 'Usecase.button.skip',
|
id: 'Usecase.button.skip',
|
||||||
defaultMessage: 'Skip this question',
|
defaultMessage: 'Skip this question',
|
||||||
@ -171,5 +171,3 @@ const UseCasePage = () => {
|
|||||||
</UnauthenticatedLayout>
|
</UnauthenticatedLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default UseCasePage;
|
|
||||||
@ -1,799 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { lightTheme, ThemeProvider } from '@strapi/design-system';
|
|
||||||
import { render, screen } from '@testing-library/react';
|
|
||||||
import userEvent from '@testing-library/user-event';
|
|
||||||
import { createMemoryHistory } from 'history';
|
|
||||||
import { IntlProvider } from 'react-intl';
|
|
||||||
import { Router } from 'react-router-dom';
|
|
||||||
|
|
||||||
import UseCasePage from '../index';
|
|
||||||
|
|
||||||
jest.mock('@strapi/helper-plugin', () => ({
|
|
||||||
...jest.requireActual('@strapi/helper-plugin'),
|
|
||||||
useNotification: jest.fn(),
|
|
||||||
auth: {
|
|
||||||
getUserInfo: jest.fn(() => ({
|
|
||||||
firstname: 'Michka',
|
|
||||||
email: 'michka@ronronscelestes.com',
|
|
||||||
})),
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const history = createMemoryHistory();
|
|
||||||
|
|
||||||
const App = (
|
|
||||||
<IntlProvider messages={{}} textComponent="span" locale="en">
|
|
||||||
<ThemeProvider theme={lightTheme}>
|
|
||||||
<Router history={history}>
|
|
||||||
<UseCasePage />
|
|
||||||
</Router>
|
|
||||||
</ThemeProvider>
|
|
||||||
</IntlProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
describe('Admin | UseCasePage', () => {
|
|
||||||
it('renders and matches the snapshot', () => {
|
|
||||||
const { container: firstChild } = render(App);
|
|
||||||
|
|
||||||
expect(firstChild).toMatchInlineSnapshot(`
|
|
||||||
.c38 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c9 {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.43;
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #32324d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c21 {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1.25;
|
|
||||||
color: #32324d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c24 {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.33;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #32324d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c26 {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.43;
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c31 {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.43;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c37 {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.33;
|
|
||||||
color: #4945ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c1 {
|
|
||||||
padding-top: 24px;
|
|
||||||
padding-right: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3 {
|
|
||||||
background: #ffffff;
|
|
||||||
padding-right: 12px;
|
|
||||||
padding-left: 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c6 {
|
|
||||||
-webkit-flex: 1;
|
|
||||||
-ms-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c13 {
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-bottom: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c15 {
|
|
||||||
background: #ffffff;
|
|
||||||
padding-top: 48px;
|
|
||||||
padding-right: 56px;
|
|
||||||
padding-bottom: 48px;
|
|
||||||
padding-left: 56px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c17 {
|
|
||||||
padding-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c20 {
|
|
||||||
padding-top: 24px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
width: 15.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c27 {
|
|
||||||
background: #4945ff;
|
|
||||||
padding: 8px;
|
|
||||||
padding-right: 16px;
|
|
||||||
padding-left: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border-color: #4945ff;
|
|
||||||
border: 1px solid #4945ff;
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c33 {
|
|
||||||
padding-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c34 {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c0 {
|
|
||||||
-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: end;
|
|
||||||
-webkit-justify-content: flex-end;
|
|
||||||
-ms-flex-pack: end;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c2 {
|
|
||||||
-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;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c4 {
|
|
||||||
-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;
|
|
||||||
gap: 16px;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-webkit-justify-content: space-between;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c7 {
|
|
||||||
-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;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c18 {
|
|
||||||
-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: column;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c23 {
|
|
||||||
-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;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c28 {
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
display: -webkit-inline-box;
|
|
||||||
display: -webkit-inline-flex;
|
|
||||||
display: -ms-inline-flexbox;
|
|
||||||
display: inline-flex;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c32 {
|
|
||||||
-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c35 {
|
|
||||||
-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;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36 {
|
|
||||||
border: none;
|
|
||||||
position: relative;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36[aria-disabled='true'] {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36[aria-disabled='true'] svg path {
|
|
||||||
fill: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36 svg path {
|
|
||||||
fill: #4945ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c36:focus-visible:after {
|
|
||||||
border-radius: 8px;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -5px;
|
|
||||||
bottom: -5px;
|
|
||||||
left: -5px;
|
|
||||||
right: -5px;
|
|
||||||
border: 2px solid #4945ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
|
||||||
position: relative;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 > svg {
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 > svg > g,
|
|
||||||
.c29 > svg path {
|
|
||||||
fill: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29[aria-disabled='true'] {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29:focus-visible:after {
|
|
||||||
border-radius: 8px;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -5px;
|
|
||||||
bottom: -5px;
|
|
||||||
left: -5px;
|
|
||||||
right: -5px;
|
|
||||||
border: 2px solid #4945ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30 {
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30 svg {
|
|
||||||
height: 0.75rem;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30[aria-disabled='true'] {
|
|
||||||
border: 1px solid #dcdce4;
|
|
||||||
background: #eaeaef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30[aria-disabled='true'] .c8 {
|
|
||||||
color: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30[aria-disabled='true'] svg > g,
|
|
||||||
.c30[aria-disabled='true'] svg path {
|
|
||||||
fill: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30[aria-disabled='true']:active {
|
|
||||||
border: 1px solid #dcdce4;
|
|
||||||
background: #eaeaef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30[aria-disabled='true']:active .c8 {
|
|
||||||
color: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30[aria-disabled='true']:active svg > g,
|
|
||||||
.c30[aria-disabled='true']:active svg path {
|
|
||||||
fill: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30:hover {
|
|
||||||
border: 1px solid #7b79ff;
|
|
||||||
background: #7b79ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30:active {
|
|
||||||
border: 1px solid #4945ff;
|
|
||||||
background: #4945ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c30 svg > g,
|
|
||||||
.c30 svg path {
|
|
||||||
fill: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c25 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c5 {
|
|
||||||
border: 1px solid #dcdce4;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c5[aria-disabled='true'] {
|
|
||||||
color: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c5:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c5:focus-within {
|
|
||||||
border: 1px solid #4945ff;
|
|
||||||
box-shadow: #4945ff 0px 0px 0px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c12 > svg {
|
|
||||||
width: 0.375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c12 > svg > path {
|
|
||||||
fill: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c10 {
|
|
||||||
-webkit-flex: 1;
|
|
||||||
-ms-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c11 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
-webkit-flex-wrap: wrap;
|
|
||||||
-ms-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c39[data-state='checked'] .c8 {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #4945ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c14:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c19 {
|
|
||||||
height: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c16 {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 552px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c22 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<header
|
|
||||||
class="c0"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class=""
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c2"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
aria-autocomplete="none"
|
|
||||||
aria-controls="radix-:r3:"
|
|
||||||
aria-describedby=":r0:-hint :r0:-error"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-label="Select interface language"
|
|
||||||
class="c3 c4 c5"
|
|
||||||
data-state="closed"
|
|
||||||
dir="ltr"
|
|
||||||
id=":r0:"
|
|
||||||
overflow="hidden"
|
|
||||||
role="combobox"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c6 c7"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c8 c9 c10"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c11"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="c7"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="c12"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
height="1rem"
|
|
||||||
viewBox="0 0 14 8"
|
|
||||||
width="1rem"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
|
|
||||||
fill="#32324D"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div
|
|
||||||
class="c13"
|
|
||||||
>
|
|
||||||
<main
|
|
||||||
aria-labelledby="usecase-title"
|
|
||||||
class="c14"
|
|
||||||
id="main-content"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c15 c16"
|
|
||||||
>
|
|
||||||
<form>
|
|
||||||
<div
|
|
||||||
class="c17 c18"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="c19"
|
|
||||||
src=""
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="c20"
|
|
||||||
>
|
|
||||||
<h1
|
|
||||||
class="c8 c21 c22"
|
|
||||||
id="usecase-title"
|
|
||||||
>
|
|
||||||
Tell us a bit more about yourself
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="c23"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class=""
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c2"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="c8 c24 c25"
|
|
||||||
for="usecase"
|
|
||||||
>
|
|
||||||
What type of work do you do?
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
aria-autocomplete="none"
|
|
||||||
aria-controls="radix-:r7:"
|
|
||||||
aria-describedby="usecase-hint usecase-error"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-label="What type of work do you do?"
|
|
||||||
class="c3 c4 c5"
|
|
||||||
data-state="closed"
|
|
||||||
dir="ltr"
|
|
||||||
id="usecase"
|
|
||||||
overflow="hidden"
|
|
||||||
role="combobox"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c6 c7"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c8 c26 c10"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c11"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="c7"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="c12"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
height="1rem"
|
|
||||||
viewBox="0 0 14 8"
|
|
||||||
width="1rem"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
|
|
||||||
fill="#32324D"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
aria-disabled="true"
|
|
||||||
class="c27 c28 c29 c30"
|
|
||||||
disabled=""
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c8 c31"
|
|
||||||
>
|
|
||||||
Finish
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="c32"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c33"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-disabled="false"
|
|
||||||
class="c34 c35 c36"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c8 c37"
|
|
||||||
>
|
|
||||||
Skip this question
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="c38"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
aria-live="polite"
|
|
||||||
aria-relevant="all"
|
|
||||||
id="live-region-log"
|
|
||||||
role="log"
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
aria-live="polite"
|
|
||||||
aria-relevant="all"
|
|
||||||
id="live-region-status"
|
|
||||||
role="status"
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
aria-live="assertive"
|
|
||||||
aria-relevant="all"
|
|
||||||
id="live-region-alert"
|
|
||||||
role="alert"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should not show Other input if select value is not Other', async () => {
|
|
||||||
const { queryByTestId } = render(App);
|
|
||||||
const user = userEvent.setup();
|
|
||||||
|
|
||||||
const selectInput = screen.getByRole('combobox', { name: 'What type of work do you do?' });
|
|
||||||
|
|
||||||
await user.click(selectInput);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('option', { name: 'Front-end developer' }));
|
|
||||||
|
|
||||||
expect(queryByTestId('other')).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should show Other input if select value is Other', async () => {
|
|
||||||
const { queryByTestId } = render(App);
|
|
||||||
const user = userEvent.setup();
|
|
||||||
|
|
||||||
const selectInput = screen.getByRole('combobox', { name: 'What type of work do you do?' });
|
|
||||||
|
|
||||||
await user.click(selectInput);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('option', { name: 'Other' }));
|
|
||||||
|
|
||||||
expect(queryByTestId('other')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { lightTheme, ThemeProvider } from '@strapi/design-system';
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { createMemoryHistory } from 'history';
|
||||||
|
import { IntlProvider } from 'react-intl';
|
||||||
|
import { Router } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { UseCasePage } from '../UseCasePage';
|
||||||
|
|
||||||
|
jest.mock('@strapi/helper-plugin', () => ({
|
||||||
|
...jest.requireActual('@strapi/helper-plugin'),
|
||||||
|
useNotification: jest.fn(),
|
||||||
|
auth: {
|
||||||
|
get: jest.fn(() => ({
|
||||||
|
firstname: 'Michka',
|
||||||
|
email: 'michka@ronronscelestes.com',
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const history = createMemoryHistory();
|
||||||
|
|
||||||
|
const App = (
|
||||||
|
<IntlProvider messages={{}} textComponent="span" locale="en">
|
||||||
|
<ThemeProvider theme={lightTheme}>
|
||||||
|
<Router history={history}>
|
||||||
|
<UseCasePage />
|
||||||
|
</Router>
|
||||||
|
</ThemeProvider>
|
||||||
|
</IntlProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
describe('Admin | UseCasePage', () => {
|
||||||
|
it('should not show Other input if select value is not Other', async () => {
|
||||||
|
const { queryByTestId } = render(App);
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
const selectInput = screen.getByRole('combobox', { name: 'What type of work do you do?' });
|
||||||
|
|
||||||
|
await user.click(selectInput);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('option', { name: 'Front-end developer' }));
|
||||||
|
|
||||||
|
expect(queryByTestId('other')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show Other input if select value is Other', async () => {
|
||||||
|
const { getByTestId } = render(App);
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
const selectInput = screen.getByRole('combobox', { name: 'What type of work do you do?' });
|
||||||
|
|
||||||
|
await user.click(selectInput);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('option', { name: 'Other' }));
|
||||||
|
|
||||||
|
expect(getByTestId('other')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user