testimio · gioragutt · Oct 6, 2020 · Oct 7, 2020 · Oct 7, 2020 · Oct 7, 2020
diff --git a/packages/client/src/components/HtmlViewer/HtmlViewer.tsx b/packages/client/src/components/HtmlViewer/HtmlViewer.tsx
@@ -0,0 +1,24 @@
+import { StepResult } from '@testim/root-cause-types';
+import React from 'react';
+import { apiUrl } from '../../stores/MainStore';
+import styles from './styles.module.scss';
+
+export interface HtmlViewerProps {
+  className?: string;
+  step: StepResult;
+}
+
+export function HtmlViewer({ step: { mhtmlFile }, className: containerClass }: HtmlViewerProps) {
+  if (!mhtmlFile) {
+    // TODO: provide nicer image, like in logs file
+    return <div>No HTML Recorded</div>;
+  }
+
+  return (
+    <div className={containerClass}>
+      <div className={styles.innerContainer}>
+        <iframe title={mhtmlFile} src={`${apiUrl}/test/html/${mhtmlFile}`} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/client/src/components/HtmlViewer/styles.module.scss b/packages/client/src/components/HtmlViewer/styles.module.scss
@@ -0,0 +1,12 @@
+.innerContainer {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75);
+}
+
+iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
diff --git a/packages/client/src/components/SingleTestResultPage/SingleTestResultPage.tsx b/packages/client/src/components/SingleTestResultPage/SingleTestResultPage.tsx
@@ -4,12 +4,13 @@ import { StackTrace } from '../StackTrace/StackTrace';
 import { Logs } from '../Logs/Logs';
 import { StepsSidebar } from '../StepsSidebar/StepsSidebar';
 import { TestResultTitlebar } from '../TestResultTitlebar/TestResultTitlebar';
-import { StepResultTitlebar } from '../StepResultTitlebar/StepResultTitlebar';
+import { StepResultTab, StepResultTitlebar } from '../StepResultTitlebar/StepResultTitlebar';
 import styles from './styles.module.css';
 import { NetworkViewer } from '../NetworkViewer/NetworkViewer';
 import type { MainStore } from '../../stores/MainStore';
 import { ZeroStepsTest } from '../ZeroStepsTest/ZeroStepsTest';
 import { observer } from 'mobx-react-lite';
+import { HtmlViewer } from '../HtmlViewer/HtmlViewer';
 
 export const SingleTestResultPage = observer(function SingleTestResultPage({
   mainStore,
@@ -18,9 +19,7 @@ export const SingleTestResultPage = observer(function SingleTestResultPage({
   mainStore: MainStore;
   isClickimMode: boolean;
 }) {
-  const [selectedTab, selectTab] = React.useState<
-    'screenshots' | 'stacktrace' | 'logs' | 'network'
-  >('screenshots');
+  const [selectedTab, selectTab] = React.useState<StepResultTab>('screenshots');
 
   const { selectedStep } = mainStore;
 
@@ -44,9 +43,14 @@ export const SingleTestResultPage = observer(function SingleTestResultPage({
       );
     }
 
+    if (selectedTab === 'html') {
+      return <HtmlViewer step={selectedStep} className={styles.htmlContainer} />;
+    }
+
     if (selectedTab === 'stacktrace') {
       return <StackTrace step={selectedStep} />;
     }
+
     if (selectedTab === 'logs') {
       return <Logs step={selectedStep} />;
     }

diff --git a/packages/client/src/components/SingleTestResultPage/styles.module.css b/packages/client/src/components/SingleTestResultPage/styles.module.css
@@ -1,19 +1,21 @@
 .tabWrapper {
-  overflow: hidden;
   width: 100%;
   height: 100%;
 }
 
-.screenshotContainer {
+.screenshotContainer,
+.htmlContainer {
   display: flex;
   width: 100%;
   align-items: center;
   height: 100%;
   justify-content: center;
 }
+
 .screenshotContainer .image {
   overflow: hidden;
 }
+
 .loader:before {
   position: absolute;
   content: ' ';
@@ -44,6 +46,7 @@
   padding-top: 30px;
   padding-bottom: 30px;
 }
+
 .stepContents .navButton {
   width: 28px;
   height: 28px;
@@ -54,12 +57,15 @@
   cursor: pointer;
   user-select: none;
 }
+
 .stepContents .navButton:hover {
   background: #dbdfe3;
 }
+
 .stepContents .navButton:nth-child(3) .arrowIconSvg {
   transform: rotate(180deg);
 }
+
 .stepContents .screenshot {
   background: white;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
@@ -87,6 +93,7 @@
   height: 100%;
   background: white;
 }
+
 .app:focus {
   outline: none;
 }

diff --git a/packages/client/src/components/StepResultTitlebar/StepResultTitlebar.tsx b/packages/client/src/components/StepResultTitlebar/StepResultTitlebar.tsx
@@ -6,6 +6,32 @@ import classnames from 'classnames';
 import type { Har } from 'har-format';
 import stripAnsi from 'strip-ansi';
 
+export type StepResultTab = 'screenshots' | 'html' | 'stacktrace' | 'logs' | 'network';
+
+function Tab({
+  tabName,
+  selectedTab,
+  selectTab,
+}: {
+  selectedTab: string;
+  tabName: StepResultTab;
+  selectTab(tab: StepResultTab): void;
+}) {
+  return (
+    <div
+      className={classnames({ [styles.selected]: selectedTab === tabName })}
+      onClick={() => selectTab(tabName)}
+    >
+      <div>
+        {tabName.toUpperCase()}
+        <div className={styles.underline}></div>
+      </div>
+    </div>
+  );
+}
+
+const SIMPLE_TABS: StepResultTab[] = ['screenshots', 'html', 'stacktrace', 'logs'];
+
 export const StepResultTitlebar = function StepResultTitlebar({
   selectedStep,
   selectedTab,
@@ -14,17 +40,19 @@ export const StepResultTitlebar = function StepResultTitlebar({
   isClickimMode,
 }: {
   selectedStep: StepResult;
-  selectedTab: 'screenshots' | 'stacktrace' | 'logs' | 'network';
-  selectTab(tab: 'screenshots' | 'stacktrace' | 'logs' | 'network'): unknown;
+  selectedTab: StepResultTab;
+  selectTab(tab: StepResultTab): void;
   harFileContents: Har | undefined;
   isClickimMode: boolean;
 }) {
   const [hover, setHover] = useState<boolean>(false);
   const [toolTipNeeded, setToolTipNeeded] = useState<boolean>(false);
   const stepNameRef = useRef<HTMLSpanElement>(null);
+
   const stepErrorStr = selectedStep.stepError?.message
     ? stripAnsi(selectedStep.stepError?.message).substr(0, 100)
     : undefined;
+
   const stepName = selectedStep.name ? stripAnsi(selectedStep.name) : undefined;
 
   useLayoutEffect(() => {
@@ -37,7 +65,7 @@ export const StepResultTitlebar = function StepResultTitlebar({
 
     window.addEventListener('resize', handleResize, { passive: true });
     return () => window.removeEventListener('resize', handleResize);
-  }, [toolTipNeeded, selectedStep]);
+  }, [setToolTipNeeded, selectedStep]);
 
   return (
     <div
@@ -58,52 +86,10 @@ export const StepResultTitlebar = function StepResultTitlebar({
         <span className={styles.stepError}>{stepErrorStr}</span>
       </div>
       <div className={styles.tabs}>
-        <div
-          className={classnames({ [styles.selected]: selectedTab === 'screenshots' })}
-          onClick={() => {
-            selectTab('screenshots');
-          }}
-        >
-          <div>
-            SCREENSHOT
-            <div className={styles.underline}></div>
-          </div>
-        </div>
-        <div
-          className={classnames({ [styles.selected]: selectedTab === 'stacktrace' })}
-          onClick={() => {
-            selectTab('stacktrace');
-          }}
-        >
-          <div>
-            STACKTRACE
-            <div className={styles.underline}></div>
-          </div>
-        </div>
-        <div
-          className={classnames({ [styles.selected]: selectedTab === 'logs' })}
-          onClick={() => {
-            selectTab('logs');
-          }}
-        >
-          <div>
-            LOGS
-            <div className={styles.underline}></div>
-          </div>
-        </div>
-        {harFileContents && (
-          <div
-            className={classnames({ [styles.selected]: selectedTab === 'network' })}
-            onClick={() => {
-              selectTab('network');
-            }}
-          >
-            <div>
-              NETWORK
-              <div className={styles.underline}></div>
-            </div>
-          </div>
-        )}
+        {SIMPLE_TABS.map((tabName) => (
+          <Tab {...{ key: tabName, tabName, selectedTab, selectTab }} />
+        ))}
+        {harFileContents && <Tab {...{ tabName: 'network', selectedTab, selectTab }} />}
       </div>
     </div>
   );

diff --git a/packages/root-cause-core/lib/__snapshots__/launch-api.test.ts.snap b/packages/root-cause-core/lib/__snapshots__/launch-api.test.ts.snap
@@ -7,6 +7,7 @@ Object {
     "endedTimestamp": 26,
     "fileName": "noise_removed/packages/root-cause-core/lib/launch-api.test.ts",
     "hasNetworkLogs": true,
+    "profilingFile": "profile.cpuprofile",
     "systemInfo": Object {
       "automationFramework": "puppeteer",
       "browser": "chromium",
@@ -25,9 +26,9 @@ Object {
         "callstack": Array [
           Object {
             "column": 29,
-            "file": "lib/assortedHooks.ts",
+            "file": "lib/hooks/testEndHook.ts",
             "function": "testEndHook",
-            "line": 118,
+            "line": 17,
           },
           Object {
             "column": 15,
@@ -39,7 +40,7 @@ Object {
             "column": 5,
             "file": "lib/attach.ts",
             "function": "endTest",
-            "line": 115,
+            "line": 120,
           },
           Object {
             "column": 5,
@@ -82,6 +83,7 @@ Object {
     "testFullName": "1-Launch api test Launch api test = failing",
     "testName": "Launch api test Launch api test = failing",
     "timestamp": 3,
+    "traceOutputFileName": "performanceTrace.json",
   },
   "steps": Array [
     Object {
@@ -798,6 +800,7 @@ Object {
     "endedTimestamp": 26,
     "fileName": "noise_removed/packages/root-cause-core/lib/launch-api.test.ts",
     "hasNetworkLogs": true,
+    "profilingFile": "profile.cpuprofile",
     "systemInfo": Object {
       "automationFramework": "puppeteer",
       "browser": "chromium",
@@ -817,6 +820,7 @@ Object {
     "testFullName": "1-Launch api test Launch api test passing",
     "testName": "Launch api test Launch api test passing",
     "timestamp": 3,
+    "traceOutputFileName": "performanceTrace.json",
   },
   "steps": Array [
     Object {

diff --git a/packages/root-cause-core/lib/__snapshots__/sanity-integration-playwright.test.ts.snap b/packages/root-cause-core/lib/__snapshots__/sanity-integration-playwright.test.ts.snap
@@ -7,6 +7,7 @@ Object {
     "endedTimestamp": 29,
     "fileName": "noise_removed/packages/root-cause-core/lib/sanity-integration-playwright.test.ts",
     "hasNetworkLogs": true,
+    "profilingFile": "profile.cpuprofile",
     "systemInfo": Object {
       "automationFramework": "playwright",
       "browser": "chromium",
@@ -25,9 +26,9 @@ Object {
         "callstack": Array [
           Object {
             "column": 29,
-            "file": "lib/assortedHooks.ts",
+            "file": "lib/hooks/testEndHook.ts",
             "function": "testEndHook",
-            "line": 118,
+            "line": 17,
           },
           Object {
             "column": 15,
@@ -39,7 +40,7 @@ Object {
             "column": 5,
             "file": "lib/attach.ts",
             "function": "endTest",
-            "line": 115,
+            "line": 120,
           },
           Object {
             "column": 5,

diff --git a/packages/root-cause-core/lib/__snapshots__/sanity-integration.test.ts.snap b/packages/root-cause-core/lib/__snapshots__/sanity-integration.test.ts.snap
@@ -7,6 +7,7 @@ Object {
     "endedTimestamp": 33,
     "fileName": "noise_removed/packages/root-cause-core/lib/sanity-integration.test.ts",
     "hasNetworkLogs": true,
+    "profilingFile": "profile.cpuprofile",
     "systemInfo": Object {
       "automationFramework": "puppeteer",
       "browser": "chromium",
@@ -25,9 +26,9 @@ Object {
         "callstack": Array [
           Object {
             "column": 29,
-            "file": "lib/assortedHooks.ts",
+            "file": "lib/hooks/testEndHook.ts",
             "function": "testEndHook",
-            "line": 118,
+            "line": 17,
           },
           Object {
             "column": 15,
@@ -39,7 +40,7 @@ Object {
             "column": 5,
             "file": "lib/attach.ts",
             "function": "endTest",
-            "line": 115,
+            "line": 120,
           },
           Object {
             "column": 5,
@@ -73,6 +74,7 @@ Object {
     "testFullName": "Sanity integration test Sanity integration test 1",
     "testName": "Sanity integration test 1",
     "timestamp": 2,
+    "traceOutputFileName": "performanceTrace.json",
   },
   "steps": Array [
     Object {

diff --git a/packages/root-cause-core/lib/__snapshots__/with-har-record.test.ts.snap b/packages/root-cause-core/lib/__snapshots__/with-har-record.test.ts.snap
@@ -7,6 +7,7 @@ Object {
     "endedTimestamp": 15,
     "fileName": "noise_removed/packages/root-cause-core/lib/with-har-record.test.ts",
     "hasNetworkLogs": true,
+    "profilingFile": "profile.cpuprofile",
     "systemInfo": Object {
       "automationFramework": "puppeteer",
       "browser": "chromium",
@@ -26,6 +27,7 @@ Object {
     "testFullName": "with har record with har record",
     "testName": "with har record",
     "timestamp": 2,
+    "traceOutputFileName": "performanceTrace.json",
   },
   "steps": Array [
     Object {