From e1ddf846e621ebcdd7afd091a2455ac5213a3b50 Mon Sep 17 00:00:00 2001 From: nbloomf Date: Mon, 14 Oct 2019 11:36:07 -0500 Subject: [PATCH] Add test script Adds a basic test script using jest and enzyme as well as some simple component tests --- npm-shrinkwrap.json | 169 +++++++++++++++--- package.json | 2 + packages/wp-checkout/package.json | 23 ++- .../src/components/checkout-step.js | 2 +- .../test/components/checkout-step.js | 69 +++++++ packages/wp-checkout/test/lib/join-classes.js | 25 +++ packages/wp-checkout/test/setupTests.js | 7 + 7 files changed, 271 insertions(+), 26 deletions(-) create mode 100644 packages/wp-checkout/test/components/checkout-step.js create mode 100644 packages/wp-checkout/test/lib/join-classes.js create mode 100644 packages/wp-checkout/test/setupTests.js diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 6b633811625c5..905949fe9fe61 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -205,7 +205,6 @@ "version": "7.5.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", - "dev": true, "requires": { "@babel/highlight": "^7.0.0" } @@ -268,7 +267,6 @@ "version": "7.6.2", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.2.tgz", "integrity": "sha512-j8iHaIW4gGPnViaIHI7e9t/Hl8qLjERI6DcV9kEpAIDJsAOrcnXqRS7t+QbhL76pwbtqP+QCQLL0z1CyVmtjjQ==", - "dev": true, "requires": { "@babel/types": "^7.6.0", "jsesc": "^2.5.1", @@ -279,14 +277,12 @@ "jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -294,7 +290,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -369,7 +364,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", - "dev": true, "requires": { "@babel/helper-get-function-arity": "^7.0.0", "@babel/template": "^7.1.0", @@ -380,7 +374,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz", "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -407,7 +400,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz", "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -489,7 +481,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", - "dev": true, "requires": { "@babel/types": "^7.4.4" } @@ -521,7 +512,6 @@ "version": "7.5.0", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz", "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==", - "dev": true, "requires": { "chalk": "^2.0.0", "esutils": "^2.0.2", @@ -1142,7 +1132,6 @@ "version": "7.6.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.6.0.tgz", "integrity": "sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==", - "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/parser": "^7.6.0", @@ -1153,7 +1142,6 @@ "version": "7.6.2", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.2.tgz", "integrity": "sha512-8fRE76xNwNttVEF2TwxJDGBLWthUkHWSldmfuBzVRmEDWOtu4XdINTgN7TDWzuLg4bbeIMLvfMFD9we5YcWkRQ==", - "dev": true, "requires": { "@babel/code-frame": "^7.5.5", "@babel/generator": "^7.6.2", @@ -1170,7 +1158,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", - "dev": true, "requires": { "ms": "^2.1.1" } @@ -1181,7 +1168,6 @@ "version": "7.6.1", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.1.tgz", "integrity": "sha512-X7gdiuaCmA0uRjCmRtYJNAVCc/q+5xSgsfKJHqMN4iNLILX39677fJE1O40arPMh0TTtS9ItH67yre6c7k6t0g==", - "dev": true, "requires": { "esutils": "^2.0.2", "lodash": "^4.17.13", @@ -1206,6 +1192,24 @@ } } }, + "@emotion/is-prop-valid": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz", + "integrity": "sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==", + "requires": { + "@emotion/memoize": "0.7.3" + } + }, + "@emotion/memoize": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz", + "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==" + }, + "@emotion/unitless": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz", + "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==" + }, "@evocateur/libnpmaccess": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz", @@ -4625,6 +4629,22 @@ "@types/babel__traverse": "^7.0.6" } }, + "babel-plugin-styled-components": { + "version": "1.10.6", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz", + "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-preset-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz", @@ -5248,6 +5268,11 @@ "quick-lru": "^1.0.0" } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -7038,6 +7063,11 @@ "randomfill": "^1.0.3" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -7169,6 +7199,16 @@ "postcss": "^6.0.14" } }, + "css-to-react-native": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", + "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-tree": { "version": "1.0.0-alpha.33", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz", @@ -10240,8 +10280,7 @@ "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" }, "globby": { "version": "9.2.0", @@ -11665,6 +11704,11 @@ "is-integer": "~1.0.4" } }, + "is-what": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.3.1.tgz", + "integrity": "sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA==" + }, "is-whitespace-character": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz", @@ -14056,6 +14100,11 @@ "resolved": "https://registry.npmjs.org/memize/-/memize-1.0.5.tgz", "integrity": "sha512-Dm8Jhb5kiC4+ynYsVR4QDXKt+o2dfqGuY4hE2x+XlXZkdndlT80bJxfcMv5QGp/FCy6MhG7f5ElpmKPFKOSEpg==" }, + "memoize-one": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -14122,6 +14171,14 @@ } } }, + "merge-anything": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.1.tgz", + "integrity": "sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==", + "requires": { + "is-what": "^3.3.1" + } + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -18357,8 +18414,7 @@ "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" }, "postcss-values-parser": { "version": "2.0.1", @@ -21392,6 +21448,26 @@ "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=", "dev": true }, + "styled-components": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.0.tgz", + "integrity": "sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.0.0", + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "merge-anything": "^2.2.4", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -21644,6 +21720,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "sugarss": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz", @@ -22329,8 +22415,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, "to-no-case": { "version": "1.0.2", @@ -23590,6 +23675,46 @@ "errno": "~0.1.7" } }, + "wp-checkout": { + "version": "file:packages/wp-checkout", + "requires": { + "prop-types": "^15.7.2", + "react": "^16.10.2", + "react-dom": "^16.10.2" + }, + "dependencies": { + "react": { + "version": "16.10.2", + "resolved": "https://registry.npmjs.org/react/-/react-16.10.2.tgz", + "integrity": "sha512-MFVIq0DpIhrHFyqLU0S3+4dIcBhhOvBE8bJ/5kHPVOVaGdo0KuiQzpcjCPsf585WvhypqtrMILyoE2th6dT+Lw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.10.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.10.2.tgz", + "integrity": "sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.16.2" + } + }, + "scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-BqYVWqwz6s1wZMhjFvLfVR5WXP7ZY32M/wYPo04CcuPM7XZEbV2TBNW7Z0UkguPTl0dWMA59VbNXxK6q+pHItg==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "wp-error": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/wp-error/-/wp-error-1.3.0.tgz", diff --git a/package.json b/package.json index 9b3cebdde5a95..44a39d9e087ff 100644 --- a/package.json +++ b/package.json @@ -187,6 +187,7 @@ "source-map-support": "0.5.12", "store": "2.0.12", "striptags": "2.2.1", + "styled-components": "4.4.0", "superagent": "3.8.3", "svg4everybody": "2.1.9", "textarea-caret": "3.1.0", @@ -201,6 +202,7 @@ "valid-url": "1.0.9", "webpack-bundle-analyzer": "3.5.0", "webpack-dev-middleware": "3.7.0", + "wp-checkout": "file:packages/wp-checkout", "wpcom": "5.4.2", "wpcom-proxy-request": "5.0.2", "wpcom-xhr-request": "1.1.3", diff --git a/packages/wp-checkout/package.json b/packages/wp-checkout/package.json index 56064a63af25e..2f97070574a96 100644 --- a/packages/wp-checkout/package.json +++ b/packages/wp-checkout/package.json @@ -4,7 +4,7 @@ "description": "A checkout component for Automattic", "main": "dist/cjs/index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", + "test": "jest", "start": "webpack-dev-server --mode development" }, "repository": { @@ -21,10 +21,15 @@ "devDependencies": { "@babel/cli": "^7.6.4", "@babel/core": "^7.6.4", - "@babel/preset-env": "^7.6.3", - "@babel/preset-react": "^7.6.3", + "@babel/preset-env": "7.6.3", + "@babel/preset-react": "7.6.3", + "babel-jest": "24.9.0", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", + "enzyme": "3.10.0", + "enzyme-adapter-react-16": "1.15.1", + "jest": "24.9.0", + "react-test-renderer": "16.10.2", "style-loader": "^1.0.0", "webpack": "^4.41.1", "webpack-cli": "^3.3.9", @@ -34,5 +39,17 @@ "prop-types": "^15.7.2", "react": "^16.10.2", "react-dom": "^16.10.2" + }, + "jest": { + "rootDir": ".", + "testMatch": [ + "**/test/**/*.[jt]s?(x)" + ], + "testPathIgnorePatterns": [ + "test/setupTests.js" + ], + "setupFilesAfterEnv": [ + "test/setupTests.js" + ] } } diff --git a/packages/wp-checkout/src/components/checkout-step.js b/packages/wp-checkout/src/components/checkout-step.js index 70ff3371127cf..0ddc7ea07145b 100644 --- a/packages/wp-checkout/src/components/checkout-step.js +++ b/packages/wp-checkout/src/components/checkout-step.js @@ -59,7 +59,7 @@ function CheckoutStepHeader( { className, stepNumber, title, collapsed, onEdit } CheckoutStepHeader.propTypes = { className: PropTypes.string, - stepNumber: PropTypes.number.isRequired, + stepNumber: PropTypes.oneOf( [ 1, 2, 3 ] ).isRequired, title: PropTypes.string.isRequired, collapsed: PropTypes.bool, onEdit: PropTypes.func, diff --git a/packages/wp-checkout/test/components/checkout-step.js b/packages/wp-checkout/test/components/checkout-step.js new file mode 100644 index 0000000000000..ac8538c420a94 --- /dev/null +++ b/packages/wp-checkout/test/components/checkout-step.js @@ -0,0 +1,69 @@ +/* @format */ + +/** + * External dependencies + */ +import React from 'react'; +import { shallow, mount } from 'enzyme'; + +/** + * Internal dependencies + */ +import CheckoutStep from '../../src/components/checkout-step'; + +describe( 'CheckoutStep', function() { + const componentWithDefaults = ; + it( "Default component is selectable by '.checkout-step'", function() { + expect( shallow( componentWithDefaults ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( "Default component is not selectable by '.checkout-step--is-collapsed'", function() { + expect( shallow( componentWithDefaults ).is( '.checkout-step--is-collapsed' ) ).toBe( false ); + } ); + it( 'Default component renders title prop', function() { + expect( + mount( componentWithDefaults ).contains( + { 'Step' } + ) + ).toBe( true ); // eslint-disable-line wpcalypso/jsx-classname-namespace + } ); + + const componentCollapsed = ; + it( "Collapsed component is selectable by '.checkout-step'", function() { + expect( shallow( componentCollapsed ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( "Collapsed component is selectable by '.checkout-step--is-collapsed'", function() { + expect( shallow( componentCollapsed ).is( '.checkout-step--is-collapsed' ) ).toBe( true ); + } ); + + const componentWithCustomClass = ( + // eslint-disable-line wpcalypso/jsx-classname-namespace + ); + it( "Component with custom class is selectable by '.checkout-step'", function() { + expect( shallow( componentWithCustomClass ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( 'Component with custom class is selectable by custom class name', function() { + expect( shallow( componentWithCustomClass ).is( '.custom-class' ) ).toBe( true ); + } ); + + const componentWithTwoCustomClasses = ( + // eslint-disable-line wpcalypso/jsx-classname-namespace + ); + it( "Component with two custom classes is selectable by '.checkout-step'", function() { + expect( shallow( componentWithTwoCustomClasses ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( 'Component with two custom classes is selectable by first custom class name', function() { + expect( shallow( componentWithTwoCustomClasses ).is( '.custom-class-1' ) ).toBe( true ); + } ); + it( 'Component with two custom classes is selectable by second custom class name', function() { + expect( shallow( componentWithTwoCustomClasses ).is( '.custom-class-2' ) ).toBe( true ); + } ); + + const componentWithChild = ( + +
+ + ); + it( 'Children are rendered', function() { + expect( shallow( componentWithChild ).contains(
) ).toBe( true ); + } ); +} ); diff --git a/packages/wp-checkout/test/lib/join-classes.js b/packages/wp-checkout/test/lib/join-classes.js new file mode 100644 index 0000000000000..e6c9e96d4ed72 --- /dev/null +++ b/packages/wp-checkout/test/lib/join-classes.js @@ -0,0 +1,25 @@ +/* @format */ + +/** + * Internal dependencies + */ +import joinClasses from '../../src/lib/join-classes'; + +describe( 'joinClasses', function() { + it( 'Empty array', function() { + expect( joinClasses( [] ) ).toBe( '' ); + } ); + + it( 'Singleton array', function() { + expect( joinClasses( [ 'foo' ] ) ).toBe( 'foo' ); + } ); + + it( 'Doubleton array', function() { + expect( joinClasses( [ 'foo', 'bar' ] ) ).toBe( 'foo bar' ); + } ); + + // Should probably do some validation in joinClasses(). + it( 'String argument', function() { + expect( () => joinClasses( 'foo' ) ).toThrow( 'classNames.filter is not a function' ); + } ); +} ); diff --git a/packages/wp-checkout/test/setupTests.js b/packages/wp-checkout/test/setupTests.js new file mode 100644 index 0000000000000..e6172f671c177 --- /dev/null +++ b/packages/wp-checkout/test/setupTests.js @@ -0,0 +1,7 @@ +/** + * External dependencies + */ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure( { adapter: new Adapter() } );