From 137df0a1a7829ecef3a37b40ab752da376d97fdf Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 17 Nov 2020 21:45:37 +0100
Subject: [PATCH] feat: tests for Navbar component
---
jest.config.js | 11 +-
src/components/Navbar/Navbar.spec.tsx | 37 ++-
src/components/Navbar/Navbar.tsx | 2 +-
.../Navbar/__snapshots__/Navbar.spec.tsx.snap | 267 ++++++++++++++++--
src/services/__mocks__/recoil.ts | 4 +
test/jestLib/setup.js | 9 -
6 files changed, 286 insertions(+), 44 deletions(-)
create mode 100644 src/services/__mocks__/recoil.ts
diff --git a/jest.config.js b/jest.config.js
index afddd7fd0..676221f66 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,6 +18,13 @@ module.exports = {
globals: {
__ALLOW_HTTP__: false,
__TARGET__: 'browser',
- cozy: {},
- },
+ cozy: {
+ bar: {
+ BarLeft: ({ children }) => children,
+ BarRight: ({ children }) => children,
+ BarCenter: ({ children }) => children,
+ setTheme: () => null,
+ },
+ },
+ }
}
diff --git a/src/components/Navbar/Navbar.spec.tsx b/src/components/Navbar/Navbar.spec.tsx
index c206738ee..dcf836b78 100644
--- a/src/components/Navbar/Navbar.spec.tsx
+++ b/src/components/Navbar/Navbar.spec.tsx
@@ -2,22 +2,35 @@
/* eslint-env jest */
import React from 'react'
import { shallow } from 'enzyme'
-import { RecoilRoot } from 'recoil'
import Navbar from 'components/Navbar/Navbar'
+import * as MockRecoil from '../../services/__mocks__/recoil'
+import * as Recoil from 'recoil'
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
- useI18n: jest.fn().mockResolvedValue({
- t: (str: string) => str,
- }),
-}))
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+jest.mock('recoil')
+const { useRecoilValue } = (Recoil as unknown) as typeof MockRecoil
describe('Navbar component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(
- <RecoilRoot>
- <Navbar />
- </RecoilRoot>
- ).getElement()
+ it('should be rendered correctly with notifications', () => {
+ useRecoilValue.mockReturnValue(true)
+ const context = { router: { isActive: () => true } }
+ const component = shallow(<Navbar />, { context }).getElement()
+ expect(component).toMatchSnapshot()
+ })
+
+ it('should be rendered correctly without notifications', () => {
+ useRecoilValue.mockReturnValue(false)
+ const context = { router: { isActive: () => true } }
+ const component = shallow(<Navbar />, { context }).getElement()
expect(component).toMatchSnapshot()
})
})
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index b9bf9d03c..fbccff671 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -21,7 +21,7 @@ import {
reportNotificationState,
} from 'atoms/notification.state'
-export const Navbar = () => {
+export const Navbar: React.FC = () => {
const { t } = useI18n()
const challengeNotification = useRecoilValue(challengeNotificationState)
const reportNotification = useRecoilValue(reportNotificationState)
diff --git a/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap b/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap
index 8f4b6a8ea..fa5c19ea4 100644
--- a/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap
+++ b/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap
@@ -1,26 +1,253 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Navbar component should be rendered correctly 1`] = `
-<Context.Provider
- value={
- Object {
- "current": Object {
- "addTransactionMetadata": [Function],
- "getGraph": [Function],
- "getState": [Function],
- "replaceState": [Function],
- "subscribeToTransactions": [Function],
- },
- }
- }
+exports[`Navbar component should be rendered correctly with notifications 1`] = `
+<aside
+ className="o-sidebar"
>
- <Context.Provider
- value={null}
+ <nav>
+ <ul
+ className="c-nav"
+ >
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/consumption"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.consumption
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/challenges"
+ >
+ <div
+ className="nb-notif"
+ >
+ 1
+ </div>
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.challenges
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/ecogestures"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.ECOGESTURES
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/report"
+ >
+ <div
+ className="nb-notif"
+ >
+ 1
+ </div>
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.report
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/options"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.options
+ </ForwardRef>
+ </li>
+ </ul>
+ </nav>
+ <div
+ className="logos-container"
>
- <Batcher
- setNotifyBatcherOfChange={[Function]}
+ <StyledIcon
+ className="logo-grand-lyon"
+ icon="test-file-stub"
+ size={100}
/>
- <Navbar />
- </Context.Provider>
-</Context.Provider>
+ <img
+ className="logo-tiga"
+ src="test-file-stub"
+ />
+ </div>
+</aside>
+`;
+
+exports[`Navbar component should be rendered correctly without notifications 1`] = `
+<aside
+ className="o-sidebar"
+>
+ <nav>
+ <ul
+ className="c-nav"
+ >
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/consumption"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.consumption
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/challenges"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.challenges
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/ecogestures"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.ECOGESTURES
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/report"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.report
+ </ForwardRef>
+ </li>
+ <li
+ className="c-nav-item"
+ >
+ <ForwardRef
+ activeClassName="is-active"
+ className="c-nav-link"
+ to="/options"
+ >
+ <StyledIcon
+ className="c-nav-icon off"
+ icon="test-file-stub"
+ />
+ <StyledIcon
+ className="c-nav-icon on"
+ icon="test-file-stub"
+ />
+ Nav.options
+ </ForwardRef>
+ </li>
+ </ul>
+ </nav>
+ <div
+ className="logos-container"
+ >
+ <StyledIcon
+ className="logo-grand-lyon"
+ icon="test-file-stub"
+ size={100}
+ />
+ <img
+ className="logo-tiga"
+ src="test-file-stub"
+ />
+ </div>
+</aside>
`;
diff --git a/src/services/__mocks__/recoil.ts b/src/services/__mocks__/recoil.ts
new file mode 100644
index 000000000..31355bbbd
--- /dev/null
+++ b/src/services/__mocks__/recoil.ts
@@ -0,0 +1,4 @@
+export const atom = jest.fn()
+export const selector = jest.fn()
+export const useRecoilValue = jest.fn()
+export const useSetRecoilState = jest.fn()
diff --git a/test/jestLib/setup.js b/test/jestLib/setup.js
index b6deccdf3..add18abe4 100644
--- a/test/jestLib/setup.js
+++ b/test/jestLib/setup.js
@@ -11,12 +11,3 @@ configure({ adapter: new Adapter() })
global.requestAnimationFrame = cb => {
setTimeout(cb, 0)
}
-
-global.cozy = {
- bar: {
- BarLeft: ({ children }) => children,
- BarRight: ({ children }) => children,
- BarCenter: ({ children }) => children,
- setTheme: () => null,
- },
-}
--
GitLab