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