Merge pull request #94 from oslabs-beta/rydang/error

changed error message and styling

Author: starkspark

src/app/__tests__/MainContainer.test.js

@@ -1,8 +1,7 @@
 /* eslint-disable react/jsx-filename-extension */
 
-import { mount, configure } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import Adapter from 'enzyme-adapter-react-16';
 import MainContainer from '../containers/MainContainer';
 import { useStoreContext } from '../store';
@@ -18,15 +17,8 @@ const chrome = require('sinon-chrome');
 configure({ adapter: new Adapter() });
 
 const state = {
-  tabs: {
-    87: {
-      snapshots: [{}, {}, {}, {}],
-      sliderIndex: 0,
-      viewIndex: -1,
-      mode: {},
-    },
-  },
-  currentTab: 87,
+  tabs: {},
+  currentTab: null,
 };
 
 const dispatch = jest.fn();
@@ -35,12 +27,9 @@ useStoreContext.mockImplementation(() => [state, dispatch]);
 
 let wrapper;
 global.chrome = chrome;
-let eventListener;
 const port = {
   onMessage: {
-    addListener: fn => {
-      eventListener = fn;
-    },
+    addListener: () => {},
   },
   onDisconnect: {
     addListener: () => {},
@@ -49,29 +38,32 @@ const port = {
 chrome.runtime.connect.returns(port);
 
 beforeEach(() => {
-  wrapper = mount(<MainContainer />);
+  wrapper = shallow(<MainContainer />);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });
 
 describe('MainContainer rendering', () => {
-  test.skip('With no connection, should not render any containers', () => {
-    expect(wrapper.text()).toEqual('please install our npm package in your app');
+  test('With no snapshots, should not render any containers', () => {
+    expect(wrapper.text()).toEqual(
+      'No React application found. Please install our npm package in your app.',
+    );
     expect(wrapper.find(HeadContainer).length).toBe(0);
     expect(wrapper.find(ActionContainer).length).toBe(0);
     expect(wrapper.find(StateContainer).length).toBe(0);
     expect(wrapper.find(TravelContainer).length).toBe(0);
     expect(wrapper.find(ButtonsContainer).length).toBe(0);
   });
-  test('With connection established, should render all containers', () => {
-    // fake connect
-    act(() => {
-      eventListener({
-        action: 'initialConnectSnapshots',
-        payload: 'test',
-      });
-    });
-    wrapper.update();
+  test('With snapshots, should render all containers', () => {
+    state.currentTab = 87;
+    state.tabs[87] = {
+      snapshots: [{}],
+      viewIndex: -1,
+      sliderIndex: 0,
+      mode: {},
+    };
+
+    wrapper = shallow(<MainContainer />);
     expect(wrapper.find(HeadContainer).length).toBe(1);
     expect(wrapper.find(ActionContainer).length).toBe(1);
     expect(wrapper.find(StateContainer).length).toBe(1);

src/app/containers/MainContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
@@ -11,7 +11,6 @@ import {
 import { useStoreContext } from '../store';
 
 function MainContainer() {
-  const [npmExists, setnpm] = useState(false);
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
 
@@ -39,7 +38,6 @@ function MainContainer() {
         }
         case 'initialConnectSnapshots': {
           dispatch(initialConnect(payload));
-          setnpm(true);
           break;
         }
         default:
@@ -54,7 +52,19 @@ function MainContainer() {
     dispatch(setPort(port));
   });
 
-  if (!npmExists) return <div style={{ color: 'black' }}>Please install our npm package in your app</div>;
+  if (!tabs[currentTab]) {
+    return (
+      <div className="error-container">
+        <a
+          href="https://www.npmjs.com/package/react-time-travel"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          No React application found. Please install our npm package in your app.
+        </a>
+      </div>
+    );
+  }
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 
   // if viewIndex is -1, then use the sliderIndex instead

src/app/styles/styles.scss

@@ -18,15 +18,30 @@ body {
   overflow: hidden;
 }
 
+.error-container {
+  height: 100%;
+  margin: 0 auto;
+  background-color: $brand-color;
+  overflow: hidden;
+
+  display: grid;
+  justify-content: center;
+  a {
+    color: white;
+    margin-top: 5%;
+    height: 3%;
+  }
+}
+
 .body-container {
   height: 94%;
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 8fr 1fr;
   grid-template-areas:
-    "actions states"
-    "travel travel"
-    "buttons buttons";
+    'actions states'
+    'travel travel'
+    'buttons buttons';
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -35,10 +50,10 @@ body {
     grid-template-rows: 3fr 5fr 1fr;
     grid-template-columns: auto;
     grid-template-areas:
-      "actions"
-      "states"
-      "travel"
-      "buttons";
+      'actions'
+      'states'
+      'travel'
+      'buttons';
   }
 }
 .travel-container {