diff --git a/client/src/__tests__/__snapshots__/app.snapshot.not-recommended.js.snap b/client/src/__tests__/__snapshots__/app.snapshot.not-recommended.js.snap new file mode 100644 index 00000000..2b675d75 --- /dev/null +++ b/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; + } +} + +
+
+
+ + + + + + +
+
+
+

+ + Today +
+ + I Learned + + +

+ + Inspired by + + + til.hashrocket.com + + +
+
+
+
+ + chucknorris + + + Logout + + + + + + + + + +
+
+
+
+
+
+
+
+
+`; diff --git a/client/src/__tests__/app.snapshot.not-recommended.js b/client/src/__tests__/app.snapshot.not-recommended.js new file mode 100644 index 00000000..bfb04dcb --- /dev/null +++ b/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() + + // wait for /me request to settle + await flushPromises() + expect(container.firstChild).toMatchSnapshot() +})