Refactors tests, updates snapshots

Farfetch · Sep 26, 2023 · ccc76d0 · ccc76d0
1 parent 89646fd
commit ccc76d0
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 8 deletions.
diff --git a/web/frontend/src/components/Run/RunningStatus/OverviewMetrics/OverviewMetrics.test.js b/web/frontend/src/components/Run/RunningStatus/OverviewMetrics/OverviewMetrics.test.js
@@ -4,13 +4,57 @@ import React from "react";
 import OverviewMetrics from "./OverviewMetrics";
 
 describe("OverviewMetrics", () => {
-  const mockRun = {
-    id: "123",
-    runStatus: "RUNNING"
+  const mockMetrics = [
+    {
+      key: "metric1",
+      errorsCount: 5,
+      successCount: 20,
+      errorRate: 25,
+      label: "Label 1",
+      rpm: 50,
+      totalCount: 25,
+      latencyAvg: 50,
+      latencyP50: 45,
+      latencyP90: 60,
+      latencyP99: 75,
+      responses: [{ responseCode: "200" }, { responseCode: "404" }]
+    },
+    {
+      key: "metric2",
+      errorsCount: 3,
+      successCount: 15,
+      errorRate: 20,
+      label: "Label 2",
+      rpm: 60,
+      totalCount: 18,
+      latencyAvg: 55,
+      latencyP50: 50,
+      latencyP90: 65,
+      latencyP99: 80,
+      responses: [{ responseCode: "200" }, { responseCode: "500" }]
+    }
+  ];
+
+  const mockTotals = {
+    totalLatencyAvg: 105,
+    totalLatencyP50: 95,
+    totalLatencyP90: 125,
+    totalLatencyP99: 155,
+    totalSuccessCount: 35,
+    totalErrorsCount: 8,
+    totalErrorsRate: 22.86,
+    totalCount: 43,
+    totalRpm: 110
   };
 
   test("should render OverviewMetrics component", () => {
-    const rendered = render(<OverviewMetrics run={mockRun} />);
+    const rendered = render(
+      <OverviewMetrics
+        metrics={mockMetrics}
+        totals={mockTotals}
+        isLoading={false}
+      />
+    );
     const component = rendered.container;
     expect(component.outerHTML).toMatchSnapshot();
   });

diff --git a/...c/components/Run/RunningStatus/OverviewMetrics/__snapshots__/OverviewMetrics.test.js.snap b/...c/components/Run/RunningStatus/OverviewMetrics/__snapshots__/OverviewMetrics.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OverviewMetrics should render OverviewMetrics component 1`] = `"<div><div class=\\"ant-row ant-row-center ant-row-middle\\" style=\\"align-self: center;\\"><div class=\\"ant-spin ant-spin-spinning\\"><span role=\\"img\\" aria-label=\\"loading\\" style=\\"font-size: 64px;\\" class=\\"anticon anticon-loading anticon-spin ant-spin-dot\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" data-icon=\\"loading\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\\"></path></svg></span></div></div></div>"`;
+exports[`OverviewMetrics should render OverviewMetrics component 1`] = `"<div><div style=\\"border: 1px solid #fff;\\"><div class=\\"ant-descriptions\\"><div class=\\"ant-descriptions-view\\"><table><tbody><tr class=\\"ant-descriptions-row\\"><td class=\\"ant-descriptions-item\\" style=\\"flex-wrap: wrap;\\" colspan=\\"3\\"><div class=\\"ant-descriptions-item-container\\"><span class=\\"ant-descriptions-item-content\\"><div class=\\"ant-statistic\\" style=\\"border: 1px solid #ffd166; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">Average Latency</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">52</span><span class=\\"ant-statistic-content-value-decimal\\">.50</span></span><span class=\\"ant-statistic-content-suffix\\">ms</span></div></div><div class=\\"ant-statistic\\" style=\\"border: 1px solid #ffab40; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">90% Latency</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">62</span><span class=\\"ant-statistic-content-value-decimal\\">.50</span></span><span class=\\"ant-statistic-content-suffix\\">ms</span></div></div><div class=\\"ant-statistic\\" style=\\"border: 1px solid #ff6b6b; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">Errors</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">22</span><span class=\\"ant-statistic-content-value-decimal\\">.86</span></span><span class=\\"ant-statistic-content-suffix\\">%</span></div></div><div class=\\"ant-statistic\\" style=\\"border: 1px solid #64b5f6; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">Average RPM</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">55</span></span><span class=\\"ant-statistic-content-suffix\\">req/min</span></div></div></span></div></td></tr></tbody></table></div></div></div></div>"`;
diff --git a/web/frontend/src/components/Run/RunningStatus/ResponseCodes/ResponseCodes.test.js b/web/frontend/src/components/Run/RunningStatus/ResponseCodes/ResponseCodes.test.js
@@ -4,10 +4,13 @@ import React from "react";
 import ResponseCodes from "./ResponseCodes";
 
 describe("ResponseCodes", () => {
-  const mockRunId = "123";
+  const mockErrorCodes = {
+    500: [{ key: "error1", errorsCount: 5, responses: [] }],
+    501: [{ key: "error2", errorsCount: 3, responses: [] }]
+  };
 
   test("should render ResponseCodes component", () => {
-    const rendered = render(<ResponseCodes runId={mockRunId} />);
+    const rendered = render(<ResponseCodes errorCodes={mockErrorCodes} />);
     const component = rendered.container;
     expect(component.outerHTML).toMatchSnapshot();
   });

diff --git a/...d/src/components/Run/RunningStatus/ResponseCodes/__snapshots__/ResponseCodes.test.js.snap b/...d/src/components/Run/RunningStatus/ResponseCodes/__snapshots__/ResponseCodes.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ResponseCodes should render ResponseCodes component 1`] = `"<div><div><h3>Error Codes ( Filter applied: &lt; 100 and &gt; 400 )</h3></div><div class=\\"ant-row ant-row-center ant-row-middle\\" style=\\"align-self: center;\\"><div class=\\"ant-spin ant-spin-spinning\\"><span role=\\"img\\" aria-label=\\"loading\\" style=\\"font-size: 64px;\\" class=\\"anticon anticon-loading anticon-spin ant-spin-dot\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" data-icon=\\"loading\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\\"></path></svg></span></div></div></div>"`;
+exports[`ResponseCodes should render ResponseCodes component 1`] = `"<div><div><h3>Error Codes ( Filter applied: &lt; 100 and &gt; 400 )</h3></div><div class=\\"ant-collapse ant-collapse-icon-position-left\\" role=\\"tablist\\"><div class=\\"ant-collapse-item\\"><div class=\\"ant-collapse-header\\" role=\\"tab\\" tabindex=\\"0\\" aria-expanded=\\"false\\"><div><span role=\\"img\\" aria-label=\\"right\\" class=\\"anticon anticon-right ant-collapse-arrow\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"right\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z\\"></path></svg></span></div><span>500 <span class=\\"ant-badge ant-badge-not-a-wrapper\\"><sup data-show=\\"true\\" class=\\"ant-scroll-number ant-badge-count\\" title=\\"5\\"><span class=\\"ant-scroll-number-only\\" style=\\"transition: none;\\"><span class=\\"ant-scroll-number-only-unit current\\">5</span></span></sup></span></span></div></div><div class=\\"ant-collapse-item\\"><div class=\\"ant-collapse-header\\" role=\\"tab\\" tabindex=\\"0\\" aria-expanded=\\"false\\"><div><span role=\\"img\\" aria-label=\\"right\\" class=\\"anticon anticon-right ant-collapse-arrow\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"right\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z\\"></path></svg></span></div><span>501 <span class=\\"ant-badge ant-badge-not-a-wrapper\\"><sup data-show=\\"true\\" class=\\"ant-scroll-number ant-badge-count\\" title=\\"3\\"><span class=\\"ant-scroll-number-only\\" style=\\"transition: none;\\"><span class=\\"ant-scroll-number-only-unit current\\">3</span></span></sup></span></span></div></div></div></div>"`;
diff --git a/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.test.js b/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.test.js
@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import RunSummaryTable from "./RunSummaryTable";
+
+describe("RunSummaryTable", () => {
+  const mockMetrics = [
+    {
+      label: "Label 1",
+      latencyP50: 50,
+      latencyP99: 60,
+      totalCount: 100,
+      successCount: 90,
+      errorsCount: 10,
+      errorRate: 10,
+      rpm: 200,
+      responses: [
+        { responseCode: "200", messages: ["Success message 1"] },
+        { responseCode: "400", messages: ["Error message 1"] }
+      ]
+    }
+  ];
+
+  const mockTotals = {
+    totalLatencyP50: 55,
+    totalLatencyP99: 65,
+    totalCount: 200,
+    totalSuccessCount: 180,
+    totalErrorsCount: 20,
+    totalErrorsRate: 10,
+    totalRpm: 400
+  };
+
+  test("should render RunSummaryTable component", () => {
+    const rendered = render(
+      <RunSummaryTable
+        metrics={mockMetrics}
+        isLoading={false}
+        totals={mockTotals}
+        setLabelToShowGraph={() => {}}
+        setActiveTabKey={() => {}}
+      />
+    );
+
+    const component = rendered.container;
+    expect(component.outerHTML).toMatchSnapshot();
+  });
+});