From f8705ef4ef077dedbe63944d461ccec0ea51af74 Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Fri, 17 Jan 2020 11:28:06 +0000 Subject: [PATCH 1/9] Update dependencies to latest version (#101) --- package.json | 4 +- yarn.lock | 353 ++++++++++++++++++++++++++------------------------- 2 files changed, 179 insertions(+), 178 deletions(-) diff --git a/package.json b/package.json index 1ec51338..abc25100 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "private": true, "proxy": "http://localhost:8000/", "dependencies": { - "@material-ui/core": "^3.9.3", - "@material-ui/icons": "^3.0.2", + "@material-ui/core": "^4.8.3", + "@material-ui/icons": "^4.5.1", "axios": "^0.19.0", "connected-react-router": "^6.5.2", "custom-event-polyfill": "^1.0.7", diff --git a/yarn.lock b/yarn.lock index 4f3b2138..4065fa43 100644 --- a/yarn.lock +++ b/yarn.lock @@ -933,13 +933,20 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4": version "7.7.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f" integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw== dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.6.2": + version "7.8.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1" + integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@^7.4.0", "@babel/template@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" @@ -1050,6 +1057,11 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f" integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw== +"@emotion/hash@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831" + integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A== + "@emotion/is-prop-valid@0.8.5": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983" @@ -1296,65 +1308,79 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^13.0.0" -"@material-ui/core@^3.9.3": - version "3.9.4" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.4.tgz#5297fd4ad9e739a87da4a6d34fc4af5396886e13" - integrity sha512-r8QFLSexcYZbnqy/Hn4v8xzmAJV41yaodUVjmbGLi1iGDLG3+W941hEtEiBmxTRRqv2BdK3r4ijILcqKmDv/Sw== - dependencies: - "@babel/runtime" "^7.2.0" - "@material-ui/system" "^3.0.0-alpha.0" - "@material-ui/utils" "^3.0.0-alpha.2" - "@types/jss" "^9.5.6" - "@types/react-transition-group" "^2.0.8" - brcast "^3.0.1" - classnames "^2.2.5" - csstype "^2.5.2" - debounce "^1.1.0" - deepmerge "^3.0.0" - dom-helpers "^3.2.1" +"@material-ui/core@^4.8.3": + version "4.8.3" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.8.3.tgz#858f758b26d8417eb39310f07fb9d7a72beb8b03" + integrity sha512-ZJbfJQmkuZCSQTf0nzpfZwizmDdCq8ruZxnPNFnhoKDqgJpMvV8TJRi8vdI9ls1tMuTqxlhyhw8556fxOpWpFQ== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles" "^4.8.2" + "@material-ui/system" "^4.7.1" + "@material-ui/types" "^4.1.1" + "@material-ui/utils" "^4.7.1" + "@types/react-transition-group" "^4.2.0" + clsx "^1.0.2" + convert-css-length "^2.0.1" hoist-non-react-statics "^3.2.1" - is-plain-object "^2.0.4" - jss "^9.8.7" - jss-camel-case "^6.0.0" - jss-default-unit "^8.0.2" - jss-global "^3.0.0" - jss-nested "^6.0.1" - jss-props-sort "^6.0.0" - jss-vendor-prefixer "^7.0.0" - normalize-scroll-left "^0.1.2" + normalize-scroll-left "^0.2.0" popper.js "^1.14.1" - prop-types "^15.6.0" - react-event-listener "^0.6.2" - react-transition-group "^2.2.1" - recompose "0.28.0 - 0.30.0" - warning "^4.0.1" + prop-types "^15.7.2" + react-is "^16.8.0" + react-transition-group "^4.3.0" -"@material-ui/icons@^3.0.2": - version "3.0.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-3.0.2.tgz#d67a6dd1ec8312d3a88ec97944a63daeef24fe10" - integrity sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g== +"@material-ui/icons@^4.5.1": + version "4.5.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz#6963bad139e938702ece85ca43067688018f04f8" + integrity sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA== dependencies: - "@babel/runtime" "^7.2.0" - recompose "0.28.0 - 0.30.0" + "@babel/runtime" "^7.4.4" + +"@material-ui/styles@^4.8.2": + version "4.8.2" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.8.2.tgz#841acbc4314accbe82a45cb1feb758d47448c802" + integrity sha512-r5U+93pkpwQOmHTmwyn2sqTio6PHd873xvSHiKP6fdybAXXX6CZgVvh3W8saZNbYr/QXsS8OHmFv7sYJLt5Yfg== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/hash" "^0.7.4" + "@material-ui/types" "^4.1.1" + "@material-ui/utils" "^4.7.1" + clsx "^1.0.2" + csstype "^2.5.2" + hoist-non-react-statics "^3.2.1" + jss "^10.0.0" + jss-plugin-camel-case "^10.0.0" + jss-plugin-default-unit "^10.0.0" + jss-plugin-global "^10.0.0" + jss-plugin-nested "^10.0.0" + jss-plugin-props-sort "^10.0.0" + jss-plugin-rule-value-function "^10.0.0" + jss-plugin-vendor-prefixer "^10.0.0" + prop-types "^15.7.2" -"@material-ui/system@^3.0.0-alpha.0": - version "3.0.0-alpha.2" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46" - integrity sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA== +"@material-ui/system@^4.7.1": + version "4.7.1" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d" + integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ== dependencies: - "@babel/runtime" "^7.2.0" - deepmerge "^3.0.0" - prop-types "^15.6.0" - warning "^4.0.1" + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.7.1" + prop-types "^15.7.2" + +"@material-ui/types@^4.1.1": + version "4.1.1" + resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b" + integrity sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ== + dependencies: + "@types/react" "*" -"@material-ui/utils@^3.0.0-alpha.2": - version "3.0.0-alpha.3" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz#836c62ea46f5ffc6f0b5ea05ab814704a86908b1" - integrity sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng== +"@material-ui/utils@^4.7.1": + version "4.7.1" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652" + integrity sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ== dependencies: - "@babel/runtime" "^7.2.0" - prop-types "^15.6.0" - react-is "^16.6.3" + "@babel/runtime" "^7.4.4" + prop-types "^15.7.2" + react-is "^16.8.0" "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" @@ -2013,14 +2039,6 @@ dependencies: "@types/node" "*" -"@types/jss@^9.5.6": - version "9.5.8" - resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.8.tgz#258391f42211c042fc965508d505cbdc579baa5b" - integrity sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA== - dependencies: - csstype "^2.0.0" - indefinite-observable "^1.0.1" - "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -2122,10 +2140,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^2.0.8": - version "2.9.2" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d" - integrity sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA== +"@types/react-transition-group@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470" + integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA== dependencies: "@types/react" "*" @@ -3490,11 +3508,6 @@ braces@^3.0.1: dependencies: fill-range "^7.0.1" -brcast@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd" - integrity sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg== - brorand@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" @@ -3821,11 +3834,6 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -change-emitter@^0.1.2: - version "0.1.6" - resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" - integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU= - character-entities-legacy@^1.0.0: version "1.1.3" resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4" @@ -4047,6 +4055,11 @@ clone-deep@^2.0.1: kind-of "^6.0.0" shallow-clone "^1.0.0" +clsx@^1.0.2: + version "1.0.4" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec" + integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -4298,6 +4311,11 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== +convert-css-length@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c" + integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg== + convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" @@ -4609,11 +4627,12 @@ css-unit-converter@^1.1.1: resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996" integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY= -css-vendor@^0.3.8: - version "0.3.8" - resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" - integrity sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo= +css-vendor@^2.0.7: + version "2.0.7" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda" + integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg== dependencies: + "@babel/runtime" "^7.6.2" is-in-browser "^1.0.2" css-what@2.1: @@ -4728,7 +4747,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1: dependencies: cssom "0.3.x" -csstype@^2.0.0, csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7: +csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.5, csstype@^2.6.7: version "2.6.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431" integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA== @@ -4807,11 +4826,6 @@ date-fns@^1.27.2, date-fns@^1.30.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== -debounce@^1.1.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" - integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg== - debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -4899,11 +4913,6 @@ deep-object-diff@^1.1.0: resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a" integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw== -deepmerge@^3.0.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7" - integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA== - deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" @@ -5127,12 +5136,13 @@ dom-converter@^0.2: dependencies: utila "~0.4" -dom-helpers@^3.2.1, dom-helpers@^3.4.0: - version "3.4.0" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" - integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== +dom-helpers@^5.0.1: + version "5.1.3" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821" + integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.6.3" + csstype "^2.6.7" dom-serializer@0: version "0.2.2" @@ -6202,7 +6212,7 @@ fbjs@^0.6.1: ua-parser-js "^0.7.9" whatwg-fetch "^0.9.0" -fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4: +fbjs@^0.8.0, fbjs@^0.8.4: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -7009,11 +7019,6 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.3.1: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== - hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: version "3.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f" @@ -7224,7 +7229,7 @@ husky@^3.0.2: run-node "^1.0.0" slash "^3.0.0" -hyphenate-style-name@^1.0.2: +hyphenate-style-name@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== @@ -7338,13 +7343,6 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= -indefinite-observable@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-1.0.2.tgz#0a328793ab2385d4b9dca23eaab4afe6936a73f8" - integrity sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA== - dependencies: - symbol-observable "1.2.0" - indent-string@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80" @@ -8590,50 +8588,74 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" -jss-camel-case@^6.0.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44" - integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ== +jss-plugin-camel-case@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.3.tgz#ce25f3cdb7f2b80724558361351fe6b644ca9e4f" + integrity sha512-rild/oFKFkmRP7AoiX9D6bdDAUfmJv8c7sEBvFoi+JP31dn2W8nw4txMKGnV1LJKlFkYprdZt1X99Uvztl1hug== dependencies: - hyphenate-style-name "^1.0.2" + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "^10.0.3" -jss-default-unit@^8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6" - integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg== +jss-plugin-default-unit@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.3.tgz#c4b97b7b18c6cf9e9809e05b8525045decc298d3" + integrity sha512-n+XfVLPF9Qh7IOTdQ8M4oRpjpg6egjr/r0NNytubbCafMgCILJYIVrMTGgOTydH+uvak8onQY3f/F9hasPUx6g== + dependencies: + "@babel/runtime" "^7.3.1" + jss "^10.0.3" -jss-global@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2" - integrity sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q== +jss-plugin-global@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.3.tgz#82bc95aa7f2c7171adc3ea47ec7717aca76a2389" + integrity sha512-kNotkAciJIXpIGYnmueaIifBne9rdq31O8Xq1nF7KMfKlskNRANTcEX5rVnsGKl2yubTMYfjKBFCeDgcQn6+gA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "^10.0.3" -jss-nested@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca" - integrity sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA== +jss-plugin-nested@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.3.tgz#1ff39383154a710008788dbc9f73e6dec77b2852" + integrity sha512-OMucRs9YLvWlZ3Ew+VhdgNVMwSS2zZy/2vy+s/etvopnPUzDHgCnJwdY2Wx/SlhLGERJeKKufyih2seH+ui0iw== dependencies: - warning "^3.0.0" + "@babel/runtime" "^7.3.1" + jss "^10.0.3" + tiny-warning "^1.0.2" -jss-props-sort@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323" - integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g== +jss-plugin-props-sort@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.3.tgz#8bc9f2a670fbd603f110486d28c526eb9efcbdc4" + integrity sha512-ufhvdCMnRcDa0tNHoZ12OcVNQQyE10yLMohxo/UIMarLV245rM6n9D19A12epjldRgyiS13SoSyLFCJEobprYg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "^10.0.3" -jss-vendor-prefixer@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71" - integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA== +jss-plugin-rule-value-function@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.3.tgz#1103240cf686bde5baee16cd7b15b0daf79d1103" + integrity sha512-RWwIT2UBAIwf3f6DQtt5gyjxHMRJoeO9TQku+ueR8dBMakqSSe8vFwQNfjXEoe0W+Tez5HZCTkZKNMulv3Z+9A== + dependencies: + "@babel/runtime" "^7.3.1" + jss "^10.0.3" + +jss-plugin-vendor-prefixer@^10.0.0: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.3.tgz#cfdf2ac1263e190ee9a0d874cdcc6092df452012" + integrity sha512-zVs6e5z4tFRK/fJ5kuTLzXlTFQbLeFTVwk7lTZiYNufmZwKT0kSmnOJDUukcSe7JLGSRztjWhnHB/6voP174gw== dependencies: - css-vendor "^0.3.8" + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.7" + jss "^10.0.3" -jss@^9.8.7: - version "9.8.7" - resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05" - integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ== +jss@^10.0.0, jss@^10.0.3: + version "10.0.3" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.3.tgz#5c160f96aa8ce8b9f851ee0b33505dcd37f490a4" + integrity sha512-AcDvFdOk16If9qvC9KN3oFXsrkHWM9+TaPMpVB9orm3z+nq1Xw3ofHyflRe/mkSucRZnaQtlhZs1hdP3DR9uRw== dependencies: + "@babel/runtime" "^7.3.1" + csstype "^2.6.5" is-in-browser "^1.1.3" - symbol-observable "^1.1.0" - warning "^3.0.0" + tiny-warning "^1.0.2" jstransform@^11.0.3: version "11.0.3" @@ -9747,10 +9769,10 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= -normalize-scroll-left@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz#6b79691ba79eb5fb107fa5edfbdc06b55caee2aa" - integrity sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg== +normalize-scroll-left@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz#9445d74275f303cc661e113329aefa492f58114c" + integrity sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA== normalize-url@1.9.1: version "1.9.1" @@ -11628,15 +11650,6 @@ react-error-overlay@^6.0.3: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a" integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA== -react-event-listener@^0.6.2: - version "0.6.6" - resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a" - integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw== - dependencies: - "@babel/runtime" "^7.2.0" - prop-types "^15.6.0" - warning "^4.0.1" - react-fast-compare@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" @@ -11696,7 +11709,7 @@ react-inspector@^3.0.2: is-dom "^1.0.9" prop-types "^15.6.1" -react-is@^16.10.2, react-is@^16.12.0, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: +react-is@^16.10.2, react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== @@ -11717,7 +11730,7 @@ react-joyride@^2.1.1: scrollparent "^2.0.1" tree-changes "^0.5.1" -react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -11896,15 +11909,15 @@ react-textarea-autosize@^7.1.0: "@babel/runtime" "^7.1.2" prop-types "^15.6.0" -react-transition-group@^2.2.1: - version "2.9.0" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" - integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== +react-transition-group@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683" + integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw== dependencies: - dom-helpers "^3.4.0" + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" loose-envify "^1.4.0" prop-types "^15.6.2" - react-lifecycles-compat "^3.0.4" react@^0.14.0: version "0.14.9" @@ -12051,18 +12064,6 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" -"recompose@0.28.0 - 0.30.0": - version "0.30.0" - resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0" - integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w== - dependencies: - "@babel/runtime" "^7.0.0" - change-emitter "^0.1.2" - fbjs "^0.8.1" - hoist-non-react-statics "^2.3.1" - react-lifecycles-compat "^3.0.2" - symbol-observable "^1.0.4" - recursive-readdir@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" @@ -13486,7 +13487,7 @@ symbol-observable@1.0.1: resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4" integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ= -symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0: +symbol-observable@^1.0.3, symbol-observable@^1.1.0, symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== @@ -14153,7 +14154,7 @@ warning@^3.0.0: dependencies: loose-envify "^1.0.0" -warning@^4.0.1, warning@^4.0.2, warning@^4.0.3: +warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== From d94af74440456c6099f6bec7ce70439a0b8d4ac8 Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Fri, 17 Jan 2020 12:03:16 +0000 Subject: [PATCH 2/9] Migrate to material-ui v4 (except ButtonBase component prop issue) (#101) --- src/cookieConsent/cookieConsent.component.tsx | 4 ++- src/cookieConsent/cookiesPage.component.tsx | 21 +++++++++----- src/homePage/homePage.component.tsx | 4 ++- src/loginPage/loginPage.component.tsx | 29 ++++++++++++------- src/mainAppBar/mainAppBar.component.tsx | 3 +- src/mainAppBar/userProfile.component.tsx | 5 ++-- .../navigationDrawer.component.tsx | 5 ++-- src/theming.tsx | 4 +-- src/tour/tour.component.tsx | 7 ++--- 9 files changed, 48 insertions(+), 34 deletions(-) diff --git a/src/cookieConsent/cookieConsent.component.tsx b/src/cookieConsent/cookieConsent.component.tsx index cee572f2..156b40fb 100644 --- a/src/cookieConsent/cookieConsent.component.tsx +++ b/src/cookieConsent/cookieConsent.component.tsx @@ -28,7 +28,9 @@ const styles = (theme: Theme): StyleRules => }, button: { color: theme.palette.primary.contrastText, - margin: theme.spacing.unit, + + // material-ui v4 upgrade + margin: theme.spacing(1), }, }); diff --git a/src/cookieConsent/cookiesPage.component.tsx b/src/cookieConsent/cookiesPage.component.tsx index 06889913..9e91503f 100644 --- a/src/cookieConsent/cookiesPage.component.tsx +++ b/src/cookieConsent/cookiesPage.component.tsx @@ -21,31 +21,36 @@ import { push } from 'connected-react-router'; const styles = (theme: Theme): StyleRules => createStyles({ root: { - margin: 2 * theme.spacing.unit, + // material-ui v4 upgrade + margin: theme.spacing(2), }, container: { display: 'flex', flexDirection: 'column', - marginTop: 2 * theme.spacing.unit, - marginBottom: 2 * theme.spacing.unit, + // material-ui v4 upgrade + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), }, titleText: { fontWeight: 'bold', color: theme.palette.primary.main, }, cookiePolicy: { - marginTop: 2 * theme.spacing.unit, - marginBottom: 2 * theme.spacing.unit, + // material-ui v4 upgrade + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), }, cookieTypes: { - marginTop: 2 * theme.spacing.unit, - marginBottom: 2 * theme.spacing.unit, + // material-ui v4 upgrade + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), }, button: { color: theme.palette.primary.contrastText, }, cookieList: { - paddingLeft: 2 * theme.spacing.unit, + // material-ui v4 upgrade + paddingLeft: theme.spacing(2), }, cookieListItem: { display: 'list-item', diff --git a/src/homePage/homePage.component.tsx b/src/homePage/homePage.component.tsx index 65937a2b..4c2ad3b6 100644 --- a/src/homePage/homePage.component.tsx +++ b/src/homePage/homePage.component.tsx @@ -94,7 +94,9 @@ const HomePage = (props: CombinedHomePageProps): React.ReactElement => ( {getString(props.res, 'how-label')} - + + {/* // material-ui v4 upgrade */} + flexDirection: 'column', alignItems: 'center', width: 'auto', - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), }, avatar: { - margin: theme.spacing.unit, + // material-ui v4 upgrade + margin: theme.spacing(1), backgroundColor: (theme as UKRITheme).ukri.orange, }, paper: { - marginTop: theme.spacing.unit * 8, + marginTop: theme.spacing(8), display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px ${theme - .spacing.unit * 3}px`, - [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: { + // material-ui v4 upgrade + padding: `${theme.spacing(3)}px ${theme.spacing(3)}px ${theme.spacing( + 3 + )}px`, + [theme.breakpoints.up(400 + theme.spacing(6))]: { width: 400, marginLeft: 'auto', marginRight: 'auto', }, }, textField: { - marginTop: theme.spacing.unit, + // material-ui v4 upgrade + marginTop: theme.spacing(1), }, button: { - marginTop: `${theme.spacing.unit * 3}px`, + // material-ui v4 upgrade + marginTop: `${theme.spacing(1)}px`, }, warning: { - marginTop: `${theme.spacing.unit * 3}px`, + // material-ui v4 upgrade + marginTop: `${theme.spacing(1)}px`, color: 'red', }, info: { - marginTop: `${theme.spacing.unit * 3}px`, + // material-ui v4 upgrade + marginTop: `${theme.spacing(1)}px`, color: theme.palette.primary.main, }, spinner: { diff --git a/src/mainAppBar/mainAppBar.component.tsx b/src/mainAppBar/mainAppBar.component.tsx index 45f1fc68..c59af190 100644 --- a/src/mainAppBar/mainAppBar.component.tsx +++ b/src/mainAppBar/mainAppBar.component.tsx @@ -69,7 +69,8 @@ const styles = (theme: Theme): StyleRules => cursor: 'pointer', }, button: { - margin: theme.spacing.unit, + // material-ui v4 upgrade + margin: theme.spacing(1), color: theme.palette.primary.contrastText, }, menuButton: { diff --git a/src/mainAppBar/userProfile.component.tsx b/src/mainAppBar/userProfile.component.tsx index 7393e79e..48c8ec64 100644 --- a/src/mainAppBar/userProfile.component.tsx +++ b/src/mainAppBar/userProfile.component.tsx @@ -42,7 +42,7 @@ interface UserProfileDispatchProps { const styles = (theme: Theme): StyleRules => createStyles({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), color: theme.palette.primary.contrastText, }, usernameContainer: { @@ -56,7 +56,8 @@ const styles = (theme: Theme): StyleRules => fontWeight: 'bold', }, avatar: { - margin: theme.spacing.unit, + // material-ui v4 upgrade + margin: theme.spacing(1), cursor: 'pointer', }, }); diff --git a/src/navigationDrawer/navigationDrawer.component.tsx b/src/navigationDrawer/navigationDrawer.component.tsx index 8832adae..bb1bfec4 100644 --- a/src/navigationDrawer/navigationDrawer.component.tsx +++ b/src/navigationDrawer/navigationDrawer.component.tsx @@ -12,7 +12,7 @@ import { } from '@material-ui/core/styles'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; +// import { Link } from 'react-router-dom'; import { Dispatch, Action } from 'redux'; import { toggleDrawer } from '../state/actions/scigateway.actions'; import { PluginConfig } from '../state/scigateway.types'; @@ -62,11 +62,12 @@ interface LinkListItemProps extends ListItemProps { to: string; } +// TODO: material-ui v4 upgrade - https://material-ui.com/guides/composition/ const LinkListItem = (props: LinkListItemProps): React.ReactElement => ( // an `any` is required here to pass the additional properties through to the // ListItem as per the material-ui documentation /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - + ); class NavigationDrawer extends Component { diff --git a/src/theming.tsx b/src/theming.tsx index b0a68e1e..16a2e693 100644 --- a/src/theming.tsx +++ b/src/theming.tsx @@ -26,9 +26,7 @@ export interface UKRITheme extends Theme { export const buildTheme = (): Theme => { const options: UKRIThemeOptions = { - typography: { - useNextVariants: true, - }, + // material-ui v4 upgrade - removed typography object for useNextVariants palette: { primary: { main: '#1D4F91', // dark blue diff --git a/src/tour/tour.component.tsx b/src/tour/tour.component.tsx index 65706a40..7ea65a9d 100644 --- a/src/tour/tour.component.tsx +++ b/src/tour/tour.component.tsx @@ -133,9 +133,6 @@ const mapDispatchToProps = (dispatch: Dispatch): TourDispatchProps => ({ toggleDrawer: () => dispatch(toggleDrawer()), }); -export const TourWithStyles = withTheme()(Tour); +export const TourWithStyles = withTheme(Tour); -export default connect( - mapStateToProps, - mapDispatchToProps -)(TourWithStyles); +export default connect(mapStateToProps, mapDispatchToProps)(TourWithStyles); From 151e7402e39e3873ebc2cc338b9c9c45f684d141 Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Fri, 17 Jan 2020 12:10:02 +0000 Subject: [PATCH 3/9] Fix ButtonBase component prop issue for ListItem (#101) --- src/navigationDrawer/navigationDrawer.component.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/navigationDrawer/navigationDrawer.component.tsx b/src/navigationDrawer/navigationDrawer.component.tsx index bb1bfec4..a387273a 100644 --- a/src/navigationDrawer/navigationDrawer.component.tsx +++ b/src/navigationDrawer/navigationDrawer.component.tsx @@ -12,7 +12,7 @@ import { } from '@material-ui/core/styles'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { connect } from 'react-redux'; -// import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { Dispatch, Action } from 'redux'; import { toggleDrawer } from '../state/actions/scigateway.actions'; import { PluginConfig } from '../state/scigateway.types'; @@ -62,12 +62,13 @@ interface LinkListItemProps extends ListItemProps { to: string; } -// TODO: material-ui v4 upgrade - https://material-ui.com/guides/composition/ +// material-ui v4 upgrade - https://material-ui.com/guides/composition/ const LinkListItem = (props: LinkListItemProps): React.ReactElement => ( // an `any` is required here to pass the additional properties through to the // ListItem as per the material-ui documentation /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - + // + } /> ); class NavigationDrawer extends Component { From 665b405d5167f0b3be86e414ea605415576338e4 Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Mon, 20 Jan 2020 17:34:47 +0000 Subject: [PATCH 4/9] Update unit tests to stop using theme on shallow rendering (#49) --- .../cookieConsent.component.test.tsx.snap | 18 +- .../cookiesPage.component.test.tsx.snap | 86 +- .../cookieConsent.component.test.tsx | 52 +- src/cookieConsent/cookieConsent.component.tsx | 3 +- .../cookiesPage.component.test.tsx | 2 +- .../homePage.component.test.tsx.snap | 94 +- src/homePage/homePage.component.test.tsx | 38 +- src/homePage/homePage.component.tsx | 3 +- .../loginPage.component.test.tsx.snap | 94 +- src/loginPage/loginPage.component.test.tsx | 23 +- src/loginPage/loginPage.component.tsx | 1 + .../mainAppBar.component.test.tsx.snap | 88 +- .../userProfile.component.test.tsx.snap | 68 +- src/mainAppBar/mainAppBar.component.test.tsx | 2 +- .../navigationDrawer.component.test.tsx.snap | 78 +- .../notificationBadge.component.test.tsx.snap | 31 +- ...atewayNotification.component.test.tsx.snap | 63 +- .../notificationBadge.component.test.tsx | 119 +- .../notificationBadge.component.tsx | 8 +- .../scigatewayNotification.component.test.tsx | 21 +- .../scigatewayNotification.component.tsx | 57 +- .../pageNotFound.component.test.tsx.snap | 14 +- .../routing.component.test.tsx.snap | 2690 ++++++++++++----- src/state/actions/loadMicroFrontends.tsx | 8 +- src/state/reducers/scigateway.reducer.tsx | 4 +- .../tour.component.test.tsx.snap | 289 +- src/tour/tour.component.test.tsx | 25 +- src/tour/tour.component.tsx | 4 +- 28 files changed, 2779 insertions(+), 1204 deletions(-) diff --git a/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap b/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap index 36adae28..7046691b 100644 --- a/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap +++ b/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap @@ -1,31 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Cookie consent component should render correctly 1`] = ` - manage-preferences-button - , - , + accept-button - , + , ] } anchorOrigin={ diff --git a/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap b/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap index 0919ab5e..21ace5cc 100644 --- a/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap +++ b/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap @@ -4,21 +4,21 @@ exports[`Cookies page component should render correctly 1`] = `
- title - +
- cookie-policy-title - - + - cookie-management-title - - + - - - - - + - essential-cookies-title - - - + + - essential-cookies-description - +
    - cookie-consent-description - - + scigateway-token-description - +
- - - + + - - - - + - analytics-cookies-title - - - + + - analytics-cookies-description - +
    - google-analytics-description - +
- - - + + +
- save-preferences-button - +
`; diff --git a/src/cookieConsent/cookieConsent.component.test.tsx b/src/cookieConsent/cookieConsent.component.test.tsx index a5f08314..5b0f37f5 100644 --- a/src/cookieConsent/cookieConsent.component.test.tsx +++ b/src/cookieConsent/cookieConsent.component.test.tsx @@ -1,5 +1,9 @@ import React from 'react'; -import CookieConsent from './cookieConsent.component'; + +import CookieConsent, { + CookieConsentWithoutStyles, + CombinedCookieConsentProps, +} from './cookieConsent.component'; import { createShallow, createMount } from '@material-ui/core/test-utils'; import { StateType } from '../state/state.types'; import configureStore from 'redux-mock-store'; @@ -7,7 +11,7 @@ import { initialState } from '../state/reducers/scigateway.reducer'; import { initialiseAnalytics } from '../state/actions/scigateway.actions'; import { Provider } from 'react-redux'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import Cookies from 'js-cookie'; import ReactGA from 'react-ga'; import { createLocation } from 'history'; @@ -18,9 +22,10 @@ describe('Cookie consent component', () => { let mount; let mockStore; let state: StateType; + let props: CombinedCookieConsentProps; beforeEach(() => { - shallow = createShallow({ untilSelector: 'CookieConsent' }); + shallow = createShallow({}); mount = createMount(); mockStore = configureStore(); @@ -35,6 +40,19 @@ describe('Cookie consent component', () => { id: 'test id', initialised: false, }; + + props = { + analytics: state.scigateway.analytics, + res: undefined, + location: state.router.location, + loading: state.scigateway.siteLoading, + initialiseAnalytics: jest.fn(), + navigateToCookies: jest.fn(), + classes: { + root: 'root-class', + button: 'button-class', + }, + }; }); afterEach(() => { @@ -44,11 +62,7 @@ describe('Cookie consent component', () => { const theme = buildTheme(); it('should render correctly', () => { - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -142,35 +156,23 @@ describe('Cookie consent component', () => { name === 'cookie-consent' ? { analytics: true } : null ); - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper.prop('open')).toBeFalsy(); }); it('should set open to false if site is loading', () => { - state.scigateway.siteLoading = false; + props.loading = false; - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper.prop('open')).toBeFalsy(); }); it('should set open to false if on /cookies page', () => { - state.router.location = createLocation('/cookies'); + props.location = createLocation('/cookies'); - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper.prop('open')).toBeFalsy(); }); diff --git a/src/cookieConsent/cookieConsent.component.tsx b/src/cookieConsent/cookieConsent.component.tsx index 156b40fb..de7ee409 100644 --- a/src/cookieConsent/cookieConsent.component.tsx +++ b/src/cookieConsent/cookieConsent.component.tsx @@ -46,7 +46,7 @@ interface CookieConsentDispatchProps { navigateToCookies: () => Action; } -type CombinedCookieConsentProps = CookieConsentStateProps & +export type CombinedCookieConsentProps = CookieConsentStateProps & CookieConsentDispatchProps & WithStyles; @@ -151,6 +151,7 @@ const mapDispatchToProps = ( navigateToCookies: () => dispatch(push('/cookies')), }); +export const CookieConsentWithoutStyles = CookieConsent; export const CookieConsentWithStyles = withStyles(styles)(CookieConsent); export default connect( diff --git a/src/cookieConsent/cookiesPage.component.test.tsx b/src/cookieConsent/cookiesPage.component.test.tsx index 800d0fd0..16862280 100644 --- a/src/cookieConsent/cookiesPage.component.test.tsx +++ b/src/cookieConsent/cookiesPage.component.test.tsx @@ -5,7 +5,7 @@ import { StateType } from '../state/state.types'; import configureStore from 'redux-mock-store'; import { initialState } from '../state/reducers/scigateway.reducer'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import Cookies from 'js-cookie'; import { createLocation } from 'history'; import { push } from 'connected-react-router'; diff --git a/src/homePage/__snapshots__/homePage.component.test.tsx.snap b/src/homePage/__snapshots__/homePage.component.test.tsx.snap index 70a7e288..bdd95713 100644 --- a/src/homePage/__snapshots__/homePage.component.test.tsx.snap +++ b/src/homePage/__snapshots__/homePage.component.test.tsx.snap @@ -3,113 +3,113 @@ exports[`Home page component homepage renders correctly 1`] = `
- title - +
- how-label - - + - - explore-label - + - explore-description - - - + + - analyse-label - + - analyse-description - - - + + - record-label - + - record-description - - - - + + + banner-one - - + banner-two - +
`; diff --git a/src/homePage/homePage.component.test.tsx b/src/homePage/homePage.component.test.tsx index 50b7d106..50b1f531 100644 --- a/src/homePage/homePage.component.test.tsx +++ b/src/homePage/homePage.component.test.tsx @@ -1,38 +1,42 @@ import React from 'react'; import { createMount, createShallow } from '@material-ui/core/test-utils'; -import HomePage from './homePage.component'; -import { MuiThemeProvider } from '@material-ui/core'; -import { buildTheme } from '../theming'; -import { StateType } from '../state/state.types'; -import configureStore from 'redux-mock-store'; -import { initialState } from '../state/reducers/scigateway.reducer'; +import { + HomePageWithoutStyles, + CombinedHomePageProps, +} from './homePage.component'; describe('Home page component', () => { let shallow; let mount; - let mockStore; - let state: StateType; + let props: CombinedHomePageProps; beforeEach(() => { shallow = createShallow({ untilSelector: 'div' }); mount = createMount(); - mockStore = configureStore(); - state = JSON.parse(JSON.stringify({ scigateway: initialState })); + props = { + res: undefined, + classes: { + bigImage: 'bigImage-class', + title: 'title-class', + howItWorks: 'howItWorks-class', + howItWorksTitle: 'howItWorksTitle-class', + howItWorksGridItem: 'howItWorksGridItem-class', + howItWorksGridItemTitle: 'howItWorksGridItemTitle-class', + howItWorksGridItemImage: 'howItWorksGridItemImage-class', + howItWorksGridItemCaption: 'howItWorksGridItemCaption-class', + strapline: 'strapline-class', + purpose: 'purpose-class', + }, + }; }); afterEach(() => { mount.cleanUp(); }); - const theme = buildTheme(); - it('homepage renders correctly', () => { - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/src/homePage/homePage.component.tsx b/src/homePage/homePage.component.tsx index 4c2ad3b6..3f60fc88 100644 --- a/src/homePage/homePage.component.tsx +++ b/src/homePage/homePage.component.tsx @@ -81,7 +81,7 @@ interface HomePageProps { res: AppStrings | undefined; } -type CombinedHomePageProps = HomePageProps & WithStyles; +export type CombinedHomePageProps = HomePageProps & WithStyles; const HomePage = (props: CombinedHomePageProps): React.ReactElement => (
@@ -169,6 +169,7 @@ const mapStateToProps = (state: StateType): HomePageProps => ({ res: getAppStrings(state, 'home-page'), }); +export const HomePageWithoutStyles = HomePage; export const HomePageWithStyles = withStyles(styles)(HomePage); export default connect(mapStateToProps)(HomePageWithStyles); diff --git a/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap b/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap index dda3deae..f990bfce 100644 --- a/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap +++ b/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap @@ -5,32 +5,26 @@ exports[`Login page component credential component renders correctly 1`] = ` className="root-1" onKeyPress={[Function]} > - - - - login-button - - + +
`; exports[`Login page component login page renders credential component if no redirect url 1`] = `
- - - - - + + title - + - +
`; exports[`Login page component login page renders redirect component if redirect url present 1`] = `
- - - - - + + title - + - +
`; @@ -163,13 +149,13 @@ exports[`Login page component redirect component renders correctly 1`] = `
- - Login with Github - - + +
`; diff --git a/src/loginPage/loginPage.component.test.tsx b/src/loginPage/loginPage.component.test.tsx index 7e19d4fa..924cab9e 100644 --- a/src/loginPage/loginPage.component.test.tsx +++ b/src/loginPage/loginPage.component.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { + LoginPageWithoutStyles, LoginPageWithStyles, CredentialsLoginScreen, RedirectLoginScreen, @@ -7,7 +8,7 @@ import { } from './loginPage.component'; import { createShallow, createMount } from '@material-ui/core/test-utils'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import TestAuthProvider from '../authentication/testAuthProvider'; import { createLocation } from 'history'; @@ -18,6 +19,9 @@ describe('Login page component', () => { const dummyClasses = { root: 'root-1', + paper: 'paper-class', + avatar: 'avatar-class', + spinner: 'spinner-class', }; beforeEach(() => { @@ -26,9 +30,10 @@ describe('Login page component', () => { props = { auth: { - loading: false, failedToLogin: false, - signedOutDueToTokenExpiry: false, + // signedOutDueToTokenExpiry: false, + signedOutDueToTokenInvalidation: false, + loading: false, provider: new TestAuthProvider(null), }, location: createLocation('/'), @@ -59,21 +64,13 @@ describe('Login page component', () => { }); it('login page renders credential component if no redirect url', () => { - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('login page renders redirect component if redirect url present', () => { props.auth.provider.redirectUrl = 'test redirect'; - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/loginPage/loginPage.component.tsx b/src/loginPage/loginPage.component.tsx index 21a4ed01..c2162f6a 100644 --- a/src/loginPage/loginPage.component.tsx +++ b/src/loginPage/loginPage.component.tsx @@ -232,6 +232,7 @@ const mapDispatchToProps = ( dispatch(verifyUsernameAndPassword(username, password)), }); +export const LoginPageWithoutStyles = LoginPageComponent; export const LoginPageWithStyles = withStyles(styles)(LoginPageComponent); export default connect( diff --git a/src/mainAppBar/__snapshots__/mainAppBar.component.test.tsx.snap b/src/mainAppBar/__snapshots__/mainAppBar.component.test.tsx.snap index ee19dd8b..2d9d4365 100644 --- a/src/mainAppBar/__snapshots__/mainAppBar.component.test.tsx.snap +++ b/src/mainAppBar/__snapshots__/mainAppBar.component.test.tsx.snap @@ -4,20 +4,20 @@ exports[`Main app bar component app bar indented when drawer is open 1`] = `
- - - + - - - + + title - - + - contact - - + +
- - - + + - - + +
`; @@ -69,20 +69,20 @@ exports[`Main app bar component app bar renders correctly 1`] = `
- - - + - - - + + title - - + - contact - - + +
- - - + + - - + +
`; @@ -134,20 +134,20 @@ exports[`Main app bar component does not render contact button when feature is f
- - - + - - - + + title - +
- - - + + - - + +
`; diff --git a/src/mainAppBar/__snapshots__/userProfile.component.test.tsx.snap b/src/mainAppBar/__snapshots__/userProfile.component.test.tsx.snap index da3e2b37..39795344 100644 --- a/src/mainAppBar/__snapshots__/userProfile.component.test.tsx.snap +++ b/src/mainAppBar/__snapshots__/userProfile.component.test.tsx.snap @@ -5,14 +5,14 @@ exports[`User profile component renders default avatar if signed in 1`] = ` className="tour-user-profile" >
- - - - + + - + Signed in as: - - + anonymous - +
- - + - - - - + + + - - + +
`; @@ -51,11 +51,11 @@ exports[`User profile component renders sign in button if not signed in 1`] = `
- - login-button - - + +
`; @@ -75,14 +75,14 @@ exports[`User profile component renders user avatar if signed in with avatar url className="tour-user-profile" >
- - - + Signed in as: - - + test - +
- - + - - - - + + + - - + +
`; diff --git a/src/mainAppBar/mainAppBar.component.test.tsx b/src/mainAppBar/mainAppBar.component.test.tsx index 88b47781..669b39dd 100644 --- a/src/mainAppBar/mainAppBar.component.test.tsx +++ b/src/mainAppBar/mainAppBar.component.test.tsx @@ -9,7 +9,7 @@ import { toggleDrawer, toggleHelp } from '../state/actions/scigateway.actions'; import { Provider } from 'react-redux'; import TestAuthProvider from '../authentication/testAuthProvider'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; describe('Main app bar component', () => { diff --git a/src/navigationDrawer/__snapshots__/navigationDrawer.component.test.tsx.snap b/src/navigationDrawer/__snapshots__/navigationDrawer.component.test.tsx.snap index bc2f1d22..2d45f278 100644 --- a/src/navigationDrawer/__snapshots__/navigationDrawer.component.test.tsx.snap +++ b/src/navigationDrawer/__snapshots__/navigationDrawer.component.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Navigation drawer component Navigation drawer renders correctly when closed 1`] = ` - - - - + + - - - + + + `; exports[`Navigation drawer component Navigation drawer renders correctly when open 1`] = ` - - - - + + - - - + + + `; exports[`Navigation drawer component renders a plugin list grouped by sections ordered alphabetically when open 1`] = ` - - - - + + - - - - + + + - - + - - - - - + + - - + - - - - - - - + + + `; exports[`Navigation drawer component renders a plugin list grouped by sections ordered alphabetically when open 2`] = ` @@ -246,7 +246,7 @@ exports[`Navigation drawer component renders a plugin list grouped by sections o key="3" to="plugin_link" > - - - - - - - - - + + + `; diff --git a/src/notifications/__snapshots__/scigatewayNotification.component.test.tsx.snap b/src/notifications/__snapshots__/scigatewayNotification.component.test.tsx.snap index 35b72349..2152996d 100644 --- a/src/notifications/__snapshots__/scigatewayNotification.component.test.tsx.snap +++ b/src/notifications/__snapshots__/scigatewayNotification.component.test.tsx.snap @@ -2,69 +2,72 @@ exports[`Scigateway Notification component Scigateway Notification error message renders correctly 1`] = `
- - error message - - + - - +
`; exports[`Scigateway Notification component Scigateway Notification success message renders correctly 1`] = `
- - success message - - + - - +
`; exports[`Scigateway Notification component Scigateway Notification warning message renders correctly 1`] = `
- - warning message - - + - - +
`; diff --git a/src/notifications/notificationBadge.component.test.tsx b/src/notifications/notificationBadge.component.test.tsx index 2953a932..650c3173 100644 --- a/src/notifications/notificationBadge.component.test.tsx +++ b/src/notifications/notificationBadge.component.test.tsx @@ -2,37 +2,48 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { createShallow, createMount } from '@material-ui/core/test-utils'; import NotificationBadge, { - NotificationBadgeWithStyles, + NotificationBadgeWithoutStyles, + CombinedNotificationBadgeProps, } from './notificationBadge.component'; import Badge from '@material-ui/core/Badge'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import { buildTheme } from '../theming'; import { Action } from 'redux'; import configureStore from 'redux-mock-store'; import { initialState } from '../state/reducers/scigateway.reducer'; import { dismissMenuItem } from '../state/actions/scigateway.actions'; +import { Provider } from 'react-redux'; describe('Notification Badge component', () => { + const theme = buildTheme(); + let shallow; let mount; let mockStore; + let props: CombinedNotificationBadgeProps; beforeEach(() => { shallow = createShallow({ untilSelector: 'div' }); mount = createMount(); mockStore = configureStore(); - }); - const theme = buildTheme(); + props = { + notifications: [], + deleteMenuItem: jest.fn(), + classes: { + button: 'button-class', + badge: 'badge-class', + }, + }; + }); it('Notification badge renders correctly', () => { const wrapper = shallow( - - ({ type: test })} - /> - + ({ type: test })} + {...props} + /> ); expect(wrapper).toMatchSnapshot(); @@ -40,25 +51,23 @@ describe('Notification Badge component', () => { it('renders correct number of notifications in the badge', () => { let wrapper = shallow( - - ({ type: test })} - /> - + ({ type: test })} + classes={props.classes} + /> ); expect(wrapper.find(Badge).prop('badgeContent')).toEqual(2); wrapper = shallow( - - ({ type: test })} - /> - + ({ type: test })} + /> ); expect(wrapper.find(Badge).prop('badgeContent')).toBeNull(); @@ -71,53 +80,63 @@ describe('Notification Badge component', () => { ]; const testStore = mockStore(state); - const wrapper = shallow( - - - + const wrapper = mount( + + + + + ); wrapper - .find('#notifications-menu [dismissNotification]') - .prop('dismissNotification')(); + .find('[aria-label="Open notification menu"]') + .first() + .simulate('click'); + wrapper.update(); + // console.log(wrapper.find('#notifications-menu').debug()); + + wrapper + .find('[aria-label="Dismiss notification"]') + .first() + .simulate('click'); expect(testStore.getActions().length).toEqual(1); expect(testStore.getActions()[0]).toEqual(dismissMenuItem(0)); }); it('opens menu when button clicked and closes menu when there are no more notifications', () => { - //TODO: when enzyme supports hooks, change test to shallow and test the menuAnchor state - let props = { - notifications: [{ message: 'my message', severity: 'warning' }], - deleteMenuItem: (): Action => ({ type: test }), - }; + let state = { scigateway: initialState }; + state.scigateway.notifications = [ + { message: 'my message', severity: 'warning' }, + ]; + + let testStore = mockStore(state); const wrapper = mount( - React.createElement( - props => ( - - - - ), - props - ) + + + + + ); act(() => { wrapper - .find('.NotificationBadge-button-1') + .find('[aria-label="Open notification menu"]') .first() - .prop('onClick')( - wrapper - .find('.NotificationBadge-button-1') + .prop('onClick')({ + currentTarget: wrapper + .find('[aria-label="Open notification menu"]') .first() - .getDOMNode() - ); + .getDOMNode(), + }); }); expect(wrapper.find('#notifications-menu').exists()).toBeTruthy(); - wrapper.setProps({ notifications: [] }); + state.scigateway.notifications = []; + testStore = mockStore(state); + wrapper.setProps({ store: testStore }); expect(wrapper.find('#notifications-menu').exists()).toBeFalsy(); }); diff --git a/src/notifications/notificationBadge.component.tsx b/src/notifications/notificationBadge.component.tsx index a3aa4f15..017238b7 100644 --- a/src/notifications/notificationBadge.component.tsx +++ b/src/notifications/notificationBadge.component.tsx @@ -41,7 +41,7 @@ const styles = (theme: Theme): StyleRules => }, }); -type CombinedNotificationBadgeProps = BadgeProps & +export type CombinedNotificationBadgeProps = BadgeProps & BadgeDispatchProps & WithStyles; @@ -77,9 +77,12 @@ const NotificationBadge = ( setMenuAnchor(e.currentTarget)} + aria-label="Open notification menu" > 0 ? props.notifications.length : null + } color="primary" classes={{ colorPrimary: props.classes.badge, @@ -102,6 +105,7 @@ const NotificationBadge = ( ); }; +export const NotificationBadgeWithoutStyles = NotificationBadge; export const NotificationBadgeWithStyles = withStyles(styles)( NotificationBadge ); diff --git a/src/notifications/scigatewayNotification.component.test.tsx b/src/notifications/scigatewayNotification.component.test.tsx index 419171f4..f0f91e6f 100644 --- a/src/notifications/scigatewayNotification.component.test.tsx +++ b/src/notifications/scigatewayNotification.component.test.tsx @@ -1,9 +1,12 @@ import React from 'react'; import { createShallow, createMount } from '@material-ui/core/test-utils'; -import { NotificationWithStyles } from './scigatewayNotification.component'; +import { + NotificationWithoutStyles, + NotificationWithStyles, +} from './scigatewayNotification.component'; import { Action } from 'redux'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; const theme = buildTheme(); @@ -11,13 +14,25 @@ function createScigatewayNotification( severity: string, message: string ): React.ReactElement { + let props = { + classes: { + root: 'root-class', + successIcon: 'successIcon-class', + warningIcon: 'warningIcon-class', + errorIcon: 'errorIcon-class', + button: 'button-class', + deleteIcon: 'deleteIcon-class', + }, + }; + return ( - ({ type: 'test' })} + {...props} /> ); diff --git a/src/notifications/scigatewayNotification.component.tsx b/src/notifications/scigatewayNotification.component.tsx index df5fc0be..c9609a32 100644 --- a/src/notifications/scigatewayNotification.component.tsx +++ b/src/notifications/scigatewayNotification.component.tsx @@ -57,35 +57,40 @@ interface NotificationDispatchProps { dismissNotification: () => Action; } -type CombinedNotificationProps = NotificationProps & +export type CombinedNotificationProps = NotificationProps & NotificationDispatchProps & WithStyles; -const ScigatewayNotification = ( - props: CombinedNotificationProps -): React.ReactElement => { - return ( -
- {props.severity === 'success' ? ( - - ) : null} - {props.severity === 'warning' ? ( - - ) : null} - {props.severity === 'error' ? ( - - ) : null} - {props.message} - - - -
- ); -}; +const ForwardRefScigatewayNotification = React.forwardRef( + function ScigatewayNotification( + props: CombinedNotificationProps, + ref: React.Ref + ): React.ReactElement { + return ( +
+ {props.severity === 'success' ? ( + + ) : null} + {props.severity === 'warning' ? ( + + ) : null} + {props.severity === 'error' ? ( + + ) : null} + {props.message} + + + +
+ ); + } +); +export const NotificationWithoutStyles = ForwardRefScigatewayNotification; export const NotificationWithStyles = withStyles(styles)( - ScigatewayNotification + ForwardRefScigatewayNotification ); diff --git a/src/pageNotFound/__snapshots__/pageNotFound.component.test.tsx.snap b/src/pageNotFound/__snapshots__/pageNotFound.component.test.tsx.snap index b8dc65a0..6ad37c97 100644 --- a/src/pageNotFound/__snapshots__/pageNotFound.component.test.tsx.snap +++ b/src/pageNotFound/__snapshots__/pageNotFound.component.test.tsx.snap @@ -5,24 +5,24 @@ exports[`Page Not found component pageNotFound renders correctly 1`] = `
- - 404 - +
- Page not found - - + @@ -33,7 +33,7 @@ exports[`Page Not found component pageNotFound renders correctly 1`] = ` here to return to the home page or contact support. - +
`; diff --git a/src/routing/__snapshots__/routing.component.test.tsx.snap b/src/routing/__snapshots__/routing.component.test.tsx.snap index 0aa012e6..ae36e33c 100644 --- a/src/routing/__snapshots__/routing.component.test.tsx.snap +++ b/src/routing/__snapshots__/routing.component.test.tsx.snap @@ -10,7 +10,303 @@ exports[`Routing component renders component with no plugin routes 1`] = ` Object { "$$typeof": Symbol(react.memo), "Naked": [Function], - "WrappedComponent": [Function], + "WrappedComponent": Object { + "$$typeof": Symbol(react.forward_ref), + "Naked": [Function], + "defaultProps": undefined, + "displayName": "WithStyles(HomePage)", + "options": Object { + "defaultTheme": Object { + "breakpoints": Object { + "between": [Function], + "down": [Function], + "keys": Array [ + "xs", + "sm", + "md", + "lg", + "xl", + ], + "only": [Function], + "up": [Function], + "values": Object { + "lg": 1280, + "md": 960, + "sm": 600, + "xl": 1920, + "xs": 0, + }, + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, + }, + "@media (min-width:600px)": Object { + "minHeight": 64, + }, + "minHeight": 56, + }, + }, + "overrides": Object {}, + "palette": Object { + "action": Object { + "active": "rgba(0, 0, 0, 0.54)", + "disabled": "rgba(0, 0, 0, 0.26)", + "disabledBackground": "rgba(0, 0, 0, 0.12)", + "hover": "rgba(0, 0, 0, 0.08)", + "hoverOpacity": 0.08, + "selected": "rgba(0, 0, 0, 0.14)", + }, + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", + }, + "common": Object { + "black": "#000", + "white": "#fff", + }, + "contrastThreshold": 3, + "divider": "rgba(0, 0, 0, 0.12)", + "error": Object { + "contrastText": "#fff", + "dark": "#d32f2f", + "light": "#e57373", + "main": "#f44336", + }, + "getContrastText": [Function], + "grey": Object { + "100": "#f5f5f5", + "200": "#eeeeee", + "300": "#e0e0e0", + "400": "#bdbdbd", + "50": "#fafafa", + "500": "#9e9e9e", + "600": "#757575", + "700": "#616161", + "800": "#424242", + "900": "#212121", + "A100": "#d5d5d5", + "A200": "#aaaaaa", + "A400": "#303030", + "A700": "#616161", + }, + "info": Object { + "contrastText": "#fff", + "dark": "#1976d2", + "light": "#64b5f6", + "main": "#2196f3", + }, + "primary": Object { + "contrastText": "#fff", + "dark": "#303f9f", + "light": "#7986cb", + "main": "#3f51b5", + }, + "secondary": Object { + "contrastText": "#fff", + "dark": "#c51162", + "light": "#ff4081", + "main": "#f50057", + }, + "success": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#388e3c", + "light": "#81c784", + "main": "#4caf50", + }, + "text": Object { + "disabled": "rgba(0, 0, 0, 0.38)", + "hint": "rgba(0, 0, 0, 0.38)", + "primary": "rgba(0, 0, 0, 0.87)", + "secondary": "rgba(0, 0, 0, 0.54)", + }, + "tonalOffset": 0.2, + "type": "light", + "warning": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#f57c00", + "light": "#ffb74d", + "main": "#ff9800", + }, + }, + "props": Object {}, + "shadows": Array [ + "none", + "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", + "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", + "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", + "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", + "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", + "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", + "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", + "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", + "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", + "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", + "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", + "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", + "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", + "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", + "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", + "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", + "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", + "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", + "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", + "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", + "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", + "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", + "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", + "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", + ], + "shape": Object { + "borderRadius": 4, + }, + "spacing": [Function], + "transitions": Object { + "create": [Function], + "duration": Object { + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195, + "short": 250, + "shorter": 200, + "shortest": 150, + "standard": 300, + }, + "easing": Object { + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", + }, + "getAutoHeightDuration": [Function], + }, + "typography": Object { + "body1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.5, + }, + "body2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 400, + "letterSpacing": "0.01071em", + "lineHeight": 1.43, + }, + "button": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.02857em", + "lineHeight": 1.75, + "textTransform": "uppercase", + }, + "caption": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.75rem", + "fontWeight": 400, + "letterSpacing": "0.03333em", + "lineHeight": 1.66, + }, + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": 14, + "fontWeightBold": 700, + "fontWeightLight": 300, + "fontWeightMedium": 500, + "fontWeightRegular": 400, + "h1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "6rem", + "fontWeight": 300, + "letterSpacing": "-0.01562em", + "lineHeight": 1.167, + }, + "h2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "3.75rem", + "fontWeight": 300, + "letterSpacing": "-0.00833em", + "lineHeight": 1.2, + }, + "h3": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "3rem", + "fontWeight": 400, + "letterSpacing": "0em", + "lineHeight": 1.167, + }, + "h4": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "2.125rem", + "fontWeight": 400, + "letterSpacing": "0.00735em", + "lineHeight": 1.235, + }, + "h5": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1.5rem", + "fontWeight": 400, + "letterSpacing": "0em", + "lineHeight": 1.334, + }, + "h6": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1.25rem", + "fontWeight": 500, + "letterSpacing": "0.0075em", + "lineHeight": 1.6, + }, + "htmlFontSize": 16, + "overline": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.75rem", + "fontWeight": 400, + "letterSpacing": "0.08333em", + "lineHeight": 2.66, + "textTransform": "uppercase", + }, + "pxToRem": [Function], + "round": [Function], + "subtitle1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.75, + }, + "subtitle2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.00714em", + "lineHeight": 1.57, + }, + }, + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, + }, + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], + }, "compare": null, "displayName": "Connect(WithStyles(HomePage))", "options": Object { @@ -93,6 +389,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "A400": "#303030", "A700": "#616161", }, + "info": Object { + "contrastText": "#fff", + "dark": "#1976d2", + "light": "#64b5f6", + "main": "#2196f3", + }, "primary": Object { "contrastText": "#fff", "dark": "#303f9f", @@ -105,6 +407,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "light": "#ff4081", "main": "#f50057", }, + "success": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#388e3c", + "light": "#81c784", + "main": "#4caf50", + }, "text": Object { "disabled": "rgba(0, 0, 0, 0.38)", "hint": "rgba(0, 0, 0, 0.38)", @@ -113,13 +421,19 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "tonalOffset": 0.2, "type": "light", + "warning": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#f57c00", + "light": "#ffb74d", + "main": "#ff9800", + }, }, "props": Object {}, "shadows": Array [ "none", - "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)", - "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)", - "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)", + "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", + "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", + "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", @@ -145,9 +459,7 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "shape": Object { "borderRadius": 4, }, - "spacing": Object { - "unit": 8, - }, + "spacing": [Function], "transitions": Object { "create": [Function], "duration": Object { @@ -169,14 +481,6 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "typography": Object { "body1": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "lineHeight": "1.46429em", - }, - "body1Next": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1rem", "fontWeight": 400, @@ -184,29 +488,13 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "lineHeight": 1.5, }, "body2": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "lineHeight": "1.71429em", - }, - "body2Next": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 400, "letterSpacing": "0.01071em", - "lineHeight": 1.5, + "lineHeight": 1.43, }, "button": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "textTransform": "uppercase", - }, - "buttonNext": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 500, @@ -215,115 +503,62 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "textTransform": "uppercase", }, "caption": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "lineHeight": "1.375em", - }, - "captionNext": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.75rem", "fontWeight": 400, "letterSpacing": "0.03333em", "lineHeight": 1.66, }, - "display1": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "lineHeight": "1.20588em", - }, - "display2": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.8125rem", - "fontWeight": 400, - "lineHeight": "1.13333em", - "marginLeft": "-.02em", - }, - "display3": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.5rem", - "fontWeight": 400, - "letterSpacing": "-.02em", - "lineHeight": "1.30357em", - "marginLeft": "-.02em", - }, - "display4": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "7rem", - "fontWeight": 300, - "letterSpacing": "-.04em", - "lineHeight": "1.14286em", - "marginLeft": "-.04em", - }, "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": 14, + "fontWeightBold": 700, "fontWeightLight": 300, "fontWeightMedium": 500, "fontWeightRegular": 400, "h1": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "6rem", "fontWeight": 300, "letterSpacing": "-0.01562em", - "lineHeight": 1, + "lineHeight": 1.167, }, "h2": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "3.75rem", "fontWeight": 300, "letterSpacing": "-0.00833em", - "lineHeight": 1, + "lineHeight": 1.2, }, "h3": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "3rem", "fontWeight": 400, "letterSpacing": "0em", - "lineHeight": 1.04, + "lineHeight": 1.167, }, "h4": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "2.125rem", "fontWeight": 400, "letterSpacing": "0.00735em", - "lineHeight": 1.17, + "lineHeight": 1.235, }, "h5": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1.5rem", "fontWeight": 400, "letterSpacing": "0em", - "lineHeight": 1.33, + "lineHeight": 1.334, }, "h6": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1.25rem", "fontWeight": 500, "letterSpacing": "0.0075em", "lineHeight": 1.6, }, - "headline": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "lineHeight": "1.35417em", - }, + "htmlFontSize": 16, "overline": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.75rem", "fontWeight": 400, @@ -333,15 +568,7 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "pxToRem": [Function], "round": [Function], - "subheading": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "lineHeight": "1.5em", - }, "subtitle1": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1rem", "fontWeight": 400, @@ -349,21 +576,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "lineHeight": 1.75, }, "subtitle2": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 500, "letterSpacing": "0.00714em", "lineHeight": 1.57, }, - "title": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.3125rem", - "fontWeight": 500, - "lineHeight": "1.16667em", - }, - "useNextVariants": false, }, "zIndex": Object { "appBar": 1100, @@ -371,11 +589,13 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "mobileStepper": 1000, "modal": 1300, "snackbar": 1400, + "speedDial": 1050, "tooltip": 1500, }, }, }, "type": [Function], + "useStyles": [Function], } } exact={true} @@ -386,7 +606,303 @@ exports[`Routing component renders component with no plugin routes 1`] = ` Object { "$$typeof": Symbol(react.memo), "Naked": [Function], - "WrappedComponent": [Function], + "WrappedComponent": Object { + "$$typeof": Symbol(react.forward_ref), + "Naked": [Function], + "defaultProps": undefined, + "displayName": "WithStyles(LoginPageComponent)", + "options": Object { + "defaultTheme": Object { + "breakpoints": Object { + "between": [Function], + "down": [Function], + "keys": Array [ + "xs", + "sm", + "md", + "lg", + "xl", + ], + "only": [Function], + "up": [Function], + "values": Object { + "lg": 1280, + "md": 960, + "sm": 600, + "xl": 1920, + "xs": 0, + }, + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, + }, + "@media (min-width:600px)": Object { + "minHeight": 64, + }, + "minHeight": 56, + }, + }, + "overrides": Object {}, + "palette": Object { + "action": Object { + "active": "rgba(0, 0, 0, 0.54)", + "disabled": "rgba(0, 0, 0, 0.26)", + "disabledBackground": "rgba(0, 0, 0, 0.12)", + "hover": "rgba(0, 0, 0, 0.08)", + "hoverOpacity": 0.08, + "selected": "rgba(0, 0, 0, 0.14)", + }, + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", + }, + "common": Object { + "black": "#000", + "white": "#fff", + }, + "contrastThreshold": 3, + "divider": "rgba(0, 0, 0, 0.12)", + "error": Object { + "contrastText": "#fff", + "dark": "#d32f2f", + "light": "#e57373", + "main": "#f44336", + }, + "getContrastText": [Function], + "grey": Object { + "100": "#f5f5f5", + "200": "#eeeeee", + "300": "#e0e0e0", + "400": "#bdbdbd", + "50": "#fafafa", + "500": "#9e9e9e", + "600": "#757575", + "700": "#616161", + "800": "#424242", + "900": "#212121", + "A100": "#d5d5d5", + "A200": "#aaaaaa", + "A400": "#303030", + "A700": "#616161", + }, + "info": Object { + "contrastText": "#fff", + "dark": "#1976d2", + "light": "#64b5f6", + "main": "#2196f3", + }, + "primary": Object { + "contrastText": "#fff", + "dark": "#303f9f", + "light": "#7986cb", + "main": "#3f51b5", + }, + "secondary": Object { + "contrastText": "#fff", + "dark": "#c51162", + "light": "#ff4081", + "main": "#f50057", + }, + "success": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#388e3c", + "light": "#81c784", + "main": "#4caf50", + }, + "text": Object { + "disabled": "rgba(0, 0, 0, 0.38)", + "hint": "rgba(0, 0, 0, 0.38)", + "primary": "rgba(0, 0, 0, 0.87)", + "secondary": "rgba(0, 0, 0, 0.54)", + }, + "tonalOffset": 0.2, + "type": "light", + "warning": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#f57c00", + "light": "#ffb74d", + "main": "#ff9800", + }, + }, + "props": Object {}, + "shadows": Array [ + "none", + "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", + "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", + "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", + "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", + "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", + "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", + "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", + "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", + "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", + "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", + "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", + "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", + "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", + "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", + "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", + "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", + "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", + "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", + "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", + "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", + "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", + "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", + "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", + "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", + ], + "shape": Object { + "borderRadius": 4, + }, + "spacing": [Function], + "transitions": Object { + "create": [Function], + "duration": Object { + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195, + "short": 250, + "shorter": 200, + "shortest": 150, + "standard": 300, + }, + "easing": Object { + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", + }, + "getAutoHeightDuration": [Function], + }, + "typography": Object { + "body1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.5, + }, + "body2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 400, + "letterSpacing": "0.01071em", + "lineHeight": 1.43, + }, + "button": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.02857em", + "lineHeight": 1.75, + "textTransform": "uppercase", + }, + "caption": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.75rem", + "fontWeight": 400, + "letterSpacing": "0.03333em", + "lineHeight": 1.66, + }, + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": 14, + "fontWeightBold": 700, + "fontWeightLight": 300, + "fontWeightMedium": 500, + "fontWeightRegular": 400, + "h1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "6rem", + "fontWeight": 300, + "letterSpacing": "-0.01562em", + "lineHeight": 1.167, + }, + "h2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "3.75rem", + "fontWeight": 300, + "letterSpacing": "-0.00833em", + "lineHeight": 1.2, + }, + "h3": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "3rem", + "fontWeight": 400, + "letterSpacing": "0em", + "lineHeight": 1.167, + }, + "h4": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "2.125rem", + "fontWeight": 400, + "letterSpacing": "0.00735em", + "lineHeight": 1.235, + }, + "h5": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1.5rem", + "fontWeight": 400, + "letterSpacing": "0em", + "lineHeight": 1.334, + }, + "h6": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1.25rem", + "fontWeight": 500, + "letterSpacing": "0.0075em", + "lineHeight": 1.6, + }, + "htmlFontSize": 16, + "overline": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.75rem", + "fontWeight": 400, + "letterSpacing": "0.08333em", + "lineHeight": 2.66, + "textTransform": "uppercase", + }, + "pxToRem": [Function], + "round": [Function], + "subtitle1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.75, + }, + "subtitle2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.00714em", + "lineHeight": 1.57, + }, + }, + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, + }, + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], + }, "compare": null, "displayName": "Connect(WithStyles(LoginPageComponent))", "options": Object { @@ -469,6 +985,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "A400": "#303030", "A700": "#616161", }, + "info": Object { + "contrastText": "#fff", + "dark": "#1976d2", + "light": "#64b5f6", + "main": "#2196f3", + }, "primary": Object { "contrastText": "#fff", "dark": "#303f9f", @@ -481,6 +1003,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "light": "#ff4081", "main": "#f50057", }, + "success": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#388e3c", + "light": "#81c784", + "main": "#4caf50", + }, "text": Object { "disabled": "rgba(0, 0, 0, 0.38)", "hint": "rgba(0, 0, 0, 0.38)", @@ -489,13 +1017,19 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "tonalOffset": 0.2, "type": "light", + "warning": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#f57c00", + "light": "#ffb74d", + "main": "#ff9800", + }, }, "props": Object {}, "shadows": Array [ "none", - "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)", - "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)", - "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)", + "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", + "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", + "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", @@ -521,9 +1055,7 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "shape": Object { "borderRadius": 4, }, - "spacing": Object { - "unit": 8, - }, + "spacing": [Function], "transitions": Object { "create": [Function], "duration": Object { @@ -545,14 +1077,6 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "typography": Object { "body1": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "lineHeight": "1.46429em", - }, - "body1Next": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1rem", "fontWeight": 400, @@ -560,29 +1084,13 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "lineHeight": 1.5, }, "body2": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "lineHeight": "1.71429em", - }, - "body2Next": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 400, "letterSpacing": "0.01071em", - "lineHeight": 1.5, + "lineHeight": 1.43, }, "button": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "textTransform": "uppercase", - }, - "buttonNext": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 500, @@ -591,115 +1099,62 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "textTransform": "uppercase", }, "caption": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "lineHeight": "1.375em", - }, - "captionNext": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.75rem", "fontWeight": 400, "letterSpacing": "0.03333em", "lineHeight": 1.66, }, - "display1": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "lineHeight": "1.20588em", - }, - "display2": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.8125rem", - "fontWeight": 400, - "lineHeight": "1.13333em", - "marginLeft": "-.02em", - }, - "display3": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.5rem", - "fontWeight": 400, - "letterSpacing": "-.02em", - "lineHeight": "1.30357em", - "marginLeft": "-.02em", - }, - "display4": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "7rem", - "fontWeight": 300, - "letterSpacing": "-.04em", - "lineHeight": "1.14286em", - "marginLeft": "-.04em", - }, "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": 14, + "fontWeightBold": 700, "fontWeightLight": 300, "fontWeightMedium": 500, "fontWeightRegular": 400, "h1": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "6rem", "fontWeight": 300, "letterSpacing": "-0.01562em", - "lineHeight": 1, + "lineHeight": 1.167, }, "h2": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "3.75rem", "fontWeight": 300, "letterSpacing": "-0.00833em", - "lineHeight": 1, + "lineHeight": 1.2, }, "h3": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "3rem", "fontWeight": 400, "letterSpacing": "0em", - "lineHeight": 1.04, + "lineHeight": 1.167, }, "h4": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "2.125rem", "fontWeight": 400, "letterSpacing": "0.00735em", - "lineHeight": 1.17, + "lineHeight": 1.235, }, "h5": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1.5rem", "fontWeight": 400, "letterSpacing": "0em", - "lineHeight": 1.33, + "lineHeight": 1.334, }, "h6": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1.25rem", "fontWeight": 500, "letterSpacing": "0.0075em", "lineHeight": 1.6, }, - "headline": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "lineHeight": "1.35417em", - }, + "htmlFontSize": 16, "overline": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.75rem", "fontWeight": 400, @@ -709,15 +1164,7 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "pxToRem": [Function], "round": [Function], - "subheading": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "lineHeight": "1.5em", - }, "subtitle1": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1rem", "fontWeight": 400, @@ -725,21 +1172,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "lineHeight": 1.75, }, "subtitle2": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 500, "letterSpacing": "0.00714em", "lineHeight": 1.57, }, - "title": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.3125rem", - "fontWeight": 500, - "lineHeight": "1.16667em", - }, - "useNextVariants": false, }, "zIndex": Object { "appBar": 1100, @@ -747,11 +1185,13 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "mobileStepper": 1000, "modal": 1300, "snackbar": 1400, + "speedDial": 1050, "tooltip": 1500, }, }, }, "type": [Function], + "useStyles": [Function], } } exact={true} @@ -762,7 +1202,303 @@ exports[`Routing component renders component with no plugin routes 1`] = ` Object { "$$typeof": Symbol(react.memo), "Naked": [Function], - "WrappedComponent": [Function], + "WrappedComponent": Object { + "$$typeof": Symbol(react.forward_ref), + "Naked": [Function], + "defaultProps": undefined, + "displayName": "WithStyles(CookiesPage)", + "options": Object { + "defaultTheme": Object { + "breakpoints": Object { + "between": [Function], + "down": [Function], + "keys": Array [ + "xs", + "sm", + "md", + "lg", + "xl", + ], + "only": [Function], + "up": [Function], + "values": Object { + "lg": 1280, + "md": 960, + "sm": 600, + "xl": 1920, + "xs": 0, + }, + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, + }, + "@media (min-width:600px)": Object { + "minHeight": 64, + }, + "minHeight": 56, + }, + }, + "overrides": Object {}, + "palette": Object { + "action": Object { + "active": "rgba(0, 0, 0, 0.54)", + "disabled": "rgba(0, 0, 0, 0.26)", + "disabledBackground": "rgba(0, 0, 0, 0.12)", + "hover": "rgba(0, 0, 0, 0.08)", + "hoverOpacity": 0.08, + "selected": "rgba(0, 0, 0, 0.14)", + }, + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", + }, + "common": Object { + "black": "#000", + "white": "#fff", + }, + "contrastThreshold": 3, + "divider": "rgba(0, 0, 0, 0.12)", + "error": Object { + "contrastText": "#fff", + "dark": "#d32f2f", + "light": "#e57373", + "main": "#f44336", + }, + "getContrastText": [Function], + "grey": Object { + "100": "#f5f5f5", + "200": "#eeeeee", + "300": "#e0e0e0", + "400": "#bdbdbd", + "50": "#fafafa", + "500": "#9e9e9e", + "600": "#757575", + "700": "#616161", + "800": "#424242", + "900": "#212121", + "A100": "#d5d5d5", + "A200": "#aaaaaa", + "A400": "#303030", + "A700": "#616161", + }, + "info": Object { + "contrastText": "#fff", + "dark": "#1976d2", + "light": "#64b5f6", + "main": "#2196f3", + }, + "primary": Object { + "contrastText": "#fff", + "dark": "#303f9f", + "light": "#7986cb", + "main": "#3f51b5", + }, + "secondary": Object { + "contrastText": "#fff", + "dark": "#c51162", + "light": "#ff4081", + "main": "#f50057", + }, + "success": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#388e3c", + "light": "#81c784", + "main": "#4caf50", + }, + "text": Object { + "disabled": "rgba(0, 0, 0, 0.38)", + "hint": "rgba(0, 0, 0, 0.38)", + "primary": "rgba(0, 0, 0, 0.87)", + "secondary": "rgba(0, 0, 0, 0.54)", + }, + "tonalOffset": 0.2, + "type": "light", + "warning": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#f57c00", + "light": "#ffb74d", + "main": "#ff9800", + }, + }, + "props": Object {}, + "shadows": Array [ + "none", + "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", + "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", + "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", + "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", + "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", + "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", + "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", + "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", + "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", + "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", + "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", + "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", + "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", + "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", + "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", + "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", + "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", + "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", + "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", + "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", + "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", + "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", + "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", + "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", + ], + "shape": Object { + "borderRadius": 4, + }, + "spacing": [Function], + "transitions": Object { + "create": [Function], + "duration": Object { + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195, + "short": 250, + "shorter": 200, + "shortest": 150, + "standard": 300, + }, + "easing": Object { + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", + }, + "getAutoHeightDuration": [Function], + }, + "typography": Object { + "body1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.5, + }, + "body2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 400, + "letterSpacing": "0.01071em", + "lineHeight": 1.43, + }, + "button": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.02857em", + "lineHeight": 1.75, + "textTransform": "uppercase", + }, + "caption": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.75rem", + "fontWeight": 400, + "letterSpacing": "0.03333em", + "lineHeight": 1.66, + }, + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": 14, + "fontWeightBold": 700, + "fontWeightLight": 300, + "fontWeightMedium": 500, + "fontWeightRegular": 400, + "h1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "6rem", + "fontWeight": 300, + "letterSpacing": "-0.01562em", + "lineHeight": 1.167, + }, + "h2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "3.75rem", + "fontWeight": 300, + "letterSpacing": "-0.00833em", + "lineHeight": 1.2, + }, + "h3": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "3rem", + "fontWeight": 400, + "letterSpacing": "0em", + "lineHeight": 1.167, + }, + "h4": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "2.125rem", + "fontWeight": 400, + "letterSpacing": "0.00735em", + "lineHeight": 1.235, + }, + "h5": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1.5rem", + "fontWeight": 400, + "letterSpacing": "0em", + "lineHeight": 1.334, + }, + "h6": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1.25rem", + "fontWeight": 500, + "letterSpacing": "0.0075em", + "lineHeight": 1.6, + }, + "htmlFontSize": 16, + "overline": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.75rem", + "fontWeight": 400, + "letterSpacing": "0.08333em", + "lineHeight": 2.66, + "textTransform": "uppercase", + }, + "pxToRem": [Function], + "round": [Function], + "subtitle1": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.75, + }, + "subtitle2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.00714em", + "lineHeight": 1.57, + }, + }, + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, + }, + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], + }, "compare": null, "displayName": "Connect(WithStyles(CookiesPage))", "options": Object { @@ -845,6 +1581,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "A400": "#303030", "A700": "#616161", }, + "info": Object { + "contrastText": "#fff", + "dark": "#1976d2", + "light": "#64b5f6", + "main": "#2196f3", + }, "primary": Object { "contrastText": "#fff", "dark": "#303f9f", @@ -857,6 +1599,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "light": "#ff4081", "main": "#f50057", }, + "success": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#388e3c", + "light": "#81c784", + "main": "#4caf50", + }, "text": Object { "disabled": "rgba(0, 0, 0, 0.38)", "hint": "rgba(0, 0, 0, 0.38)", @@ -865,13 +1613,19 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "tonalOffset": 0.2, "type": "light", + "warning": Object { + "contrastText": "rgba(0, 0, 0, 0.87)", + "dark": "#f57c00", + "light": "#ffb74d", + "main": "#ff9800", + }, }, "props": Object {}, "shadows": Array [ "none", - "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)", - "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)", - "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)", + "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", + "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", + "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", @@ -897,9 +1651,7 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "shape": Object { "borderRadius": 4, }, - "spacing": Object { - "unit": 8, - }, + "spacing": [Function], "transitions": Object { "create": [Function], "duration": Object { @@ -921,14 +1673,6 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "typography": Object { "body1": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "lineHeight": "1.46429em", - }, - "body1Next": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1rem", "fontWeight": 400, @@ -936,29 +1680,13 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "lineHeight": 1.5, }, "body2": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "lineHeight": "1.71429em", - }, - "body2Next": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 400, "letterSpacing": "0.01071em", - "lineHeight": 1.5, + "lineHeight": 1.43, }, "button": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "textTransform": "uppercase", - }, - "buttonNext": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 500, @@ -967,115 +1695,62 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "textTransform": "uppercase", }, "caption": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "lineHeight": "1.375em", - }, - "captionNext": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.75rem", "fontWeight": 400, "letterSpacing": "0.03333em", "lineHeight": 1.66, }, - "display1": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "lineHeight": "1.20588em", - }, - "display2": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.8125rem", - "fontWeight": 400, - "lineHeight": "1.13333em", - "marginLeft": "-.02em", - }, - "display3": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.5rem", - "fontWeight": 400, - "letterSpacing": "-.02em", - "lineHeight": "1.30357em", - "marginLeft": "-.02em", - }, - "display4": Object { - "color": "rgba(0, 0, 0, 0.54)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "7rem", - "fontWeight": 300, - "letterSpacing": "-.04em", - "lineHeight": "1.14286em", - "marginLeft": "-.04em", - }, "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": 14, + "fontWeightBold": 700, "fontWeightLight": 300, "fontWeightMedium": 500, "fontWeightRegular": 400, "h1": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "6rem", "fontWeight": 300, "letterSpacing": "-0.01562em", - "lineHeight": 1, + "lineHeight": 1.167, }, "h2": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "3.75rem", "fontWeight": 300, "letterSpacing": "-0.00833em", - "lineHeight": 1, + "lineHeight": 1.2, }, "h3": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "3rem", "fontWeight": 400, "letterSpacing": "0em", - "lineHeight": 1.04, + "lineHeight": 1.167, }, "h4": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "2.125rem", "fontWeight": 400, "letterSpacing": "0.00735em", - "lineHeight": 1.17, + "lineHeight": 1.235, }, "h5": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1.5rem", "fontWeight": 400, "letterSpacing": "0em", - "lineHeight": 1.33, + "lineHeight": 1.334, }, "h6": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1.25rem", "fontWeight": 500, "letterSpacing": "0.0075em", "lineHeight": 1.6, }, - "headline": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "lineHeight": "1.35417em", - }, + "htmlFontSize": 16, "overline": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.75rem", "fontWeight": 400, @@ -1085,15 +1760,7 @@ exports[`Routing component renders component with no plugin routes 1`] = ` }, "pxToRem": [Function], "round": [Function], - "subheading": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "lineHeight": "1.5em", - }, "subtitle1": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "1rem", "fontWeight": 400, @@ -1101,21 +1768,12 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "lineHeight": 1.75, }, "subtitle2": Object { - "color": "rgba(0, 0, 0, 0.87)", "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "fontSize": "0.875rem", "fontWeight": 500, "letterSpacing": "0.00714em", "lineHeight": 1.57, }, - "title": Object { - "color": "rgba(0, 0, 0, 0.87)", - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.3125rem", - "fontWeight": 500, - "lineHeight": "1.16667em", - }, - "useNextVariants": false, }, "zIndex": Object { "appBar": 1100, @@ -1123,42 +1781,340 @@ exports[`Routing component renders component with no plugin routes 1`] = ` "mobileStepper": 1000, "modal": 1300, "snackbar": 1400, + "speedDial": 1050, "tooltip": 1500, }, }, }, - "type": [Function], - } - } - exact={true} - path="/cookies" - /> - - - -`; - -exports[`Routing component renders component with plugins 1`] = ` -
- - + + +
+`; + +exports[`Routing component renders component with plugins 1`] = ` +
+ + loadReactApp(name), () => true); + singleSpa.registerApplication( + name, + () => loadReactApp(name), + () => true + ); } async function init(plugins: Plugin[]) { @@ -51,7 +55,7 @@ async function init(plugins: Plugin[]) { type: NotificationType, payload: { message: `Failed to load plugin ${p.name} from ${p.src}. - Try reloading the page and if the error persists contact the support team`, + Try reloading the page and if the error persists contact the support team.`, severity: 'error', }, }, diff --git a/src/state/reducers/scigateway.reducer.tsx b/src/state/reducers/scigateway.reducer.tsx index f73d6603..c9212830 100644 --- a/src/state/reducers/scigateway.reducer.tsx +++ b/src/state/reducers/scigateway.reducer.tsx @@ -252,7 +252,9 @@ export function handleConfigureAnalytics( }; } -export function handleInitialiseAnalytics(state: ScigatewayState): ScigatewayState { +export function handleInitialiseAnalytics( + state: ScigatewayState +): ScigatewayState { if (state.analytics) { return { ...state, diff --git a/src/tour/__snapshots__/tour.component.test.tsx.snap b/src/tour/__snapshots__/tour.component.test.tsx.snap index a5321426..1b6a312e 100644 --- a/src/tour/__snapshots__/tour.component.test.tsx.snap +++ b/src/tour/__snapshots__/tour.component.test.tsx.snap @@ -1,47 +1,260 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Tour component renders correctly 1`] = ` - + + update={[Function]} + /> +
`; diff --git a/src/tour/tour.component.test.tsx b/src/tour/tour.component.test.tsx index 094d53f3..b9d71a0e 100644 --- a/src/tour/tour.component.test.tsx +++ b/src/tour/tour.component.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import Tour from './tour.component'; +import Tour, { TourWithoutStyles, CombinedTourProps } from './tour.component'; import { createShallow, createMount } from '@material-ui/core/test-utils'; import configureStore from 'redux-mock-store'; import { StateType } from '../state/state.types'; @@ -10,7 +10,7 @@ import { toggleHelp, toggleDrawer } from '../state/actions/scigateway.actions'; import { Provider } from 'react-redux'; import Joyride from 'react-joyride'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import TestAuthProvider from '../authentication/testAuthProvider'; jest.mock('popper.js', () => { @@ -34,6 +34,7 @@ describe('Tour component', () => { let mockStore; let state: StateType; const theme = buildTheme(); + let props: CombinedTourProps; beforeEach(() => { shallow = createShallow({ untilSelector: 'Tour' }); @@ -63,16 +64,24 @@ describe('Tour component', () => { }, }; mockStore = configureStore(); + + props = { + showHelp: state.scigateway.showHelp, + helpSteps: state.scigateway.helpSteps, + drawerOpen: state.scigateway.drawerOpen, + loggedIn: state.scigateway.authorisation.provider.isLoggedIn(), + + dismissHelp: jest.fn(), + toggleDrawer: jest.fn(), + + theme: buildTheme(), + }; }); it('renders correctly', () => { - state.scigateway.showHelp = true; + props.showHelp = true; - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/tour/tour.component.tsx b/src/tour/tour.component.tsx index 7ea65a9d..d3fa2fb1 100644 --- a/src/tour/tour.component.tsx +++ b/src/tour/tour.component.tsx @@ -29,7 +29,8 @@ interface TourDispatchProps { toggleDrawer: () => Action; } -type CombinedTourProps = TourProps & TourDispatchProps & { theme: Theme }; +export type CombinedTourProps = TourProps & + TourDispatchProps & { theme: Theme }; class Tour extends React.Component { public constructor(props: CombinedTourProps) { @@ -133,6 +134,7 @@ const mapDispatchToProps = (dispatch: Dispatch): TourDispatchProps => ({ toggleDrawer: () => dispatch(toggleDrawer()), }); +export const TourWithoutStyles = Tour; export const TourWithStyles = withTheme(Tour); export default connect(mapStateToProps, mapDispatchToProps)(TourWithStyles); From 7eba73c2b7e92f0d33ddaa1dee547e5a4b5186af Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Wed, 22 Jan 2020 12:03:15 +0000 Subject: [PATCH 5/9] reduce the size of routing snapshots by mocking withStyles --- .../routing.component.test.tsx.snap | 3526 +---------------- src/routing/routing.component.test.tsx | 17 +- 2 files changed, 29 insertions(+), 3514 deletions(-) diff --git a/src/routing/__snapshots__/routing.component.test.tsx.snap b/src/routing/__snapshots__/routing.component.test.tsx.snap index ae36e33c..42394bab 100644 --- a/src/routing/__snapshots__/routing.component.test.tsx.snap +++ b/src/routing/__snapshots__/routing.component.test.tsx.snap @@ -2,600 +2,17 @@ exports[`Routing component renders component with no plugin routes 1`] = `
({ + withStyles: styles => component => component, +})); + describe('Routing component', () => { let shallow; let mockStore; let state: StateType; + const classes = { + container: 'container-class', + containerShift: 'containerShift-class', + }; beforeEach(() => { shallow = createShallow({ untilSelector: 'div' }); @@ -27,7 +36,9 @@ describe('Routing component', () => { it('renders component with no plugin routes', () => { state.scigateway.plugins = []; - const wrapper = shallow(); + const wrapper = shallow( + + ); expect(wrapper).toMatchSnapshot(); }); @@ -49,7 +60,9 @@ describe('Routing component', () => { order: 2, }, ]; - const wrapper = shallow(); + const wrapper = shallow( + + ); expect(wrapper).toMatchSnapshot(); }); From 58242c1a3742f96bc16cb87d76af7318f02e371e Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Wed, 22 Jan 2020 15:23:15 +0000 Subject: [PATCH 6/9] Update to unit tests with minor tweaks (#101) --- src/App.tsx | 19 ++++++++++--- src/cookieConsent/cookieConsent.component.tsx | 2 -- src/cookieConsent/cookiesPage.component.tsx | 5 ---- src/homePage/homePage.component.tsx | 1 - src/loginPage/loginPage.component.test.tsx | 1 - src/loginPage/loginPage.component.tsx | 10 +------ src/mainAppBar/mainAppBar.component.tsx | 1 - src/mainAppBar/userProfile.component.tsx | 1 - .../navigationDrawer.component.tsx | 5 ++-- .../notificationBadge.component.test.tsx.snap | 16 ++++++++++- .../notificationBadge.component.test.tsx | 28 ++++++------------- src/theming.tsx | 1 - src/tour/tour.component.test.tsx | 7 +++-- 13 files changed, 46 insertions(+), 51 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bd2baf4e..b64b49ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,6 +23,15 @@ import CookieConsent from './cookieConsent/cookieConsent.component'; import ReduxToastr from 'react-redux-toastr'; import Tour from './tour/tour.component'; +import { + StylesProvider, + createGenerateClassName, +} from '@material-ui/core/styles'; + +const generateClassName = createGenerateClassName({ + productionPrefix: 'sgw', +}); + const history = createBrowserHistory(); const middleware = [thunk, routerMiddleware(history), ScigatewayMiddleware]; @@ -80,10 +89,12 @@ class App extends React.Component {
- - {toastrConfig()} - {pageContent()} - + + + {toastrConfig()} + {pageContent()} + +
diff --git a/src/cookieConsent/cookieConsent.component.tsx b/src/cookieConsent/cookieConsent.component.tsx index de7ee409..c9fe81bc 100644 --- a/src/cookieConsent/cookieConsent.component.tsx +++ b/src/cookieConsent/cookieConsent.component.tsx @@ -28,8 +28,6 @@ const styles = (theme: Theme): StyleRules => }, button: { color: theme.palette.primary.contrastText, - - // material-ui v4 upgrade margin: theme.spacing(1), }, }); diff --git a/src/cookieConsent/cookiesPage.component.tsx b/src/cookieConsent/cookiesPage.component.tsx index 9e91503f..d96429e1 100644 --- a/src/cookieConsent/cookiesPage.component.tsx +++ b/src/cookieConsent/cookiesPage.component.tsx @@ -21,13 +21,11 @@ import { push } from 'connected-react-router'; const styles = (theme: Theme): StyleRules => createStyles({ root: { - // material-ui v4 upgrade margin: theme.spacing(2), }, container: { display: 'flex', flexDirection: 'column', - // material-ui v4 upgrade marginTop: theme.spacing(2), marginBottom: theme.spacing(2), }, @@ -36,12 +34,10 @@ const styles = (theme: Theme): StyleRules => color: theme.palette.primary.main, }, cookiePolicy: { - // material-ui v4 upgrade marginTop: theme.spacing(2), marginBottom: theme.spacing(2), }, cookieTypes: { - // material-ui v4 upgrade marginTop: theme.spacing(2), marginBottom: theme.spacing(2), }, @@ -49,7 +45,6 @@ const styles = (theme: Theme): StyleRules => color: theme.palette.primary.contrastText, }, cookieList: { - // material-ui v4 upgrade paddingLeft: theme.spacing(2), }, cookieListItem: { diff --git a/src/homePage/homePage.component.tsx b/src/homePage/homePage.component.tsx index 3f60fc88..aca395ba 100644 --- a/src/homePage/homePage.component.tsx +++ b/src/homePage/homePage.component.tsx @@ -95,7 +95,6 @@ const HomePage = (props: CombinedHomePageProps): React.ReactElement => ( {getString(props.res, 'how-label')} - {/* // material-ui v4 upgrade */} { props = { auth: { failedToLogin: false, - // signedOutDueToTokenExpiry: false, signedOutDueToTokenInvalidation: false, loading: false, provider: new TestAuthProvider(null), diff --git a/src/loginPage/loginPage.component.tsx b/src/loginPage/loginPage.component.tsx index c2162f6a..3a1389ac 100644 --- a/src/loginPage/loginPage.component.tsx +++ b/src/loginPage/loginPage.component.tsx @@ -34,7 +34,6 @@ const styles = (theme: Theme): StyleRules => marginRight: theme.spacing(3), }, avatar: { - // material-ui v4 upgrade margin: theme.spacing(1), backgroundColor: (theme as UKRITheme).ukri.orange, }, @@ -43,10 +42,7 @@ const styles = (theme: Theme): StyleRules => display: 'flex', flexDirection: 'column', alignItems: 'center', - // material-ui v4 upgrade - padding: `${theme.spacing(3)}px ${theme.spacing(3)}px ${theme.spacing( - 3 - )}px`, + padding: theme.spacing(3), [theme.breakpoints.up(400 + theme.spacing(6))]: { width: 400, marginLeft: 'auto', @@ -54,20 +50,16 @@ const styles = (theme: Theme): StyleRules => }, }, textField: { - // material-ui v4 upgrade marginTop: theme.spacing(1), }, button: { - // material-ui v4 upgrade marginTop: `${theme.spacing(1)}px`, }, warning: { - // material-ui v4 upgrade marginTop: `${theme.spacing(1)}px`, color: 'red', }, info: { - // material-ui v4 upgrade marginTop: `${theme.spacing(1)}px`, color: theme.palette.primary.main, }, diff --git a/src/mainAppBar/mainAppBar.component.tsx b/src/mainAppBar/mainAppBar.component.tsx index c59af190..ca984654 100644 --- a/src/mainAppBar/mainAppBar.component.tsx +++ b/src/mainAppBar/mainAppBar.component.tsx @@ -69,7 +69,6 @@ const styles = (theme: Theme): StyleRules => cursor: 'pointer', }, button: { - // material-ui v4 upgrade margin: theme.spacing(1), color: theme.palette.primary.contrastText, }, diff --git a/src/mainAppBar/userProfile.component.tsx b/src/mainAppBar/userProfile.component.tsx index 48c8ec64..d209d150 100644 --- a/src/mainAppBar/userProfile.component.tsx +++ b/src/mainAppBar/userProfile.component.tsx @@ -56,7 +56,6 @@ const styles = (theme: Theme): StyleRules => fontWeight: 'bold', }, avatar: { - // material-ui v4 upgrade margin: theme.spacing(1), cursor: 'pointer', }, diff --git a/src/navigationDrawer/navigationDrawer.component.tsx b/src/navigationDrawer/navigationDrawer.component.tsx index a387273a..84907d7a 100644 --- a/src/navigationDrawer/navigationDrawer.component.tsx +++ b/src/navigationDrawer/navigationDrawer.component.tsx @@ -62,12 +62,13 @@ interface LinkListItemProps extends ListItemProps { to: string; } -// material-ui v4 upgrade - https://material-ui.com/guides/composition/ const LinkListItem = (props: LinkListItemProps): React.ReactElement => ( // an `any` is required here to pass the additional properties through to the // ListItem as per the material-ui documentation /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - // + + // It is worth noting the composition guide which goes into + // detail into how this works: https://material-ui.com/guides/composition/ } /> ); diff --git a/src/notifications/__snapshots__/notificationBadge.component.test.tsx.snap b/src/notifications/__snapshots__/notificationBadge.component.test.tsx.snap index 30db29fd..57acd1c8 100644 --- a/src/notifications/__snapshots__/notificationBadge.component.test.tsx.snap +++ b/src/notifications/__snapshots__/notificationBadge.component.test.tsx.snap @@ -10,7 +10,7 @@ exports[`Notification Badge component Notification badge renders correctly 1`] = onClick={[Function]} > + + +
`; diff --git a/src/notifications/notificationBadge.component.test.tsx b/src/notifications/notificationBadge.component.test.tsx index 650c3173..9985d6dd 100644 --- a/src/notifications/notificationBadge.component.test.tsx +++ b/src/notifications/notificationBadge.component.test.tsx @@ -8,7 +8,6 @@ import NotificationBadge, { import Badge from '@material-ui/core/Badge'; import { MuiThemeProvider } from '@material-ui/core/styles'; import { buildTheme } from '../theming'; -import { Action } from 'redux'; import configureStore from 'redux-mock-store'; import { initialState } from '../state/reducers/scigateway.reducer'; import { dismissMenuItem } from '../state/actions/scigateway.actions'; @@ -28,7 +27,7 @@ describe('Notification Badge component', () => { mockStore = configureStore(); props = { - notifications: [], + notifications: [{ message: 'my message', severity: 'warning' }], deleteMenuItem: jest.fn(), classes: { button: 'button-class', @@ -38,13 +37,7 @@ describe('Notification Badge component', () => { }); it('Notification badge renders correctly', () => { - const wrapper = shallow( - ({ type: test })} - {...props} - /> - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -52,12 +45,11 @@ describe('Notification Badge component', () => { it('renders correct number of notifications in the badge', () => { let wrapper = shallow( ({ type: test })} - classes={props.classes} /> ); @@ -66,7 +58,8 @@ describe('Notification Badge component', () => { wrapper = shallow( ({ type: test })} + notifications={[]} + deleteMenuItem={props.deleteMenuItem} /> ); @@ -75,9 +68,7 @@ describe('Notification Badge component', () => { it('sends dismissMenuItem action when dismissNotification prop is called', () => { let state = { scigateway: initialState }; - state.scigateway.notifications = [ - { message: 'my message', severity: 'warning' }, - ]; + state.scigateway.notifications = props.notifications; const testStore = mockStore(state); const wrapper = mount( @@ -93,7 +84,6 @@ describe('Notification Badge component', () => { .first() .simulate('click'); wrapper.update(); - // console.log(wrapper.find('#notifications-menu').debug()); wrapper .find('[aria-label="Dismiss notification"]') @@ -106,9 +96,7 @@ describe('Notification Badge component', () => { it('opens menu when button clicked and closes menu when there are no more notifications', () => { let state = { scigateway: initialState }; - state.scigateway.notifications = [ - { message: 'my message', severity: 'warning' }, - ]; + state.scigateway.notifications = props.notifications; let testStore = mockStore(state); diff --git a/src/theming.tsx b/src/theming.tsx index 16a2e693..e5c5b05a 100644 --- a/src/theming.tsx +++ b/src/theming.tsx @@ -26,7 +26,6 @@ export interface UKRITheme extends Theme { export const buildTheme = (): Theme => { const options: UKRIThemeOptions = { - // material-ui v4 upgrade - removed typography object for useNextVariants palette: { primary: { main: '#1D4F91', // dark blue diff --git a/src/tour/tour.component.test.tsx b/src/tour/tour.component.test.tsx index b9d71a0e..19f2c29b 100644 --- a/src/tour/tour.component.test.tsx +++ b/src/tour/tour.component.test.tsx @@ -29,15 +29,16 @@ jest.mock('popper.js', () => { }); describe('Tour component', () => { + const theme = buildTheme(); + let shallow; let mount; let mockStore; let state: StateType; - const theme = buildTheme(); let props: CombinedTourProps; beforeEach(() => { - shallow = createShallow({ untilSelector: 'Tour' }); + shallow = createShallow({}); mount = createMount(); state = { @@ -74,7 +75,7 @@ describe('Tour component', () => { dismissHelp: jest.fn(), toggleDrawer: jest.fn(), - theme: buildTheme(), + theme: theme, }; }); From be92cf380ac93a94fd7f1221252243b5a6d3a6e6 Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Wed, 22 Jan 2020 16:20:34 +0000 Subject: [PATCH 7/9] Update snapshot for Tour component unit test (#101) --- .../tour.component.test.tsx.snap | 289 +++--------------- 1 file changed, 38 insertions(+), 251 deletions(-) diff --git a/src/tour/__snapshots__/tour.component.test.tsx.snap b/src/tour/__snapshots__/tour.component.test.tsx.snap index 1b6a312e..a5321426 100644 --- a/src/tour/__snapshots__/tour.component.test.tsx.snap +++ b/src/tour/__snapshots__/tour.component.test.tsx.snap @@ -1,260 +1,47 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Tour component renders correctly 1`] = ` -
- -
+ } +/> `; From 9bc85736a96a06b1f855bd0c6fef3208f3d4aa4b Mon Sep 17 00:00:00 2001 From: Goel Biju Date: Thu, 23 Jan 2020 16:48:02 +0000 Subject: [PATCH 8/9] Fix LoginPage component unit tests (#101) --- src/loginPage/loginPage.component.test.tsx | 5 +++-- src/loginPage/loginPage.component.tsx | 6 ++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/loginPage/loginPage.component.test.tsx b/src/loginPage/loginPage.component.test.tsx index c01f768c..4724a415 100644 --- a/src/loginPage/loginPage.component.test.tsx +++ b/src/loginPage/loginPage.component.test.tsx @@ -27,6 +27,7 @@ import thunk from 'redux-thunk'; import { AnyAction } from 'redux'; import { NotificationType } from '../state/scigateway.types'; import * as log from 'loglevel'; +import { Select } from '@material-ui/core'; jest.mock('loglevel'); @@ -337,8 +338,8 @@ describe('Login page component', () => { wrapper.update(); }); - console.log(wrapper.debug()); - const simulateDropdown = wrapper.find('Select').first(); + // Find the Select component for the dropdown authenticators list. + const simulateDropdown = wrapper.find(Select).first(); simulateDropdown.prop('onChange')({ target: { value: 'user/pass' } }); expect(testStore.getActions().length).toEqual(1); diff --git a/src/loginPage/loginPage.component.tsx b/src/loginPage/loginPage.component.tsx index fe4b85d1..392f749b 100644 --- a/src/loginPage/loginPage.component.tsx +++ b/src/loginPage/loginPage.component.tsx @@ -235,10 +235,8 @@ export const LoginSelector = ( Authenticator