diff --git a/package.json b/package.json
index 83e7c17ad2..8579509436 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
"@semantic-release/git": "7.0.18",
"@semantic-release/npm": "5.3.4",
"@svgr/cli": "^5.4.0",
+ "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.6",
"@testing-library/react-hooks": "^3.2.1",
"argos-cli": "^0.3.3",
@@ -176,7 +177,7 @@
]
},
"jest": {
- "setupFiles": [
+ "setupFilesAfterEnv": [
"./test/jestsetup.js"
],
"moduleFileExtensions": [
diff --git a/react/PushClientButton/Readme.md b/react/PushClientButton/Readme.md
index bc32563dcc..187fd44b62 100644
--- a/react/PushClientButton/Readme.md
+++ b/react/PushClientButton/Readme.md
@@ -2,37 +2,39 @@
Call To Action for downloading Cozy desktop client.
-### Basic usage
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
-
-```
-
-### Options
-
-#### action
-
-You can add a function to `onClick` prop on top of the hyperlink
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
- alert("Clicked!")}
-/>
-```
-
-#### className
-
-You can add custom classNames
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
-
+```jsx
+import ButtonClient from "cozy-ui/transpiled/react/PushClientButton";
+import BrowserBraveIcon from "cozy-ui/transpiled/react/Icons/BrowserBrave";
+import Variants from "cozy-ui/docs/components/Variants";
+
+const initialVariants = [{ onClick: true, className: false, icon: false }];
+
+<>
+
+ {variant => (
+ alert("Clicked!") : undefined}
+ className={variant.className ? "u-m-1" : undefined}
+ icon={variant.icon ? BrowserBraveIcon : undefined}
+ />
+ )}
+
+
+ {isTesting() ? (
+ <>
+
+
+ >
+ ) : null}
+>;
```
diff --git a/react/PushClientButton/index.jsx b/react/PushClientButton/index.jsx
index 9fc260e212..843d0fbbbf 100644
--- a/react/PushClientButton/index.jsx
+++ b/react/PushClientButton/index.jsx
@@ -8,7 +8,8 @@ import Icon from '../Icon'
import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
const ButtonClient = props => {
- const { label, href, onClick, className } = props
+ const { label, href, onClick, className, icon } = props
+
return (
{
onClick={onClick}
>
-
+
{label}
@@ -26,10 +27,16 @@ const ButtonClient = props => {
}
ButtonClient.propTypes = {
+ /** Button's label */
label: PropTypes.string.isRequired,
+ /** Button's hyperlink */
href: PropTypes.string.isRequired,
+ /** Custom classNames to apply to the component */
className: PropTypes.string,
- onClick: PropTypes.func
+ /** Function `onClick` to be called on top of the hyperlink */
+ onClick: PropTypes.func,
+ /** Custom icon to display. If undefined then DeviceLaptop is used as default icon */
+ icon: PropTypes.elementType
}
ButtonClient.defaultProps = {
diff --git a/react/PushClientButton/index.spec.jsx b/react/PushClientButton/index.spec.jsx
new file mode 100644
index 0000000000..36bc716bf0
--- /dev/null
+++ b/react/PushClientButton/index.spec.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { render } from '@testing-library/react'
+
+import PushClientButton from './'
+
+jest.mock('cozy-ui/transpiled/react/Icons/DeviceLaptop', () => () => (
+
+))
+
+describe('PushClientButton', () => {
+ it('should use DeviceLaptop if icon prop is not defined', async () => {
+ const { getByTestId } = render()
+
+ expect(getByTestId(/device-laptop/)).toBeInTheDocument()
+ })
+
+ it('should accept a custom icon', async () => {
+ const CustomIcon = () =>
+ const { getByTestId } = render()
+
+ expect(getByTestId(/custom-icon/)).toBeInTheDocument()
+ })
+})
diff --git a/test/jestsetup.js b/test/jestsetup.js
index 8d91f62429..c50a4f29e4 100644
--- a/test/jestsetup.js
+++ b/test/jestsetup.js
@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/extend-expect'
import { configure, mount, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
diff --git a/yarn.lock b/yarn.lock
index 5386e4d56b..3037fe953a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -986,6 +986,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.9.2":
+ version "7.14.6"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+ integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
"@babel/template@7.0.0-beta.44":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -1993,6 +2000,21 @@
lz-string "^1.4.4"
pretty-format "^26.6.2"
+"@testing-library/jest-dom@^5.14.1":
+ version "5.14.1"
+ resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766"
+ integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
+ dependencies:
+ "@babel/runtime" "^7.9.2"
+ "@types/testing-library__jest-dom" "^5.9.1"
+ aria-query "^4.2.2"
+ chalk "^3.0.0"
+ css "^3.0.0"
+ css.escape "^1.5.1"
+ dom-accessibility-api "^0.5.6"
+ lodash "^4.17.15"
+ redent "^3.0.0"
+
"@testing-library/react-hooks@^3.2.1":
version "3.2.1"
resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294"
@@ -2109,6 +2131,14 @@
dependencies:
"@types/istanbul-lib-report" "*"
+"@types/jest@*":
+ version "26.0.24"
+ resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
+ integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
+ dependencies:
+ jest-diff "^26.0.0"
+ pretty-format "^26.0.0"
+
"@types/jest@^26.0.20":
version "26.0.20"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.20.tgz#cd2f2702ecf69e86b586e1f5223a60e454056307"
@@ -2199,6 +2229,13 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
+"@types/testing-library__jest-dom@^5.9.1":
+ version "5.14.0"
+ resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz#98eb7537cb5502bcca7a0d82acf5f245a2e6c322"
+ integrity sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A==
+ dependencies:
+ "@types/jest" "*"
+
"@types/testing-library__react-hooks@^3.0.0":
version "3.2.0"
resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.2.0.tgz#52f3a109bef06080e3b1e3ae7ea1c014ce859897"
@@ -2989,7 +3026,7 @@ at-least-node@^1.0.0:
resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-atob@^2.1.1:
+atob@^2.1.1, atob@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
@@ -5073,6 +5110,11 @@ css-what@2.1, css-what@^2.1.2:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
+css.escape@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+ integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
css@^2.0.0:
version "2.2.4"
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -5083,6 +5125,15 @@ css@^2.0.0:
source-map-resolve "^0.5.2"
urix "^0.1.0"
+css@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+ integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+ dependencies:
+ inherits "^2.0.4"
+ source-map "^0.6.1"
+ source-map-resolve "^0.6.0"
+
cssesc@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -5639,6 +5690,11 @@ dom-accessibility-api@^0.5.4:
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
+dom-accessibility-api@^0.5.6:
+ version "0.5.6"
+ resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9"
+ integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
+
dom-converter@^0.2:
version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -15620,6 +15676,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
source-map-url "^0.4.0"
urix "^0.1.0"
+source-map-resolve@^0.6.0:
+ version "0.6.0"
+ resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+ integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+ dependencies:
+ atob "^2.1.2"
+ decode-uri-component "^0.2.0"
+
source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12:
version "0.5.19"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"