From a762fd83937b6e1f19712799567944abb4305742 Mon Sep 17 00:00:00 2001 From: Karine Brandelli Date: Fri, 15 Mar 2024 14:14:54 -0300 Subject: [PATCH 1/5] chore: add @testing-library/jest-dom --- package.json | 237 ++++++++++++++++++++++++++------------------------- yarn.lock | 65 +++++++++++++- 2 files changed, 181 insertions(+), 121 deletions(-) diff --git a/package.json b/package.json index e2e74338..dd254a1d 100644 --- a/package.json +++ b/package.json @@ -1,120 +1,121 @@ { - "name": "flipper-ui", - "version": "0.31.3", - "description": "", - "main": "dist/index.js", - "homepage": "https://flipper-ui.ngi.com.br/", - "author": "NG", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/nginformatica/flipper-ui.git" - }, - "resolutions": { - "wrap-ansi": "7.0.0" - }, - "scripts": { - "start": "storybook dev -p 6006", - "build": "yarn clean && yarn build:ts && yarn build:babel", - "build:ts": "tsc --emitDeclarationOnly", - "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\" --ignore \"**/*.spec.tsx\" --ignore \"**/*.stories.tsx\"", - "build:link": "yarn build && yarn copy:package && yarn publish:yalc", - "lint": "eslint -c .eslintrc.js 'src/**/*.{ts,tsx}'", - "lint:fix": "eslint -c .eslintrc.js --fix 'src/**/*.{ts,tsx}'", - "lint:quiet": "eslint --quiet .eslintrc.js 'src/**/*.{ts,tsx}'", - "format": "prettier -w 'src/**/*.{ts,tsx}'", - "docs:build": "storybook build -o docs", - "clean": "rm -rf ./dist/*", - "type-check": "tsc --noEmit", - "copy:package": "cp package.json dist/", - "publish:yalc": "cd dist/ && yalc publish && cd ..", - "predeploy": "yarn build && yarn storybook:build", - "deploy": "gh-pages -d docs", - "release": "yarn build && node pre-publish.js && npm publish ./dist --access public", - "test:ci": "yarn test --coverage", - "test": "jest --silent --passWithNoTests --noStackTrace --runInBand" - }, - "dependencies": { - "@date-io/date-fns": "1.3.6", - "@emotion/react": "11.11.4", - "@emotion/styled": "11.11.0", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", - "@material-ui/pickers": "3.3.11", - "@mui/icons-material": "5.15.12", - "@mui/material": "5.15.12", - "@mui/styles": "5.15.12", - "date-fns": "2.30.0", - "faker": "5.5.3", - "material-table": "1.69.3", - "material-ui-chip-input": "2.0.0-beta.2", - "ramda": "0.25.0", - "react-loading-skeleton": "3.4.0", - "react-number-format": "4.4.1", - "sprintf-js": "1.1.3", - "stylis": "4.3.1", - "uuid": "9.0.1" - }, - "devDependencies": { - "@babel/cli": "7.23.9", - "@babel/core": "7.24.0", - "@babel/plugin-transform-runtime": "7.24.0", - "@babel/preset-env": "7.24.0", - "@babel/preset-typescript": "7.23.3", - "@storybook/addon-essentials": "7.6.17", - "@storybook/addon-styling-webpack": "0.0.6", - "@storybook/react": "7.6.17", - "@storybook/react-webpack5": "7.6.17", - "@stylistic/eslint-plugin": "1.5.4", - "@testing-library/react": "14.2.1", - "@testing-library/user-event": "14.5.2", - "@types/faker": "5.5.3", - "@types/history": "5.0.0", - "@types/jest": "29.5.12", - "@types/node": "20.11.25", - "@types/ramda": "0.25.36", - "@types/react": "18.2.63", - "@types/sprintf-js": "1.1.4", - "@types/styled-components": "5.1.34", - "@types/uuid": "9.0.8", - "@typescript-eslint/eslint-plugin": "7.1.1", - "@typescript-eslint/parser": "7.1.1", - "babel-loader": "9.1.3", - "babel-plugin-module-resolver": "5.0.0", - "babel-plugin-transform-class-properties": "6.24.1", - "babel-plugin-transform-imports": "2.0.0", - "eslint": "8.57.0", - "eslint-config-prettier": "9.1.0", - "eslint-import-resolver-typescript": "3.6.1", - "eslint-plugin-import": "2.29.1", - "eslint-plugin-prettier": "5.1.3", - "eslint-plugin-react": "7.34.0", - "eslint-plugin-react-hooks": "4.6.0", - "fs-extra": "11.2.0", - "identity-obj-proxy": "3.0.0", - "jest": "29.7.0", - "jest-environment-jsdom": "29.7.0", - "node-fetch": "3.3.2", - "prettier": "3.2.5", - "react": "18.2.0", - "react-dom": "18.2.0", - "storybook": "7.6.17", - "styled-components": "6.1.8", - "ts-jest": "29.1.2", - "ts-loader": "9.5.1", - "typescript": "5.3.3", - "webpack": "5.90.3" - }, - "peerDependencies": { - "date-fns": "^2.30.0", - "react": "16.x || 17.x || 18.x", - "styled-components": "5.x || 6.x" - }, - "publishConfig": { - "ignore": [ - "!dist/", - "!/node_modules/" - ] - } + "name": "flipper-ui", + "version": "0.31.3", + "description": "", + "main": "dist/index.js", + "homepage": "https://flipper-ui.ngi.com.br/", + "author": "NG", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/nginformatica/flipper-ui.git" + }, + "resolutions": { + "wrap-ansi": "7.0.0" + }, + "scripts": { + "start": "storybook dev -p 6006", + "build": "yarn clean && yarn build:ts && yarn build:babel", + "build:ts": "tsc --emitDeclarationOnly", + "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\" --ignore \"**/*.spec.tsx\" --ignore \"**/*.stories.tsx\"", + "build:link": "yarn build && yarn copy:package && yarn publish:yalc", + "lint": "eslint -c .eslintrc.js 'src/**/*.{ts,tsx}'", + "lint:fix": "eslint -c .eslintrc.js --fix 'src/**/*.{ts,tsx}'", + "lint:quiet": "eslint --quiet .eslintrc.js 'src/**/*.{ts,tsx}'", + "format": "prettier -w 'src/**/*.{ts,tsx}'", + "docs:build": "storybook build -o docs", + "clean": "rm -rf ./dist/*", + "type-check": "tsc --noEmit", + "copy:package": "cp package.json dist/", + "publish:yalc": "cd dist/ && yalc publish && cd ..", + "predeploy": "yarn build && yarn storybook:build", + "deploy": "gh-pages -d docs", + "release": "yarn build && node pre-publish.js && npm publish ./dist --access public", + "test:ci": "yarn test --coverage", + "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand" + }, + "dependencies": { + "@date-io/date-fns": "1.3.6", + "@emotion/react": "11.11.4", + "@emotion/styled": "11.11.0", + "@material-ui/core": "4.12.4", + "@material-ui/icons": "4.11.3", + "@material-ui/lab": "4.0.0-alpha.61", + "@material-ui/pickers": "3.3.11", + "@mui/icons-material": "5.15.12", + "@mui/material": "5.15.12", + "@mui/styles": "5.15.12", + "date-fns": "2.30.0", + "faker": "5.5.3", + "material-table": "1.69.3", + "material-ui-chip-input": "2.0.0-beta.2", + "ramda": "0.25.0", + "react-loading-skeleton": "3.4.0", + "react-number-format": "4.4.1", + "sprintf-js": "1.1.3", + "stylis": "4.3.1", + "uuid": "9.0.1" + }, + "devDependencies": { + "@babel/cli": "7.23.9", + "@babel/core": "7.24.0", + "@babel/plugin-transform-runtime": "7.24.0", + "@babel/preset-env": "7.24.0", + "@babel/preset-typescript": "7.23.3", + "@storybook/addon-essentials": "7.6.17", + "@storybook/addon-styling-webpack": "0.0.6", + "@storybook/react": "7.6.17", + "@storybook/react-webpack5": "7.6.17", + "@stylistic/eslint-plugin": "1.5.4", + "@testing-library/jest-dom": "6.4.2", + "@testing-library/react": "14.2.1", + "@testing-library/user-event": "14.5.2", + "@types/faker": "5.5.3", + "@types/history": "5.0.0", + "@types/jest": "29.5.12", + "@types/node": "20.11.25", + "@types/ramda": "0.25.36", + "@types/react": "18.2.63", + "@types/sprintf-js": "1.1.4", + "@types/styled-components": "5.1.34", + "@types/uuid": "9.0.8", + "@typescript-eslint/eslint-plugin": "7.1.1", + "@typescript-eslint/parser": "7.1.1", + "babel-loader": "9.1.3", + "babel-plugin-module-resolver": "5.0.0", + "babel-plugin-transform-class-properties": "6.24.1", + "babel-plugin-transform-imports": "2.0.0", + "eslint": "8.57.0", + "eslint-config-prettier": "9.1.0", + "eslint-import-resolver-typescript": "3.6.1", + "eslint-plugin-import": "2.29.1", + "eslint-plugin-prettier": "5.1.3", + "eslint-plugin-react": "7.34.0", + "eslint-plugin-react-hooks": "4.6.0", + "fs-extra": "11.2.0", + "identity-obj-proxy": "3.0.0", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "node-fetch": "3.3.2", + "prettier": "3.2.5", + "react": "18.2.0", + "react-dom": "18.2.0", + "storybook": "7.6.17", + "styled-components": "6.1.8", + "ts-jest": "29.1.2", + "ts-loader": "9.5.1", + "typescript": "5.3.3", + "webpack": "5.90.3" + }, + "peerDependencies": { + "date-fns": "^2.30.0", + "react": "16.x || 17.x || 18.x", + "styled-components": "5.x || 6.x" + }, + "publishConfig": { + "ignore": [ + "!dist/", + "!/node_modules/" + ] + } } diff --git a/yarn.lock b/yarn.lock index fa011412..c8560cfd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,11 @@ resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf" integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== +"@adobe/css-tools@^4.3.2": + version "4.3.3" + resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff" + integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ== + "@ampproject/remapping@^2.2.0": version "2.2.1" resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630" @@ -3346,6 +3351,20 @@ lz-string "^1.5.0" pretty-format "^27.0.2" +"@testing-library/jest-dom@6.4.2": + version "6.4.2" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz#38949f6b63722900e2d75ba3c6d9bf8cffb3300e" + integrity sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw== + dependencies: + "@adobe/css-tools" "^4.3.2" + "@babel/runtime" "^7.9.2" + aria-query "^5.0.0" + chalk "^3.0.0" + css.escape "^1.5.1" + dom-accessibility-api "^0.6.3" + lodash "^4.17.15" + redent "^3.0.0" + "@testing-library/react@14.2.1": version "14.2.1" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.2.1.tgz#bf69aa3f71c36133349976a4a2da3687561d8310" @@ -4318,6 +4337,13 @@ aria-query@5.1.3: dependencies: deep-equal "^2.0.5" +aria-query@^5.0.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e" + integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A== + dependencies: + dequal "^2.0.3" + array-buffer-byte-length@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead" @@ -5013,6 +5039,14 @@ chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" +chalk@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" + integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -5435,6 +5469,11 @@ css-what@^6.0.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== +css.escape@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" + integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -5649,7 +5688,7 @@ depd@2.0.0: resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df" integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw== -dequal@^2.0.2: +dequal@^2.0.2, dequal@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== @@ -5720,6 +5759,11 @@ dom-accessibility-api@^0.5.9: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== +dom-accessibility-api@^0.6.3: + version "0.6.3" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" + integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w== + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -8548,7 +8592,7 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4: +lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -8772,7 +8816,7 @@ mimic-fn@^4.0.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc" integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw== -min-indent@^1.0.1: +min-indent@^1.0.0, min-indent@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== @@ -9917,6 +9961,14 @@ recast@^0.23.1, recast@^0.23.3: source-map "~0.6.1" tslib "^2.0.1" +redent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" + integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== + dependencies: + indent-string "^4.0.0" + strip-indent "^3.0.0" + redux@^4.0.0, redux@^4.0.4: version "4.2.1" resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197" @@ -10632,6 +10684,13 @@ strip-final-newline@^3.0.0: resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd" integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw== +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + dependencies: + min-indent "^1.0.0" + strip-indent@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853" From 8673c105e2572130fb12ed78e0e3b5a93fa1da03 Mon Sep 17 00:00:00 2001 From: Karine Brandelli Date: Fri, 15 Mar 2024 14:15:02 -0300 Subject: [PATCH 2/5] chore: adjust settings --- .vscode/settings.json | 39 +++++++++++++++++---------------------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 63ece50f..9a5a7e7f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,24 +1,19 @@ { - "eslint.packageManager": "yarn", - "eslint.enable": true, - "eslint.autoFixOnSave": true, - "eslint.validate": [ - "javascript", - "javascriptreact", - { - "language": "typescript", - "autoFix": true - }, - { - "language": "typescriptreact", - "autoFix": true - } - ], - "typescript.tsdk": "node_modules/typescript/lib", - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - "cSpell.words": [ - "datepicker" - ] + "eslint.enable": true, + "eslint.validate": [ + "javascript", + "javascriptreact", + { + "language": "typescript", + "autoFix": true + }, + { + "language": "typescriptreact", + "autoFix": true + } + ], + "typescript.tsdk": "node_modules/typescript/lib", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + } } From cb2078c4ccb52153cb979698e3353adb4e2b770a Mon Sep 17 00:00:00 2001 From: Karine Brandelli Date: Fri, 15 Mar 2024 14:16:59 -0300 Subject: [PATCH 3/5] test: adjust tests --- .../theme-provider/theme-provider.spec.tsx | 2 +- .../data-display/advertise/advertise.spec.tsx | 22 +- src/core/data-display/advertise/index.tsx | 14 - .../avatar/__snapshots__/avatar.spec.tsx.snap | 11 + src/core/data-display/avatar/avatar.spec.tsx | 20 +- src/core/data-display/avatar/index.tsx | 3 - .../badge/__snapshots__/badge.spec.tsx.snap | 2 +- src/core/data-display/badge/badge.spec.tsx | 10 +- src/core/data-display/badge/index.tsx | 6 - .../__snapshots__/chapter.spec.tsx.snap | 21 + .../data-display/chapter/chapter.spec.tsx | 11 +- src/core/data-display/chapter/index.tsx | 15 - .../chip/__snapshots__/chip.spec.tsx.snap | 15 + src/core/data-display/chip/chip.spec.tsx | 10 +- src/core/data-display/chip/index.tsx | 3 - .../data-table/data-table-field.spec.tsx | 185 ++++++++ .../data-table/data-table-field.tsx | 2 +- .../data-table/data-table-query-paginated.tsx | 59 --- .../data-table/data-table.spec.tsx | 2 +- .../data-table/data-table.stories.tsx | 229 +++++----- .../data-display/data-table/data-table.tsx | 50 --- src/core/data-display/data-table/rows.tsx | 14 +- src/core/data-display/data-table/types.ts | 18 - .../data-display/data-table/use-paginated.ts | 18 +- .../data-display/divider/divider.spec.tsx | 4 +- .../editable-table-with-date.spec.tsx | 3 +- .../editable-table/editable-table.spec.tsx | 47 +- .../editable-table/editable-table.stories.tsx | 2 +- src/core/data-display/fab/fab.spec.tsx | 2 +- src/core/data-display/line/index.tsx | 3 - src/core/data-display/line/line.spec.tsx | 4 +- .../__snapshots__/list-item.spec.tsx.snap | 41 ++ src/core/data-display/list-item/index.tsx | 6 +- .../data-display/list-item/list-item.spec.tsx | 18 +- .../list/__snapshots__/list.spec.tsx.snap | 44 ++ src/core/data-display/list/index.tsx | 6 - src/core/data-display/list/list.spec.tsx | 16 +- .../__snapshots__/menu-item.spec.tsx.snap | 16 + .../data-display/menu-item/menu-item.spec.tsx | 8 +- .../node/__snapshots__/node.spec.tsx.snap | 27 ++ src/core/data-display/node/node.spec.tsx | 13 +- src/core/data-display/table/table.spec.tsx | 3 +- .../tree/__snapshots__/tree.spec.tsx.snap | 27 ++ src/core/data-display/tree/tree.spec.tsx | 8 +- .../__snapshots__/typography.spec.tsx.snap | 12 + .../typography/typography.spec.tsx | 23 +- .../__snapshots__/collapse.spec.tsx.snap | 21 + src/core/feedback/collapse/collapse.spec.tsx | 12 +- .../dialog/__snapshots__/dialog.spec.tsx.snap | 7 + src/core/feedback/dialog/dialog.spec.tsx | 27 +- src/core/feedback/dialog/index.tsx | 2 +- src/core/feedback/fade/fade.spec.tsx | 2 +- src/core/feedback/grow/grow.spec.tsx | 2 +- src/core/feedback/progress/progress.spec.tsx | 2 +- src/core/feedback/slide/slide.spec.tsx | 2 +- .../__snapshots__/snackbar.spec.tsx.snap | 22 + src/core/feedback/snackbar/index.tsx | 2 +- src/core/feedback/snackbar/snackbar.spec.tsx | 21 +- .../__snapshots__/tooltip.spec.tsx.snap | 26 ++ .../{tool-tip.spec.tsx => tooltip.spec.tsx} | 12 +- .../validation-dialog.spec.tsx.snap | 7 + .../validation-dialog.spec.tsx | 22 + src/core/feedback/zoom/zoom.spec.tsx | 2 +- .../__snapshots__/auto-complete.spec.tsx.snap | 46 ++ .../auto-complete/auto-complete.spec.tsx | 39 +- .../button/__snapshots__/button.spec.tsx.snap | 22 + src/core/inputs/button/button.spec.tsx | 18 +- .../__snapshots__/checkbox.spec.tsx.snap | 48 ++ src/core/inputs/checkbox/checkbox.spec.tsx | 35 +- .../__snapshots__/chip-field.spec.tsx.snap | 99 +++++ .../inputs/chip-field/chip-field.spec.tsx | 15 +- .../__snapshots__/date-time.spec.tsx.snap | 68 +++ src/core/inputs/date-time/date-time.spec.tsx | 21 +- .../inputs/icon-button/icon-button.spec.tsx | 2 +- src/core/inputs/icon-button/index.tsx | 2 +- .../input-adornment/input-adorment.spec.tsx | 2 +- src/core/inputs/input-base/index.tsx | 2 +- .../inputs/input-base/input-base.spec.tsx | 2 +- .../__snapshots__/mask-field.spec.tsx.snap | 43 ++ .../inputs/mask-field/mask-field.spec.tsx | 30 +- .../__snapshots__/pin-input.spec.tsx.snap | 196 +++++++++ src/core/inputs/pin-input/pin-input.spec.tsx | 24 +- .../__snapshots__/radio-group.spec.tsx.snap | 124 ++++++ .../inputs/radio-group/radio-group.spec.tsx | 43 +- src/core/inputs/radio/index.tsx | 2 +- src/core/inputs/radio/radio.spec.tsx | 2 +- .../select/__snapshots__/select.spec.tsx.snap | 50 +++ src/core/inputs/select/select.spec.tsx | 10 +- .../slider/__snapshots__/slider.spec.tsx.snap | 33 ++ src/core/inputs/slider/slider.spec.tsx | 28 +- .../__snapshots__/text-field.spec.tsx.snap | 90 ++++ src/core/inputs/text-field/index.tsx | 6 +- .../inputs/text-field/text-field.spec.tsx | 28 +- .../__snapshots__/breadcrumb.spec.tsx.snap | 40 ++ .../navigation/breadcrumb/breadcrumb.spec.tsx | 48 ++ src/core/navigation/breadcrumb/index.tsx | 2 +- .../drawer/__snapshots__/drawer.spec.tsx.snap | 7 + src/core/navigation/drawer/drawer.spec.tsx | 12 +- .../menu/__snapshots__/menu.spec.tsx.snap | 7 + src/core/navigation/menu/menu.spec.tsx | 15 +- .../__snapshots__/pagination.spec.tsx.snap | 149 +++++++ .../navigation/pagination/pagination.spec.tsx | 16 +- .../__snapshots__/sidebar.spec.tsx.snap | 123 ++++++ src/core/navigation/sidebar/sidebar.spec.tsx | 15 +- .../__snapshots__/stepper.spec.tsx.snap | 123 ++++++ src/core/navigation/stepper/stepper.spec.tsx | 27 +- .../tabs/__snapshots__/tabs.spec.tsx.snap | 57 +++ src/core/navigation/tabs/tabs.spec.tsx | 15 +- .../box/__snapshots__/box.spec.tsx.snap | 18 + src/core/surfaces/box/box.spec.tsx | 36 +- .../card/__snapshots__/card.spec.tsx.snap | 53 +++ src/core/surfaces/card/card.spec.tsx | 43 +- .../surfaces/container/container.spec.tsx | 12 +- src/core/surfaces/content/content.spec.tsx | 12 +- .../expansion-panel.spec.tsx.snap | 54 +++ .../expansion-panel/expansion-panel.spec.tsx | 29 +- src/core/surfaces/header/header.spec.tsx | 2 +- .../paper/__snapshots__/paper.spec.tsx.snap | 12 + src/core/surfaces/paper/paper.spec.tsx | 21 +- .../__snapshots__/step-card.spec.tsx.snap | 203 +++++++++ src/core/surfaces/step-card/index.tsx | 228 ---------- .../surfaces/step-card/step-card.spec.tsx | 27 +- .../__snapshots__/actions.spec.tsx.snap | 45 ++ src/experimental/actions/actions.spec.tsx | 13 +- .../autocomplete-lab.spec.tsx | 145 ++++++ ...ories.tsx => autocomplete-lab.stories.tsx} | 0 .../avatar/__snapshots__/avatar.spec.tsx.snap | 12 + src/experimental/avatar/avatar.spec.tsx | 8 +- src/experimental/avatar/index.tsx | 8 +- .../__snapshots__/breadcrumbs.spec.tsx.snap | 83 ++++ .../breadcrumbs/breadcrumbs.spec.tsx | 18 +- src/experimental/breadcrumbs/index.tsx | 13 +- .../button/__snapshots__/button.spec.tsx.snap | 35 ++ src/experimental/button/button.spec.tsx | 19 +- .../card/__snapshots__/card.spec.tsx.snap | 48 ++ src/experimental/card/card.spec.tsx | 18 +- .../dialog/__snapshots__/dialog.spec.tsx.snap | 7 + .../dialog/__test__/confirm-dialog.spec.tsx | 161 ------- .../dialog/__test__/dialog.spec.tsx | 78 ---- .../dialog/__test__/remove-dialog.spec.tsx | 160 ------- src/experimental/dialog/dialog.spec.tsx | 413 ++++++++++++++++++ src/experimental/dialog/dialog.tsx | 2 +- .../fab/__snapshots__/fab.spec.tsx.snap | 49 +++ src/experimental/fab/fab.spec.tsx | 28 +- src/experimental/fab/fab.tsx | 2 +- .../__snapshots__/loading.spec.tsx.snap | 31 ++ src/experimental/loading/loading.spec.tsx | 33 +- .../__snapshots__/nothing-found.spec.tsx.snap | 12 + .../nothing-found/nothing-found.spec.tsx | 60 +-- .../panel/__snapshots__/panel.spec.tsx.snap | 85 ++++ src/experimental/panel/panel.spec.tsx | 37 +- .../__snapshots__/sidebar.spec.tsx.snap | 116 +++++ src/experimental/sidebar/sidebar.spec.tsx | 19 +- .../__snapshots__/skeleton.spec.tsx.snap | 14 +- src/experimental/skeleton/skeleton.spec.tsx | 45 +- .../visibility-icon.spec.tsx.snap | 114 +++++ .../visibility-icon/visibility-icon.spec.tsx | 17 +- src/test/mocks/date-time-mock.tsx | 4 +- src/test/mocks/editable-table-date-mock.tsx | 2 +- src/test/mocks/editable-table-mock.tsx | 2 +- src/test/mocks/radio-group-mock.tsx | 4 +- src/test/mocks/select-mock.tsx | 7 +- src/test/mocks/step-card-mock.tsx | 4 +- src/test/mocks/text-field-mock.tsx | 7 +- src/test/mocks/text-field-options-mock.tsx | 7 +- 165 files changed, 4444 insertions(+), 1343 deletions(-) create mode 100644 src/core/data-display/avatar/__snapshots__/avatar.spec.tsx.snap create mode 100644 src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap create mode 100644 src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap create mode 100644 src/core/data-display/data-table/data-table-field.spec.tsx create mode 100644 src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap create mode 100644 src/core/data-display/list/__snapshots__/list.spec.tsx.snap create mode 100644 src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap create mode 100644 src/core/data-display/node/__snapshots__/node.spec.tsx.snap create mode 100644 src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap create mode 100644 src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap create mode 100644 src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap create mode 100644 src/core/feedback/dialog/__snapshots__/dialog.spec.tsx.snap create mode 100644 src/core/feedback/snackbar/__snapshots__/snackbar.spec.tsx.snap create mode 100644 src/core/feedback/tooltip/__snapshots__/tooltip.spec.tsx.snap rename src/core/feedback/tooltip/{tool-tip.spec.tsx => tooltip.spec.tsx} (78%) create mode 100644 src/core/feedback/validation-dialog/__snapshots__/validation-dialog.spec.tsx.snap create mode 100644 src/core/inputs/auto-complete/__snapshots__/auto-complete.spec.tsx.snap create mode 100644 src/core/inputs/button/__snapshots__/button.spec.tsx.snap create mode 100644 src/core/inputs/checkbox/__snapshots__/checkbox.spec.tsx.snap create mode 100644 src/core/inputs/chip-field/__snapshots__/chip-field.spec.tsx.snap create mode 100644 src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap create mode 100644 src/core/inputs/mask-field/__snapshots__/mask-field.spec.tsx.snap create mode 100644 src/core/inputs/pin-input/__snapshots__/pin-input.spec.tsx.snap create mode 100644 src/core/inputs/radio-group/__snapshots__/radio-group.spec.tsx.snap create mode 100644 src/core/inputs/select/__snapshots__/select.spec.tsx.snap create mode 100644 src/core/inputs/slider/__snapshots__/slider.spec.tsx.snap create mode 100644 src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap create mode 100644 src/core/navigation/breadcrumb/__snapshots__/breadcrumb.spec.tsx.snap create mode 100644 src/core/navigation/breadcrumb/breadcrumb.spec.tsx create mode 100644 src/core/navigation/drawer/__snapshots__/drawer.spec.tsx.snap create mode 100644 src/core/navigation/menu/__snapshots__/menu.spec.tsx.snap create mode 100644 src/core/navigation/pagination/__snapshots__/pagination.spec.tsx.snap create mode 100644 src/core/navigation/sidebar/__snapshots__/sidebar.spec.tsx.snap create mode 100644 src/core/navigation/stepper/__snapshots__/stepper.spec.tsx.snap create mode 100644 src/core/navigation/tabs/__snapshots__/tabs.spec.tsx.snap create mode 100644 src/core/surfaces/box/__snapshots__/box.spec.tsx.snap create mode 100644 src/core/surfaces/card/__snapshots__/card.spec.tsx.snap create mode 100644 src/core/surfaces/expansion-panel/__snapshots__/expansion-panel.spec.tsx.snap create mode 100644 src/core/surfaces/paper/__snapshots__/paper.spec.tsx.snap create mode 100644 src/core/surfaces/step-card/__snapshots__/step-card.spec.tsx.snap create mode 100644 src/experimental/actions/__snapshots__/actions.spec.tsx.snap create mode 100644 src/experimental/auto-complete-lab/autocomplete-lab.spec.tsx rename src/experimental/auto-complete-lab/{auto-complete-lab.stories.tsx => autocomplete-lab.stories.tsx} (100%) create mode 100644 src/experimental/avatar/__snapshots__/avatar.spec.tsx.snap create mode 100644 src/experimental/breadcrumbs/__snapshots__/breadcrumbs.spec.tsx.snap create mode 100644 src/experimental/button/__snapshots__/button.spec.tsx.snap create mode 100644 src/experimental/card/__snapshots__/card.spec.tsx.snap create mode 100644 src/experimental/dialog/__snapshots__/dialog.spec.tsx.snap delete mode 100644 src/experimental/dialog/__test__/confirm-dialog.spec.tsx delete mode 100644 src/experimental/dialog/__test__/dialog.spec.tsx delete mode 100644 src/experimental/dialog/__test__/remove-dialog.spec.tsx create mode 100644 src/experimental/dialog/dialog.spec.tsx create mode 100644 src/experimental/fab/__snapshots__/fab.spec.tsx.snap create mode 100644 src/experimental/loading/__snapshots__/loading.spec.tsx.snap create mode 100644 src/experimental/nothing-found/__snapshots__/nothing-found.spec.tsx.snap create mode 100644 src/experimental/panel/__snapshots__/panel.spec.tsx.snap create mode 100644 src/experimental/sidebar/__snapshots__/sidebar.spec.tsx.snap create mode 100644 src/experimental/visibility-icon/__snapshots__/visibility-icon.spec.tsx.snap diff --git a/src/core/context/theme-provider/theme-provider.spec.tsx b/src/core/context/theme-provider/theme-provider.spec.tsx index 1abe4c91..4bc91565 100644 --- a/src/core/context/theme-provider/theme-provider.spec.tsx +++ b/src/core/context/theme-provider/theme-provider.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import ThemeProvider from '.' diff --git a/src/core/data-display/advertise/advertise.spec.tsx b/src/core/data-display/advertise/advertise.spec.tsx index 0803b296..19705632 100644 --- a/src/core/data-display/advertise/advertise.spec.tsx +++ b/src/core/data-display/advertise/advertise.spec.tsx @@ -1,11 +1,8 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import Advertise from '.' describe('Advertise', () => { - const newPadding = '10px 10px' - const CUSTOM = { padding: newPadding } - it('should render', () => { render() @@ -14,38 +11,39 @@ describe('Advertise', () => { expect(author).toBeDefined() expect(author).toHaveProperty('style.padding', '6px 18px') + expect(comment).toBeDefined() expect(comment).toHaveProperty('style.padding', '6px 18px') }) it('should render with custom author style', () => { - const newPadding = '10px 10px' - render( - + ) const author = screen.getByText('author') expect(author).toBeDefined() - expect(author).toHaveProperty('style.padding', newPadding) + expect(author).toHaveProperty('style.padding', '10px 10px') }) it('should render with custom comment style', () => { - const newPadding = '10px 10px' - render( ) const comment = screen.getByText('comment') expect(comment).toBeDefined() - expect(comment).toHaveProperty('style.padding', newPadding) + expect(comment).toHaveProperty('style.padding', '10px 10px') }) it('should match snapshot', () => { diff --git a/src/core/data-display/advertise/index.tsx b/src/core/data-display/advertise/index.tsx index 7c66cd95..c429a688 100644 --- a/src/core/data-display/advertise/index.tsx +++ b/src/core/data-display/advertise/index.tsx @@ -4,23 +4,9 @@ import type { DefaultProps } from '../../types' import { AdvertiseTypography, Paper } from './styles' export interface AdvertiseProps extends DefaultProps { - /** - * The comment to be displayed - */ comment: string - /** - * The author of the comment - */ author: string - /** - * The style of the comments - * @optional - */ commentStyle?: CSSProperties - /** - * The style of the author - * @optional - */ authorStyle?: CSSProperties } diff --git a/src/core/data-display/avatar/__snapshots__/avatar.spec.tsx.snap b/src/core/data-display/avatar/__snapshots__/avatar.spec.tsx.snap new file mode 100644 index 00000000..da5cb889 --- /dev/null +++ b/src/core/data-display/avatar/__snapshots__/avatar.spec.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Avatar should match snapshot 1`] = ` +
+
+ F +
+
+`; diff --git a/src/core/data-display/avatar/avatar.spec.tsx b/src/core/data-display/avatar/avatar.spec.tsx index bdb6585a..ee7176d5 100644 --- a/src/core/data-display/avatar/avatar.spec.tsx +++ b/src/core/data-display/avatar/avatar.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import Typography from '@/core/data-display/typography' import { Avatar } from '.' @@ -12,7 +12,7 @@ describe('Avatar', () => { expect(avatar).toBeDefined() }) - it('should render primary', () => { + it('should render primary color', () => { render( F @@ -29,12 +29,10 @@ describe('Avatar', () => { }) it('should render with custom className', () => { - const customClass = 'custom-class' - render( F @@ -42,7 +40,7 @@ describe('Avatar', () => { const container = screen.getByTestId('avatar-container') - expect(container.classList).toContain(customClass) + expect(container.classList).toContain('custom-class') }) it('should render nested children', () => { @@ -58,4 +56,14 @@ describe('Avatar', () => { expect(avatar).toBeDefined() }) + + it('should match snapshot', () => { + const { container } = render( + + F + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/avatar/index.tsx b/src/core/data-display/avatar/index.tsx index cef8231c..ca25be80 100644 --- a/src/core/data-display/avatar/index.tsx +++ b/src/core/data-display/avatar/index.tsx @@ -7,9 +7,6 @@ import type { AvatarProps as MuiAvatarProps } from '@material-ui/core' import type { Theme } from '@material-ui/core/styles' export interface AvatarProps extends DefaultProps, MuiAvatarProps { - /** - * If true, the avatar will have a primary color background. - */ primary?: boolean children?: ReactNode 'data-testid'?: string diff --git a/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap b/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap index d545dbbf..061287a7 100644 --- a/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap +++ b/src/core/data-display/badge/__snapshots__/badge.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Badges - Snapshots should match snapshot 1`] = ` +exports[`Badge should match snapshot 1`] = `
{ it('should render', () => { render(Badge) - const avatar = screen.getByText('Badge') - const badge = screen.getByText('2') + const badge = screen.getByText('Badge') + const counter = screen.getByText('2') - expect(avatar).toBeDefined() expect(badge).toBeDefined() + expect(counter).toBeDefined() }) it('should render with primary color', () => { @@ -24,9 +24,7 @@ describe('Badge', () => { expect(badge.classList).toContain('MuiBadge-colorPrimary') }) -}) -describe('Badges - Snapshots', () => { it('should match snapshot', () => { const { container } = render(Badge) diff --git a/src/core/data-display/badge/index.tsx b/src/core/data-display/badge/index.tsx index 909b44a2..fb7081e6 100644 --- a/src/core/data-display/badge/index.tsx +++ b/src/core/data-display/badge/index.tsx @@ -7,13 +7,7 @@ import type { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge' export interface BadgeProps extends DefaultProps, MuiBadgeProps { children: ReactNode - /** - * The number to display in the badge. - */ counter: number | string - /** - * The position of the badge. - */ position?: { top?: number bottom?: number diff --git a/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap b/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap new file mode 100644 index 00000000..6d051e11 --- /dev/null +++ b/src/core/data-display/chapter/__snapshots__/chapter.spec.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Chapter should match snapshot 1`] = ` +
+
+
+

+ Chapter +

+
+
+
+`; diff --git a/src/core/data-display/chapter/chapter.spec.tsx b/src/core/data-display/chapter/chapter.spec.tsx index b9a02920..b7c69f1d 100644 --- a/src/core/data-display/chapter/chapter.spec.tsx +++ b/src/core/data-display/chapter/chapter.spec.tsx @@ -1,16 +1,17 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import Chapter from '.' describe('Chapter', () => { it('should render', () => { render(Chapter) + const chapter = screen.getByText('Chapter') expect(chapter).toBeDefined() }) - it('should spread props', () => { + it('should render primary color', () => { render( Chapter @@ -20,4 +21,10 @@ describe('Chapter', () => { expect(chapter).toBeDefined() }) + + it('should match snapshot', () => { + const { container } = render(Chapter) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/chapter/index.tsx b/src/core/data-display/chapter/index.tsx index c94d07ff..3a12cab1 100644 --- a/src/core/data-display/chapter/index.tsx +++ b/src/core/data-display/chapter/index.tsx @@ -6,25 +6,10 @@ import Typography from '@/core/data-display/typography' import { Container, StyledLine } from './styles' export interface LineProps extends DefaultProps { - /** - * If true, the avatar will have a primary color background. - */ primary?: boolean - /** - * The width of the component container. - */ width?: string - /** - * The variant to use. - */ variant?: TypographyProps['variant'] - /** - * The style applied to the children Typography component. - */ childrenStyle?: CSSProperties - /** - * The children of the component. - */ children?: ReactNode 'data-testid'?: string } diff --git a/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap b/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap new file mode 100644 index 00000000..4e03947d --- /dev/null +++ b/src/core/data-display/chip/__snapshots__/chip.spec.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Chip should match snapshot 1`] = ` +
+
+ + chip-label + +
+
+`; diff --git a/src/core/data-display/chip/chip.spec.tsx b/src/core/data-display/chip/chip.spec.tsx index 4b1f8674..904b25fe 100644 --- a/src/core/data-display/chip/chip.spec.tsx +++ b/src/core/data-display/chip/chip.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen, waitFor } from '@testing-library/react' import Chip from '.' @@ -38,4 +38,12 @@ describe('Chip', () => { expect(onDelete).toHaveBeenCalled() }) }) + + it('should match snapshot', () => { + const { container } = render( + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/chip/index.tsx b/src/core/data-display/chip/index.tsx index 6a5f9095..c773e986 100644 --- a/src/core/data-display/chip/index.tsx +++ b/src/core/data-display/chip/index.tsx @@ -7,9 +7,6 @@ import type { ChipProps as MuiChipProps } from '@material-ui/core' export interface IChipProps extends MuiChipProps, Omit { - /** - * If `true`, the chip will be squared. - */ square?: boolean } diff --git a/src/core/data-display/data-table/data-table-field.spec.tsx b/src/core/data-display/data-table/data-table-field.spec.tsx new file mode 100644 index 00000000..1d049a68 --- /dev/null +++ b/src/core/data-display/data-table/data-table-field.spec.tsx @@ -0,0 +1,185 @@ +import React from 'react' +import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { DataTableField } from './data-table-field' +import '@testing-library/jest-dom' + +const dataInput = [ + { + branch: 'Keepfy Joinville', + local: 'Joiville', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy São Paulo', + local: 'São Paulo', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy Rio Grande do Sul', + local: 'Rio Grande do Sul', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy Rio de Janeiro', + local: 'Rio de Janeiro', + status: 'Ativo', + companyCode: '', + branchCode: '' + } +] + +const tableHead = [ + { + title: 'Nome da Filial', + field: 'branch', + type: 'text', + editable: false + }, + { + title: 'Localidade', + field: 'local', + type: 'text', + editable: false + }, + { + title: 'Status', + field: 'status', + type: 'text', + editable: false + }, + { + title: 'Código da Empresa', + field: 'companyCode', + type: 'number', + editable: true + }, + { + title: 'Código da Filial', + field: 'branchCode', + type: 'text', + editable: true + } +] + +describe('DataTableField', () => { + it('should render', () => { + render( + + ) + + const container = screen.getByTestId('data-table-field') + + expect(container).toBeDefined() + }) + + it('should render with all the rows', () => { + render( + + ) + + const rows = screen.getAllByRole('rowgroup')[1].childElementCount + + expect(rows).toBe(4) + }) + + it('should render header and rows content', () => { + const { findAllByText } = render( + + ) + + const tableRowValue = findAllByText('Keepfy Joinville') + const tableHeadValue = findAllByText('Nome da Filial') + + expect(tableRowValue).toBeDefined() + expect(tableHeadValue).toBeDefined() + }) + + it('should check the checkbox when clicked', () => { + render( + + ) + + const checkbox = screen.getAllByRole('checkbox')[0] + + expect(checkbox).not.toBeChecked() + + fireEvent.click(checkbox) + + waitFor(() => { + expect(checkbox).toBeChecked() + }) + }) + + it('should render text field when checkRow is true', () => { + render( + + ) + + const textField = screen.getByRole('textbox') + + waitFor(() => { + expect(textField).toBeInTheDocument() + }) + }) +}) diff --git a/src/core/data-display/data-table/data-table-field.tsx b/src/core/data-display/data-table/data-table-field.tsx index 0c680139..5ac54da1 100644 --- a/src/core/data-display/data-table/data-table-field.tsx +++ b/src/core/data-display/data-table/data-table-field.tsx @@ -195,7 +195,7 @@ export const DataTableField = >( }) return ( - +
{checkbox && ( diff --git a/src/core/data-display/data-table/data-table-query-paginated.tsx b/src/core/data-display/data-table/data-table-query-paginated.tsx index a85e881a..2c4538eb 100644 --- a/src/core/data-display/data-table/data-table-query-paginated.tsx +++ b/src/core/data-display/data-table/data-table-query-paginated.tsx @@ -34,83 +34,24 @@ export type DataTableProps< D extends Data, V extends StackView = Record > = { - /** - * The data to be shown in the table - */ data: D[] - /** - * The total elements present in query - */ totalElements: number - /** - * Change current page handler - */ handleChangePage: (page: number) => void - /** - * Per page value - */ perPage: number - /** - * Change page handler - */ handleChangePerPage: (value: number) => void - /** - * Actual page - */ page: number - /** - * Errors as an object where the key is the ID of the row and the value is - * a Set with the fields of error - */ errors?: Errors - /** - * The columns specification - */ columns: ColumnSpec[] - /** - * Hide the table header - */ noHeader?: boolean - /** - * Component to show when there are no data - */ componentForEmpty?: ReactNode - /** - * Custom style to be applied to the table body - */ bodyStyle?: CSSProperties - /** - * Custom style to be applied to the table head - */ headStyle?: CSSProperties - /** - * Custom style to be applied to all rows of the table body - */ bodyRowStyle?: CSSProperties - /** - * Custom style to be applied to all rows of the table head - */ headRowStyle?: CSSProperties - /** - * Height of a hidden row, when you need to have some blank space in case - * you fill in the pagination.rowsPerPage - */ hiddenRowHeight?: number - /** - * The pagination configuration - */ pagination?: Partial - /** - * A React MutableRefObject for the row controller - */ controllerRef?: MutableRefObject | undefined> - /** - * Initialize with hidden values - */ hidden?: boolean - /** - * Custom rowViews used as a Stac - */ rowViews?: Record> onRowClick?: (event: MouseEvent, rowData: D) => void } diff --git a/src/core/data-display/data-table/data-table.spec.tsx b/src/core/data-display/data-table/data-table.spec.tsx index 32d40c93..29b93e1c 100644 --- a/src/core/data-display/data-table/data-table.spec.tsx +++ b/src/core/data-display/data-table/data-table.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { act } from 'react-dom/test-utils' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' diff --git a/src/core/data-display/data-table/data-table.stories.tsx b/src/core/data-display/data-table/data-table.stories.tsx index 03556a28..ccda2e4e 100644 --- a/src/core/data-display/data-table/data-table.stories.tsx +++ b/src/core/data-display/data-table/data-table.stories.tsx @@ -33,15 +33,29 @@ type Data = { date: Date } +type DataCrud = { + id: Identifier + product: string + price: number + quantity: number + date: Date +} + +type DataCrudWithHidden = { + id: Identifier + name: string + key: string + secret: string + rowMode: RowMode +} + +type View = { + confirmDelete(): JSX.Element +} + export const Default = () => { - type Data = { - id: number - product: string - price: number - quantity: number - date: Date - } const date = () => new Date() + const data = [ { id: 1, @@ -177,6 +191,7 @@ export const Empty = () => { export const NoHeader = () => { const date = () => new Date() + const data = [ { id: 1, @@ -257,6 +272,7 @@ export const NoHeader = () => { export const NoPagination = () => { const date = () => new Date() + const data = [ { id: 1, @@ -334,25 +350,13 @@ export const NoPagination = () => { } export const Crud = () => { - type Data = { - id: Identifier - product: string - price: number - quantity: number - date: Date - } - - type View = { - confirmDelete(): JSX.Element - } - const date = () => new Date() - const controllerRef = useRef>() + const controllerRef = useRef>() const [errors, setErrors] = useState({}) const randomId = () => Math.random().toString(36).substr(0, 12) - const [data, setData] = useState([ + const [data, setData] = useState([ { id: 1, product: 'Magazine', price: 13.5, quantity: 12, date: date() }, { id: 2, product: 'Table', price: 200.49, quantity: 3, date: date() }, { id: 3, product: 'Chair', price: 53.5, quantity: 9, date: date() }, @@ -599,24 +603,13 @@ export const Crud = () => { } export const CrudWithHidden = () => { - type Data = { - id: Identifier - name: string - key: string - secret: string - rowMode: RowMode - } - - type View = { - confirmDelete(): JSX.Element - } - - const controllerRef = useRef>() + const controllerRef = + useRef>() const [errors, setErrors] = useState({}) const randomId = () => Math.random().toString(36).substr(0, 12) - const [data, setData] = useState([ + const [data, setData] = useState([ { id: 1, name: 'PowerBI', @@ -708,7 +701,11 @@ export const CrudWithHidden = () => { if (isNew) { setData(data => [ - { ...nextItem, key: uuid(), secret: uuid() } as Data, + { + ...nextItem, + key: uuid(), + secret: uuid() + } as DataCrudWithHidden, ...data ]) } else { @@ -729,7 +726,7 @@ export const CrudWithHidden = () => { controllerRef.current?.viewRow(id) } - const columns: ColumnSpec[] = [ + const columns: ColumnSpec[] = [ { title: 'Name', field: 'name', @@ -841,7 +838,7 @@ export const CrudWithHidden = () => { ] const rowViews = { - confirmDelete: ({ data }: { data: Data }) => { + confirmDelete: ({ data }: { data: DataCrudWithHidden }) => { return (
{ ) } -const dataInput = [ - { - branch: 'Keepfy Joinville', - local: 'Joiville', - status: 'Ativo', - companyCode: '', - branchCode: '' - }, - { - branch: 'Keepfy São Paulo', - local: 'São Paulo', - status: 'Ativo', - companyCode: '', - branchCode: '' - }, - { - branch: 'Keepfy Rio Grande do Sul', - local: 'Rio Grande do Sul', - status: 'Ativo', - companyCode: '', - branchCode: '' - }, - { - branch: 'Keepfy Rio de Janeiro', - local: 'Rio de Janeiro', - status: 'Ativo', - companyCode: '', - branchCode: '' - }, - { - branch: 'Keepfy Curitiba', - local: 'Curitiba', - status: 'Ativo', - companyCode: '', - branchCode: '' - }, - { - branch: 'Keepfy Teresópolis', - local: 'Teresópolis', - status: 'Ativo', - companyCode: '', - branchCode: '' - } -] - -const tableHead = [ - { - title: 'Nome da Filial', - field: 'branch', - type: 'text', - editable: false - }, - { - title: 'Localidade', - field: 'local', - type: 'text', - editable: false - }, - { - title: 'Status', - field: 'status', - type: 'text', - editable: false - }, - { - title: 'Código da Empresa', - field: 'companyCode', - type: 'number', - editable: true - }, - { - title: 'Código da Filial', - field: 'branchCode', - type: 'text', - editable: true - } -] - export const WithField = () => { + const dataInput = [ + { + branch: 'Keepfy Joinville', + local: 'Joiville', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy São Paulo', + local: 'São Paulo', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy Rio Grande do Sul', + local: 'Rio Grande do Sul', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy Rio de Janeiro', + local: 'Rio de Janeiro', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy Curitiba', + local: 'Curitiba', + status: 'Ativo', + companyCode: '', + branchCode: '' + }, + { + branch: 'Keepfy Teresópolis', + local: 'Teresópolis', + status: 'Ativo', + companyCode: '', + branchCode: '' + } + ] + + const tableHead = [ + { + title: 'Nome da Filial', + field: 'branch', + type: 'text', + editable: false + }, + { + title: 'Localidade', + field: 'local', + type: 'text', + editable: false + }, + { + title: 'Status', + field: 'status', + type: 'text', + editable: false + }, + { + title: 'Código da Empresa', + field: 'companyCode', + type: 'number', + editable: true + }, + { + title: 'Código da Filial', + field: 'branchCode', + type: 'text', + editable: true + } + ] + const [data, setData] = useState[]>(() => dataInput) const [selectedAll, setSelectedAll] = useState(false) const [selected, setSelected] = useState( diff --git a/src/core/data-display/data-table/data-table.tsx b/src/core/data-display/data-table/data-table.tsx index 7e76460b..378fbe96 100644 --- a/src/core/data-display/data-table/data-table.tsx +++ b/src/core/data-display/data-table/data-table.tsx @@ -37,71 +37,21 @@ export type DataTableProps< D extends Data, V extends StackView = Record > = { - /** - * The data to be shown in the table - */ data: D[] - /** - * Errors as an object where the key is the ID of the row and the value is - * a Set with the fields of error - */ errors?: Errors - /** - * The columns specification - */ columns: ColumnSpec[] - /** - * Hide the table header - */ noHeader?: boolean - /** - * Component to show when there are no data - */ componentForEmpty?: ReactNode - /** - * Custom style to be applied to the table body - */ bodyStyle?: CSSProperties - /** - * Custom style to be applied to the table head - */ headStyle?: CSSProperties - /** - * Custom style to be applied to all rows of the table body - */ bodyRowStyle?: CSSProperties - /** - * Custom style to be applied to all rows of the table head - */ headRowStyle?: CSSProperties - /** - * Height of a hidden row, when you need to have some blank space in case - * you fill in the pagination.rowsPerPage - */ hiddenRowHeight?: number - /** - * The pagination configuration - */ pagination?: Partial - /** - * A React MutableRefObject for the row controller - */ controllerRef?: MutableRefObject | undefined> - /** - * Initialize with hidden values - */ hidden?: boolean - /** - * Custom rowViews used as a Stac - */ rowViews?: Record> - /** - * Hide or show the checkbox - */ checkbox?: boolean - /** - * Handle the selected states and values - */ checkboxProps?: { checkRow?: boolean[] checkAllRows?: boolean diff --git a/src/core/data-display/data-table/rows.tsx b/src/core/data-display/data-table/rows.tsx index 12f25906..4a78fe75 100644 --- a/src/core/data-display/data-table/rows.tsx +++ b/src/core/data-display/data-table/rows.tsx @@ -13,6 +13,13 @@ type RowStateUpdater = ( value: D[keyof D] ) => void +type NewRowProps = { + data: PartialData + errors?: Errors + columns: ColumnSpec[] + onUpdate?(partial: Partial): void +} + const isEditable = (column: ColumnSpec) => column.type === 'actions' || column.editable @@ -210,13 +217,6 @@ export const StatefulRow = ({ ) } -type NewRowProps = { - data: PartialData - errors?: Errors - columns: ColumnSpec[] - onUpdate?(partial: Partial): void -} - export const NewRow = ({ data, columns, diff --git a/src/core/data-display/data-table/types.ts b/src/core/data-display/data-table/types.ts index 4b509fb4..3a0bcf59 100644 --- a/src/core/data-display/data-table/types.ts +++ b/src/core/data-display/data-table/types.ts @@ -103,29 +103,11 @@ export type RowViewComponent = FunctionComponent<{ }> export type DataTableController = { - /** - * Actives the edit mode for a row - */ editRow(id: Identifier): void - /** - * Actives the view mode for a row - */ viewRow(id: Identifier): void - /** - * Hides the view mode for a row - */ hideRow(id: Identifier): void - /** - * Adds a new row on the DataTable - */ addRow(data: PartialData): void - /** - * Returns only the edited properties of a row in edit mode - */ getEditedRowData(id: Identifier): PartialData - /** - * Returns the edited properties and the old data of a row in edit mode - */ getRowData(id: Identifier): { edited: PartialData; current?: D } pushRowView(id: Identifier, view: keyof V): void popRowView(id: Identifier): void diff --git a/src/core/data-display/data-table/use-paginated.ts b/src/core/data-display/data-table/use-paginated.ts index df8a2ee2..181000f2 100644 --- a/src/core/data-display/data-table/use-paginated.ts +++ b/src/core/data-display/data-table/use-paginated.ts @@ -35,15 +35,11 @@ export const generateRandomDate = (size: number): Data[] => { return content } -const MOCK_DELAY_VALUE = 1000 -const DEFAULT_PAGE_SIZE = 5 -const DEFAULT_MOCK_LENGTH = 35 - -const mockData = generateRandomDate(DEFAULT_MOCK_LENGTH) +const mockData = generateRandomDate(35) const INITIAL_STATE: IPaginated = { items: [], - size: DEFAULT_PAGE_SIZE, + size: 5, actualPage: 0, totalItens: 0 } @@ -61,7 +57,7 @@ export const usePaginated = () => { setState(prev => ({ ...prev, totalItens: mockData.length })) setTimeout(() => { setLoading(false) - }, MOCK_DELAY_VALUE) + }, 1000) }, []) useEffect(() => { @@ -85,18 +81,22 @@ export const usePaginated = () => { const handleChangePage = (newPage: number) => { setLoading(true) + setState(prev => ({ ...prev, actualPage: newPage })) + setTimeout(() => { setLoading(false) - }, MOCK_DELAY_VALUE) + }, 1000) } const handleChangePerPage = (value: number) => { setLoading(true) + setState(prev => ({ ...prev, size: value })) + setTimeout(() => { setLoading(false) - }, MOCK_DELAY_VALUE) + }, 1000) } const setData: Dispatch> = (data: Data[]) => { diff --git a/src/core/data-display/divider/divider.spec.tsx b/src/core/data-display/divider/divider.spec.tsx index f709a622..d1e96073 100644 --- a/src/core/data-display/divider/divider.spec.tsx +++ b/src/core/data-display/divider/divider.spec.tsx @@ -1,10 +1,11 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import { Divider } from '.' describe('Divider', () => { it('should render', () => { render() + const divider = screen.getByTestId('divider') expect(divider).toBeDefined() @@ -19,6 +20,7 @@ describe('Divider', () => { style={{ backgroundColor: 'blue' }} /> ) + const divider = screen.getByTestId('divider') expect(divider).toHaveProperty('style.margin', '10px') diff --git a/src/core/data-display/editable-table/editable-table-with-date.spec.tsx b/src/core/data-display/editable-table/editable-table-with-date.spec.tsx index 063b45e2..b5f951ab 100644 --- a/src/core/data-display/editable-table/editable-table-with-date.spec.tsx +++ b/src/core/data-display/editable-table/editable-table-with-date.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { act } from 'react-dom/test-utils' import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event/' @@ -92,6 +92,7 @@ describe('EditableTable - With Date', () => { const dateInput = screen.getByRole('date-picker') as HTMLInputElement expect(dateInput.value).toBe('01/07/2019 17:21') + jest.clearAllMocks() }) }) diff --git a/src/core/data-display/editable-table/editable-table.spec.tsx b/src/core/data-display/editable-table/editable-table.spec.tsx index 1653c318..4e8d47b9 100644 --- a/src/core/data-display/editable-table/editable-table.spec.tsx +++ b/src/core/data-display/editable-table/editable-table.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { act } from 'react-dom/test-utils' import { fireEvent, render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event/' @@ -128,26 +128,6 @@ describe('EditableTable', () => { expect(label).toBeDefined() }) - it('should render with no data', () => { - render( - - ) - - const label = screen.getByText( - 'Não há dados para serem exibidos no momento' - ) - - expect(label).toBeDefined() - }) - it('should render with no data or columns', () => { render( { const label = screen.getByText('Adicionar item') await userEvent.click(label) + const nameInput = screen.getByRole('name-input').firstElementChild ?.firstElementChild as HTMLInputElement const valueInput = screen.getByRole('name-input').firstElementChild @@ -322,27 +303,6 @@ describe('EditableTable', () => { expect(label).toBeDefined() }) - it('should render with no pagination info', () => { - render( - - ) - - const label = screen.getByText('Fulano') - - expect(label).toBeDefined() - }) - it('should call update row with correct values', async () => { const onUpdateSpy = jest .fn() @@ -539,10 +499,9 @@ describe('EditableTable', () => { await act(async () => await userEvent.click(editFirstRow)) const dateInput = screen.getByRole('date-picker') as HTMLInputElement - - expect(dateInput.value).toBe('01/07/2019 17:21') const textInput = screen.getAllByTestId('text-field')[0] + expect(dateInput.value).toBe('01/07/2019 17:21') expect(dateInput.parentElement?.classList).toContain('Mui-error') expect(textInput.classList).toContain('Mui-error') }) diff --git a/src/core/data-display/editable-table/editable-table.stories.tsx b/src/core/data-display/editable-table/editable-table.stories.tsx index d1feeb75..3092a02a 100644 --- a/src/core/data-display/editable-table/editable-table.stories.tsx +++ b/src/core/data-display/editable-table/editable-table.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react' import EditableTable from '.' export default { - title: 'DataDisplay/EditTable', + title: 'DataDisplay/EditableTable', component: EditableTable, args: { title: 'adicionar', diff --git a/src/core/data-display/fab/fab.spec.tsx b/src/core/data-display/fab/fab.spec.tsx index 7fbbab67..e6cae539 100644 --- a/src/core/data-display/fab/fab.spec.tsx +++ b/src/core/data-display/fab/fab.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import Fab from '.' diff --git a/src/core/data-display/line/index.tsx b/src/core/data-display/line/index.tsx index 65975076..3598431c 100644 --- a/src/core/data-display/line/index.tsx +++ b/src/core/data-display/line/index.tsx @@ -5,9 +5,6 @@ import { theme } from '@/theme' const { grays, secondary } = theme.colors export interface LineProps extends DefaultProps { - /** - * If true, the line will use the primary color. - */ primary?: boolean 'data-testid'?: string } diff --git a/src/core/data-display/line/line.spec.tsx b/src/core/data-display/line/line.spec.tsx index 0532940c..d8e739c2 100644 --- a/src/core/data-display/line/line.spec.tsx +++ b/src/core/data-display/line/line.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import { Line } from '.' import { theme } from '@/theme' @@ -12,7 +12,6 @@ describe('Line', () => { const element = screen.getByTestId('line-component') expect(element).toBeDefined() - expect(element).toHaveProperty('style.flex', '1') }) it('should render with custom styles', () => { @@ -27,6 +26,7 @@ describe('Line', () => { const element = screen.getByTestId('line-component') + expect(element).toHaveProperty('style.flex', '1') expect(element).toHaveProperty('style.color', 'red') expect(element).toHaveProperty('style.margin', '10px') expect(element).toHaveProperty('style.padding', '5px') diff --git a/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap b/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap new file mode 100644 index 00000000..0a0af15f --- /dev/null +++ b/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ListItem should match snapshot 1`] = ` +
+
+
+
+ Avatar +
+
+
+ + Item 1 + +
+
+
+ Action +
+
+ +
+
+`; diff --git a/src/core/data-display/list-item/index.tsx b/src/core/data-display/list-item/index.tsx index 5f6bc8d0..5931e3e9 100644 --- a/src/core/data-display/list-item/index.tsx +++ b/src/core/data-display/list-item/index.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react' +import React from 'react' import type { MouseEvent } from 'react' import { ListItem as MuiListItem, @@ -49,7 +49,7 @@ const ListItem = (props: ListItemProps) => { const typographyProps = { className } return ( - + <> {props.avatar && ( {props.avatar} )} @@ -73,7 +73,7 @@ const ListItem = (props: ListItemProps) => { {props.action} )} - + ) } diff --git a/src/core/data-display/list-item/list-item.spec.tsx b/src/core/data-display/list-item/list-item.spec.tsx index f542349a..881fc880 100644 --- a/src/core/data-display/list-item/list-item.spec.tsx +++ b/src/core/data-display/list-item/list-item.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import ListItem from '.' @@ -14,20 +14,28 @@ describe('ListItem', () => { it('should render with avatar', () => { render(Avatar
} />) - const listItem = screen.getByText('Item 1') const avatar = screen.getByText('Avatar') - expect(listItem).toBeDefined() expect(avatar).toBeDefined() }) it('should render with action', () => { render(Action} />) - const listItem = screen.getByText('Item 1') const action = screen.getByText('Action') - expect(listItem).toBeDefined() expect(action).toBeDefined() }) + + it('should match snapshot', () => { + const { container } = render( + Avatar} + action={
Action
} + /> + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/list/__snapshots__/list.spec.tsx.snap b/src/core/data-display/list/__snapshots__/list.spec.tsx.snap new file mode 100644 index 00000000..ce19961d --- /dev/null +++ b/src/core/data-display/list/__snapshots__/list.spec.tsx.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`List should match snapshot 1`] = ` +
+
    + + + +
+
+`; diff --git a/src/core/data-display/list/index.tsx b/src/core/data-display/list/index.tsx index 46fb861c..62ef5789 100644 --- a/src/core/data-display/list/index.tsx +++ b/src/core/data-display/list/index.tsx @@ -8,14 +8,8 @@ import type { DefaultProps } from '../../types' import type { Theme } from '@material-ui/core/styles' export interface ListProps extends DefaultProps { - /** - * The title of the list - */ title?: string dense?: boolean - /** - * The color of the list - */ color?: 'primary' | 'secondary' | 'default' | 'inherit' } diff --git a/src/core/data-display/list/list.spec.tsx b/src/core/data-display/list/list.spec.tsx index aad6ea5a..79f92f6e 100644 --- a/src/core/data-display/list/list.spec.tsx +++ b/src/core/data-display/list/list.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import ListItem from '@/core/data-display/list-item' import List from '.' @@ -27,10 +27,8 @@ describe('List', () => { ) - const list = screen.queryAllByRole('menuitem') const title = screen.queryByText('My beautiful list') - expect(list).toHaveLength(3) expect(title).toBeDefined() }) @@ -47,4 +45,16 @@ describe('List', () => { expect(listContainer.classList).toContain('my-custom-class') }) + + it('should match snapshot', () => { + const { container } = render( + + Item 1 + Item 2 + Item 3 + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap b/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap new file mode 100644 index 00000000..444e452d --- /dev/null +++ b/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MenuItem should match snapshot 1`] = ` +
+ +
+`; diff --git a/src/core/data-display/menu-item/menu-item.spec.tsx b/src/core/data-display/menu-item/menu-item.spec.tsx index c142f095..cd6984e5 100644 --- a/src/core/data-display/menu-item/menu-item.spec.tsx +++ b/src/core/data-display/menu-item/menu-item.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import MenuItem from '.' @@ -10,4 +10,10 @@ describe('MenuItem', () => { expect(menuItem).toBeDefined() }) + + it('should match snapshot', () => { + const { container } = render() + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/node/__snapshots__/node.spec.tsx.snap b/src/core/data-display/node/__snapshots__/node.spec.tsx.snap new file mode 100644 index 00000000..5b109467 --- /dev/null +++ b/src/core/data-display/node/__snapshots__/node.spec.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Node should match snapshot 1`] = ` +
+
    +
  • + + Branch +
    • +
+
+`; diff --git a/src/core/data-display/node/node.spec.tsx b/src/core/data-display/node/node.spec.tsx index 5a9fdcb5..b8a004e2 100644 --- a/src/core/data-display/node/node.spec.tsx +++ b/src/core/data-display/node/node.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { act } from 'react-dom/test-utils' import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' @@ -38,4 +38,15 @@ describe('Node', () => { expect(node1).toBeDefined() expect(node2).toBeDefined() }) + + it('should match snapshot', () => { + const { container } = render( + + + + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/table/table.spec.tsx b/src/core/data-display/table/table.spec.tsx index 634d968d..3c073a8b 100644 --- a/src/core/data-display/table/table.spec.tsx +++ b/src/core/data-display/table/table.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { act } from 'react-dom/test-utils' import { render } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' @@ -57,6 +57,7 @@ describe('Table', () => { it('should render with sort', async () => { const onSortSpy = jest.fn() + const { getByText } = render() const tableHeadName = getByText('Table-Head-Name') diff --git a/src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap b/src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap new file mode 100644 index 00000000..b09ce6c4 --- /dev/null +++ b/src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tree should match snapshot 1`] = ` +
+
    +
  • + + root +
    • +
+
+`; diff --git a/src/core/data-display/tree/tree.spec.tsx b/src/core/data-display/tree/tree.spec.tsx index 75187639..f880b109 100644 --- a/src/core/data-display/tree/tree.spec.tsx +++ b/src/core/data-display/tree/tree.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { act } from 'react-dom/test-utils' import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' @@ -75,4 +75,10 @@ describe('Tree', () => { expect(leaf.length).toEqual(3) }) + + it('should match snapshot', () => { + const { container } = render() + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap b/src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap new file mode 100644 index 00000000..688252ca --- /dev/null +++ b/src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Typography should match snapshot 1`] = ` +
+

+ Some text +

+
+`; diff --git a/src/core/data-display/typography/typography.spec.tsx b/src/core/data-display/typography/typography.spec.tsx index 81a55607..d9c95201 100644 --- a/src/core/data-display/typography/typography.spec.tsx +++ b/src/core/data-display/typography/typography.spec.tsx @@ -1,9 +1,9 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import Typography from '.' describe('Typography', () => { - it('should render with no variant', () => { + it('should render', () => { render(Some text) const typography = screen.getByText('Some text') @@ -12,12 +12,19 @@ describe('Typography', () => { expect(typography.classList).toContain('MuiTypography-body2') }) + it('should render without variant', () => { + render(Some text) + + const typography = screen.getByText('Some text') + + expect(typography.classList).toContain('MuiTypography-body2') + }) + it('should render with variant', () => { render(Title) const typography = screen.getByText('Title') - expect(typography).toBeDefined() expect(typography.classList).toContain('MuiTypography-h1') }) @@ -34,4 +41,14 @@ describe('Typography', () => { expect(typography.style.margin).toBe('10px') expect(typography.style.padding).toBe('5px') }) + + it('should match snapshot', () => { + const { container } = render( + + Some text + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap b/src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap new file mode 100644 index 00000000..758781ea --- /dev/null +++ b/src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Collapse should match snapshot 1`] = ` +
+
+
+
+ I am open for discussions +
+
+
+
+`; diff --git a/src/core/feedback/collapse/collapse.spec.tsx b/src/core/feedback/collapse/collapse.spec.tsx index 89c07341..62c45088 100644 --- a/src/core/feedback/collapse/collapse.spec.tsx +++ b/src/core/feedback/collapse/collapse.spec.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import { render, screen } from '@testing-library/react' import { Collapse } from '.' @@ -28,4 +28,14 @@ describe('Collapse', () => { expect(container.classList).toContain('MuiCollapse-hidden') }) + + it('should match snapshot', () => { + const { container } = render( + + I am open for discussions + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/src/core/feedback/dialog/__snapshots__/dialog.spec.tsx.snap b/src/core/feedback/dialog/__snapshots__/dialog.spec.tsx.snap new file mode 100644 index 00000000..4e0fe4a4 --- /dev/null +++ b/src/core/feedback/dialog/__snapshots__/dialog.spec.tsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dialog should match snapshot 1`] = ` +