From 1ca25d4f42eafc17879ba729012ed09de7d99d0e Mon Sep 17 00:00:00 2001 From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com> Date: Tue, 24 Nov 2020 19:11:57 +0100 Subject: [PATCH] feat: test WelcomeModal component --- src/components/Hooks/userInstanceSettings.tsx | 10 ++- .../__snapshots__/Version.spec.tsx.snap | 8 -- src/components/Welcome/WelcomeModal.spec.tsx | 41 ++++++++++ src/components/Welcome/WelcomeModal.tsx | 12 ++- .../__snapshots__/WelcomeModal.spec.tsx.snap | 77 +++++++++++++++++++ src/models/index.ts | 1 + src/models/userInstanceSettings.model.ts | 18 +++++ 7 files changed, 149 insertions(+), 18 deletions(-) create mode 100644 src/components/Welcome/WelcomeModal.spec.tsx create mode 100644 src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap create mode 100644 src/models/userInstanceSettings.model.ts diff --git a/src/components/Hooks/userInstanceSettings.tsx b/src/components/Hooks/userInstanceSettings.tsx index 91d22c980..d4e6ae533 100644 --- a/src/components/Hooks/userInstanceSettings.tsx +++ b/src/components/Hooks/userInstanceSettings.tsx @@ -1,11 +1,15 @@ import { useState, useEffect } from 'react' import get from 'lodash/get' import { useClient } from 'cozy-client' +import { UserInstanceSettings, UserInstanceSettingsAttributes } from 'models' -const userInstanceSettings = () => { +const userInstanceSettings = (): UserInstanceSettings => { const client = useClient() - const [settings, setSettings] = useState({}) - const [fetchStatus, setFetchStatus] = useState('idle') + const [settings, setSettings] = useState<UserInstanceSettingsAttributes>({ + // eslint-disable-next-line @typescript-eslint/camelcase + public_name: '', + }) + const [fetchStatus, setFetchStatus] = useState<string>('idle') useEffect(() => { const fetchData = async () => { diff --git a/src/components/Version/__snapshots__/Version.spec.tsx.snap b/src/components/Version/__snapshots__/Version.spec.tsx.snap index c087d2c91..05ce42fbf 100644 --- a/src/components/Version/__snapshots__/Version.spec.tsx.snap +++ b/src/components/Version/__snapshots__/Version.spec.tsx.snap @@ -1,13 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Navbar component should be rendered correctly 1`] = ` -<div - className="version-root text-14-normal" -> - v 0.0.° -</div> -`; - exports[`Version component should be rendered correctly 1`] = ` <div className="version-root text-14-normal" diff --git a/src/components/Welcome/WelcomeModal.spec.tsx b/src/components/Welcome/WelcomeModal.spec.tsx new file mode 100644 index 000000000..052050fe7 --- /dev/null +++ b/src/components/Welcome/WelcomeModal.spec.tsx @@ -0,0 +1,41 @@ +'use strict' +/* eslint-env jest */ +import React from 'react' +import { shallow } from 'enzyme' +import WelcomeModal from './WelcomeModal' + +jest.mock('cozy-ui/transpiled/react/I18n', () => { + return { + useI18n: jest.fn(() => { + return { + t: (str: string) => str, + } + }), + } +}) + +jest.mock('components/Hooks/userInstanceSettings', () => + jest.fn().mockReturnValue({ + // eslint-disable-next-line @typescript-eslint/camelcase + data: { public_name: 'User' }, + fetchStatus: 'loaded', + }) +) + +describe('WelcomeModal component', () => { + it('should be rendered correctly opened', () => { + const handleClose = jest.fn() + const component = shallow( + <WelcomeModal open={true} handleCloseClick={handleClose} /> + ).getElement() + expect(component).toMatchSnapshot() + }) + + it('should be rendered correctly closed', () => { + const handleClose = jest.fn() + const component = shallow( + <WelcomeModal open={false} handleCloseClick={handleClose} /> + ).getElement() + expect(component).toMatchSnapshot() + }) +}) diff --git a/src/components/Welcome/WelcomeModal.tsx b/src/components/Welcome/WelcomeModal.tsx index 73cfcaf84..afffbfc47 100644 --- a/src/components/Welcome/WelcomeModal.tsx +++ b/src/components/Welcome/WelcomeModal.tsx @@ -4,15 +4,15 @@ import Modal from 'components/CommonKit/Modal/Modal' import StyledButton from 'components/CommonKit/Button/StyledButton' import userInstanceSettings from 'components/Hooks/userInstanceSettings' -interface WelcomeModalContainerProps { +interface WelcomeModalProps { open: boolean handleCloseClick: () => void } -const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({ +const WelcomeModal: React.FC<WelcomeModalProps> = ({ open, handleCloseClick, -}: WelcomeModalContainerProps) => { +}: WelcomeModalProps) => { const { t } = useI18n() const { data: instanceSettings } = userInstanceSettings() @@ -27,9 +27,7 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({ {t('COMMON.WELCOME_MODAL_TITLE')} </div> <div className="wm-name text-24-bold"> - {instanceSettings.public_name - ? `${instanceSettings.public_name} !` - : null} + {`${instanceSettings.public_name} !`} </div> <div className="wm-perso text-18-bold"> @@ -46,4 +44,4 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({ ) } -export default WelcomeModalContainer +export default WelcomeModal diff --git a/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap new file mode 100644 index 000000000..a05fcc036 --- /dev/null +++ b/src/components/Welcome/__snapshots__/WelcomeModal.spec.tsx.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WelcomeModal component should be rendered correctly closed 1`] = ` +<React.Fragment> + <Modal + handleCloseClick={[MockFunction]} + open={false} + yellowBorder={true} + > + <div + className="wm-header text-24-bold" + > + COMMON.WELCOME_MODAL_TITLE + </div> + <div + className="wm-name text-24-bold" + > + User ! + </div> + <div + className="wm-perso text-18-bold" + > + COMMON.WELCOME_MODAL_PERSO + </div> + <div + className="wm-connect text-18-bold" + > + COMMON.WELCOME_MODAL_CONNECT + </div> + <StyledButton + className="button-ok" + color="primary" + onClick={[MockFunction]} + > + COMMON.MODAL_OK + </StyledButton> + </Modal> +</React.Fragment> +`; + +exports[`WelcomeModal component should be rendered correctly opened 1`] = ` +<React.Fragment> + <Modal + handleCloseClick={[MockFunction]} + open={true} + yellowBorder={true} + > + <div + className="wm-header text-24-bold" + > + COMMON.WELCOME_MODAL_TITLE + </div> + <div + className="wm-name text-24-bold" + > + User ! + </div> + <div + className="wm-perso text-18-bold" + > + COMMON.WELCOME_MODAL_PERSO + </div> + <div + className="wm-connect text-18-bold" + > + COMMON.WELCOME_MODAL_CONNECT + </div> + <StyledButton + className="button-ok" + color="primary" + onClick={[MockFunction]} + > + COMMON.MODAL_OK + </StyledButton> + </Modal> +</React.Fragment> +`; diff --git a/src/models/index.ts b/src/models/index.ts index a3b55612c..5cd40965d 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -11,4 +11,5 @@ export * from './modal.model' export * from './report.model' export * from './timePeriod.model' export * from './trigger.model' +export * from './userInstanceSettings.model' export * from './userProfile.model' diff --git a/src/models/userInstanceSettings.model.ts b/src/models/userInstanceSettings.model.ts new file mode 100644 index 000000000..d1e2936a9 --- /dev/null +++ b/src/models/userInstanceSettings.model.ts @@ -0,0 +1,18 @@ +export interface UserInstanceSettingsAttributes { + auth_mode?: string + auto_update?: boolean + context?: string + email?: string + locale?: string + oidc_id?: string + onboarding_finished?: boolean + public_name: string + tos?: string + tos_latest?: string + uuid?: string +} + +export interface UserInstanceSettings { + data: UserInstanceSettingsAttributes + fetchStatus: string +} -- GitLab