Merge branch 'app-tests' of https://github.com/gregpalace/Chronos into staging-master

Author: ronellecaguioa

__tests__/app/components/Applications.test.tsx

@@ -1,40 +1,35 @@
-xdescribe('<Applications />', () => {
-  it('should');
+import React from 'react';
+import { mount } from 'enzyme';
+import { createMount, createShallow } from '@material-ui/core/test-utils';
+
+import Applications from '../../../app/components/Applications';
+import { DashboardContext } from '../../../app/context/DashboardContext';
+
+describe('React unit tests', () => {
+  describe('<Application/>', () => {
+    let wrapper: any;
+    let mount: any;
+    let shallow: any;
+
+    beforeAll(() => {
+      const applications: any = [];
+      const getApplications: any = jest.fn();
+      mount = createMount();
+      shallow = createShallow();
+
+      wrapper = mount(
+        <DashboardContext.Provider value={{ applications, getApplications }}>
+          <Applications />
+        </DashboardContext.Provider>
+      );
+    });
+
+    afterAll(() => {
+      mount.cleanUp();
+    });
+
+    it('should render properly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });
-
-
-// import React from 'react';
-// import { configure, shallow, mount } from 'enzyme';
-// import { expect } from 'chai';
-// import { createShallow } from '@material-ui/core/test-utils';
-// import Adapter from 'enzyme-adapter-react-16';
-
-// // Import our Component and Icons
-// import Applications from '../../../app/components/Applications';
-// import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
-
-// configure({ adapter: new Adapter() });
-
-// describe('React unit tests', () => {
-//   describe('<Applications />', () => {
-//     let wrapper;
-
-//     beforeAll(() => {
-//       wrapper = shallow(<Applications />);
-//       // shallow = createShallow();
-//     });
-
-//     xit('Should render a delete icon', () => {
-//       // expect(wrapper.find(<DeleteForeverOutlinedIcon />));
-//     });
-
-//     xit('Should have delete functionality', () => {});
-
-//     xit('Should contain grid items', () => {});
-
-//     xit('Should have three grid items', () => {
-//       const wrapper = shallow(<Applications />);
-//       expect(wrapper.toHaveLength(3));
-//     });
-//   });
-// });

__tests__/app/components/Copyright.test.tsx

@@ -1,3 +1,51 @@
-xdescribe('<Copyright />', () => {
-  it('should');
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import { createMount, createShallow } from '@material-ui/core/test-utils';
+import { Link, Typography } from '@material-ui/core';
+import Adapter from 'enzyme-adapter-react-16';
+
+import Copyright from '../../../app/components/Copyright';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('React unit test', () => {
+  describe('<Copyright/>', () => {
+    let wrapper: any;
+    let mount: any;
+    let shallow: any;
+
+    beforeEach(() => {
+      mount = createMount();
+      shallow = createShallow();
+    });
+
+    afterEach(() => {
+      mount.cleanUp();
+    });
+
+    it('renders correctly', () => {
+      const wrapper = shallow(<Copyright />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should contain link to chronos website', () => {
+      const wrapper = shallow(<Copyright />);
+      expect(wrapper.find(Link)).toHaveLength(1);
+      expect(wrapper.find(Link).prop('href'));
+      expect(wrapper.find(Link).prop('href')).toEqual('https://chronoslany.com/');
+    });
+
+    xit('should route user to Chronos website', () => {
+      const wrapper = shallow(<Copyright />);
+      const mockedHandleClick = jest.fn();
+      wrapper.instance().handleClick = mockedHandleClick;
+      expect(mockedHandleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render <Typography /> to display copyright info', () => {
+      const wrapper = shallow(<Copyright />);
+      expect(wrapper.find(Typography)).toHaveLength(1);
+      expect(wrapper.find(Typography).text()).toMatch('Team Chronos');
+    });
+  });
 });

__tests__/app/components/Occupied.test.tsx

@@ -1,3 +1,53 @@
-xdescribe('<Occupied />', () => {
-  it('should');
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import { Typography, Grid, Button } from '@material-ui/core';
+import { createMount, createShallow } from '@material-ui/core/test-utils';
+import Adapter from 'enzyme-adapter-react-16';
+
+import Occupied from '../../../app/components/Occupied';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('React unit test', () => {
+  describe('<Occupied />', () => {
+    let mount: any;
+    let shallow: any;
+
+    beforeEach(() => {
+      mount = createMount();
+      shallow = createShallow();
+    });
+
+    afterEach(() => {
+      mount.cleanUp();
+    });
+
+    it('Renders correctly', () => {
+      const wrapper = shallow(<Occupied />);
+      console.log(wrapper.debug());
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should display text of our application page', () => {
+      const wrapper = shallow(<Occupied />);
+      expect(wrapper.find(Typography).text()).toMatch('Applications');
+    });
+
+    it('should render a grid containing our applications', () => {
+      const wrapper = shallow(<Occupied />);
+      expect(wrapper.find(Grid)).toHaveLength(1);
+      expect(wrapper.find(Grid).prop('container'));
+      expect(wrapper.find(Grid).prop('spacing'));
+    });
+
+    it('should render a button with an onClick attribute', () => {
+      const wrapper = shallow(<Occupied />);
+      const mockOnClick = jest.fn();
+      const button = wrapper.find(Button);
+      // button.simulate('click');
+      expect(button).toHaveLength(1);
+      expect(button.prop('onClick'));
+      expect(mockOnClick.mock.calls.length).toBe(0);
+    });
+  });
 });

app/components/Applications.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Grid, IconButton, Modal, Card, CardActions, Paper } from '@material-ui/core';
+import { Grid, IconButton, Modal, Paper } from '@material-ui/core';
 import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
 import { makeStyles } from '@material-ui/core/styles';
 import { DashboardContext } from '../context/DashboardContext';

app/components/Copyright.tsx

@@ -6,7 +6,7 @@ export interface CopyrightProps {}
 const Copyright = () => (
   <Typography variant="body2" color="textSecondary" align="center">
     {'Copyright © '}
-    <Link color="inherit" href="https://material-ui.com/">
+    <Link color="inherit" href="https://chronoslany.com/">
       Team Chronos
     </Link>{' '}
     {new Date().getFullYear()}