✨ Test Details

src/renderer/components/App.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Accordion, Box, Text } from "grommet";
-import TestResult from "./TestResult";
+import { Box } from "grommet";
 import Sidebar from "./Sidebar";
 import { getReport, getRoot } from "../redux/actions/config";
+import Content from "./Content";
 
 const App = ({ config, dispatch }) => {
   useEffect(() => {
@@ -14,29 +14,7 @@ const App = ({ config, dispatch }) => {
   return (
     <Box background="dark-1" direction="row" fill>
       <Sidebar report={config.report} root={config.root} />
-      <Box fill pad="small">
-        <Box fill="horizontal">
-          <Text>
-            Number of Failed Test Suites: {config.report.numFailedTestSuites}
-          </Text>
-          <Text>Number of Failed Tests: {config.report.numFailedTests}</Text>
-          <Text>
-            Number of Passed Test Suites: {config.report.numPassedTestSuites}
-          </Text>
-          <Text>Number of Passed Tests: {config.report.numPassedTests}</Text>
-          <Text>
-            Number of Skipped Test Suites: {config.report.numPendingTestSuites}
-          </Text>
-          <Text>Number of Skipped Tests: {config.report.numPendingTests}</Text>
-        </Box>
-        <Box align="center" fill="horizontal" justify="center">
-          <Accordion>
-            {config.report.testResults.map((testResult, i) => (
-              <TestResult index={i} root={root} testResult={testResult} />
-            ))}
-          </Accordion>
-        </Box>
-      </Box>
+      <Content />
     </Box>
   );
 };

src/renderer/components/Content.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { connect } from "react-redux";
+import Main from "./Main";
+import TestDetails from "./TestDetails";
+
+const Components = {
+  Main: Main,
+  TestDetails: TestDetails
+};
+
+const Content = ({ ui }) => {
+  const { content } = ui;
+  const Component = Components[content];
+  return <Component />;
+};
+
+const mapStateToProps = ({ ui }) => ({ ui });
+
+export default connect(mapStateToProps)(Content);

src/renderer/components/Main.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Accordion, Box, Text } from "grommet";
+import { connect } from "react-redux";
+import TestResult from "./TestResult";
+
+const Main = ({ config }) => {
+  return (
+    <Box pad="small">
+      <Box fill="horizontal">
+        <Text>
+          Number of Failed Test Suites: {config.report.numFailedTestSuites}
+        </Text>
+        <Text>Number of Failed Tests: {config.report.numFailedTests}</Text>
+        <Text>
+          Number of Passed Test Suites: {config.report.numPassedTestSuites}
+        </Text>
+        <Text>Number of Passed Tests: {config.report.numPassedTests}</Text>
+        <Text>
+          Number of Skipped Test Suites: {config.report.numPendingTestSuites}
+        </Text>
+        <Text>Number of Skipped Tests: {config.report.numPendingTests}</Text>
+      </Box>
+      <Box align="center" fill="horizontal" justify="center">
+        <Accordion>
+          {config.report.testResults.map((testResult, i) => (
+            <TestResult index={i} root={root} testResult={testResult} />
+          ))}
+        </Accordion>
+      </Box>
+    </Box>
+  );
+};
+
+const mapStateToProps = ({ config }) => ({ config });
+
+export default connect(mapStateToProps)(Main);

src/renderer/components/Sidebar.jsx

@@ -1,7 +1,15 @@
 import React from "react";
-import { Box, Paragraph, Heading, Text } from "grommet";
+import { Box, Button, Heading, Text } from "grommet";
+import { connect } from "react-redux";
+import { setContent, setCurrentTest } from "../redux/actions/ui";
+
+const Sidebar = ({ dispatch, report, root }) => {
+  const handleClickMain = () => dispatch(setContent("Main"));
+  const handleClickTest = (testFileIndex, testFileName) => {
+    dispatch(setCurrentTest(testFileIndex, testFileName));
+    dispatch(setContent("TestDetails"));
+  };
 
-const Sidebar = ({ report, root }) => {
   return (
     <Box
       border={{ color: "white", side: "right" }}
@@ -12,16 +20,40 @@ const Sidebar = ({ report, root }) => {
       <Heading level="1" size="medium">
         Test Results
       </Heading>
-      {report.testResults.map(testResult => (
-        <Text
-          color={testResult.failureMessage ? "status-error" : "status-ok"}
-          size="small"
-        >
-          {testResult.testFilePath.replace(root, "")}
-        </Text>
+      <Button
+        hoverIndicator
+        label={
+          <Text color="white" size="small">
+            Main
+          </Text>
+        }
+        onClick={handleClickMain}
+        plain
+      />
+      {report.testResults.map((testResult, testFileIndex) => (
+        <Button
+          hoverIndicator
+          label={
+            <Text
+              color={testResult.failureMessage ? "status-error" : "status-ok"}
+              size="small"
+            >
+              {testResult.testFilePath.replace(root, "")}
+            </Text>
+          }
+          onClick={() =>
+            handleClickTest(
+              testFileIndex,
+              testResult.testFilePath.replace(root, "")
+            )
+          }
+          plain
+        />
       ))}
     </Box>
   );
 };
 
-export default Sidebar;
+const mapDispatchToProps = ({ dispatch }) => ({ dispatch });
+
+export default connect(mapDispatchToProps)(Sidebar);

src/renderer/components/TestDetails.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { connect } from "react-redux";
+import { Accordion, AccordionPanel, Box } from "grommet";
+
+const TestDetails = ({ ui }) => {
+  const { currentTestIndex, currentTestName } = ui;
+  const [fileContents, setFileContents] = useState("");
+
+  useEffect(() => {
+    axios
+      .get(`/${currentTestIndex}`)
+      .then(response => setFileContents(response.data));
+  }, []);
+
+  return (
+    <Accordion>
+      <AccordionPanel label={currentTestName}>
+        <Box height="medium" overflow="auto">
+          <pre>{fileContents}</pre>
+        </Box>
+      </AccordionPanel>
+    </Accordion>
+  );
+};
+
+const mapStateToProps = ({ ui }) => ({ ui });
+
+export default connect(mapStateToProps)(TestDetails);

src/renderer/redux/actions/ui.js

@@ -0,0 +1,14 @@
+export const SET_CONTENT = "SET_CONTENT";
+export const SET_CURRENT_TEST = "SET_CURRENT_TEST";
+
+export const setContent = content => ({
+  type: SET_CONTENT,
+  payload: {
+    content
+  }
+});
+
+export const setCurrentTest = (currentTestIndex, currentTestName) => ({
+  type: SET_CURRENT_TEST,
+  payload: { currentTestIndex, currentTestName }
+});

src/renderer/redux/reducers/ui.js

@@ -0,0 +1,19 @@
+const defaultState = {
+  content: "Main",
+  currentTestIndex: null,
+  currentTestName: null
+};
+
+export default (state = defaultState, action) => {
+  switch (action.type) {
+    case "SET_CONTENT":
+      return Object.assign({}, state, { content: action.payload.content });
+    case "SET_CURRENT_TEST":
+      return Object.assign({}, state, {
+        currentTestIndex: action.payload.currentTestIndex,
+        currentTestName: action.payload.currentTestName
+      });
+    default:
+      return state;
+  }
+};

src/renderer/redux/store/store.js

@@ -1,12 +1,14 @@
 import { createStore, combineReducers, compose, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 import configReducer from "../reducers/config";
+import uiReducer from "../reducers/ui";
 
 const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const store = createStore(
   combineReducers({
-    config: configReducer
+    config: configReducer,
+    ui: uiReducer
   }),
   composeEnhancer(applyMiddleware(thunk))
 );