Aircall Front-end Test Master

.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": ["env", "react"]
+  "presets": ["@babel/react", "@babel/env"],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
 }

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        targets: {
+          node: 'current',
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+};

jest.config.js

@@ -0,0 +1,16 @@
+module.export = {
+  verbose: true, // for more detailed logs of passing/failing tests
+  roots: ['<rootDir>/src'],
+  transform: {
+    '\\.(js|jsx)?$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss)$':
+      '<rootDir>/node_modules/jest-css-modules-transform',
+  },
+  testMatch: ['<rootDir>/src/**/>(*.)test.{js, jsx}'], // finds test
+  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
+  testPathIgnorePatterns: ['/node_modules/', '/public/'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '@testing-library/react/cleanup-after-each',
+  ], // setupFiles before the tests are ran
+};

package.json

@@ -9,23 +9,47 @@
   "private": false,
   "scripts": {
     "start": "webpack-dev-server --mode development --open",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "test": "jest --config ./jest.config.js --no-cache --watch"
   },
   "dependencies": {
-    "react": "^16.3.1",
-    "react-dom": "^16.3.1"
+    "axios": "^0.19.2",
+    "eva-icons": "^1.1.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
-    "babel-core": "6.26.*",
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.2.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^26.0.1",
     "babel-loader": "7.1.*",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.*",
     "css-loader": "2.1.*",
+    "file-loader": "^6.0.0",
     "html-loader": "0.5.*",
     "html-webpack-plugin": "3.2.*",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.0.1",
+    "jest-css-modules-transform": "^4.0.0",
+    "jest-transform-css": "^2.0.0",
     "style-loader": "0.23.*",
     "webpack": "4.29.*",
     "webpack-cli": "3.2.*",
-    "webpack-dev-server": "3.1.*"
+    "webpack-dev-server": "^3.11.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css|sass)$": "identity-obj-proxy"
+    }
   }
 }

src/assets/styles/animations.css

@@ -0,0 +1,11 @@
+@keyframes moveRightAndBack {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(0.3rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

src/css/app.css → src/assets/styles/app.css

@@ -13,13 +13,14 @@
   width: 376px;
   height: 666px;
   z-index: 100;
+  position: relative; /* To absolutely place Nav at the bottom */
+  padding-bottom: 2.5rem; /* Nav height */
 
   background: white;
   border-radius: 3px;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .9);
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.9);
 }
 
 #app .container-view {
   padding: 20px;
 }
-

src/assets/styles/body.css

@@ -0,0 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
+
+html,
+body,
+h1,
+h2,
+h3,
+ul,
+li,
+p {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  color: #233142;
+}
+
+body {
+  background: #233142;
+  font-family: 'Lato', helvetica, arial, sans-serif;
+  font-size: 13px;
+  color: #333333;
+  line-height: 1;
+}
+
+ul {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  background: none;
+  outline: none;
+  border: none;
+}

src/assets/styles/variables.css

@@ -0,0 +1,17 @@
+:root {
+  --primary: rgb(0, 179, 136);
+  --primary-dark: #009571;
+  --primary-light: rgb(241, 250, 249);
+  --primary-text: rgba(16, 24, 32);
+  --secondary-text: rgba(16, 24, 32, 0.72);
+  --bg-light: rgb(251, 251, 251);
+  --dark-gray: #233142;
+  --gray: #8d9094;
+  --light-gray: rgba(0, 0, 0, 0.1);
+  --error: #ff5c3a;
+  --success: #00b388;
+  --white: #fff;
+  --black: #000;
+
+  --box-shadow: 0 1px 4px 0 rgba(0, 108, 91, 0.24);
+}

src/components/ActivityDetails/ActivityDetails.css

@@ -0,0 +1,49 @@
+.activity-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem 1rem;
+  font-size: 0.9rem;
+}
+
+.activity-details__avatar {
+  background-color: var(--primary-light);
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.activity-details__name {
+  font-size: 1rem;
+  font-weight: bold;
+  margin: 1rem 0 0.5rem 0;
+}
+
+.activity-details__date {
+  color: var(--gray);
+  text-align: center;
+}
+
+.activity-details__info {
+  align-self: flex-start;
+  margin-top: 3rem;
+  width: 100%;
+}
+
+.activity-details__info li {
+  color: var(--dark-gray);
+  line-height: 1.7rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.activity-details__info li:first-child {
+  text-transform: capitalize;
+}
+
+.activity-details__info li span:last-child {
+  color: var(--gray);
+}

src/components/ActivityDetails/ActivityDetails.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useContext } from 'react';
+import { useParams } from 'react-router-dom';
+import './ActivityDetails.css';
+
+import { ActivityContext } from '../../store/context/ActivityContext';
+
+import Icon from '../Icon';
+
+const ActivityDetails = () => {
+  const { state, dispatch, actions } = useContext(ActivityContext);
+  const { details, loading, error } = state;
+  const { id } = useParams();
+
+  const {
+    call_type,
+    created_at,
+    direction,
+    duration,
+    from,
+    is_archived,
+    to,
+    via,
+  } = details;
+
+  const dateObj = new Date(created_at);
+  const dateOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  };
+  const date = dateObj.toLocaleDateString('en-US', dateOptions);
+  const number = direction === 'outbound' ? to : from;
+  const recipient = direction === 'outbound' ? from : to;
+  const icon = call_type === 'missed' ? 'missed' : 'call';
+
+  useEffect(() => {
+    actions.getActivityDetails(id);
+  }, [id]);
+
+  return (
+    <div className="activity-details" data-testid="activity-details">
+      <p className="activity-details__avatar">
+        <Icon name="person-outline" color="green" size="24" />
+      </p>
+      <h1 className="activity-details__name">{recipient}</h1>
+      <p className="activity-details__date">{date}</p>
+      <ul className="activity-details__info">
+        <li>{`${direction} call`}</li>
+        <li>
+          <span>Status:</span>
+          <span>{call_type}</span>
+        </li>
+        <li>
+          <span>From:</span>
+          <span>{recipient}</span>
+        </li>
+        <li>
+          <span>The call lasted:</span>
+          <span>{duration}</span>
+        </li>
+        <li>
+          <span>Call was operated through:</span>
+          <span>{via}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default ActivityDetails;

src/components/ActivityDetails/ActivityDetails.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import ActivityProvider, {
+  ActivityContext,
+} from '../../store/context/ActivityContext';
+import ActivityDetails from './ActivityDetails';
+
+jest.mock('./ActivityDetails.css', () => {
+  return {};
+});
+
+// Enhancing the render method with context provider
+const renderWithContextAndRouter = (component) => {
+  const history = createMemoryHistory(); // Creating a navigation history
+  return {
+    ...render(
+      <Router history={history}>
+        <ActivityProvider value={ActivityContext}>{component}</ActivityProvider>
+      </Router>
+    ),
+  };
+};
+
+afterEach(cleanup);
+
+describe('Activity details', () => {
+  it('should display the details dom correctly', () => {
+    const { getByTestId } = renderWithContextAndRouter(<ActivityDetails />);
+    expect(getByTestId('activity-details')).toBeInTheDocument();
+  });
+});