Write tests for header, footer, registration components

client/actions/actions.test.js

@@ -0,0 +1,66 @@
+import merge from "deepmerge";
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+
+import * as types from "../constants/action-types";
+import testOrgConfig from "../test-config.json";
+import parseOrganizations from "./parse-organizations";
+import setLanguage from "./set-language";
+import setOrganization from "./set-organization";
+
+jest.mock("../utils/get-config");
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+describe("actions testing", () => {
+  it("should create an action to parse organizations", () => {
+    const expectedActions = [
+      {
+        type: types.PARSE_ORGANIZATIONS,
+        payload: testOrgConfig,
+      },
+    ];
+    const store = mockStore({organizations: []});
+    store.dispatch(parseOrganizations(testOrgConfig));
+    expect(store.getActions()).toEqual(expectedActions);
+  });
+
+  it("should create an action to set language", () => {
+    const language = "en";
+    const expectedActions = [
+      {
+        type: types.SET_LANGUAGE,
+        payload: language,
+      },
+    ];
+    const store = mockStore({language: ""});
+    store.dispatch(setLanguage(language));
+    expect(store.getActions()).toEqual(expectedActions);
+  });
+
+  it("should create actions to set current organization", () => {
+    const orgConfig = merge(testOrgConfig[0], testOrgConfig[2]);
+    const expectedActions = [
+      {
+        type: types.SET_LANGUAGE,
+        payload: testOrgConfig[0].default_language,
+      },
+      {
+        type: types.SET_ORGANIZATION_STATUS,
+        payload: true,
+      },
+      {
+        type: types.SET_ORGANIZATION_CONFIG,
+        payload: orgConfig,
+      },
+      {
+        type: types.SET_ORGANIZATION_STATUS,
+        payload: false,
+      },
+    ];
+    const store = mockStore({language: "", organization: {}});
+    store.dispatch(setOrganization(testOrgConfig[2].slug));
+    store.dispatch(setOrganization("invalid-slug"));
+    expect(store.getActions()).toEqual(expectedActions);
+  });
+});

client/actions/parse-organizations.js

@@ -1,11 +1,9 @@
 import {PARSE_ORGANIZATIONS} from "../constants/action-types";
 
 const parseOrganizations = config => {
-  return dispatch => {
-    dispatch({
-      type: PARSE_ORGANIZATIONS,
-      payload: config,
-    });
+  return {
+    type: PARSE_ORGANIZATIONS,
+    payload: config,
   };
 };
 export default parseOrganizations;

client/actions/set-language.js

@@ -1,11 +1,9 @@
 import {SET_LANGUAGE} from "../constants/action-types";
 
 const setLanguage = slug => {
-  return dispatch => {
-    dispatch({
-      type: SET_LANGUAGE,
-      payload: slug,
-    });
+  return {
+    type: SET_LANGUAGE,
+    payload: slug,
   };
 };
 

client/actions/set-organization.js

@@ -16,6 +16,10 @@ const setOrganization = slug => {
       const config = merge(defaultConfig, orgConfig, {
         arrayMerge: customMerge,
       });
+      dispatch({
+        type: SET_LANGUAGE,
+        payload: config.default_language,
+      });
       dispatch({
         type: SET_ORGANIZATION_STATUS,
         payload: true,
@@ -24,10 +28,6 @@ const setOrganization = slug => {
         type: SET_ORGANIZATION_CONFIG,
         payload: config,
       });
-      dispatch({
-        type: SET_LANGUAGE,
-        payload: config.default_language,
-      });
     } else {
       dispatch({
         type: SET_ORGANIZATION_STATUS,

client/components/404/404.test.js

@@ -0,0 +1,11 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import DoesNotExist from "./404";
+
+describe("<DoesNotExist /> rendering", () => {
+  it("should render correctly", () => {
+    const component = renderer.create(<DoesNotExist />).toJSON();
+    expect(component).toMatchSnapshot();
+  });
+});

client/components/404/__snapshots__/404.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DoesNotExist /> rendering should render correctly 1`] = `
+<div
+  className="owisp-404-container"
+>
+  <div
+    className="owisp-404-row-1"
+  >
+    Oops!
+  </div>
+  <div
+    className="owisp-404-row-2"
+  >
+    404 Not Found
+  </div>
+  <div
+    className="owisp-404-row-3"
+  >
+    Sorry, an error has occurred, Requested page not found!
+  </div>
+</div>
+`;

client/components/footer/__snapshots__/footer.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer /> rendering should render correctly 1`] = `
+<div
+  className="owisp-footer-container"
+>
+  <div
+    className="owisp-footer-row-1"
+  >
+    <div
+      className="owisp-footer-row-1-inner"
+    >
+      <a
+        className="owisp-footer-link
+                  owisp-footer-link-1"
+        href="www.testurl.com"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        link one
+      </a>
+      <a
+        className="owisp-footer-link
+                  owisp-footer-link-2"
+        href="www.testurl2.com"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        link two
+      </a>
+    </div>
+  </div>
+  <div
+    className="owisp-footer-row-2"
+  >
+    <div
+      className="owisp-footer-row-2-inner"
+    >
+      this is secondary text
+    </div>
+  </div>
+</div>
+`;

client/components/footer/footer.js

@@ -45,7 +45,7 @@ export default class Footer extends React.Component {
 Footer.propTypes = {
   language: PropTypes.string.isRequired,
   footer: PropTypes.shape({
-    link: PropTypes.array,
+    links: PropTypes.array,
     secondary_text: PropTypes.object,
   }).isRequired,
 };

client/components/footer/footer.test.js

@@ -0,0 +1,56 @@
+/* eslint-disable camelcase */
+import {shallow} from "enzyme";
+import React from "react";
+import renderer from "react-test-renderer";
+
+import Footer from "./footer";
+
+const createTestProps = props => {
+  return {
+    language: "en",
+    footer: {
+      links: [
+        {
+          text: {en: "link one"},
+          url: "www.testurl.com",
+        },
+        {
+          text: {en: "link two"},
+          url: "www.testurl2.com",
+        },
+      ],
+      secondary_text: {
+        en: "this is secondary text",
+      },
+    },
+    ...props,
+  };
+};
+
+describe("<Footer /> rendering", () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<Footer {...props} />);
+  });
+  it("should render correctly", () => {
+    props = createTestProps();
+    const component = renderer.create(<Footer {...props} />).toJSON();
+    expect(component).toMatchSnapshot();
+  });
+  it("should render without links", () => {
+    const links = {
+      footer: {...props.footer, links: []},
+    };
+    props = createTestProps(links);
+    wrapper = shallow(<Footer {...props} />);
+    expect(wrapper.find(".owisp-footer-link")).toHaveLength(0);
+  });
+  it("should render secondary text", () => {
+    const {secondary_text} = props.footer;
+    expect(wrapper.find(".owisp-footer-row-2-inner").text()).toBe(
+      secondary_text.en,
+    );
+  });
+});

client/components/header/__snapshots__/header.test.js.snap

@@ -1,11 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`App Header should render without crashing 1`] = `
-<Header>
+exports[`<Header /> rendering should render with links 1`] = `
+<div
+  className="owisp-header-container"
+>
   <div
-    className="header-container"
+    className="owisp-header-row-1"
   >
-    App Header
+    <div
+      className="owisp-header-row-1-inner"
+    >
+      <div
+        className="owisp-header-left"
+      >
+        <div
+          className="owisp-header-logo-div"
+        />
+      </div>
+      <div
+        className="owisp-header-right"
+      >
+        <button
+          className="active owisp-header-language-btn owisp-header-language-btn-en"
+          onClick={[Function]}
+          type="button"
+        >
+          english
+        </button>
+        <button
+          className="owisp-header-language-btn owisp-header-language-btn-it"
+          onClick={[Function]}
+          type="button"
+        >
+          italian
+        </button>
+      </div>
+    </div>
   </div>
-</Header>
+  <div
+    className="owisp-header-row-2"
+  >
+    <div
+      className="owisp-header-row-2-inner"
+    >
+      <a
+        className="owisp-header-link
+                    owisp-header-link-1"
+        href="https://testlink1.com"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        test link 1
+      </a>
+      <a
+        className="owisp-header-link
+                    owisp-header-link-2"
+        href="https://testlink2.com"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        test link 2
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Header /> rendering should render without links 1`] = `
+<div
+  className="owisp-header-container"
+>
+  <div
+    className="owisp-header-row-1"
+  >
+    <div
+      className="owisp-header-row-1-inner"
+    >
+      <div
+        className="owisp-header-left"
+      >
+        <div
+          className="owisp-header-logo-div"
+        />
+      </div>
+      <div
+        className="owisp-header-right"
+      >
+        <button
+          className="active owisp-header-language-btn owisp-header-language-btn-en"
+          onClick={[Function]}
+          type="button"
+        >
+          english
+        </button>
+        <button
+          className="owisp-header-language-btn owisp-header-language-btn-it"
+          onClick={[Function]}
+          type="button"
+        >
+          italian
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    className="owisp-header-row-2"
+  >
+    <div
+      className="owisp-header-row-2-inner"
+    />
+  </div>
+</div>
 `;