add bad snapshot

client/src/__tests__/__snapshots__/app.snapshot.not-recommended.js.snap

@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+.css-0,
+[data-css-0] {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0px;
+  -webkit-box-lines: multiple;
+  -webkit-flex-wrap: wrap;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+}
+
+.css-1,
+[data-css-1] {
+  width: 25%;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  justify-content: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+}
+
+.css-2,
+[data-css-2] {
+  border: none;
+  background-color: transparent;
+  outline: none;
+}
+
+.css-3,
+[data-css-3] {
+  width: 55px;
+  background: white;
+  box-shadow: var(--shadow);
+  border-radius: 20px;
+  padding: 15px;
+  margin-right: 15px;
+  cursor: pointer;
+  transition: 0.5s;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+}
+
+.css-3:hover,
+[data-css-3]:hover {
+  box-shadow: var(--shadowHover);
+}
+
+.css-5,
+[data-css-5] {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.css-5 > div,
+[data-css-5] > div {
+  border-radius: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  background: white;
+  text-align: center;
+  padding: 30px 50px;
+  box-shadow: var(--shadow);
+}
+
+.css-6,
+[data-css-6] {
+  color: var(--green);
+  font-size: 50px;
+  line-height: 40px;
+  text-transform: upperase;
+}
+
+.css-7,
+[data-css-7] {
+  color: var(--black);
+}
+
+.css-8,
+[data-css-8] {
+  transition: 0.5s;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+}
+
+.css-8:hover,
+[data-css-8]:hover {
+  color: var(--green);
+}
+
+.css-10,
+[data-css-10] {
+  background: white;
+  box-shadow: var(--shadow);
+  border-radius: 15px;
+  padding: 15px;
+  margin-left: 15px;
+  cursor: pointer;
+  transition: 0.5s;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+}
+
+.css-10:hover,
+[data-css-10]:hover {
+  box-shadow: var(--shadowHover);
+}
+
+.css-12,
+[data-css-12] {
+  background: var(--green);
+  box-shadow: var(--shadow);
+  color: white;
+  font-size: 40px;
+  border-radius: 15px;
+  padding: 15px;
+  line-height: 0.5;
+  transition: 0.5s;
+  cursor: pointer;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+}
+
+.css-12:hover,
+[data-css-12]:hover {
+  box-shadow: var(--shadowHover);
+}
+
+@media only screen and (max-width: 819px) {
+  .css-1,
+  [data-css-1] {
+    order: 1;
+    margin-top: 10px;
+    flex: 1;
+    -webkit-order: 1;
+    -webkit-flex: 1;
+  }
+}
+
+@media only screen and (max-width: 819px) {
+  .css-5,
+  [data-css-5] {
+    order: 0;
+    width: 100%;
+    -webkit-order: 0;
+  }
+}
+
+<div>
+  <div
+    class="css-0"
+  >
+    <div
+      class="css-1"
+    >
+      <a
+        class="css-2"
+        href="https://twitter.com/kentcdodds"
+      >
+        <img
+          class="css-3"
+          src="SVG"
+        />
+      </a>
+      <a
+        class="css-2"
+        href="https://github.com/kentcdodds/testing-workshop"
+      >
+        <img
+          class="css-3"
+          src="SVG"
+        />
+      </a>
+    </div>
+    <div
+      class="css-5"
+    >
+      <div>
+        <h1
+          class="css-6"
+        >
+          <a
+            href="/"
+          >
+            Today
+            <br />
+            <span
+              class="css-7"
+            >
+              I Learned
+            </span>
+          </a>
+        </h1>
+        <small
+          class="css-8"
+        >
+          Inspired by
+           
+          <a
+            href="https://til.hashrocket.com/"
+          >
+            til.hashrocket.com
+          </a>
+        </small>
+      </div>
+    </div>
+    <div
+      class="css-1"
+    >
+      <div>
+        <span
+          class="css-10"
+          data-testid="username-display"
+        >
+          chucknorris
+        </span>
+        <span
+          class="css-10"
+        >
+          Logout
+        </span>
+        <span
+          class="css-12"
+        >
+          <a
+            href="/editor"
+          >
+            <span>
+              +
+            </span>
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div />
+    </div>
+  </div>
+</div>
+`;

client/src/__tests__/app.snapshot.not-recommended.js

@@ -0,0 +1,49 @@
+/*
+ * This is an example of integration tests for the client
+ * They're still fairly react-specific, but less-so than
+ * the unit tests. They are also quite longer than
+ * unit tests. They cover more code than the unit tests
+ * per test.
+ */
+
+import React from 'react'
+import axiosMock from 'axios'
+import {renderWithRouter, flushPromises, generate} from 'client-test-utils'
+import {init as initAPI} from '../utils/api'
+import App from '../app'
+
+beforeEach(() => {
+  window.localStorage.removeItem('token')
+  axiosMock.__mock.reset()
+  initAPI()
+})
+
+test('snapshot', async () => {
+  // setup things to simulate being logged in
+  const {get} = axiosMock.__mock.instance
+  const fakeToken = 'my.fake.token'
+  window.localStorage.setItem('token', fakeToken)
+  initAPI()
+  const fakeUser = {
+    username: 'chucknorris',
+    id: 'abc-123',
+    token: fakeToken,
+  }
+  get.mockImplementation(url => {
+    if (url === '/auth/me') {
+      return Promise.resolve({data: {user: fakeUser}})
+    } else if (url === '/users') {
+      return Promise.resolve({data: {users: [fakeUser]}})
+    } else if (url === '/posts') {
+      return Promise.resolve({data: {posts: []}})
+    } else {
+      throw new Error(`Unexpected request to ${url}`)
+    }
+  })
+
+  const {container} = renderWithRouter(<App />)
+
+  // wait for /me request to settle
+  await flushPromises()
+  expect(container.firstChild).toMatchSnapshot()
+})