Merge pull request #64 from oslabs-beta/staging

Created a 4.0 version of the Reactime Website

Author: aquinojardim

src/app/__tests__/PerfView.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { configure, mount } from 'enzyme';
+// import { act } from 'react-dom/test-utils';
+import Adapter from 'enzyme-adapter-react-16';
+import PerfView from '../components/PerfView';
+// import { iterator } from 'core-js/fn/symbol';
+
+// Unit test cases for PerfView
+configure({ adapter: new Adapter() });
+
+// Test props and basic rendering
+describe('PerfView Component ', () => {
+  const snapshot0 = {
+    name: 'root',
+    state: 'root',
+    componentData: {},
+    children:
+    [
+      {
+        name: 'App',
+        state: { num: 0 },
+        componentData: { actualDuration: 10000 },
+        children:
+        [
+          {
+            name: 'DisplayPanel', state: 'stateless', componentData: { actualDuration: 5000 }, children: [],
+          },
+          {
+            name: 'AltDisplay', state: 'stateless', componentData: { actualDuration: 4000 }, children: [],
+          },
+          {
+            name: 'Button Panel',
+            state: 'stateless',
+            componentData: { actualDuration: 3000 },
+            children:
+            [
+              {
+                name: 'Button', state: { num: 0 }, componentData: { actualDuration: 2000 }, children: [],
+              },
+              {
+                name: 'Button', state: { num: 0 }, componentData: { actualDuration: 1000 }, children: [],
+              },
+            ],
+          },
+          {
+            name: 'MarketSContainer', state: 'stateless', componentData: { actualDuration: 500 }, children: [],
+          },
+          {
+            name: 'MainSlider', state: 'stateless', componentData: { actualDuration: 100 }, children: [],
+          },
+        ],
+      },
+    ],
+  };
+
+  const snapshot1 = {
+    name: 'root',
+    state: 'root',
+    componentData: {},
+    children:
+    [
+      {
+        name: 'App',
+        state: { num: 1 },
+        componentData: { actualDuration: 10 },
+        children:
+        [
+          {
+            name: 'DisplayPanel', state: 'stateless', componentData: { actualDuration: 50 }, children: [],
+          },
+          {
+            name: 'AltDisplay', state: 'stateless', componentData: { actualDuration: 40 }, children: [],
+          },
+          {
+            name: 'Button Panel',
+            state: 'stateless',
+            componentData: { actualDuration: 30 },
+            children:
+            [
+              {
+                name: 'Button', state: { num: 2 }, componentData: { actualDuration: 20 }, children: [],
+              },
+              {
+                name: 'Button', state: { num: 3 }, componentData: { actualDuration: 10 }, children: [],
+              },
+            ],
+          },
+          {
+            name: 'MarketSContainer', state: 'stateless', componentData: { actualDuration: 5 }, children: [],
+          },
+          {
+            name: 'MainSlider', state: 'stateless', componentData: { actualDuration: 1 }, children: [],
+          },
+        ],
+      },
+    ],
+  };
+
+  let wrapper;
+  const snapshots = [];
+  snapshots.push(snapshot0);
+  snapshots.push(snapshot1);
+
+  beforeEach(() => {
+    wrapper = mount(<PerfView viewIndex={-1} snapshots={snapshots} width={600} height={600} />);
+  });
+
+  it('allows us to set viewIndex prop', () => {
+    expect(wrapper.props().viewIndex).toEqual(-1);
+
+    wrapper.setProps({ viewIndex: 0 });
+    expect(wrapper.props().viewIndex).toEqual(0);
+
+    // wrapper.setProps({ viewIndex: 1000 });
+  });
+
+  it('renders a single svg element', () => {
+    expect(wrapper.find('svg')).toHaveLength(1);
+  });
+});

src/app/components/PerfView.tsx

@@ -41,8 +41,8 @@ const PerfView = (props:PerfViewProps) => {
   // Set up color scaling function
   const colorScale = d3.scaleLinear()
     .domain([0, 7])
-    .range(['hsl(152,30%,80%)', 'hsl(228,30%,40%)'])
-    // .range(['hsl(210,30%,80%)', 'hsl(152,30%,40%)'])
+    .range(['hsl(200,60%,60%)', 'hsl(255,30%,30%)'])
+    // .range(['hsl(152,30%,80%)', 'hsl(228,30%,40%)'])
     .interpolate(d3.interpolateHcl);
 
   // Set up circle-packing layout function

src/app/styles/components/d3graph.css

@@ -114,11 +114,11 @@ div.tooltip {
 }
 
 .perf-chart-labels {
-  font: 12px sans-serif;
+  font: 1.3em sans-serif;
+  /* font-size: calc(12px + .8vw); */
   /* color: white; */
   /* fill: rgb(231, 231, 231); */
   fill: #2a2f3a;
   pointer-events: none;
   text-anchor: middle;
-};
-
+};

website/reactime-marketing

@@ -0,0 +1 @@
+Subproject commit 729437f14d2a0db4d8484c1dba308306f0aa080b