Update tests

final/client/package.json

@@ -5,17 +5,22 @@
   "dependencies": {
     "@apollo/client": "^3.2.7",
     "@reach/router": "^1.2.1",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/node": "^12.12.14",
     "@types/reach__router": "^1.2.6",
     "@types/react": "^16.9.15",
     "@types/react-dom": "^16.9.4",
+    "assert": "^2.0.0",
     "emotion": "^9.2.12",
     "graphql": "^14.4.2",
     "polished": "^3.4.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-emotion": "^9.2.12",
     "react-scripts": "^3.4.1",
+    "selenium-webdriver": "^4.0.0-alpha.8",
+    "sleep": "^6.3.0",
     "typescript": "^3.7.3"
   },
   "scripts": {
@@ -41,6 +46,8 @@
     "@types/jest": "^24.0.23",
     "apollo": "^2.16.3",
     "artillery": "^1.6.0-26",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "npm-watch": "^0.6.0"
   }
 }

final/client/src/components/__tests__/button.tsx

@@ -1,13 +1,26 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import Button from "../button";
 
-import { render, cleanup } from '../../test-utils';
-import Button from '../button';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Button', () => {
+describe("Button", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(<Button>Hello World</Button>);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(<Button>Hello World</Button>);
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+
+  it("renders without error", () => {
+    console.log(wrapper.debug());
+    expect(wrapper.find("button").length).toBe(1);
+    expect(wrapper.find("button").text()).toEqual("Hello World");
   });
 });

final/client/src/components/__tests__/footer.tsx

@@ -1,13 +1,39 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import { MockedProvider } from "@apollo/client/testing";
+import Footer from "../footer";
 
-import { renderApollo, cleanup } from '../../test-utils';
-import Footer from '../footer';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Footer', () => {
+describe("Footer", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    renderApollo(<Footer />);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(
+      <MockedProvider>
+        <Footer />
+      </MockedProvider>
+    );
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+  it("renders without error", () => {
+    var linkText = ["Home", "Cart", "Profile"];
+    expect(wrapper.find("Footer").length).toBe(1);
+    expect(wrapper.find("svg").length).toBe(4);
+    expect(wrapper.find("LogoutButton").length).toBe(1);
+    expect(
+      wrapper.find("button[data-testid='logout-button']").text()
+    ).toContain("Logout");
+    expect(wrapper.find("Link").length).toBe(3);
+    //find link text
+    wrapper.find("Link a").forEach((node, index) => {
+      expect(node.text()).toContain(linkText[index]);
+    });
   });
 });

final/client/src/components/__tests__/header.tsx

@@ -1,13 +1,26 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import Header from "../header";
 
-import { render, cleanup } from '../../test-utils';
-import Header from '../header';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Header', () => {
+describe("Header", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(<Header />);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(<Header />);
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+
+  it("renders without error", () => {
+    expect(wrapper.find("Header").length).toBe(1);
+    expect(wrapper.find("img").length).toBe(1);
+    expect(wrapper.find("h2").text()).toEqual("Space Explorer");
   });
 });

final/client/src/components/__tests__/launch-detail.tsx

@@ -1,19 +1,37 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import LaunchDetail from "../launch-detail";
 
-import { render, cleanup } from '../../test-utils';
-import LaunchDetail from '../launch-detail';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Launch Detail View', () => {
+describe("Launch Detail View", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(
+  beforeEach(() => {
+    wrapper = Enzyme.mount(
       <LaunchDetail
-        id={'1'}
-        site={'earth'}
-        rocket={{ name: 'that one', type: 'big', __typename: 'Rocket', id: '1' }}
-      />,
+        id={"1"}
+        site={"earth"}
+        rocket={{
+          name: "that one",
+          type: "big",
+          __typename: "Rocket",
+          id: "1",
+        }}
+      />
     );
   });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+
+  it("renders without error", () => {
+    expect(wrapper.find("LaunchDetail").length).toBe(1);
+    expect(wrapper.find("h3").text()).toEqual("that one (big)");
+    expect(wrapper.find("h5").text()).toEqual("earth");
+  });
 });

final/client/src/components/__tests__/launch-tile.tsx

@@ -1,23 +1,41 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import LaunchTile from "../launch-tile";
 
-import { render, cleanup } from '../../test-utils';
-import LaunchTile from '../launch-tile';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Launch Tile', () => {
+describe("Launch Tile", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(
+  beforeEach(() => {
+    wrapper = Enzyme.mount(
       <LaunchTile
         launch={{
-          __typename: 'Launch',
+          __typename: "Launch",
           isBooked: false,
-          id: '1',
-          mission: { name: 'the first one', __typename: 'Mission', missionPatch: null },
-          rocket: { name: 'harambe', __typename: 'Rocket', id: '1' },
+          id: "1",
+          mission: {
+            name: "the first one",
+            __typename: "Mission",
+            missionPatch: null,
+          },
+          rocket: { name: "harambe", __typename: "Rocket", id: "1" },
         }}
-      />,
+      />
     );
   });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+  it("renders without error", () => {
+    expect(wrapper.find("LaunchTile").length).toBe(1);
+    expect(wrapper.find("Link").length).toBe(1);
+    expect(wrapper.find("Location").length).toBe(1);
+    expect(wrapper.find("h3").text()).toEqual("the first one");
+    expect(wrapper.find("h5").text()).toEqual("harambe");
+  });
 });

final/client/src/components/__tests__/loading.tsx

@@ -1,13 +1,24 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import Loading from "../loading";
 
-import { render, cleanup } from '../../test-utils';
-import Loading from '../loading';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Loading', () => {
+describe("Loading", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(<Loading />);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(<Loading />);
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+  it("renders without error", () => {
+    expect(wrapper.find("Styled(Component)").length).toBe(1);
+    expect(wrapper.find("svg").length).toBe(1);
   });
 });

final/client/src/components/__tests__/login-form.tsx

@@ -1,13 +1,29 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import LoginForm from "../login-form";
 
-import { render, cleanup } from '../../test-utils';
-import LoginForm from '../login-form';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Login Form', () => {
+describe("Login Form", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(<LoginForm login={() => {}}/>);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(<LoginForm login={() => {}} />);
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+  it("renders without error", () => {
+    expect(wrapper.find("LoginForm").length).toBe(1);
+    expect(wrapper.find("header").length).toBe(1);
+    expect(wrapper.find("svg").length).toBe(3);
+    expect(wrapper.find("form").length).toBe(1);
+    expect(wrapper.find("button").length).toBe(1);
+    expect(wrapper.find("h1").text()).toEqual("Space Explorer");
+    expect(wrapper.find("button").text()).toEqual("Log in");
   });
 });

final/client/src/components/__tests__/menu-item.tsx

@@ -1,13 +1,26 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import MenuItem from "../menu-item";
 
-import { render, cleanup } from '../../test-utils';
-import MenuItem from '../menu-item';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Menu Item', () => {
+describe("Menu Item", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(<MenuItem to="/wow" />);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(<MenuItem to="/wow" />);
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+  it("renders without error", () => {
+    expect(wrapper.find("Styled(Link)").length).toBe(1);
+    expect(wrapper.find("Location").length).toBe(1);
+    expect(wrapper.find("LocationProvider").length).toBe(1);
+    expect(wrapper.find("a").length).toBe(1);
   });
 });

final/client/src/components/__tests__/page-container.tsx

@@ -1,13 +1,24 @@
-import React from 'react';
+import React from "react";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import PageContainer from "../page-container";
 
-import { render, cleanup } from '../../test-utils';
-import PageContainer from '../page-container';
+Enzyme.configure({ adapter: new Adapter() });
 
-describe('Page Container', () => {
+describe("Page Container", () => {
   // automatically unmount and cleanup DOM after the test is finished.
-  afterEach(cleanup);
+  let wrapper: Enzyme.ReactWrapper;
 
-  it('renders without error', () => {
-    render(<PageContainer />);
+  beforeEach(() => {
+    wrapper = Enzyme.mount(<PageContainer />);
+  });
+
+  afterEach(() => {
+    expect.hasAssertions();
+    wrapper.unmount();
+  });
+  it("renders without error", () => {
+    expect(wrapper.find("PageContainer").length).toBe(1);
+    expect(wrapper.find("Styled(div)").length).toBe(2);
   });
 });