diff --git a/.gitignore b/.gitignore index 532eddc..bdd26ae 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -.env \ No newline at end of file +.env +src/__snapshots__ +src/components/**/__snapshots__ diff --git a/package.json b/package.json index 2a0def3..d4d9efe 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", - "test": "node scripts/test.js" + "test": "node scripts/test.js --watchAll" }, "browserslist": [ ">0.2%", @@ -68,11 +68,12 @@ ], "resolver": "jest-pnp-resolver", "setupFiles": [ - "react-app-polyfill/jsdom" + "react-app-polyfill/jsdom", + "/src/test-setup.js" ], "testMatch": [ - "/src/**/__tests__/**/*.{js,jsx,ts,tsx}", - "/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}" + "/src/App.test.jsx", + "/src/components/**/*.(spec|test).{js,jsx,ts,tsx}" ], "testEnvironment": "jsdom", "testURL": "http://localhost", @@ -124,6 +125,7 @@ "jest-pnp-resolver": "1.0.2", "jest-resolve": "23.6.0", "jest-watch-typeahead": "^0.2.1", - "react-dev-utils": "^8.0.0" + "react-dev-utils": "^8.0.0", + "react-test-renderer": "^16.8.6" } } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b20..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/App.test.jsx b/src/App.test.jsx new file mode 100644 index 0000000..4e19741 --- /dev/null +++ b/src/App.test.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import renderer from "react-test-renderer"; +import { Provider } from "react-redux"; +import App from "./App"; +import { routineTests } from "./components/test-utils"; +import { store } from "./redux"; + +describe("App root", () => { + const component = ( + + + + ); + + routineTests(component); +}); diff --git a/src/components/dialog/Dialog.test.jsx b/src/components/dialog/Dialog.test.jsx new file mode 100644 index 0000000..2711945 --- /dev/null +++ b/src/components/dialog/Dialog.test.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import { Button } from "evergreen-ui"; +import { routineTests } from "../test-utils"; +import Dialog from "./Dialog"; + +describe("Dialog", () => { + let dialog; + + beforeEach(() => { + dialog = ( + undefined} + title="Sample Dialog" + trigger={} + > +

Sample Dialog content

+
+ ); + }); + + routineTests(dialog); +}); diff --git a/src/components/dialog/NewTaskDialog.test.jsx b/src/components/dialog/NewTaskDialog.test.jsx new file mode 100644 index 0000000..c0bf0ef --- /dev/null +++ b/src/components/dialog/NewTaskDialog.test.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import NewTaskDialog from "./NewTaskDialog"; +import { routineTests } from "../test-utils"; + +describe("Dialog", () => { + let dialog; + + beforeEach(() => { + dialog = undefined} />; + }); + + routineTests(dialog); +}); diff --git a/src/components/select-menu/SelectMenu.test.jsx b/src/components/select-menu/SelectMenu.test.jsx new file mode 100644 index 0000000..5b80726 --- /dev/null +++ b/src/components/select-menu/SelectMenu.test.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import SelectMenu from "./SelectMenu"; +import { routineTests } from "../test-utils"; + +describe("Dialog", () => { + let selectMenu; + + beforeEach(() => { + selectMenu = ( + undefined} + /> + ); + }); + + routineTests(selectMenu); +}); diff --git a/src/components/task/Task.test.jsx b/src/components/task/Task.test.jsx new file mode 100644 index 0000000..496f706 --- /dev/null +++ b/src/components/task/Task.test.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import Task from "./Task"; +import { emptyFiller, routineTests } from "../test-utils"; + +describe("Task", () => { + let task; + + beforeEach(() => { + task = ( + + ); + }); + + routineTests(task); +}); diff --git a/src/components/task/TaskLane.test.jsx b/src/components/task/TaskLane.test.jsx new file mode 100644 index 0000000..6cbf21e --- /dev/null +++ b/src/components/task/TaskLane.test.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import Task from "./Task"; +import TaskLane from "./TaskLane"; +import { emptyFiller, routineTests } from "../test-utils"; + +describe("TaskLane", () => { + let taskLane; + + beforeEach(() => { + taskLane = ( + + + + + ); + }); + + routineTests(taskLane); +}); diff --git a/src/components/test-utils.js b/src/components/test-utils.js new file mode 100644 index 0000000..7d95b35 --- /dev/null +++ b/src/components/test-utils.js @@ -0,0 +1,23 @@ +import ReactDOM from "react-dom"; +import renderer from "react-test-renderer"; + +export const emptyFiller = () => undefined; + +export const renderWithoutCrashing = component => + test(`renders without crashing`, () => { + const div = document.createElement("div"); + ReactDOM.render(component, div); + ReactDOM.unmountComponentAtNode(div); + }); + +export const renderSameSnapshot = component => + test("renders the same snapshot", () => { + const output = renderer.create(component); + const tree = output.toJSON(); + expect(tree).toMatchSnapshot(); + }); + +export const routineTests = component => { + renderWithoutCrashing(component); + renderSameSnapshot(component); +}; diff --git a/src/components/topbar/Topbar.test.jsx b/src/components/topbar/Topbar.test.jsx new file mode 100644 index 0000000..724919a --- /dev/null +++ b/src/components/topbar/Topbar.test.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import Topbar from "./Topbar"; +import { routineTests } from "../test-utils"; + +describe("Topbar", () => { + let topbar; + + beforeEach(() => { + topbar = ( + +

Test

+
+ ); + }); + + routineTests(topbar); +}); diff --git a/src/test-setup.js b/src/test-setup.js new file mode 100644 index 0000000..91606c9 --- /dev/null +++ b/src/test-setup.js @@ -0,0 +1,4 @@ +/* eslint no-console: 0 */ +// Evergreen keeps spitting out console warnings about a deprecated CSS prop which we're not using; +// it clobs up the jest unit test output! Disable warnings. +console.warn = jest.fn(); diff --git a/yarn.lock b/yarn.lock index 8f1cf6e..527f4f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8499,6 +8499,16 @@ react-scrollbar-size@^2.0.2: react-event-listener "^0.5.1" stifle "^1.0.2" +react-test-renderer@^16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1" + integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.6.2" + react-is "^16.8.6" + scheduler "^0.13.6" + react-tiny-virtual-list@^2.1.4: version "2.2.0" resolved "https://registry.yarnpkg.com/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.0.tgz#eafb6fcf764e4ed41150ff9752cdaad8b35edf4a"