refactor(tests): enzyme => react-testing-library (#37712)

* refactor: 💡 rewrite enzyme tests in react-testing-library

* fix: 🐛 remove enzyme imports from frame-runner.js

* chore: 🤖 install and add enzyme imports to frame-runner.js back
This commit is contained in:
Abdelrahman Ashraf
2019-11-08 13:20:25 +02:00
committed by mrugesh
parent 5ae8470bd5
commit 94532f98db
17 changed files with 1109 additions and 1242 deletions

249
client/package-lock.json generated
View File

@ -2030,9 +2030,9 @@
"integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==" "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
}, },
"@testing-library/dom": { "@testing-library/dom": {
"version": "6.8.1", "version": "6.10.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.8.1.tgz", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.10.1.tgz",
"integrity": "sha512-b+Q4wryafqsSTFBV14cc5xqhN/OVB9oMeUQvZwy1kVx+kdqs4zQAcyvCsFkdcqx7NxibWpUN/fBIUaqyAEhitw==", "integrity": "sha512-5BPKxaO+zSJDUbVZBRNf9KrmDkm/EcjjaHSg3F9+031VZyPACKXlwLBjVzZxheunT9m72DoIq7WvyE457/Xweg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.6.2", "@babel/runtime": "^7.6.2",
@ -2044,9 +2044,9 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": { "@babel/runtime": {
"version": "7.6.3", "version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
"dev": true, "dev": true,
"requires": { "requires": {
"regenerator-runtime": "^0.13.2" "regenerator-runtime": "^0.13.2"
@ -2097,9 +2097,9 @@
} }
}, },
"react-is": { "react-is": {
"version": "16.10.2", "version": "16.11.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
"integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==", "integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw==",
"dev": true "dev": true
}, },
"regenerator-runtime": { "regenerator-runtime": {
@ -2170,9 +2170,9 @@
} }
}, },
"@testing-library/react": { "@testing-library/react": {
"version": "9.3.0", "version": "9.3.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.3.0.tgz", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.3.2.tgz",
"integrity": "sha512-FTPCwmLo0tLtP50Au2uGz4/N1BcJTnBx4StDVHZ47zPMEj1/+J2rk/RTj8SLoHRKWCtcmhN4wRmudOXQNP29/w==", "integrity": "sha512-J6ftWtm218tOLS175MF9eWCxGp+X+cUXCpkPIin8KAXWtyZbr9CbqJ8M8QNd6spZxJDAGlw+leLG4MJWLlqVgg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.6.0", "@babel/runtime": "^7.6.0",
@ -2181,9 +2181,9 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": { "@babel/runtime": {
"version": "7.6.3", "version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
"dev": true, "dev": true,
"requires": { "requires": {
"regenerator-runtime": "^0.13.2" "regenerator-runtime": "^0.13.2"
@ -2365,9 +2365,9 @@
} }
}, },
"@types/react-dom": { "@types/react-dom": {
"version": "16.9.2", "version": "16.9.4",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.2.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.4.tgz",
"integrity": "sha512-hgPbBoI1aTSTvZwo8HYw35UaTldW6n2ETLvHAcfcg1FaOuBV3olmyCe5eMpx2WybWMBPv0MdU2t5GOcQhP+3zA==", "integrity": "sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/react": "*" "@types/react": "*"
@ -2385,9 +2385,9 @@
"integrity": "sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==" "integrity": "sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ=="
}, },
"@types/testing-library__dom": { "@types/testing-library__dom": {
"version": "6.5.3", "version": "6.10.0",
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.5.3.tgz", "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz",
"integrity": "sha512-E/LSnbzo25gCLy/YOHKY9KJ+rfI8hy5cfbScyZqVuFw9CUMn1faWEDnxMcVHgjAbWtTStfllB8TwNKCx8bAKeA==", "integrity": "sha512-mL/GMlyQxiZplbUuFNwA0vAI3k3uJNSf6slr5AVve9TXmfLfyefNT0uHHnxwdYuPMxYD5gI/+dgAvc/5opW9JQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"pretty-format": "^24.3.0" "pretty-format": "^24.3.0"
@ -2925,17 +2925,6 @@
"react-is": "^16.9.0" "react-is": "^16.9.0"
}, },
"dependencies": { "dependencies": {
"function.prototype.name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.1.tgz",
"integrity": "sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==",
"requires": {
"define-properties": "^1.1.3",
"function-bind": "^1.1.1",
"functions-have-names": "^1.1.1",
"is-callable": "^1.1.4"
}
},
"loose-envify": { "loose-envify": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -2955,9 +2944,9 @@
} }
}, },
"react-is": { "react-is": {
"version": "16.10.2", "version": "16.11.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
"integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==" "integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
} }
} }
}, },
@ -3226,9 +3215,9 @@
}, },
"dependencies": { "dependencies": {
"es-abstract": { "es-abstract": {
"version": "1.15.0", "version": "1.16.0",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.15.0.tgz", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.16.0.tgz",
"integrity": "sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==", "integrity": "sha512-xdQnfykZ9JMEiasTAJZJdMWCQ1Vm00NBw79/AWi7ELfZuuPCSOMDZbT9mkOfSctVtfhb+sAAzrm+j//GjjLHLg==",
"requires": { "requires": {
"es-to-primitive": "^1.2.0", "es-to-primitive": "^1.2.0",
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
@ -3268,13 +3257,55 @@
} }
}, },
"array.prototype.flat": { "array.prototype.flat": {
"version": "1.2.1", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.2.tgz",
"integrity": "sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==", "integrity": "sha512-VXjh7lAL4KXKF2hY4FnEW9eRW6IhdvFW1sN/JwLbmECbCgACCnBHNyP3lFiYuttr0jxRN9Bsc5+G27dMseSWqQ==",
"requires": { "requires": {
"define-properties": "^1.1.2", "define-properties": "^1.1.3",
"es-abstract": "^1.10.0", "es-abstract": "^1.15.0",
"function-bind": "^1.1.1" "function-bind": "^1.1.1"
},
"dependencies": {
"es-abstract": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.16.0.tgz",
"integrity": "sha512-xdQnfykZ9JMEiasTAJZJdMWCQ1Vm00NBw79/AWi7ELfZuuPCSOMDZbT9mkOfSctVtfhb+sAAzrm+j//GjjLHLg==",
"requires": {
"es-to-primitive": "^1.2.0",
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-symbols": "^1.0.0",
"is-callable": "^1.1.4",
"is-regex": "^1.0.4",
"object-inspect": "^1.6.0",
"object-keys": "^1.1.1",
"string.prototype.trimleft": "^2.1.0",
"string.prototype.trimright": "^2.1.0"
}
},
"es-to-primitive": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
"integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
"requires": {
"is-callable": "^1.1.4",
"is-date-object": "^1.0.1",
"is-symbol": "^1.0.2"
}
},
"is-symbol": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
"integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
"requires": {
"has-symbols": "^1.0.0"
}
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
}
} }
}, },
"arraybuffer.slice": { "arraybuffer.slice": {
@ -7231,9 +7262,9 @@
} }
}, },
"react-is": { "react-is": {
"version": "16.10.2", "version": "16.11.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
"integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==" "integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
}, },
"semver": { "semver": {
"version": "5.7.1", "version": "5.7.1",
@ -7255,17 +7286,6 @@
"semver": "^5.7.0" "semver": "^5.7.0"
}, },
"dependencies": { "dependencies": {
"function.prototype.name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.1.tgz",
"integrity": "sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==",
"requires": {
"define-properties": "^1.1.3",
"function-bind": "^1.1.1",
"functions-have-names": "^1.1.1",
"is-callable": "^1.1.4"
}
},
"loose-envify": { "loose-envify": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -7285,9 +7305,9 @@
} }
}, },
"react-is": { "react-is": {
"version": "16.10.2", "version": "16.11.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
"integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==" "integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
}, },
"semver": { "semver": {
"version": "5.7.1", "version": "5.7.1",
@ -9267,13 +9287,14 @@
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
}, },
"function.prototype.name": { "function.prototype.name": {
"version": "1.1.0", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz", "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.1.tgz",
"integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==", "integrity": "sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==",
"requires": { "requires": {
"define-properties": "^1.1.2", "define-properties": "^1.1.3",
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
"is-callable": "^1.1.3" "functions-have-names": "^1.1.1",
"is-callable": "^1.1.4"
} }
}, },
"functional-red-black-tree": { "functional-red-black-tree": {
@ -9282,9 +9303,9 @@
"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
}, },
"functions-have-names": { "functions-have-names": {
"version": "1.1.1", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.1.1.tgz", "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.0.tgz",
"integrity": "sha512-U0kNHUoxwPNPWOJaMG7Z00d4a/qZVrFtzWJRaK8V9goaVOCXBSQSJpt3MYGNtkScKEBKovxLjnNdC9MlXwo5Pw==" "integrity": "sha512-zKXyzksTeaCSw5wIX79iCA40YAa6CJMJgNg9wdkU/ERBrIdPSimPICYiLp65lRbSBqtiHql/HZfS2DyI/AH6tQ=="
}, },
"gatsby": { "gatsby": {
"version": "2.16.4", "version": "2.16.4",
@ -11678,9 +11699,9 @@
"integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==" "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ=="
}, },
"handlebars": { "handlebars": {
"version": "4.3.1", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.3.1.tgz", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.1.tgz",
"integrity": "sha512-c0HoNHzDiHpBt4Kqe99N8tdLPKAnGCQ73gYMPWtAYM4PwGnf7xl8PBUHJqh9ijlzt2uQKaSRxbXRt+rZ7M2/kA==", "integrity": "sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==",
"dev": true, "dev": true,
"requires": { "requires": {
"neo-async": "^2.6.0", "neo-async": "^2.6.0",
@ -12000,9 +12021,9 @@
"integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==" "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
}, },
"html-element-map": { "html-element-map": {
"version": "1.0.1", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.0.1.tgz", "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.1.0.tgz",
"integrity": "sha512-BZSfdEm6n706/lBfXKWa4frZRZcT5k1cOusw95ijZsHlI+GdgY0v95h6IzO3iIDf2ROwq570YTwqNPqHcNMozw==", "integrity": "sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==",
"requires": { "requires": {
"array-filter": "^1.0.0" "array-filter": "^1.0.0"
} }
@ -16062,9 +16083,9 @@
"integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=" "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
}, },
"nearley": { "nearley": {
"version": "2.16.0", "version": "2.19.0",
"resolved": "https://registry.npmjs.org/nearley/-/nearley-2.16.0.tgz", "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.19.0.tgz",
"integrity": "sha512-Tr9XD3Vt/EujXbZBv6UAHYoLUSMQAxSsTnm9K3koXzjzNWY195NqALeyrzLZBKzAkL3gl92BcSogqrHjD8QuUg==", "integrity": "sha512-2v52FTw7RPqieZr3Gth1luAXZR7Je6q3KaDHY5bjl/paDUdMu35fZ8ICNgiYJRr3tf3NMvIQQR1r27AvEr9CRA==",
"requires": { "requires": {
"commander": "^2.19.0", "commander": "^2.19.0",
"moo": "^0.4.3", "moo": "^0.4.3",
@ -21071,13 +21092,55 @@
} }
}, },
"string.prototype.trim": { "string.prototype.trim": {
"version": "1.1.2", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz", "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz",
"integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=", "integrity": "sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==",
"requires": { "requires": {
"define-properties": "^1.1.2", "define-properties": "^1.1.3",
"es-abstract": "^1.5.0", "es-abstract": "^1.13.0",
"function-bind": "^1.0.2" "function-bind": "^1.1.1"
},
"dependencies": {
"es-abstract": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.16.0.tgz",
"integrity": "sha512-xdQnfykZ9JMEiasTAJZJdMWCQ1Vm00NBw79/AWi7ELfZuuPCSOMDZbT9mkOfSctVtfhb+sAAzrm+j//GjjLHLg==",
"requires": {
"es-to-primitive": "^1.2.0",
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-symbols": "^1.0.0",
"is-callable": "^1.1.4",
"is-regex": "^1.0.4",
"object-inspect": "^1.6.0",
"object-keys": "^1.1.1",
"string.prototype.trimleft": "^2.1.0",
"string.prototype.trimright": "^2.1.0"
}
},
"es-to-primitive": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
"integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
"requires": {
"is-callable": "^1.1.4",
"is-date-object": "^1.0.1",
"is-symbol": "^1.0.2"
}
},
"is-symbol": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
"integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
"requires": {
"has-symbols": "^1.0.0"
}
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
}
} }
}, },
"string.prototype.trimleft": { "string.prototype.trimleft": {
@ -21917,20 +21980,20 @@
"integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g=="
}, },
"uglify-js": { "uglify-js": {
"version": "3.6.0", "version": "3.6.8",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.8.tgz",
"integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==", "integrity": "sha512-XhHJ3S3ZyMwP8kY1Gkugqx3CJh2C3O0y8NPiSxtm1tyD/pktLAkFZsFGpuNfTZddKDQ/bbDBLAd2YyA1pbi8HQ==",
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"commander": "~2.20.0", "commander": "~2.20.3",
"source-map": "~0.6.1" "source-map": "~0.6.1"
}, },
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "2.20.0", "version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true, "dev": true,
"optional": true "optional": true
}, },
@ -22480,9 +22543,9 @@
} }
}, },
"wait-for-expect": { "wait-for-expect": {
"version": "3.0.0", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.0.tgz", "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.1.tgz",
"integrity": "sha512-9LyJL+MugZdcQn5V9PBSEC4d2UPTy1xX2U9wTc6LvG/18qeeYqdE/CgmAQJxc/Vcjs+VzH+wiyIXxz05F3nrpQ==", "integrity": "sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==",
"dev": true "dev": true
}, },
"walker": { "walker": {

View File

@ -95,7 +95,7 @@
}, },
"devDependencies": { "devDependencies": {
"@testing-library/jest-dom": "^4.1.2", "@testing-library/jest-dom": "^4.1.2",
"@testing-library/react": "^9.3.0", "@testing-library/react": "^9.3.2",
"autoprefixer": "^9.6.5", "autoprefixer": "^9.6.5",
"babel-plugin-transform-imports": "^1.5.1", "babel-plugin-transform-imports": "^1.5.1",
"chokidar": "^2.1.5", "chokidar": "^2.1.5",

View File

@ -40,11 +40,13 @@ async function initTestFrame(e = {}) {
if (e.loadEnzyme) { if (e.loadEnzyme) {
let Adapter16; let Adapter16;
/* eslint-disable no-inline-comments */ /* eslint-disable no-inline-comments */
[{ default: Enzyme }, { default: Adapter16 }] = await Promise.all([ [{ default: Enzyme }, { default: Adapter16 }] = await Promise.all([
import(/* webpackChunkName: "enzyme" */ 'enzyme'), import(/* webpackChunkName: "enzyme" */ 'enzyme'),
import(/* webpackChunkName: "enzyme-adapter" */ 'enzyme-adapter-react-16') import(/* webpackChunkName: "enzyme-adapter" */ 'enzyme-adapter-react-16')
]); ]);
/* eslint-enable no-inline-comments */ /* eslint-enable no-inline-comments */
Enzyme.configure({ adapter: new Adapter16() }); Enzyme.configure({ adapter: new Adapter16() });
} }

View File

@ -1,9 +1,10 @@
/* global expect jest */ /* global expect jest */
import '@testing-library/jest-dom/extend-expect';
import React from 'react'; import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow'; import { render } from '@testing-library/react';
import Enzyme, { shallow } from 'enzyme'; import { Provider } from 'react-redux';
import Adapter from 'enzyme-adapter-react-16'; import { createStore } from '../../redux/createStore';
import { Map } from './'; import { Map } from './';
import mockChallengeNodes from '../../__mocks__/challenge-nodes'; import mockChallengeNodes from '../../__mocks__/challenge-nodes';
@ -11,8 +12,9 @@ import mockIntroNodes from '../../__mocks__/intro-nodes';
import { dasherize } from '../../../../utils/slugs'; import { dasherize } from '../../../../utils/slugs';
Enzyme.configure({ adapter: new Adapter() }); function renderWithRedux(ui) {
const renderer = new ShallowRenderer(); return render(<Provider store={createStore()}>{ui}</Provider>);
}
const baseProps = { const baseProps = {
introNodes: mockIntroNodes, introNodes: mockIntroNodes,
@ -27,7 +29,7 @@ const baseProps = {
window.scrollTo = jest.fn(); window.scrollTo = jest.fn();
test('<Map /> snapshot', () => { test('<Map /> snapshot', () => {
const componentToRender = ( const { container } = renderWithRedux(
<Map <Map
introNodes={mockIntroNodes} introNodes={mockIntroNodes}
nodes={mockChallengeNodes} nodes={mockChallengeNodes}
@ -36,8 +38,8 @@ test('<Map /> snapshot', () => {
toggleSuperBlock={() => {}} toggleSuperBlock={() => {}}
/> />
); );
const component = renderer.render(componentToRender);
expect(component).toMatchSnapshot('Map'); expect(container).toMatchSnapshot('Map');
}); });
describe('<Map/>', () => { describe('<Map/>', () => {
@ -61,8 +63,9 @@ describe('<Map/>', () => {
toggleBlock: blockSpy, toggleBlock: blockSpy,
toggleSuperBlock: superSpy toggleSuperBlock: superSpy
}; };
const mapToRender = <Map {...props} />;
shallow(mapToRender); renderWithRedux(<Map {...props} />);
expect(blockSpy).toHaveBeenCalledTimes(1); expect(blockSpy).toHaveBeenCalledTimes(1);
expect(superSpy).toHaveBeenCalledTimes(1); expect(superSpy).toHaveBeenCalledTimes(1);
expect(initializeSpy).toHaveBeenCalledTimes(1); expect(initializeSpy).toHaveBeenCalledTimes(1);
@ -80,8 +83,7 @@ describe('<Map/>', () => {
currentChallengeId currentChallengeId
}; };
const mapToRender = <Map {...props} />; renderWithRedux(<Map {...props} />);
shallow(mapToRender);
expect(blockSpy).toHaveBeenCalledTimes(1); expect(blockSpy).toHaveBeenCalledTimes(1);
// the block here should always be the first block of the superblock // the block here should always be the first block of the superblock
@ -102,8 +104,7 @@ describe('<Map/>', () => {
currentChallengeId currentChallengeId
}; };
const mapToRender = <Map {...props} />; renderWithRedux(<Map {...props} />);
shallow(mapToRender);
expect(blockSpy).toHaveBeenCalledTimes(1); expect(blockSpy).toHaveBeenCalledTimes(1);
expect(blockSpy).toHaveBeenCalledWith(idNode.block); expect(blockSpy).toHaveBeenCalledWith(idNode.block);
@ -120,8 +121,9 @@ describe('<Map/>', () => {
toggleBlock: blockSpy, toggleBlock: blockSpy,
toggleSuperBlock: superSpy toggleSuperBlock: superSpy
}; };
const mapToRender = <Map {...props} />;
shallow(mapToRender); renderWithRedux(<Map {...props} />);
expect(blockSpy).toHaveBeenCalledTimes(1); expect(blockSpy).toHaveBeenCalledTimes(1);
expect(blockSpy).toHaveBeenCalledWith(defaultNode.block); expect(blockSpy).toHaveBeenCalledWith(defaultNode.block);
@ -135,8 +137,9 @@ describe('<Map/>', () => {
...baseProps, ...baseProps,
resetExpansion: expansionSpy resetExpansion: expansionSpy
}; };
const mapToRender = <Map {...props} />;
shallow(mapToRender); renderWithRedux(<Map {...props} />);
expect(expansionSpy).toHaveBeenCalledTimes(1); expect(expansionSpy).toHaveBeenCalledTimes(1);
}); });
}); });

View File

@ -1,567 +1,93 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Map /> snapshot: Map 1`] = ` exports[`<Map /> snapshot: Map 1`] = `
<Row <div>
bsClass="row" <div
componentClass="div" class="row"
>
<Col
bsClass="col"
componentClass="div"
sm={10}
smOffset={1}
xs={12}
> >
<div <div
className="map-ui" class="col-sm-10 col-sm-offset-1 col-xs-12"
>
<div
class="map-ui"
> >
<ul> <ul>
<Connect(SuperBlock) <li
introNodes={ class="superblock "
Array [ id="super-block-one"
Object { >
"fields": Object { <button
"slug": "/super-block-one/block-a", aria-expanded="false"
}, class="map-title"
"frontmatter": Object { >
"block": "Block A", <svg
"title": "Introduction to Block A", viewBox="0 0 100 100"
}, width="25px"
}, >
Object { <polygon
"fields": Object { points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
"slug": "/super-block-one/block-b", style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
}, transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
"frontmatter": Object {
"block": "Block B",
"title": "Introduction to Block B",
},
},
Object {
"fields": Object {
"slug": "/super-block-one/block-c",
},
"frontmatter": Object {
"block": "Block C",
"title": "Introduction to Block C",
},
},
]
}
nodes={
Array [
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-one",
},
"id": "a",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-two",
},
"id": "b",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
Object {
"block": "block-b",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-one/block-b/challenge-one",
},
"id": "c",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-b",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-one/block-b/challenge-two",
},
"id": "d",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
Object {
"block": "block-c",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block C",
"slug": "/super-block-one/block-c/challenge-one",
},
"id": "e",
"isPrivate": true,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-two/block-a/challenge-one",
},
"id": "f",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-two/block-a/challenge-two",
},
"id": "g",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge Two",
},
Object {
"block": "block-b",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-two/block-b/challenge-one",
},
"id": "h",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge One",
},
Object {
"block": "block-b",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-two/block-b/challenge-two",
},
"id": "i",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge Two",
},
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-three/block-a/challenge-one",
},
"id": "j",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Three",
"title": "Challenge One",
},
Object {
"block": "block-c",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block C",
"slug": "/super-block-three/block-c/challenge-two",
},
"id": "k",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Three",
"title": "Challenge Two",
},
]
}
superBlock="Super Block One"
/> />
<Connect(SuperBlock) </svg>
introNodes={ <h4>
Array [ Super Block One Certification (300 hours)
Object { </h4>
"fields": Object { </button>
"slug": "/super-block-one/block-a", </li>
}, <li
"frontmatter": Object { class="superblock "
"block": "Block A", id="super-block-two"
"title": "Introduction to Block A", >
}, <button
}, aria-expanded="false"
Object { class="map-title"
"fields": Object { >
"slug": "/super-block-one/block-b", <svg
}, viewBox="0 0 100 100"
"frontmatter": Object { width="25px"
"block": "Block B", >
"title": "Introduction to Block B", <polygon
}, points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
}, style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
Object { transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
"fields": Object {
"slug": "/super-block-one/block-c",
},
"frontmatter": Object {
"block": "Block C",
"title": "Introduction to Block C",
},
},
]
}
nodes={
Array [
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-one",
},
"id": "a",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-two",
},
"id": "b",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
Object {
"block": "block-b",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-one/block-b/challenge-one",
},
"id": "c",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-b",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-one/block-b/challenge-two",
},
"id": "d",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
Object {
"block": "block-c",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block C",
"slug": "/super-block-one/block-c/challenge-one",
},
"id": "e",
"isPrivate": true,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-two/block-a/challenge-one",
},
"id": "f",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-two/block-a/challenge-two",
},
"id": "g",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge Two",
},
Object {
"block": "block-b",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-two/block-b/challenge-one",
},
"id": "h",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge One",
},
Object {
"block": "block-b",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-two/block-b/challenge-two",
},
"id": "i",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge Two",
},
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-three/block-a/challenge-one",
},
"id": "j",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Three",
"title": "Challenge One",
},
Object {
"block": "block-c",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block C",
"slug": "/super-block-three/block-c/challenge-two",
},
"id": "k",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Three",
"title": "Challenge Two",
},
]
}
superBlock="Super Block Two"
/> />
<Connect(SuperBlock) </svg>
introNodes={ <h4>
Array [ Super Block Two Certification (300 hours)
Object { </h4>
"fields": Object { </button>
"slug": "/super-block-one/block-a", </li>
}, <li
"frontmatter": Object { class="superblock "
"block": "Block A", id="super-block-three"
"title": "Introduction to Block A", >
}, <button
}, aria-expanded="false"
Object { class="map-title"
"fields": Object { >
"slug": "/super-block-one/block-b", <svg
}, viewBox="0 0 100 100"
"frontmatter": Object { width="25px"
"block": "Block B", >
"title": "Introduction to Block B", <polygon
}, points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
}, style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
Object { transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
"fields": Object { />
"slug": "/super-block-one/block-c", </svg>
}, <h4>
"frontmatter": Object { Super Block Three Certification (300 hours)
"block": "Block C", </h4>
"title": "Introduction to Block C", </button>
}, </li>
}, <div
] class="spacer"
} style="padding: 15px 0px; height: 1px;"
nodes={
Array [
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-one",
},
"id": "a",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-two",
},
"id": "b",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
Object {
"block": "block-b",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-one/block-b/challenge-one",
},
"id": "c",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-b",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-one/block-b/challenge-two",
},
"id": "d",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
Object {
"block": "block-c",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block C",
"slug": "/super-block-one/block-c/challenge-one",
},
"id": "e",
"isPrivate": true,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-two/block-a/challenge-one",
},
"id": "f",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-two/block-a/challenge-two",
},
"id": "g",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge Two",
},
Object {
"block": "block-b",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-two/block-b/challenge-one",
},
"id": "h",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge One",
},
Object {
"block": "block-b",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block B",
"slug": "/super-block-two/block-b/challenge-two",
},
"id": "i",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Two",
"title": "Challenge Two",
},
Object {
"block": "block-a",
"dashedName": "challenge-one",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-three/block-a/challenge-one",
},
"id": "j",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Three",
"title": "Challenge One",
},
Object {
"block": "block-c",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block C",
"slug": "/super-block-three/block-c/challenge-two",
},
"id": "k",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block Three",
"title": "Challenge Two",
},
]
}
superBlock="Super Block Three"
/> />
<Spacer />
</ul> </ul>
</div> </div>
</Col> </div>
</Row> </div>
</div>
`; `;

View File

@ -1,61 +1,50 @@
/* global expect */ /* global jest, expect */
import '@testing-library/jest-dom/extend-expect';
import React from 'react'; import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow'; import { render, fireEvent } from '@testing-library/react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import sinon from 'sinon';
import { Block } from './Block'; import { Block } from './Block';
import mockChallengeNodes from '../../../__mocks__/challenge-nodes'; import mockChallengeNodes from '../../../__mocks__/challenge-nodes';
import mockIntroNodes from '../../../__mocks__/intro-nodes'; import mockIntroNodes from '../../../__mocks__/intro-nodes';
import mockCompleted from '../../../__mocks__/completedChallengesMock'; import mockCompleted from '../../../__mocks__/completedChallengesMock';
Enzyme.configure({ adapter: new Adapter() });
const renderer = new ShallowRenderer();
test('<Block /> not expanded snapshot', () => { test('<Block /> not expanded snapshot', () => {
const toggleSpy = sinon.spy(); const { container } = render(
const toggleMapSpy = sinon.spy();
const componentToRender = (
<Block <Block
blockDashedName='block-a' blockDashedName='block-a'
challenges={mockChallengeNodes.filter(node => node.block === 'block-a')} challenges={mockChallengeNodes.filter(node => node.block === 'block-a')}
completedChallenges={mockCompleted} completedChallenges={mockCompleted}
intro={mockIntroNodes[0]} intro={mockIntroNodes[0]}
isExpanded={false} isExpanded={false}
toggleBlock={toggleSpy} toggleBlock={() => {}}
toggleMapModal={toggleMapSpy} toggleMapModal={() => {}}
/> />
); );
const component = renderer.render(componentToRender);
expect(component).toMatchSnapshot('block-not-expanded'); expect(container).toMatchSnapshot('block-not-expanded');
}); });
test('<Block expanded snapshot', () => { test('<Block expanded snapshot', () => {
const toggleSpy = sinon.spy(); const { container } = render(
const toggleMapSpy = sinon.spy();
const componentToRender = (
<Block <Block
blockDashedName='block-a' blockDashedName='block-a'
challenges={mockChallengeNodes.filter(node => node.block === 'block-a')} challenges={mockChallengeNodes.filter(node => node.block === 'block-a')}
completedChallenges={mockCompleted} completedChallenges={mockCompleted}
intro={mockIntroNodes[0]} intro={mockIntroNodes[0]}
isExpanded={true} isExpanded={true}
toggleBlock={toggleSpy} toggleBlock={() => {}}
toggleMapModal={toggleMapSpy} toggleMapModal={() => {}}
/> />
); );
const component = renderer.render(componentToRender); expect(container).toMatchSnapshot('block-expanded');
expect(component).toMatchSnapshot('block-expanded');
}); });
test('<Block /> should handle toggle clicks correctly', () => { test('<Block /> should handle toggle clicks correctly', async () => {
const toggleSpy = sinon.spy(); const toggleSpy = jest.fn();
const toggleMapSpy = sinon.spy(); const toggleMapSpy = jest.fn();
const props = { const props = {
blockDashedName: 'block-a', blockDashedName: 'block-a',
challenges: mockChallengeNodes.filter(node => node.block === 'block-a'), challenges: mockChallengeNodes.filter(node => node.block === 'block-a'),
@ -66,30 +55,21 @@ test('<Block /> should handle toggle clicks correctly', () => {
toggleMapModal: toggleMapSpy toggleMapModal: toggleMapSpy
}; };
const componentToRender = <Block {...props} />; const { container, rerender } = render(<Block {...props} />);
const enzymeWrapper = Enzyme.shallow(componentToRender); expect(toggleSpy).not.toHaveBeenCalled();
expect(container.querySelector('.map-title h4')).toHaveTextContent('Block A');
expect(container.querySelector('ul').children.length).toBe(0);
expect(toggleSpy.called).toBe(false); fireEvent.click(container.querySelector('.map-title'));
expect(
enzymeWrapper
.find('.map-title')
.find('h4')
.text()
).toBe('Block A');
enzymeWrapper.find('.map-title').simulate('click'); expect(toggleSpy).toHaveBeenCalledTimes(1);
expect(toggleSpy).toHaveBeenCalledWith('block-a');
expect(toggleSpy.called).toBe(true); rerender(<Block {...props} isExpanded={true} />);
expect(toggleSpy.calledWithExactly('block-a')).toBe(true);
enzymeWrapper.setProps({ ...props, isExpanded: true }); expect(container.querySelector('.map-title h4')).toHaveTextContent('Block A');
expect(container.querySelector('ul').children.length).toBe(
expect( props.challenges.length + (props.intro ? 1 : 0)
enzymeWrapper );
.find('.map-title')
.find('h4')
.text()
).toBe('Block A');
expect(enzymeWrapper.find('ul').length).toBe(1);
}); });

View File

@ -1,50 +1,49 @@
/* global expect */ /* global jest, expect */
import '@testing-library/jest-dom/extend-expect';
import React from 'react'; import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow'; import { render, fireEvent } from '@testing-library/react';
import Enzyme from 'enzyme'; import { Provider } from 'react-redux';
import Adapter from 'enzyme-adapter-react-16'; import { createStore } from '../../../redux/createStore';
import sinon from 'sinon';
import { SuperBlock } from './SuperBlock'; import { SuperBlock } from './SuperBlock';
import mockChallengeNodes from '../../../__mocks__/challenge-nodes'; import mockChallengeNodes from '../../../__mocks__/challenge-nodes';
import mockIntroNodes from '../../../__mocks__/intro-nodes'; import mockIntroNodes from '../../../__mocks__/intro-nodes';
Enzyme.configure({ adapter: new Adapter() }); function renderWithRedux(ui) {
const renderer = new ShallowRenderer(); return render(<Provider store={createStore()}>{ui}</Provider>);
}
test('<SuperBlock /> not expanded snapshot', () => { test('<SuperBlock /> not expanded snapshot', () => {
const toggleSpy = sinon.spy();
const props = { const props = {
introNodes: mockIntroNodes, introNodes: mockIntroNodes,
isExpanded: false, isExpanded: false,
nodes: mockChallengeNodes, nodes: mockChallengeNodes,
superBlock: 'Super Block One', superBlock: 'Super Block One',
toggleSuperBlock: toggleSpy toggleSuperBlock: () => {}
}; };
const componentToRender = <SuperBlock {...props} />;
const component = renderer.render(componentToRender);
expect(component).toMatchSnapshot('superBlock-not-expanded'); const { container } = render(<SuperBlock {...props} />);
expect(container).toMatchSnapshot('superBlock-not-expanded');
}); });
test('<SuperBlock /> expanded snapshot', () => { test('<SuperBlock /> expanded snapshot', () => {
const toggleSpy = sinon.spy();
const props = { const props = {
introNodes: mockIntroNodes, introNodes: mockIntroNodes,
isExpanded: true, isExpanded: true,
nodes: mockChallengeNodes, nodes: mockChallengeNodes,
superBlock: 'Super Block One', superBlock: 'Super Block One',
toggleSuperBlock: toggleSpy toggleSuperBlock: () => {}
}; };
const componentToRender = <SuperBlock {...props} />;
const component = renderer.render(componentToRender);
expect(component).toMatchSnapshot('superBlock-expanded'); const { container } = renderWithRedux(<SuperBlock {...props} />);
expect(container).toMatchSnapshot('superBlock-expanded');
}); });
test('<SuperBlock should handle toggle clicks correctly', () => { test('<SuperBlock should handle toggle clicks correctly', () => {
const toggleSpy = sinon.spy(); const toggleSpy = jest.fn();
const props = { const props = {
introNodes: mockIntroNodes, introNodes: mockIntroNodes,
isExpanded: false, isExpanded: false,
@ -52,30 +51,25 @@ test('<SuperBlock should handle toggle clicks correctly', () => {
superBlock: 'Super Block One', superBlock: 'Super Block One',
toggleSuperBlock: toggleSpy toggleSuperBlock: toggleSpy
}; };
const componentToRender = <SuperBlock {...props} />;
const enzymeWrapper = Enzyme.shallow(componentToRender);
expect(toggleSpy.called).toBe(false); const { container, rerender } = renderWithRedux(<SuperBlock {...props} />);
expect(
enzymeWrapper
.find('.map-title')
.find('h4')
.text()
).toBe('Super Block One Certification (300\xa0hours)');
expect(enzymeWrapper.find('ul').length).toBe(0);
enzymeWrapper.find('.map-title').simulate('click'); expect(toggleSpy).not.toHaveBeenCalled();
expect(container.querySelector('.map-title h4')).toHaveTextContent(
'Super Block One Certification (300 hours)'
);
expect(container.querySelector('ul')).not.toBeInTheDocument();
expect(toggleSpy.called).toBe(true); fireEvent.click(container.querySelector('.map-title'));
expect(toggleSpy.calledWithExactly('Super Block One')).toBe(true);
enzymeWrapper.setProps({ ...props, isExpanded: true }); expect(toggleSpy).toHaveBeenCalledTimes(1);
expect(toggleSpy).toHaveBeenCalledWith('Super Block One');
expect( rerender(
enzymeWrapper <Provider store={createStore()}>
.find('.map-title') <SuperBlock {...props} isExpanded={true} />
.find('h4') </Provider>
.text() );
).toBe('Super Block One Certification (300\xa0hours)');
expect(enzymeWrapper.find('ul').length).toBe(1); expect(container.querySelector('ul')).toBeInTheDocument();
}); });

View File

@ -1,31 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Block /> not expanded snapshot: block-not-expanded 1`] = ` exports[`<Block /> not expanded snapshot: block-not-expanded 1`] = `
<div>
<li <li
className="block " class="block "
> >
<button <button
aria-expanded={false} aria-expanded="false"
className="map-title" class="map-title"
onClick={[Function]}
> >
<Caret /> <svg
viewBox="0 0 100 100"
width="25px"
>
<polygon
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
/>
</svg>
<h4> <h4>
Block A Block A
</h4> </h4>
<div <div
className="map-title-completed" class="map-title-completed"
> >
<span> <span>
<GreenNotCompleted <span
style={ class="sr-only"
Object { >
"height": "15px", Not Passed
"marginRight": "10px", </span>
"width": "15px", <svg
} height="50"
} style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/> />
</g>
</svg>
</span> </span>
<span> <span>
2/5 2/5
@ -34,34 +63,64 @@ exports[`<Block /> not expanded snapshot: block-not-expanded 1`] = `
</button> </button>
<ul /> <ul />
</li> </li>
</div>
`; `;
exports[`<Block expanded snapshot: block-expanded 1`] = ` exports[`<Block expanded snapshot: block-expanded 1`] = `
<div>
<li <li
className="block open" class="block open"
> >
<button <button
aria-expanded={true} aria-expanded="true"
className="map-title" class="map-title"
onClick={[Function]}
> >
<Caret /> <svg
viewBox="0 0 100 100"
width="25px"
>
<polygon
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
/>
</svg>
<h4> <h4>
Block A Block A
</h4> </h4>
<div <div
className="map-title-completed" class="map-title-completed"
> >
<span> <span>
<GreenNotCompleted <span
style={ class="sr-only"
Object { >
"height": "15px", Not Passed
"marginRight": "10px", </span>
"width": "15px", <svg
} height="50"
} style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/> />
</g>
</svg>
</span> </span>
<span> <span>
2/5 2/5
@ -70,149 +129,321 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
</button> </button>
<ul> <ul>
<li <li
className="map-challenge-title" class="map-challenge-title"
id="introduction-to-block-a" id="introduction-to-block-a"
> >
<span <span
className="badge map-badge" class="badge map-badge"
> >
<IntroInformation <span
style={ class="sr-only"
Object { >
"height": "15px", IntroInformation
"marginRight": "10px",
"width": "15px",
}
}
/>
</span> </span>
<mockConstructor <svg
onClick={[Function]} height="50"
to="/super-block-one/block-a" style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
IntroInformation
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="45"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
</g>
</svg>
</span>
<a
href="/super-block-one/block-a"
> >
Introduction to Block A Introduction to Block A
</mockConstructor> </a>
</li> </li>
<li <li
className="map-challenge-title map-challenge-title-completed" class="map-challenge-title map-challenge-title-completed"
id="challenge-one" id="challenge-one"
> >
<span <span
className="badge map-badge" class="badge map-badge"
> >
<GreenPass <span
style={ class="sr-only"
Object { >
"height": "15px", Passed
"marginRight": "10px",
"width": "15px",
}
}
/>
</span> </span>
<mockConstructor <svg
onClick={[Function]} height="50"
to="/super-block-one/block-a/challenge-one" style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
transform="rotate(-45, 120, 106.321)"
width="128.85878"
x="55.57059"
y="91.32089"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
transform="rotate(45, 66.75, 123.75)"
width="80.66548"
x="26.41726"
y="108.75"
/>
</g>
</svg>
</span>
<a
href="/super-block-one/block-a/challenge-one"
> >
Challenge One Challenge One
</mockConstructor> </a>
</li> </li>
<li <li
className="map-challenge-title" class="map-challenge-title"
id="challenge-two" id="challenge-two"
> >
<span <span
className="badge map-badge" class="badge map-badge"
> >
<GreenNotCompleted <span
style={ class="sr-only"
Object { >
"height": "15px", Not Passed
"marginRight": "10px",
"width": "15px",
}
}
/>
</span> </span>
<mockConstructor <svg
onClick={[Function]} height="50"
to="/super-block-one/block-a/challenge-two" style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
</g>
</svg>
</span>
<a
href="/super-block-one/block-a/challenge-two"
> >
Challenge Two Challenge Two
</mockConstructor> </a>
</li> </li>
<li <li
className="map-challenge-title" class="map-challenge-title"
id="challenge-one" id="challenge-one"
> >
<span <span
className="badge map-badge" class="badge map-badge"
> >
<GreenNotCompleted <span
style={ class="sr-only"
Object { >
"height": "15px", Not Passed
"marginRight": "10px",
"width": "15px",
}
}
/>
</span> </span>
<mockConstructor <svg
onClick={[Function]} height="50"
to="/super-block-two/block-a/challenge-one" style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
</g>
</svg>
</span>
<a
href="/super-block-two/block-a/challenge-one"
> >
Challenge One Challenge One
</mockConstructor> </a>
</li> </li>
<li <li
className="map-challenge-title map-challenge-title-completed" class="map-challenge-title map-challenge-title-completed"
id="challenge-two" id="challenge-two"
> >
<span <span
className="badge map-badge" class="badge map-badge"
> >
<GreenPass <span
style={ class="sr-only"
Object { >
"height": "15px", Passed
"marginRight": "10px",
"width": "15px",
}
}
/>
</span> </span>
<mockConstructor <svg
onClick={[Function]} height="50"
to="/super-block-two/block-a/challenge-two" style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
transform="rotate(-45, 120, 106.321)"
width="128.85878"
x="55.57059"
y="91.32089"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
transform="rotate(45, 66.75, 123.75)"
width="80.66548"
x="26.41726"
y="108.75"
/>
</g>
</svg>
</span>
<a
href="/super-block-two/block-a/challenge-two"
> >
Challenge Two Challenge Two
</mockConstructor> </a>
</li> </li>
<li <li
className="map-challenge-title" class="map-challenge-title"
id="challenge-one" id="challenge-one"
> >
<span <span
className="badge map-badge" class="badge map-badge"
> >
<GreenNotCompleted <span
style={ class="sr-only"
Object { >
"height": "15px", Not Passed
"marginRight": "10px",
"width": "15px",
}
}
/>
</span> </span>
<mockConstructor <svg
onClick={[Function]} height="50"
to="/super-block-three/block-a/challenge-one" style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
</g>
</svg>
</span>
<a
href="/super-block-three/block-a/challenge-one"
> >
Challenge One Challenge One
</mockConstructor> </a>
</li> </li>
</ul> </ul>
</li> </li>
</div>
`; `;

View File

@ -1,158 +1,242 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<SuperBlock /> expanded snapshot: superBlock-expanded 1`] = ` exports[`<SuperBlock /> expanded snapshot: superBlock-expanded 1`] = `
<div>
<li <li
className="superblock open" class="superblock open"
id="super-block-one" id="super-block-one"
> >
<button <button
aria-expanded={true} aria-expanded="true"
className="map-title" class="map-title"
onClick={[Function]}
> >
<Caret /> <svg
viewBox="0 0 100 100"
width="25px"
>
<polygon
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
/>
</svg>
<h4> <h4>
Super Block One Certification (300 hours) Super Block One Certification (300 hours)
</h4> </h4>
</button> </button>
<ul> <ul>
<Connect(Block) <li
blockDashedName="block-a" class="block "
challenges={ >
Array [ <button
Object { aria-expanded="false"
"block": "block-a", class="map-title"
"dashedName": "challenge-one", >
"fields": Object { <svg
"blockName": "Block A", viewBox="0 0 100 100"
"slug": "/super-block-one/block-a/challenge-one", width="25px"
}, >
"id": "a", <polygon
"isPrivate": false, points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
"isRequired": false, style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
"superBlock": "Super Block One", transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
"title": "Challenge One",
},
Object {
"block": "block-a",
"dashedName": "challenge-two",
"fields": Object {
"blockName": "Block A",
"slug": "/super-block-one/block-a/challenge-two",
},
"id": "b",
"isPrivate": false,
"isRequired": false,
"superBlock": "Super Block One",
"title": "Challenge Two",
},
]
}
intro={
Object {
"fields": Object {
"slug": "/super-block-one/block-a",
},
"frontmatter": Object {
"block": "Block A",
"title": "Introduction to Block A",
},
}
}
/> />
<Connect(Block) </svg>
blockDashedName="block-b" <h4>
challenges={ Block A
Array [ </h4>
Object { <div
"block": "block-b", class="map-title-completed"
"dashedName": "challenge-one", >
"fields": Object { <span>
"blockName": "Block B", <span
"slug": "/super-block-one/block-b/challenge-one", class="sr-only"
}, >
"id": "c", Not Passed
"isPrivate": false, </span>
"isRequired": false, <svg
"superBlock": "Super Block One", height="50"
"title": "Challenge One", style="height: 15px; margin-right: 10px; width: 15px;"
}, viewBox="0 0 200 200"
Object { width="50"
"block": "block-b", xmlns="http://www.w3.org/2000/svg"
"dashedName": "challenge-two", >
"fields": Object { <g>
"blockName": "Block B", <title>
"slug": "/super-block-one/block-b/challenge-two", Not Passed
}, </title>
"id": "d", <circle
"isPrivate": false, cx="100"
"isRequired": false, cy="99"
"superBlock": "Super Block One", fill="var(--primary-background)"
"title": "Challenge Two", r="95"
}, stroke="var(--primary-color)"
] stroke-dasharray="null"
} stroke-linecap="null"
intro={ stroke-linejoin="null"
Object { stroke-width="10"
"fields": Object {
"slug": "/super-block-one/block-b",
},
"frontmatter": Object {
"block": "Block B",
"title": "Introduction to Block B",
},
}
}
/> />
<Connect(Block) </g>
blockDashedName="block-c" </svg>
challenges={ </span>
Array [ <span>
Object { 0/2
"block": "block-c", </span>
"dashedName": "challenge-one", </div>
"fields": Object { </button>
"blockName": "Block C", <ul />
"slug": "/super-block-one/block-c/challenge-one", </li>
}, <li
"id": "e", class="block "
"isPrivate": true, >
"isRequired": false, <button
"superBlock": "Super Block One", aria-expanded="false"
"title": "Challenge One", class="map-title"
}, >
] <svg
} viewBox="0 0 100 100"
intro={ width="25px"
Object { >
"fields": Object { <polygon
"slug": "/super-block-one/block-c", points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
}, style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
"frontmatter": Object { transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
"block": "Block C",
"title": "Introduction to Block C",
},
}
}
/> />
</svg>
<h4>
Block B
</h4>
<div
class="map-title-completed"
>
<span>
<span
class="sr-only"
>
Not Passed
</span>
<svg
height="50"
style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
</g>
</svg>
</span>
<span>
0/2
</span>
</div>
</button>
<ul />
</li>
<li
class="block "
>
<button
aria-expanded="false"
class="map-title"
>
<svg
viewBox="0 0 100 100"
width="25px"
>
<polygon
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
/>
</svg>
<h4>
Block C
</h4>
<div
class="map-title-completed"
>
<span>
<span
class="sr-only"
>
Not Passed
</span>
<svg
height="50"
style="height: 15px; margin-right: 10px; width: 15px;"
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
Not Passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-background)"
r="95"
stroke="var(--primary-color)"
stroke-dasharray="null"
stroke-linecap="null"
stroke-linejoin="null"
stroke-width="10"
/>
</g>
</svg>
</span>
<span>
0/1
</span>
</div>
</button>
<ul />
</li>
</ul> </ul>
</li> </li>
</div>
`; `;
exports[`<SuperBlock /> not expanded snapshot: superBlock-not-expanded 1`] = ` exports[`<SuperBlock /> not expanded snapshot: superBlock-not-expanded 1`] = `
<div>
<li <li
className="superblock " class="superblock "
id="super-block-one" id="super-block-one"
> >
<button <button
aria-expanded={false} aria-expanded="false"
className="map-title" class="map-title"
onClick={[Function]}
> >
<Caret /> <svg
viewBox="0 0 100 100"
width="25px"
>
<polygon
points="-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196"
style="stroke: var(--primary-color); fill: var(--primary-color); stroke-width: 1px;"
transform="matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)"
/>
</svg>
<h4> <h4>
Super Block One Certification (300 hours) Super Block One Certification (300 hours)
</h4> </h4>
</button> </button>
</li> </li>
</div>
`; `;

View File

@ -1,30 +1,26 @@
/* global expect */ /* global expect */
import '@testing-library/jest-dom/extend-expect';
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import { render } from '@testing-library/react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import BlockSaveButton from './BlockSaveButton'; import BlockSaveButton from './BlockSaveButton';
Enzyme.configure({ adapter: new Adapter() });
test('<BlockSaveButton /> snapshot', () => { test('<BlockSaveButton /> snapshot', () => {
const component = renderer.create(<BlockSaveButton />); const { container } = render(<BlockSaveButton />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });
test('Button text should default to "Save"', () => { test('Button text should default to "Save"', () => {
const enzymeWrapper = Enzyme.render(<BlockSaveButton />); const { getByRole } = render(<BlockSaveButton />);
expect(enzymeWrapper.text()).toBe('Save'); expect(getByRole('button')).toHaveTextContent('Save');
}); });
test('Button text should match "children"', () => { test('Button text should match "children"', () => {
const enzymeWrapper = Enzyme.render( const testText = 'My Text Here';
<BlockSaveButton>My Text Here</BlockSaveButton> const { getByRole } = render(<BlockSaveButton>{testText}</BlockSaveButton>);
);
expect(enzymeWrapper.text()).toBe('My Text Here'); expect(getByRole('button')).toHaveTextContent(testText);
}); });

View File

@ -1,16 +1,12 @@
/* global expect */ /* global expect */
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import { render } from '@testing-library/react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import BlockSaveWrapper from './BlockSaveWrapper'; import BlockSaveWrapper from './BlockSaveWrapper';
Enzyme.configure({ adapter: new Adapter() });
test('<BlockSaveWrapper /> snapshot', () => { test('<BlockSaveWrapper /> snapshot', () => {
const component = renderer.create(<BlockSaveWrapper />); const { container } = render(<BlockSaveWrapper />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });

View File

@ -1,11 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BlockSaveButton /> snapshot 1`] = ` exports[`<BlockSaveButton /> snapshot 1`] = `
<div>
<button <button
className="btn btn-primary btn-block" class="btn btn-primary btn-block"
disabled={false}
type="submit" type="submit"
> >
Save Save
</button> </button>
</div>
`; `;

View File

@ -1,11 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BlockSaveWrapper /> snapshot 1`] = ` exports[`<BlockSaveWrapper /> snapshot 1`] = `
<div>
<div <div
style={ style="padding: 0px 15px;"
Object {
"padding": "0 15px",
}
}
/> />
</div>
`; `;

View File

@ -1,15 +1,11 @@
/* global expect */ /* global expect */
import '@testing-library/jest-dom/extend-expect';
import React from 'react'; import React from 'react';
import Enzyme, { shallow } from 'enzyme'; import { render } from '@testing-library/react';
import Adapter from 'enzyme-adapter-react-16';
import Link from '../helpers/Link';
import renderer from 'react-test-renderer';
import Profile from './Profile'; import Profile from './Profile';
Enzyme.configure({ adapter: new Adapter() });
const userProps = { const userProps = {
user: { user: {
profileUI: { profileUI: {
@ -45,7 +41,8 @@ const userProps = {
username: 'string', username: 'string',
website: 'string', website: 'string',
yearsTopContributor: [] yearsTopContributor: []
} },
navigate: () => {}
}; };
const myProfileProps = { const myProfileProps = {
@ -60,29 +57,26 @@ const notMyProfileProps = {
describe('<Profile/>', () => { describe('<Profile/>', () => {
it('renders the settings button on your own profile', () => { it('renders the settings button on your own profile', () => {
const profileToRender = <Profile {...myProfileProps} />; const { getByText } = render(<Profile {...myProfileProps} />);
const profile = shallow(profileToRender);
expect( expect(getByText('Update my settings')).toHaveAttribute(
profile 'href',
.find(Link) '/settings'
.first() );
.prop('to')
).toBe('/settings');
}); });
it('renders the report button on another persons profile', () => { it('renders the report button on another persons profile', () => {
const profileToRender = <Profile {...notMyProfileProps} />; const { getByText } = render(<Profile {...notMyProfileProps} />);
const profile = shallow(profileToRender);
expect( expect(getByText('Report This User')).toHaveAttribute(
profile 'href',
.find(Link) '/user/string/report-user'
.first() );
.prop('to')
).toBe('/user/string/report-user');
}); });
it('renders correctly', () => { it('renders correctly', () => {
const tree = renderer.create(<Profile {...notMyProfileProps} />).toJSON(); const { container } = render(<Profile {...notMyProfileProps} />);
expect(tree).toMatchSnapshot();
expect(container).toMatchSnapshot();
}); });
}); });

View File

@ -1,47 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Profile/> renders correctly 1`] = ` exports[`<Profile/> renders correctly 1`] = `
Array [ <div>
<div <div
className="spacer" class="spacer"
style={ style="padding: 15px 0px; height: 1px;"
Object { />
"height": "1px",
"padding": "15px 0",
}
}
/>,
<div <div
className="container" class="container"
> >
<div <div
className="spacer" class="spacer"
style={ style="padding: 15px 0px; height: 1px;"
Object {
"height": "1px",
"padding": "15px 0",
}
}
/> />
<div> <div>
<div <div
className="row" class="row"
> >
<div <div
className="avatar-container col-xs-12" class="avatar-container col-xs-12"
> >
<img <img
alt="string's avatar" alt="string's avatar"
className="avatar img-responsive" class="avatar img-responsive"
src="string" src="string"
/> />
</div> </div>
</div> </div>
<div <div
className="row" class="row"
> >
<div <div
className="text-center social-media-icons col-sm-6 col-sm-offset-3" class="text-center social-media-icons col-sm-6 col-sm-offset-3"
> >
<a <a
aria-label="Link to string's LinkedIn" aria-label="Link to string's LinkedIn"
@ -51,19 +41,17 @@ Array [
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
className="svg-inline--fa fa-linkedin fa-w-14 fa-2x " class="svg-inline--fa fa-linkedin fa-w-14 fa-2x "
data-icon="linkedin" data-icon="linkedin"
data-prefix="fab" data-prefix="fab"
focusable="false" focusable="false"
role="img" role="img"
style={Object {}}
viewBox="0 0 448 512" viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
fill="currentColor" fill="currentColor"
style={Object {}}
/> />
</svg> </svg>
</a> </a>
@ -75,19 +63,17 @@ Array [
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
className="svg-inline--fa fa-github fa-w-16 fa-2x " class="svg-inline--fa fa-github fa-w-16 fa-2x "
data-icon="github" data-icon="github"
data-prefix="fab" data-prefix="fab"
focusable="false" focusable="false"
role="img" role="img"
style={Object {}}
viewBox="0 0 496 512" viewBox="0 0 496 512"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
fill="currentColor" fill="currentColor"
style={Object {}}
/> />
</svg> </svg>
</a> </a>
@ -99,19 +85,17 @@ Array [
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
className="svg-inline--fa fa-link fa-w-16 fa-2x " class="svg-inline--fa fa-link fa-w-16 fa-2x "
data-icon="link" data-icon="link"
data-prefix="fas" data-prefix="fas"
focusable="false" focusable="false"
role="img" role="img"
style={Object {}}
viewBox="0 0 512 512" viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
fill="currentColor" fill="currentColor"
style={Object {}}
/> />
</svg> </svg>
</a> </a>
@ -123,19 +107,17 @@ Array [
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
className="svg-inline--fa fa-twitter fa-w-16 fa-2x " class="svg-inline--fa fa-twitter fa-w-16 fa-2x "
data-icon="twitter" data-icon="twitter"
data-prefix="fab" data-prefix="fab"
focusable="false" focusable="false"
role="img" role="img"
style={Object {}}
viewBox="0 0 512 512" viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
fill="currentColor" fill="currentColor"
style={Object {}}
/> />
</svg> </svg>
</a> </a>
@ -143,7 +125,7 @@ Array [
</div> </div>
<br /> <br />
<h2 <h2
className="text-center username" class="text-center username"
> >
@ @
string string
@ -151,16 +133,11 @@ Array [
<br /> <br />
</div> </div>
<div <div
className="spacer" class="spacer"
style={ style="padding: 15px 0px; height: 1px;"
Object {
"height": "1px",
"padding": "15px 0",
}
}
/> />
<div <div
className="text-center row" class="text-center row"
> >
<a <a
href="/user/string/report-user" href="/user/string/report-user"
@ -169,14 +146,9 @@ Array [
</a> </a>
</div> </div>
<div <div
className="spacer" class="spacer"
style={ style="padding: 15px 0px; height: 1px;"
Object {
"height": "1px",
"padding": "15px 0",
}
}
/> />
</div>, </div>
] </div>
`; `;

View File

@ -1,49 +1,57 @@
/* global expect */ /* global expect */
import '@testing-library/jest-dom/extend-expect';
import React from 'react'; import React from 'react';
import Enzyme from 'enzyme'; import { render } from '@testing-library/react';
import Adapter from 'enzyme-adapter-react-16';
import { CertificationSettings } from './Certification'; import { CertificationSettings } from './Certification';
Enzyme.configure({ adapter: new Adapter() });
describe('<certification />', () => { describe('<certification />', () => {
// shallow rendering does not render children component // shallow rendering does not render children component
// form buttons are not included in shallow render // form buttons are not included in shallow render
it('Should render show cert button for calimed legacy cert', () => { it('Should render show cert button for calimed legacy cert', () => {
const wrapper = Enzyme.shallow( const { container } = render(
<CertificationSettings {...defaultTestProps} /> <CertificationSettings {...defaultTestProps} />
); );
expect( expect(
wrapper.find('#button-legacy-data-visualization').props().children container.querySelector('#button-legacy-data-visualization')
).toEqual('Show Certification'); ).toHaveTextContent('Show Certification');
}); });
it('Should link show cert button to the calimed legacy cert', () => { it('Should link show cert button to the calimed legacy cert', () => {
const wrapper = Enzyme.shallow( const { container } = render(
<CertificationSettings {...defaultTestProps} /> <CertificationSettings {...defaultTestProps} />
); );
expect( expect(
wrapper.find('#button-legacy-data-visualization').props().href container.querySelector('#button-legacy-data-visualization')
).toEqual('/certification/developementuser/legacy-data-visualization'); ).toHaveAttribute(
'href',
'/certification/developementuser/legacy-data-visualization'
);
}); });
// full forms with unclaimed certs should should not shallow render button // full forms with unclaimed certs should should not shallow render button
it('Should not render show cert button for unclaimed full form', () => { it('Should not render show cert button for unclaimed full form', () => {
const wrapper = Enzyme.shallow( const { container } = render(
<CertificationSettings {...defaultTestProps} /> <CertificationSettings {...defaultTestProps} />
); );
expect(wrapper.exists('#button-legacy-back-end')).toEqual(false);
expect(
container.querySelector('#button-legacy-back-end')
).not.toBeInTheDocument();
}); });
// empty forms with unclaimed certs should should not shallow render button // empty forms with unclaimed certs should should not shallow render button
it('Should not render show cert button for empty form', () => { it('Should not render show cert button for empty form', () => {
const wrapper = Enzyme.shallow( const { container } = render(
<CertificationSettings {...defaultTestProps} /> <CertificationSettings {...defaultTestProps} />
); );
expect(wrapper.exists('#button-legacy-front-end')).toEqual(false);
expect(
container.querySelector('#button-legacy-front-end')
).not.toBeInTheDocument();
}); });
}); });

41
package-lock.json generated
View File

@ -5313,7 +5313,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -5334,12 +5335,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -5354,17 +5357,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -5481,7 +5487,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -5493,6 +5500,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -5507,6 +5515,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -5514,12 +5523,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -5538,6 +5549,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -5618,7 +5630,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -5630,6 +5643,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -5715,7 +5729,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -5751,6 +5766,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -5770,6 +5786,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -5813,12 +5830,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },