diff --git a/jest.config.js b/jest.config.js
index 32142e4c2abf6e9e465eeec0a8d6a499480555be..afddd7fd016117bd1da036cf866227645e66e512 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
moduleNameMapper: {
'\\.(png|gif|jpe?g|svg)$': '<rootDir>/test/__mocks__/fileMock.js',
// identity-obj-proxy module is installed by cozy-scripts
- '\\.(css|styl)$': 'identity-obj-proxy',
+ '\\.(css|styl|sass|scss)$': 'identity-obj-proxy',
},
transformIgnorePatterns: [
'node_modules/(?!(cozy-ui|cozy-harvest-lib|cozy-client))',
diff --git a/package.json b/package.json
index 683a63b2323d0fbbd436cb6f1e83cb17bb5a7be2..dacbbac7e09d9af506ac48a3667df0f626eca833 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
"eslint-plugin-react": "7.14.2",
"git-directory-deploy": "1.5.1",
"husky": ">=1",
+ "jest-canvas-mock": "^2.3.0",
"lint-staged": ">=8",
"loglevel": "^1.6.6",
"npm-run-all": "^4.1.5",
diff --git a/src/components/Navbar/Navbar.spec.tsx b/src/components/Navbar/Navbar.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c206738ee6a5bf89eb32072a912e79580ae18690
--- /dev/null
+++ b/src/components/Navbar/Navbar.spec.tsx
@@ -0,0 +1,23 @@
+'use strict'
+/* eslint-env jest */
+import React from 'react'
+import { shallow } from 'enzyme'
+import { RecoilRoot } from 'recoil'
+import Navbar from 'components/Navbar/Navbar'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => ({
+ useI18n: jest.fn().mockResolvedValue({
+ t: (str: string) => str,
+ }),
+}))
+
+describe('Navbar component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(
+ <RecoilRoot>
+ <Navbar />
+ </RecoilRoot>
+ ).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap b/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..8f4b6a8ea7631dc6df3632281e24628dd7798cde
--- /dev/null
+++ b/src/components/Navbar/__snapshots__/Navbar.spec.tsx.snap
@@ -0,0 +1,26 @@
+// 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],
+ },
+ }
+ }
+>
+ <Context.Provider
+ value={null}
+ >
+ <Batcher
+ setNotifyBatcherOfChange={[Function]}
+ />
+ <Navbar />
+ </Context.Provider>
+</Context.Provider>
+`;
diff --git a/src/components/SingleFluid/SingleFluidView.spec.tsx b/src/components/SingleFluid/SingleFluidView.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e67c02c9ebd7d7fd45d284c53f5f8ea27e2c2c5f
--- /dev/null
+++ b/src/components/SingleFluid/SingleFluidView.spec.tsx
@@ -0,0 +1,26 @@
+'use strict'
+/* eslint-env jest */
+import React from 'react'
+import { shallow } from 'enzyme'
+import { RecoilRoot } from 'recoil'
+import SingleFluidView from 'components/SingleFluid/SingleFluidView'
+import { FluidType } from 'enum/fluid.enum'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => ({
+ useI18n: jest.fn().mockResolvedValue({
+ t: (str: string) => str,
+ }),
+}))
+
+describe('SingleFluidView component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(
+ <RecoilRoot>
+ <SingleFluidView
+ fluidTypes={[FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS]}
+ />
+ </RecoilRoot>
+ ).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/SingleFluid/__snapshots__/SingleFluidView.spec.tsx.snap b/src/components/SingleFluid/__snapshots__/SingleFluidView.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..1f74dc03bb559a03b18bc7c688315b1119324037
--- /dev/null
+++ b/src/components/SingleFluid/__snapshots__/SingleFluidView.spec.tsx.snap
@@ -0,0 +1,67 @@
+// 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],
+ },
+ }
+ }
+>
+ <Context.Provider
+ value={null}
+ >
+ <Batcher
+ setNotifyBatcherOfChange={[Function]}
+ />
+ <SingleFluidView
+ fluidTypes={
+ Array [
+ 0,
+ 1,
+ 2,
+ ]
+ }
+ />
+ </Context.Provider>
+</Context.Provider>
+`;
+
+exports[`SingleFluidView component should be rendered correctly 1`] = `
+<Context.Provider
+ value={
+ Object {
+ "current": Object {
+ "addTransactionMetadata": [Function],
+ "getGraph": [Function],
+ "getState": [Function],
+ "replaceState": [Function],
+ "subscribeToTransactions": [Function],
+ },
+ }
+ }
+>
+ <Context.Provider
+ value={null}
+ >
+ <Batcher
+ setNotifyBatcherOfChange={[Function]}
+ />
+ <SingleFluidView
+ fluidTypes={
+ Array [
+ 0,
+ 1,
+ 2,
+ ]
+ }
+ />
+ </Context.Provider>
+</Context.Provider>
+`;
diff --git a/test/jestLib/setup.js b/test/jestLib/setup.js
index 05b19ec0e4cc63e4a02db31e4aa49cd4de1819a9..add18abe40eeb200341d9a34d9e9564efaed8c7c 100644
--- a/test/jestLib/setup.js
+++ b/test/jestLib/setup.js
@@ -1,4 +1,5 @@
require('babel-polyfill')
+require('jest-canvas-mock')
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
diff --git a/yarn.lock b/yarn.lock
index 1552e305724324d5340069b55918d3dfba56f196..8a2b1730edb4b344fc2eb07b264110cdfbeab81b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3541,7 +3541,7 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-color-name@~1.1.4:
+color-name@^1.1.4, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
@@ -4580,6 +4580,11 @@ cssesc@^3.0.0:
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+cssfontparser@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+ integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
csso@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
@@ -8108,6 +8113,14 @@ istanbul-reports@^2.2.6:
dependencies:
html-escaper "^2.0.0"
+jest-canvas-mock@^2.3.0:
+ version "2.3.0"
+ resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.0.tgz#50f4cc178ae52c4c0e2ce4fd3a3ad2a41ad4eb36"
+ integrity sha512-3TMyR66VG2MzAW8Negzec03bbcIjVJMfGNvKzrEnbws1CYKqMNkvIJ8LbkoGYfp42tKqDmhIpQq3v+MNLW2A2w==
+ dependencies:
+ cssfontparser "^1.2.1"
+ moo-color "^1.0.2"
+
jest-changed-files@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
@@ -9630,6 +9643,13 @@ moment-timezone@^0.5.27:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+moo-color@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
+ integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
+ dependencies:
+ color-name "^1.1.4"
+
moo@^0.5.0:
version "0.5.1"
resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"