diff --git a/jest.config.js b/jest.config.js
index afddd7fd016117bd1da036cf866227645e66e512..676221f6626e4553dd4bc7479f7d718d8e6b1192 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 c206738ee6a5bf89eb32072a912e79580ae18690..dcf836b7859c6a14b288ca2af20cac1834197525 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 b9bf9d03c82eb368e28297a11127ed5f875fe0e1..fbccff671ac123609b6a0a629ddd8a05efd0777f 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 8f4b6a8ea7631dc6df3632281e24628dd7798cde..fa5c19ea43d2f1205d526e97b11ebf3fa19f78fd 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 0000000000000000000000000000000000000000..31355bbbdc5a851f6ed77885b33162d556a130d1
--- /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 b6deccdf3165fb81f5e290b2c08f73ed02206e96..add18abe40eeb200341d9a34d9e9564efaed8c7c 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,
- },
-}