From 203ca92a20b99904a0a17f19f42c618a6336c0da Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Fri, 4 Oct 2019 18:32:35 +0300 Subject: [PATCH] feat: improve landing page (#36826) * feat/ add smooth scroll from landing to map * feat: scroll to currentChallengeId if it exist * fix: update tests * refactor: migrate from componentWillMount * fix: update Map and Block's tests and mocks Co-authored-by: Oliver Eyton-Williams --- client/package-lock.json | 100 +++---- client/package.json | 1 + client/src/__mocks__/challenge-nodes.js | 34 ++- client/src/assets/images/AmazonLogo.js | 72 ----- client/src/assets/images/AppleLogo.js | 26 -- client/src/assets/images/GoogleLogo.js | 30 --- client/src/assets/images/MicrosoftLogo.js | 29 -- client/src/assets/images/SpotifyLogo.js | 23 -- client/src/components/Map/Map.test.js | 87 ++++-- .../Map/__snapshots__/Map.test.js.snap | 249 +++++++++++++++++- client/src/components/Map/components/Block.js | 6 + .../components/Map/components/SuperBlock.js | 6 +- .../__snapshots__/Block.test.js.snap | 37 ++- .../__snapshots__/SuperBlock.test.js.snap | 2 + client/src/components/Map/index.js | 60 ++++- client/src/components/landing/Landing.test.js | 2 + client/src/components/landing/index.js | 65 +++-- client/src/components/landing/landing.css | 63 ++--- client/src/components/welcome/Welcome.test.js | 1 + client/src/pages/index.js | 32 ++- client/src/pages/learn.js | 15 ++ 21 files changed, 565 insertions(+), 375 deletions(-) delete mode 100644 client/src/assets/images/AmazonLogo.js delete mode 100644 client/src/assets/images/AppleLogo.js delete mode 100644 client/src/assets/images/GoogleLogo.js delete mode 100644 client/src/assets/images/MicrosoftLogo.js delete mode 100644 client/src/assets/images/SpotifyLogo.js diff --git a/client/package-lock.json b/client/package-lock.json index 775d03bb41..506fa61a21 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4474,8 +4474,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -4496,14 +4495,12 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4518,20 +4515,17 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -4648,8 +4642,7 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -4661,7 +4654,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4676,7 +4668,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4684,14 +4675,12 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4710,7 +4699,6 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4791,8 +4779,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -4804,7 +4791,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -4890,8 +4876,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -4927,7 +4912,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4947,7 +4931,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4991,14 +4974,12 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -8164,8 +8145,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -8186,14 +8166,12 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8208,20 +8186,17 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -8338,8 +8313,7 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -8351,7 +8325,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8366,7 +8339,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8374,14 +8346,12 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8400,7 +8370,6 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8487,8 +8456,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -8500,7 +8468,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -8586,8 +8553,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -8623,7 +8589,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8643,7 +8608,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8687,14 +8651,12 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -10429,8 +10391,7 @@ "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "optional": true + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" }, "cli-cursor": { "version": "2.1.0", @@ -10510,7 +10471,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "optional": true, "requires": { "ansi-regex": "^4.1.0" } @@ -13512,8 +13472,7 @@ "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "optional": true + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" }, "cli-cursor": { "version": "2.1.0", @@ -13558,7 +13517,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "optional": true, "requires": { "ansi-regex": "^4.1.0" } @@ -16988,6 +16946,15 @@ } } }, + "react-scroll": { + "version": "1.7.14", + "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.7.14.tgz", + "integrity": "sha512-zQ2/8+TaEBctA9RSQspP5GWMffA6g7u+AB9gMWB42btZZTBcGEyomvxnm52UVVELjqXOpD9U1/tHhVTNXyntbQ==", + "requires": { + "lodash.throttle": "^4.1.1", + "prop-types": "^15.5.8" + } + }, "react-side-effect": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz", @@ -17959,7 +17926,6 @@ "version": "0.13.6", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", - "optional": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/client/package.json b/client/package.json index 8eb26b0134..d16ab7c9f8 100644 --- a/client/package.json +++ b/client/package.json @@ -60,6 +60,7 @@ "react-redux": "^5.0.7", "react-reflex": "^3.0.16", "react-responsive": "^6.1.1", + "react-scroll": "^1.7.14", "react-spinkit": "^3.0.0", "react-stripe-elements": "^2.0.3", "react-tooltip": "^3.10.0", diff --git a/client/src/__mocks__/challenge-nodes.js b/client/src/__mocks__/challenge-nodes.js index 858fd929a5..5a160fd6b2 100644 --- a/client/src/__mocks__/challenge-nodes.js +++ b/client/src/__mocks__/challenge-nodes.js @@ -67,7 +67,7 @@ export default [ }, { fields: { - slug: '/super-block-one/block-a/challenge-one', + slug: '/super-block-two/block-a/challenge-one', blockName: 'Block A' }, id: 'f', @@ -80,7 +80,7 @@ export default [ }, { fields: { - slug: '/super-block-one/block-a/challenge-two', + slug: '/super-block-two/block-a/challenge-two', blockName: 'Block A' }, id: 'g', @@ -93,7 +93,7 @@ export default [ }, { fields: { - slug: '/super-block-one/block-b/challenge-one', + slug: '/super-block-two/block-b/challenge-one', blockName: 'Block B' }, id: 'h', @@ -106,7 +106,7 @@ export default [ }, { fields: { - slug: '/super-block-one/block-b/challenge-two', + slug: '/super-block-two/block-b/challenge-two', blockName: 'Block B' }, id: 'i', @@ -116,5 +116,31 @@ export default [ isPrivate: false, superBlock: 'Super Block Two', dashedName: 'challenge-two' + }, + { + fields: { + slug: '/super-block-three/block-a/challenge-one', + blockName: 'Block A' + }, + id: 'j', + block: 'block-a', + title: 'Challenge One', + isRequired: false, + isPrivate: false, + superBlock: 'Super Block Three', + dashedName: 'challenge-one' + }, + { + fields: { + slug: '/super-block-three/block-c/challenge-two', + blockName: 'Block C' + }, + id: 'k', + block: 'block-c', + title: 'Challenge Two', + isRequired: false, + isPrivate: false, + superBlock: 'Super Block Three', + dashedName: 'challenge-two' } ]; diff --git a/client/src/assets/images/AmazonLogo.js b/client/src/assets/images/AmazonLogo.js deleted file mode 100644 index 87d8c04d65..0000000000 --- a/client/src/assets/images/AmazonLogo.js +++ /dev/null @@ -1,72 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -const propTypes = {}; - -function SpotifyLogo(props) { - return ( - - - - - - - - - - - - - - - - - ); -} - -SpotifyLogo.displayName = 'SpotifyLogo'; -SpotifyLogo.propTypes = propTypes; - -export default SpotifyLogo; diff --git a/client/src/assets/images/AppleLogo.js b/client/src/assets/images/AppleLogo.js deleted file mode 100644 index b82e5cf7c2..0000000000 --- a/client/src/assets/images/AppleLogo.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -const propTypes = {}; - -function AppleLogo(props) { - return ( - - - - - - - ); -} - -AppleLogo.displayName = 'AppleLogo'; -AppleLogo.propTypes = propTypes; - -export default AppleLogo; diff --git a/client/src/assets/images/GoogleLogo.js b/client/src/assets/images/GoogleLogo.js deleted file mode 100644 index ea58870c3b..0000000000 --- a/client/src/assets/images/GoogleLogo.js +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -const propTypes = {}; - -function GoogleLogo(props) { - return ( - - - - - - - - - - - ); -} - -GoogleLogo.displayName = 'GoogleLogo'; -GoogleLogo.propTypes = propTypes; - -export default GoogleLogo; diff --git a/client/src/assets/images/MicrosoftLogo.js b/client/src/assets/images/MicrosoftLogo.js deleted file mode 100644 index 692a241a88..0000000000 --- a/client/src/assets/images/MicrosoftLogo.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -const propTypes = {}; - -function MicrosoftLogo(props) { - return ( - - - - - - - - - - ); -} - -MicrosoftLogo.displayName = 'MicrosoftLogo'; -MicrosoftLogo.propTypes = propTypes; - -export default MicrosoftLogo; diff --git a/client/src/assets/images/SpotifyLogo.js b/client/src/assets/images/SpotifyLogo.js deleted file mode 100644 index 32561ff74c..0000000000 --- a/client/src/assets/images/SpotifyLogo.js +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -const propTypes = {}; - -function SpotifyLogo(props) { - return ( - - - - ); -} - -SpotifyLogo.displayName = 'SpotifyLogo'; -SpotifyLogo.propTypes = propTypes; - -export default SpotifyLogo; diff --git a/client/src/components/Map/Map.test.js b/client/src/components/Map/Map.test.js index 9968085538..2c656a7d8b 100644 --- a/client/src/components/Map/Map.test.js +++ b/client/src/components/Map/Map.test.js @@ -4,12 +4,13 @@ import React from 'react'; import ShallowRenderer from 'react-test-renderer/shallow'; import Enzyme, { shallow } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -import store from 'store'; import { Map } from './'; import mockChallengeNodes from '../../__mocks__/challenge-nodes'; import mockIntroNodes from '../../__mocks__/intro-nodes'; +import { dasherize } from '../../../../utils/slugs'; + Enzyme.configure({ adapter: new Adapter() }); const renderer = new ShallowRenderer(); @@ -21,11 +22,15 @@ const baseProps = { resetExpansion: () => {} }; +// set .scrollTo to avoid errors in default test environment +window.scrollTo = jest.fn(); + test(' snapshot', () => { const componentToRender = ( {}} toggleBlock={() => {}} toggleSuperBlock={() => {}} /> @@ -36,42 +41,74 @@ test(' snapshot', () => { describe('', () => { describe('after reload', () => { - let initializeSpy = null; - beforeEach(() => { - initializeSpy = jest.spyOn(Map.prototype, 'initializeExpandedState'); - }); - afterEach(() => { - initializeSpy.mockRestore(); - store.clearAll(); - }); - // 7 was chosen because it has a different superblock from the first node. - const currentChallengeId = mockChallengeNodes[7].id; + const defaultNode = mockChallengeNodes[0]; + const idNode = mockChallengeNodes[7]; + const hashNode = mockChallengeNodes[9]; + const currentChallengeId = idNode.id; + const hash = dasherize(hashNode.superBlock); it('should expand the block with the most recent challenge', () => { + const initializeSpy = jest.spyOn( + Map.prototype, + 'initializeExpandedState' + ); + + const blockSpy = jest.fn(); + const superSpy = jest.fn(); + const props = { + ...baseProps, + toggleBlock: blockSpy, + toggleSuperBlock: superSpy + }; + const mapToRender = ; + shallow(mapToRender); + expect(blockSpy).toHaveBeenCalledTimes(1); + expect(superSpy).toHaveBeenCalledTimes(1); + expect(initializeSpy).toHaveBeenCalledTimes(1); + initializeSpy.mockRestore(); + }); + + it('should use the hash prop if it exists', () => { + const blockSpy = jest.fn(); + const superSpy = jest.fn(); + const props = { + ...baseProps, + hash, + toggleBlock: blockSpy, + toggleSuperBlock: superSpy, + currentChallengeId + }; + + const mapToRender = ; + shallow(mapToRender); + + expect(blockSpy).toHaveBeenCalledTimes(1); + // the block here should always be the first block of the superblock + // this is tested implicitly, as there is a second block in the mock nodes + expect(blockSpy).toHaveBeenCalledWith(hashNode.block); + + expect(superSpy).toHaveBeenCalledTimes(1); + expect(superSpy).toHaveBeenCalledWith(hashNode.superBlock); + }); + + it('should use the currentChallengeId prop if there is no hash', () => { const blockSpy = jest.fn(); const superSpy = jest.fn(); const props = { ...baseProps, toggleBlock: blockSpy, toggleSuperBlock: superSpy, - currentChallengeId: currentChallengeId + currentChallengeId }; + const mapToRender = ; shallow(mapToRender); + expect(blockSpy).toHaveBeenCalledTimes(1); - expect(blockSpy).toHaveBeenCalledWith(mockChallengeNodes[7].block); + expect(blockSpy).toHaveBeenCalledWith(idNode.block); expect(superSpy).toHaveBeenCalledTimes(1); - expect(superSpy).toHaveBeenCalledWith(mockChallengeNodes[7].superBlock); - }); - - it('should use the currentChallengeId prop if it exists', () => { - const props = { ...baseProps, currentChallengeId }; - const mapToRender = ; - shallow(mapToRender); - - expect(initializeSpy).toHaveBeenCalledTimes(1); - expect(initializeSpy).toHaveBeenCalledWith(currentChallengeId); + expect(superSpy).toHaveBeenCalledWith(idNode.superBlock); }); it('should default to the first challenge otherwise', () => { @@ -85,10 +122,10 @@ describe('', () => { const mapToRender = ; shallow(mapToRender); expect(blockSpy).toHaveBeenCalledTimes(1); - expect(blockSpy).toHaveBeenCalledWith(mockChallengeNodes[0].block); + expect(blockSpy).toHaveBeenCalledWith(defaultNode.block); expect(superSpy).toHaveBeenCalledTimes(1); - expect(superSpy).toHaveBeenCalledWith(mockChallengeNodes[0].superBlock); + expect(superSpy).toHaveBeenCalledWith(defaultNode.superBlock); }); it('calls resetExpansion when initializing', () => { diff --git a/client/src/components/Map/__snapshots__/Map.test.js.snap b/client/src/components/Map/__snapshots__/Map.test.js.snap index f5c77dc6c0..f145b8a26b 100644 --- a/client/src/components/Map/__snapshots__/Map.test.js.snap +++ b/client/src/components/Map/__snapshots__/Map.test.js.snap @@ -120,7 +120,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-one", "fields": Object { "blockName": "Block A", - "slug": "/super-block-one/block-a/challenge-one", + "slug": "/super-block-two/block-a/challenge-one", }, "id": "f", "isPrivate": false, @@ -133,7 +133,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-two", "fields": Object { "blockName": "Block A", - "slug": "/super-block-one/block-a/challenge-two", + "slug": "/super-block-two/block-a/challenge-two", }, "id": "g", "isPrivate": false, @@ -146,7 +146,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-one", "fields": Object { "blockName": "Block B", - "slug": "/super-block-one/block-b/challenge-one", + "slug": "/super-block-two/block-b/challenge-one", }, "id": "h", "isPrivate": false, @@ -159,7 +159,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-two", "fields": Object { "blockName": "Block B", - "slug": "/super-block-one/block-b/challenge-two", + "slug": "/super-block-two/block-b/challenge-two", }, "id": "i", "isPrivate": false, @@ -167,6 +167,32 @@ exports[` snapshot: Map 1`] = ` "superBlock": "Super Block Two", "title": "Challenge Two", }, + Object { + "block": "block-a", + "dashedName": "challenge-one", + "fields": Object { + "blockName": "Block A", + "slug": "/super-block-three/block-a/challenge-one", + }, + "id": "j", + "isPrivate": false, + "isRequired": false, + "superBlock": "Super Block Three", + "title": "Challenge One", + }, + Object { + "block": "block-c", + "dashedName": "challenge-two", + "fields": Object { + "blockName": "Block C", + "slug": "/super-block-three/block-c/challenge-two", + }, + "id": "k", + "isPrivate": false, + "isRequired": false, + "superBlock": "Super Block Three", + "title": "Challenge Two", + }, ] } superBlock="Super Block One" @@ -275,7 +301,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-one", "fields": Object { "blockName": "Block A", - "slug": "/super-block-one/block-a/challenge-one", + "slug": "/super-block-two/block-a/challenge-one", }, "id": "f", "isPrivate": false, @@ -288,7 +314,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-two", "fields": Object { "blockName": "Block A", - "slug": "/super-block-one/block-a/challenge-two", + "slug": "/super-block-two/block-a/challenge-two", }, "id": "g", "isPrivate": false, @@ -301,7 +327,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-one", "fields": Object { "blockName": "Block B", - "slug": "/super-block-one/block-b/challenge-one", + "slug": "/super-block-two/block-b/challenge-one", }, "id": "h", "isPrivate": false, @@ -314,7 +340,7 @@ exports[` snapshot: Map 1`] = ` "dashedName": "challenge-two", "fields": Object { "blockName": "Block B", - "slug": "/super-block-one/block-b/challenge-two", + "slug": "/super-block-two/block-b/challenge-two", }, "id": "i", "isPrivate": false, @@ -322,10 +348,217 @@ exports[` snapshot: Map 1`] = ` "superBlock": "Super Block Two", "title": "Challenge Two", }, + Object { + "block": "block-a", + "dashedName": "challenge-one", + "fields": Object { + "blockName": "Block A", + "slug": "/super-block-three/block-a/challenge-one", + }, + "id": "j", + "isPrivate": false, + "isRequired": false, + "superBlock": "Super Block Three", + "title": "Challenge One", + }, + Object { + "block": "block-c", + "dashedName": "challenge-two", + "fields": Object { + "blockName": "Block C", + "slug": "/super-block-three/block-c/challenge-two", + }, + "id": "k", + "isPrivate": false, + "isRequired": false, + "superBlock": "Super Block Three", + "title": "Challenge Two", + }, ] } superBlock="Super Block Two" /> + diff --git a/client/src/components/Map/components/Block.js b/client/src/components/Map/components/Block.js index c9cad4d709..aff1187813 100644 --- a/client/src/components/Map/components/Block.js +++ b/client/src/components/Map/components/Block.js @@ -13,6 +13,7 @@ import { blockNameify } from '../../../../utils/blockNameify'; import GreenPass from '../../../assets/icons/GreenPass'; import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted'; import IntroInformation from '../../../assets/icons/IntroInformation'; +import { dasherize } from '../../../../../utils/slugs'; const mapStateToProps = (state, ownProps) => { const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName); @@ -92,6 +93,11 @@ export class Block extends Component { return (
  • diff --git a/client/src/components/Map/components/SuperBlock.js b/client/src/components/Map/components/SuperBlock.js index 96956c1c9b..411cd12906 100644 --- a/client/src/components/Map/components/SuperBlock.js +++ b/client/src/components/Map/components/SuperBlock.js @@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { uniq, find } from 'lodash'; +import { dasherize } from '../../../../../utils/slugs'; import Block from './Block'; @@ -88,7 +89,10 @@ export class SuperBlock extends Component { render() { const { superBlock, isExpanded, toggleSuperBlock } = this.props; return ( -
  • +
  • @@ -64,13 +64,14 @@ exports[` - 2/4 + 2/5
    • Challenge One
    • Challenge Two
      • +
    • + + + + + Challenge One + +
    • `; diff --git a/client/src/components/Map/components/__snapshots__/SuperBlock.test.js.snap b/client/src/components/Map/components/__snapshots__/SuperBlock.test.js.snap index 357972f458..ac74c8c7e8 100644 --- a/client/src/components/Map/components/__snapshots__/SuperBlock.test.js.snap +++ b/client/src/components/Map/components/__snapshots__/SuperBlock.test.js.snap @@ -3,6 +3,7 @@ exports[` expanded snapshot: superBlock-expanded 1`] = `