From 29b640f0191e87e012bdf8a4cc3709a5055dcd1c Mon Sep 17 00:00:00 2001 From: Aaron DeRuvo Date: Mon, 6 Jan 2020 18:38:27 -0800 Subject: [PATCH] Add Snapshot for each page on website (#2313) --- packages/web/.babelrc | 3 +- packages/web/__mocks__/ImageStub.ts | 1 + packages/web/__mocks__/cross-fetch.ts | 5 + packages/web/__mocks__/lottie-web.ts | 9 + packages/web/__mocks__/next/config.ts | 6 + packages/web/__mocks__/next/router.tsx | 8 + packages/web/__mocks__/nuka-carousel.tsx | 3 + .../web/__mocks__/react-lazyload-fadein.ts | 7 + packages/web/__mocks__/react-modal.tsx | 23 + packages/web/jest.config.js | 5 +- packages/web/jestSetup.js | 17 + packages/web/next.config.js | 6 +- packages/web/package.json | 3 + .../__snapshots__/_error.test.tsx.snap | 5387 ++++++ .../__snapshots__/about.test.tsx.snap | 3682 ++++ .../code-of-conduct.test.tsx.snap | 1816 ++ .../__snapshots__/community.test.tsx.snap | 7925 +++++++++ .../__snapshots__/faq.test.tsx.snap | 2036 +++ .../__snapshots__/index.test.tsx.snap | 4287 +++++ .../__snapshots__/jobs.test.tsx.snap | 13902 ++++++++++++++++ .../__snapshots__/past-events.test.tsx.snap | 493 + .../__snapshots__/privacy.test.tsx.snap | 3116 ++++ .../__snapshots__/terms.test.tsx.snap | 775 + .../user-agreement.test.tsx.snap | 352 + packages/web/src/_page-tests/_error.test.tsx | 10 + packages/web/src/_page-tests/about.test.tsx | 10 + .../__snapshots__/rise.test.tsx.snap | 3802 +++++ .../src/_page-tests/animation/rise.test.tsx | 10 + .../build/__snapshots__/faucet.test.tsx.snap | 1297 ++ .../build/__snapshots__/index.test.tsx.snap | 6386 +++++++ .../build/__snapshots__/wallet.test.tsx.snap | 1749 ++ .../web/src/_page-tests/build/faucet.test.tsx | 10 + .../web/src/_page-tests/build/index.test.tsx | 10 + .../web/src/_page-tests/build/wallet.test.tsx | 10 + .../src/_page-tests/code-of-conduct.test.tsx | 10 + .../web/src/_page-tests/community.test.tsx | 10 + .../__snapshots__/color.test.tsx.snap | 6063 +++++++ .../__snapshots__/icons.test.tsx.snap | 1744 ++ .../__snapshots__/index.test.tsx.snap | 1713 ++ .../__snapshots__/logo.test.tsx.snap | 6373 +++++++ .../__snapshots__/typography.test.tsx.snap | 3381 ++++ .../src/_page-tests/experience/color.test.tsx | 10 + .../src/_page-tests/experience/icons.test.tsx | 11 + .../src/_page-tests/experience/index.test.tsx | 11 + .../src/_page-tests/experience/logo.test.tsx | 11 + .../experience/typography.test.tsx | 11 + packages/web/src/_page-tests/faq.test.tsx | 10 + packages/web/src/_page-tests/index.test.tsx | 10 + packages/web/src/_page-tests/jobs.test.tsx | 52 + .../web/src/_page-tests/past-events.test.tsx | 10 + packages/web/src/_page-tests/privacy.test.tsx | 10 + .../__snapshots__/terms.test.tsx.snap | 1465 ++ .../src/_page-tests/stake-off/terms.test.tsx | 10 + packages/web/src/_page-tests/terms.test.tsx | 10 + .../src/_page-tests/user-agreement.test.tsx | 10 + packages/web/src/about/About.tsx | 19 +- packages/web/src/about/Tetris.tsx | 1 + packages/web/src/brandkit/color/Palette.tsx | 1 + packages/web/src/brandkit/common/Page.tsx | 5 +- .../web/src/brandkit/common/SectionTitle.tsx | 1 + packages/web/src/brandkit/common/TopBar.tsx | 1 + .../web/src/brandkit/tests/Showcase.test.tsx | 20 - .../__snapshots__/Showcase.test.tsx.snap | 244 - packages/web/src/carousel/PagingDots.tsx | 1 + .../web/src/community/connect/Contribute.tsx | 1 + .../web/src/community/connect/FullCircle.tsx | 6 - packages/web/src/dev/Features.tsx | 4 +- packages/web/src/download/AppStores.tsx | 4 +- packages/web/src/header/OpenGraph.tsx | 2 +- .../web/src/home/carousel/CarouselDot.tsx | 1 + packages/web/src/icons/Arrow.tsx | 2 +- packages/web/src/shared/ConnectionFooter.tsx | 1 + packages/web/src/shared/SocialChannels.tsx | 14 +- packages/web/src/shared/Spinner.tsx | 4 +- packages/web/src/shared/navigation.tsx | 1 + packages/web/static/locales/en/about.json | 30 +- yarn.lock | 37 +- 77 files changed, 78174 insertions(+), 322 deletions(-) create mode 100644 packages/web/__mocks__/ImageStub.ts create mode 100644 packages/web/__mocks__/cross-fetch.ts create mode 100644 packages/web/__mocks__/lottie-web.ts create mode 100644 packages/web/__mocks__/next/config.ts create mode 100644 packages/web/__mocks__/next/router.tsx create mode 100644 packages/web/__mocks__/nuka-carousel.tsx create mode 100644 packages/web/__mocks__/react-lazyload-fadein.ts create mode 100644 packages/web/__mocks__/react-modal.tsx create mode 100644 packages/web/jestSetup.js create mode 100644 packages/web/src/_page-tests/__snapshots__/_error.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/code-of-conduct.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/community.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/faq.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/index.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/jobs.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/past-events.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/privacy.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/terms.test.tsx.snap create mode 100644 packages/web/src/_page-tests/__snapshots__/user-agreement.test.tsx.snap create mode 100644 packages/web/src/_page-tests/_error.test.tsx create mode 100644 packages/web/src/_page-tests/about.test.tsx create mode 100644 packages/web/src/_page-tests/animation/__snapshots__/rise.test.tsx.snap create mode 100644 packages/web/src/_page-tests/animation/rise.test.tsx create mode 100644 packages/web/src/_page-tests/build/__snapshots__/faucet.test.tsx.snap create mode 100644 packages/web/src/_page-tests/build/__snapshots__/index.test.tsx.snap create mode 100644 packages/web/src/_page-tests/build/__snapshots__/wallet.test.tsx.snap create mode 100644 packages/web/src/_page-tests/build/faucet.test.tsx create mode 100644 packages/web/src/_page-tests/build/index.test.tsx create mode 100644 packages/web/src/_page-tests/build/wallet.test.tsx create mode 100644 packages/web/src/_page-tests/code-of-conduct.test.tsx create mode 100644 packages/web/src/_page-tests/community.test.tsx create mode 100644 packages/web/src/_page-tests/experience/__snapshots__/color.test.tsx.snap create mode 100644 packages/web/src/_page-tests/experience/__snapshots__/icons.test.tsx.snap create mode 100644 packages/web/src/_page-tests/experience/__snapshots__/index.test.tsx.snap create mode 100644 packages/web/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap create mode 100644 packages/web/src/_page-tests/experience/__snapshots__/typography.test.tsx.snap create mode 100644 packages/web/src/_page-tests/experience/color.test.tsx create mode 100644 packages/web/src/_page-tests/experience/icons.test.tsx create mode 100644 packages/web/src/_page-tests/experience/index.test.tsx create mode 100644 packages/web/src/_page-tests/experience/logo.test.tsx create mode 100644 packages/web/src/_page-tests/experience/typography.test.tsx create mode 100644 packages/web/src/_page-tests/faq.test.tsx create mode 100644 packages/web/src/_page-tests/index.test.tsx create mode 100644 packages/web/src/_page-tests/jobs.test.tsx create mode 100644 packages/web/src/_page-tests/past-events.test.tsx create mode 100644 packages/web/src/_page-tests/privacy.test.tsx create mode 100644 packages/web/src/_page-tests/stake-off/__snapshots__/terms.test.tsx.snap create mode 100644 packages/web/src/_page-tests/stake-off/terms.test.tsx create mode 100644 packages/web/src/_page-tests/terms.test.tsx create mode 100644 packages/web/src/_page-tests/user-agreement.test.tsx delete mode 100644 packages/web/src/brandkit/tests/Showcase.test.tsx delete mode 100644 packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap diff --git a/packages/web/.babelrc b/packages/web/.babelrc index b6cf7856bc8..29f2f25329c 100644 --- a/packages/web/.babelrc +++ b/packages/web/.babelrc @@ -7,7 +7,8 @@ "root": ["./"], "alias": { "src": "./src", - "server": "./server" + "server": "./server", + "pages": "./pages" } } ], diff --git a/packages/web/__mocks__/ImageStub.ts b/packages/web/__mocks__/ImageStub.ts new file mode 100644 index 00000000000..6c7e295758a --- /dev/null +++ b/packages/web/__mocks__/ImageStub.ts @@ -0,0 +1 @@ +export default 'image.png' diff --git a/packages/web/__mocks__/cross-fetch.ts b/packages/web/__mocks__/cross-fetch.ts new file mode 100644 index 00000000000..a2579f40e28 --- /dev/null +++ b/packages/web/__mocks__/cross-fetch.ts @@ -0,0 +1,5 @@ +export default function FetchMock() { + return Promise.resolve({ + json: () => [], + }) +} diff --git a/packages/web/__mocks__/lottie-web.ts b/packages/web/__mocks__/lottie-web.ts new file mode 100644 index 00000000000..a68d4a914e8 --- /dev/null +++ b/packages/web/__mocks__/lottie-web.ts @@ -0,0 +1,9 @@ +export default { + loadAnimation: function loadAnimation() { + return { + destroy: function destroy() { + return null + }, + } + }, +} diff --git a/packages/web/__mocks__/next/config.ts b/packages/web/__mocks__/next/config.ts new file mode 100644 index 00000000000..7ee8481aacc --- /dev/null +++ b/packages/web/__mocks__/next/config.ts @@ -0,0 +1,6 @@ +export default function getConfig() { + return { + publicRuntimeConfig: { FLAGS: {} }, + serverRunTimeConfig: {}, + } +} diff --git a/packages/web/__mocks__/next/router.tsx b/packages/web/__mocks__/next/router.tsx new file mode 100644 index 00000000000..64972ec3229 --- /dev/null +++ b/packages/web/__mocks__/next/router.tsx @@ -0,0 +1,8 @@ +import * as React from 'react' +export const SingletonRouter = {} + +export function withRouter(Component) { + return function Wrapped(props) { + return + } +} diff --git a/packages/web/__mocks__/nuka-carousel.tsx b/packages/web/__mocks__/nuka-carousel.tsx new file mode 100644 index 00000000000..1cfb2ac19ae --- /dev/null +++ b/packages/web/__mocks__/nuka-carousel.tsx @@ -0,0 +1,3 @@ +export default function MockCarousel({ children }) { + return children +} diff --git a/packages/web/__mocks__/react-lazyload-fadein.ts b/packages/web/__mocks__/react-lazyload-fadein.ts new file mode 100644 index 00000000000..3c815dbd17b --- /dev/null +++ b/packages/web/__mocks__/react-lazyload-fadein.ts @@ -0,0 +1,7 @@ +export default function MockLazy({ children }) { + return children(funct) +} + +function funct() { + return null +} diff --git a/packages/web/__mocks__/react-modal.tsx b/packages/web/__mocks__/react-modal.tsx new file mode 100644 index 00000000000..28f41fa0a7d --- /dev/null +++ b/packages/web/__mocks__/react-modal.tsx @@ -0,0 +1,23 @@ +import * as React from 'react' + +interface Props { + id: string + isOpen: boolean + contentLabel: string + overlayClassName: string + className: any + parentSelector: any + shouldCloseOnOverlayClick(): void + onRequestClose(): void + onAfterOpen(): void +} + +export default class MockReactModal extends React.Component { + static setAppElement() { + return null + } + + render() { + return
{this.props.isOpen && this.props.children}
+ } +} diff --git a/packages/web/jest.config.js b/packages/web/jest.config.js index 27180ac8b6c..749a0165d58 100644 --- a/packages/web/jest.config.js +++ b/packages/web/jest.config.js @@ -8,9 +8,12 @@ module.exports = { tsConfig: 'tsconfig.jest.json', }, }, + setupFiles: ['./jestSetup.js', 'jest-canvas-mock'], moduleNameMapper: { + '\\.(png|jpg|jpeg)$': '/__mocks__/ImageStub.ts', + 'pages/(.*)$': '/pages/$1', 'src/(.*)$': '/src/$1', }, preset: 'react-native-web', - testEnvironment: 'node', + testEnvironment: 'jsdom', } diff --git a/packages/web/jestSetup.js b/packages/web/jestSetup.js new file mode 100644 index 00000000000..a6d71756de5 --- /dev/null +++ b/packages/web/jestSetup.js @@ -0,0 +1,17 @@ +const originalConsoleError = console.error + +// proptype warnings make tests impossible to understand +console.error = (message) => { + if (/(Failed prop type)/.test(message)) { + return + } + + originalConsoleError(message) +} + +// ensure random is predictable +Math.random = function random() { + return 0.5 +} + +require('jest-fetch-mock').enableMocks() diff --git a/packages/web/next.config.js b/packages/web/next.config.js index 956774e6f8b..792381d7473 100644 --- a/packages/web/next.config.js +++ b/packages/web/next.config.js @@ -1,6 +1,5 @@ const withSass = require('@zeit/next-sass') const withImages = require('next-images') -const webpack = require('webpack') const envConfig = require('./env-config') const serverEnvConfig = require('./server-env-config') @@ -26,6 +25,11 @@ module.exports = withImages( config.resolve.alias['@sentry/node'] = '@sentry/browser' } + config.module.rules.push({ + loader: 'ignore-loader', + test: /\.test.ts$/, + }) + return config }, }) diff --git a/packages/web/package.json b/packages/web/package.json index 4dea03b36a5..a60fedba2b9 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -97,9 +97,12 @@ "babel-plugin-react-native-web": "^0.11.7", "cross-env": "^5.1.6", "node-sass": "^4.13.0", + "jest-canvas-mock": "^2.2.0", + "jest-fetch-mock": "^3.0.0", "nodemon": "^2.0.2", "postcss-scss": "^2.0.0", "react-native-svg": "^9.13.6", + "ignore-loader": "~0.1.2", "webpack": "4.41.2" } } diff --git a/packages/web/src/_page-tests/__snapshots__/_error.test.tsx.snap b/packages/web/src/_page-tests/__snapshots__/_error.test.tsx.snap new file mode 100644 index 00000000000..4015b02cbdd --- /dev/null +++ b/packages/web/src/_page-tests/__snapshots__/_error.test.tsx.snap @@ -0,0 +1,5387 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Error renders 1`] = ` +
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+ 404 +
+
+ We can't find the page you are looking for +
+ +
+
+
+`; diff --git a/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap b/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap new file mode 100644 index 00000000000..c51108922c7 --- /dev/null +++ b/packages/web/src/_page-tests/__snapshots__/about.test.tsx.snap @@ -0,0 +1,3682 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`About renders 1`] = ` +
+
+
+