From b9d72cb2346a10cc4fcdda999ea7556e9fd9a0ce Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 19 Oct 2023 14:53:40 +0200 Subject: [PATCH] chore(admin): convert UseCasePage to TS (#18477) --- .../core/admin/admin/src/pages/App/index.js | 2 +- .../{UseCasePage/index.js => UseCasePage.tsx} | 22 +- .../src/pages/UseCasePage/tests/index.test.js | 799 ------------------ .../src/pages/tests/UseCasePage.test.tsx | 59 ++ 4 files changed, 70 insertions(+), 812 deletions(-) rename packages/core/admin/admin/src/pages/{UseCasePage/index.js => UseCasePage.tsx} (88%) delete mode 100644 packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js create mode 100644 packages/core/admin/admin/src/pages/tests/UseCasePage.test.tsx diff --git a/packages/core/admin/admin/src/pages/App/index.js b/packages/core/admin/admin/src/pages/App/index.js index b2621d6aaa..0892695bff 100644 --- a/packages/core/admin/admin/src/pages/App/index.js +++ b/packages/core/admin/admin/src/pages/App/index.js @@ -28,7 +28,7 @@ import { useEnterprise } from '../../hooks/useEnterprise'; import { createRoute, makeUniqueRoutes } from '../../utils'; import AuthPage from '../AuthPage'; import { NotFoundPage } from '../NotFoundPage'; -import UseCasePage from '../UseCasePage'; +import { UseCasePage } from '../UseCasePage'; import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants'; diff --git a/packages/core/admin/admin/src/pages/UseCasePage/index.js b/packages/core/admin/admin/src/pages/UseCasePage.tsx similarity index 88% rename from packages/core/admin/admin/src/pages/UseCasePage/index.js rename to packages/core/admin/admin/src/pages/UseCasePage.tsx index 04d6509365..20c2da93f6 100644 --- a/packages/core/admin/admin/src/pages/UseCasePage/index.js +++ b/packages/core/admin/admin/src/pages/UseCasePage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import * as React from 'react'; import { Box, @@ -17,8 +17,8 @@ import { useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; -import { Logo } from '../../components/UnauthenticatedLogo'; -import { LayoutContent, UnauthenticatedLayout } from '../../layouts/UnauthenticatedLayout'; +import { Logo } from '../components/UnauthenticatedLogo'; +import { LayoutContent, UnauthenticatedLayout } from '../layouts/UnauthenticatedLayout'; export const options = [ { @@ -69,19 +69,19 @@ const TypographyCenter = styled(Typography)` text-align: center; `; -const UseCasePage = () => { +export const UseCasePage = () => { const toggleNotification = useNotification(); const { push, location } = useHistory(); const { formatMessage } = useIntl(); - const [role, setRole] = useState(); - const [otherRole, setOtherRole] = useState(''); + const [role, setRole] = React.useState(null); + const [otherRole, setOtherRole] = React.useState(''); const { post } = useFetchClient(); - const { firstname, email } = auth.getUserInfo(); + const { firstname, email } = auth.get('userInfo') ?? {}; const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true }); const isOther = role === 'other'; - const handleSubmit = async (event, skipPersona) => { + const handleSubmit = async (event: React.FormEvent, skipPersona: boolean) => { event.preventDefault(); try { await post('https://analytics.strapi.io/register', { @@ -133,7 +133,7 @@ const UseCasePage = () => { })} // onClear={() => setRole(null)} // clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} - onChange={setRole} + onChange={(value) => setRole(value)} value={role} > {options.map(({ intlLabel, value }) => ( @@ -159,7 +159,7 @@ const UseCasePage = () => { - handleSubmit(true)}> + handleSubmit(event, true)}> {formatMessage({ id: 'Usecase.button.skip', defaultMessage: 'Skip this question', @@ -171,5 +171,3 @@ const UseCasePage = () => { ); }; - -export default UseCasePage; diff --git a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js deleted file mode 100644 index d7200c41ac..0000000000 --- a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js +++ /dev/null @@ -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 = ( - - - - - - - -); - -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; - } - -
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-

- Tell us a bit more about yourself -

-
-
-
-
-
- - -
-
- -
-
-
-
-
- -
-
-
-
-
-
-

-

-

-
- `); - }); - - 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(); - }); -}); diff --git a/packages/core/admin/admin/src/pages/tests/UseCasePage.test.tsx b/packages/core/admin/admin/src/pages/tests/UseCasePage.test.tsx new file mode 100644 index 0000000000..29f9189f24 --- /dev/null +++ b/packages/core/admin/admin/src/pages/tests/UseCasePage.test.tsx @@ -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 = ( + + + + + + + +); + +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(); + }); +});