Merge pull request #8 from cloudhx/iss1

Basic testing has been included and is ready for merging into master

Author: cloudhx

package-lock.json

@@ -35,6 +35,14 @@
     ]
   },
   "devDependencies": {
-    "redux-immutable-state-invariant": "^2.1.0"
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.3.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "fetch-mock": "^7.5.1",
+    "node-fetch": "^2.6.0",
+    "react-test-renderer": "^16.10.2",
+    "redux-immutable-state-invariant": "^2.1.0",
+    "redux-mock-store": "^1.5.3"
   }
 }

package.json

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { MemoryRouter } from "react-router-dom";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

src/App.test.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { MemoryRouter } from "react-router-dom";
+import IssueList from "./IssueList";
+import { issues } from "../../tools/mockData";
+
+function renderIssueList(args) {
+  let defaultProps = {
+    issues: [],
+    closing: false,
+    onCloseClick: () => {}
+  };
+  const props = { ...defaultProps, ...args };
+  return render(
+    <MemoryRouter>
+      <IssueList {...props} />
+    </MemoryRouter>
+  );
+}
+
+test("lists all issues", () => {
+  const { getAllByText } = renderIssueList({
+    issues: issues
+  });
+
+  expect(getAllByText(/close/i)).toHaveLength(issues.length);
+  // just like a manual tester, we'll instruct our test to wait for the alert
+  // to show up before continuing with our assertions.
+  //const alert = await findByRole("alert");
+
+  // .toHaveTextContent() comes from jest-dom's assertions
+  // otherwise you could use expect(alert.textContent).toMatch(/congrats/i)
+  // but jest-dom will give you better error messages which is why it's recommended
+  //expect(alert).toHaveTextContent(/congrats/i);
+  //expect(window.localStorage.getItem("token")).toEqual(fakeUserResponse.token);
+});

src/components/App.test.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import TokenForm from "./TokenForm";
+
+function renderTokenForm(args) {
+  let defaultProps = {
+    token: "",
+    errors: {},
+    saving: false,
+    onSave: () => {},
+    onChange: () => {}
+  };
+
+  const props = { ...defaultProps, ...args };
+  return render(<TokenForm {...props} />);
+}
+
+test('labels save button as "Save" when not saving', () => {
+  const { getByText } = renderTokenForm();
+  getByText("Save").closest("button");
+});
+
+test('labels save button as "Validating..." when saving', () => {
+  const { getByText } = renderTokenForm({ saving: true });
+  getByText("Validating...").closest("button");
+});
+
+test("disables save button when saving", () => {
+  const { getByText } = renderTokenForm({ saving: true });
+  expect(getByText("Validating...").closest("button")).toHaveAttribute(
+    "disabled"
+  );
+});

src/components/issues/issueList.test.js

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import TokenForm from "./TokenForm";
 import { toast } from "react-toastify";
 
-function TokenPage({
+export function TokenPage({
   user,
   saveToken,
   removeToken,

src/components/token/TokenForm.test.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { mount } from "enzyme";
+import { TokenPage } from "./TokenPage";
+
+function render(args) {
+  const defaultProps = {
+    token: "",
+    user: {},
+    history: {},
+    saveToken: jest.fn(),
+    removeToken: jest.fn(),
+    loadUser: jest.fn(),
+    match: {}
+  };
+
+  const props = { ...defaultProps, ...args };
+
+  return mount(<TokenPage {...props} />);
+}
+
+it("sets error when attempting to save an empty token field", () => {
+  const wrapper = render();
+  wrapper.find("form").simulate("submit");
+  const error = wrapper.find(".alert").first();
+  expect(error.text()).toBe("Personal access token is required.");
+});

src/components/token/TokenPage.js

@@ -0,0 +1,51 @@
+import * as issueActions from "./issueActions";
+import * as types from "./actionTypes";
+import { issues } from "../../tools/mockData";
+import thunk from "redux-thunk";
+import fetchMock from "fetch-mock";
+import configureMockStore from "redux-mock-store";
+
+// Test an async action
+const middleware = [thunk];
+const mockStore = configureMockStore(middleware);
+
+describe("Tests Async Actions", () => {
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  describe("Load Issues Thunk", () => {
+    it("creates BEGIN_API_CALL and LOAD_ISSUES_SUCCESS when loading issues", () => {
+      fetchMock.mock("*", {
+        body: issues,
+        headers: { "content-type": "application/json" }
+      });
+
+      const expectedActions = [
+        { type: types.BEGIN_API_CALL },
+        { type: types.LOAD_ISSUES_SUCCESS, issues }
+      ];
+
+      const store = mockStore({ issues: [] });
+      return store.dispatch(issueActions.loadIssues()).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});
+
+describe("Tests Issue Actions", () => {
+  it("tests LOAD_ISSUES_SUCCESS action", () => {
+    //arrange
+    const expectedAction = {
+      type: types.LOAD_ISSUES_SUCCESS,
+      issues
+    };
+
+    //act
+    const action = issueActions.loadIssuesSuccess(issues);
+
+    //assert
+    expect(action).toEqual(expectedAction);
+  });
+});

src/components/token/TokenPage.test.js

@@ -0,0 +1,32 @@
+import * as tokenActions from "./tokenActions";
+import * as types from "./actionTypes";
+import { token } from "../../tools/mockData";
+
+describe("Tests Token Actions", () => {
+  it("tests SAVE_TOKEN action", () => {
+    //arrange
+    const expectedAction = {
+      type: types.SAVE_TOKEN,
+      token
+    };
+
+    //act
+    const action = tokenActions.saveToken(token);
+
+    //assert
+    expect(action).toEqual(expectedAction);
+  });
+
+  it("tests REMOVE_TOKEN action", () => {
+    //arrange
+    const expectedAction = {
+      type: types.REMOVE_TOKEN
+    };
+
+    //act
+    const action = tokenActions.removeToken();
+
+    //assert
+    expect(action).toEqual(expectedAction);
+  });
+});