Feature/react spring (#11)

* Add moving logo to landing

* Fix tests

* Add travis config

* Try caching some directories Travis

* Fix testing

* Fix uppercase typo

* Update snapshots

* Add image snapshot of homepage

* Fix what to screenshot

* Fix tests for now

.gitignore

@@ -10,4 +10,5 @@ node_modules
 coverage
 
 # Cypress
-cypress/videos
+cypress/videos
+cypress/**/__diff_output__

.travis.yml

@@ -2,6 +2,10 @@ language: node_js
 sudo: false
 node_js:
   - 11.13.0
+addons:
+  apt:
+    packages:
+    - libgconf-2-4
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH="$HOME/.yarn/bin:$PATH"
@@ -11,6 +15,10 @@ stages:
   - test
   - build
   - lint
+cache:
+  npm: true
+  directories:
+    - ~/.cache
 jobs:
   include:
     - stage: test

cypress/plugins/index.js

@@ -1,17 +1,7 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
+const {
+  addMatchImageSnapshotPlugin
+} = require("cypress-image-snapshot/plugin");
 
 module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}
+  addMatchImageSnapshotPlugin(on, config);
+};

cypress/support/commands.js

@@ -1,3 +1,7 @@
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
+
+addMatchImageSnapshotCommand();
+
 Cypress.Commands.add("isInViewport", element => {
   cy.get(element).then($el => {
     const height = Cypress.$(cy.state("window")).height();

next.config.js

@@ -1,6 +1,9 @@
 const withCSS = require("@zeit/next-css");
 const withTypescript = require("@zeit/next-typescript");
 const withSass = require("@zeit/next-sass");
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true"
+});
 
 const payload = {
   cssModules: true,
@@ -14,4 +17,4 @@ if (process.env.__NEXT_BUILDER_EXPERIMENTAL_TARGET) {
   payload.target = process.env.__NEXT_BUILDER_EXPERIMENTAL_TARGET;
 }
 
-module.exports = withTypescript(withSass(withCSS(payload)));
+module.exports = withBundleAnalyzer(withTypescript(withSass(withCSS(payload))));

package.json

@@ -29,7 +29,7 @@
   "license": "ISC",
   "jest": {
     "automock": false,
-    "setupFiles": [
+    "setupFilesAfterEnv": [
       "./setup-jest.js"
     ],
     "moduleNameMapper": {
@@ -43,6 +43,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.8.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@marvelapp/react-ab-test": "^2.2.0",
+    "@next/bundle-analyzer": "^9.0.3",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-sass": "^1.0.1",
     "@zeit/next-typescript": "^1.1.1",
@@ -54,39 +55,44 @@
     "effector": "^0.18.6",
     "effector-react": "^0.18.9",
     "isomorphic-unfetch": "^3.0.0",
-    "jest": "^24.7.1",
     "jump.js": "^1.0.2",
     "next": "8.0.3",
     "node-sass": "^4.12.0",
     "now": "^15.2.0",
     "plop": "^2.3.0",
     "prettier": "^1.17.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-spring": "^9.0.0-beta.31",
+    "react-test-renderer": "^16.9.0",
     "styletron-engine-atomic": "^1.1.1",
-    "styletron-react": "^5.0.0"
+    "styletron-react": "^5.0.0",
+    "unistore": "^3.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@fortawesome/fontawesome-common-types": "^0.2.18",
     "@storybook/react": "^5.0.11",
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^9.1.1",
     "@types/classnames": "^2.2.7",
     "@types/date-fns": "^2.6.0",
     "@types/jump.js": "^1.0.2",
     "@types/next": "^8.0.5",
     "@types/node": "^11.13.9",
     "@types/react": "^16.8.15",
     "@types/storybook__react": "^4.0.1",
+    "@zeit/next-bundle-analyzer": "^0.1.2",
     "babel-loader": "^8.0.5",
     "babel-preset-react-app": "^8.0.0",
     "coveralls": "^3.0.3",
+    "cypress-image-snapshot": "^3.1.1",
     "fork-ts-checker-webpack-plugin": "^1.3.0",
+    "jest": "^24.8.0",
     "jest-css-modules": "^2.0.0",
-    "jest-dom": "^3.3.0",
     "jest-fetch-mock": "^2.1.2",
-    "react-testing-library": "^7.0.1",
+    "next-progressbar": "^1.0.0",
     "start-server-and-test": "^1.9.0",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",

setup-jest.js

@@ -1 +1,3 @@
+require("@testing-library/jest-dom/extend-expect");
+
 global.fetch = require("jest-fetch-mock");

src/components/analytics/full-story.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
-import { render, fireEvent, cleanup } from "react-testing-library";
+import { render, fireEvent, cleanup } from "@testing-library/react";
 
 import FullStory, { sendEvent } from "./full-story";
 

src/components/analytics/google-analytics.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
-import { render, fireEvent, cleanup } from "react-testing-library";
+import { render, fireEvent, cleanup } from "@testing-library/react";
 
 import GoogleAnalytics, { sendEvent } from "./google-analytics";
 

src/components/analytics/mixpanel.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
-import { render, fireEvent, cleanup } from "react-testing-library";
+import { render, fireEvent, cleanup } from "@testing-library/react";
 
 import MixPanel, { sendEvent } from "./mixpanel";
 

src/components/landing/__snapshots__/landing.test.js.snap

@@ -2,65 +2,80 @@
 
 exports[`Landing matches the snapshot 1`] = `
 <section
-  className="hero is-fullheight is-info"
+  class="hero is-fullheight is-info"
   id="landing"
 >
   <div
-    className="hero-body"
+    class="hero-body"
   >
     <div
-      className="container container"
+      class="container container"
     >
-      <img
-        className="logo logo"
-        src="/static/assets/images/snowflake.svg"
-      />
+      <div
+        class="logoContainer"
+      >
+        <div
+          class="logo logo"
+          style="transform: translate3d(0px,0px,0);"
+        >
+          <img
+            class="logo logo"
+            src="/static/assets/images/snowflake_background.svg"
+          />
+        </div>
+        <div
+          class="logo logo"
+          style="transform: translate3d(0px,0px,0);"
+        >
+          <img
+            class="logo logo"
+            src="/static/assets/images/snowflake_S.svg"
+          />
+        </div>
+      </div>
       <h1
-        className="title"
+        class="title"
       >
         Snowflake Webdesign
       </h1>
       <h2
-        className="subtitle"
+        class="subtitle"
       >
         For a life full of fluffiness
       </h2>
     </div>
   </div>
   <div
-    className="hero-foot has-text-centered"
+    class="hero-foot has-text-centered"
   >
     <div
-      className="ripplePlaceholder"
-      data-testid="landing-cta"
+      class="ripplePlaceholder"
     >
       <a
-        className="button is-success button nextButton"
-        onClick={[Function]}
+        class="button is-success button nextButton"
+        data-testid="landing-cta"
       >
         <svg
           aria-hidden="true"
-          className="svg-inline--fa fa-arrow-down fa-w-14 "
+          class="svg-inline--fa fa-arrow-down fa-w-14 "
           data-icon="arrow-down"
           data-prefix="fas"
           focusable="false"
           role="img"
-          style={Object {}}
           viewBox="0 0 448 512"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"
             fill="currentColor"
-            style={Object {}}
           />
         </svg>
       </a>
       <div
-        className="ripple"
+        class="ripple"
       />
       <div
-        className="rippleDelay"
+        class="rippleDelay"
       />
     </div>
   </div>

src/components/landing/components/ripple-button/ripple-button.tsx

@@ -9,7 +9,7 @@ import styles from "./ripple-button.module.scss";
 
 library.add(faArrowDown);
 
-function RippleButton({ onClick, ...props }: Props) {
+function RippleButton({ onClick, "data-testid": dataTestid, ...props }: Props) {
   return (
     <div className={styles.ripplePlaceholder} {...props}>
       <a
@@ -18,6 +18,7 @@ function RippleButton({ onClick, ...props }: Props) {
           styles.button,
           styles.nextButton
         )}
+        data-testid={dataTestid}
         onClick={onClick}
       >
         <FontAwesomeIcon icon="arrow-down" />
@@ -29,10 +30,12 @@ function RippleButton({ onClick, ...props }: Props) {
 }
 
 interface Props {
+  "data-testid": string;
   onClick: () => void;
 }
 
 RippleButton.propTypes = {
+  "data-testid": PropTypes.string,
   onClick: PropTypes.func.isRequired
 };
 

src/components/landing/landing.module.scss

@@ -1,10 +1,24 @@
+$size: 300px;
+
 .container {
   text-align: center;
 }
 
 .logo {
-  min-height: 300px;
-  min-width: 300px;
-  max-width: 50vh;
-  max-height: 50vh;
+  position: absolute;
+  height: 100%;
+  width: $size;
+  top: 50%;
+  left: 50%;
+  margin-top: -$size / 2;
+  margin-left: -$size / 2;
+}
+
+.logoContainer {
+  height: $size;
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

src/components/landing/landing.module.scss.d.ts

@@ -1,2 +1,3 @@
 export const container: string;
 export const logo: string;
+export const logoContainer: string;

src/components/landing/landing.test.js

@@ -2,7 +2,8 @@ jest.mock("jump.js");
 
 import React from "react";
 import ReactDOM from "react-dom";
-import renderer from "react-test-renderer";
+
+import { render, fireEvent } from "@testing-library/react";
 
 import Landing from "./landing";
 
@@ -19,26 +20,20 @@ describe("Landing", () => {
   });
 
   it("matches the snapshot", () => {
-    const component = renderer.create(<Landing />);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(<Landing />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
 
 describe("#navToPortfolio", () => {
-  let component;
-  beforeEach(() => {
-    component = renderer.create(<Landing />);
-  });
-
-  it("calls sendEvents with Landing CTA", () => {
+  it("calls sendEvents with Landing CTA", async () => {
     fullStory.sendEvent = jest.fn();
     mixpanel.sendEvent = jest.fn();
     ga.sendEvent = jest.fn();
 
-    const rootInstance = component.root;
-    const $cta = rootInstance.findByProps({ "data-testid": "landing-cta" });
-    $cta.props.onClick();
+    const { getByTestId } = render(<Landing />);
+    const $cta = getByTestId("landing-cta");
+    const resp = fireEvent.click($cta);
 
     expect(fullStory.sendEvent).toHaveBeenCalledWith("Landing CTA");
     expect(mixpanel.sendEvent).toHaveBeenCalledWith("Landing CTA");