Feat: Enhance the testruns page (guidewire-oss#14)

tedd-E · Oct 7, 2024 · ced8f9b · ced8f9b
1 parent 498e7a5
commit ced8f9b
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,4 +20,7 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+
+.idea
+*.iml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,14 +18,16 @@
     "moment": "^2.30.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.8.1",
+    "uniqolor": "^1.1.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^18.16.2",
+    "@types/randomcolor": "^0.5.9",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",

diff --git a/src/pages/test-runs/list-utils.tsx b/src/pages/test-runs/list-utils.tsx
@@ -2,6 +2,7 @@ import {ISpecRun, ISuiteRun, ITag, ITestRun} from "./interfaces";
 import {Space, Table, Tag} from "antd";
 import React from "react";
 import moment from "moment/moment";
+import uniqolor from 'uniqolor';
 
 export const calculateDuration = (start: moment.MomentInput, end: moment.MomentInput) => {
     const duration = moment(end).diff(moment(start));
@@ -47,8 +48,8 @@ export const uniqueTags = (specRuns: ISpecRun[]) => {
     return tags;
 }
 
-export const randomTagColor = () => {
-    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+export const generateTagColor = (tag: string) => {
+    return uniqolor(tag).color;
 }
 
 export const calculateSpecRuns = (testRun: ITestRun) => {
@@ -65,6 +66,7 @@ export const calculateSpecRuns = (testRun: ITestRun) => {
     return `${passedSpecRuns}/${totalSpecRuns}`;
 }
 
+
 export const expandedRowRender = (testRun: ITestRun) => (
     <>
         {testRun.suite_runs.map((suiteRun, suiteIndex) =>
@@ -88,7 +90,19 @@ export const expandedRowRender = (testRun: ITestRun) => (
                 <Table.Column title="Message"
                               dataIndex="message"
                               key="message"
-                              width={200}/>
+                              width={200}
+                              render={(message: string) => (
+                                  <div>
+                                      <pre style={{
+                                          whiteSpace: "pre",
+                                          overflowX: "auto",
+                                          maxHeight: "500px",
+                                      }}>
+                                         {message}
+                                     </pre>
+                                  </div>
+                              )}
+                />
                 <Table.Column title="Status"
                               key="status"
                               width={100}
@@ -110,7 +124,7 @@ export const expandedRowRender = (testRun: ITestRun) => (
                               render={(_text, record: ISpecRun) => (
                                   <Space>
                                       {record.tags.map((tag: ITag, _) => (
-                                          <Tag color={randomTagColor()} key={tag.id}>{tag.name}</Tag>
+                                          <Tag color={generateTagColor(tag.name)} key={tag.id}>{tag.name}</Tag>
                                       ))}
                                   </Space>
                               )}/>

diff --git a/src/pages/test-runs/list.tsx b/src/pages/test-runs/list.tsx
@@ -7,7 +7,7 @@ import {
     calculateDuration,
     calculateSpecRuns,
     expandedRowRender,
-    randomTagColor,
+    generateTagColor,
     testRunsStatus,
     uniqueTags
 } from "./list-utils";
@@ -52,6 +52,9 @@ export const TestRunsList = () => {
                 <Table.Column title="Duration"
                               key="duration"
                               render={(_text, record: ITestRun) => calculateDuration(record.start_time, record.end_time)}/>
+                <Table.Column title="Date"
+                              key={"date"}
+                              render={(_text, testRun: ITestRun) => new Date(testRun.start_time).toLocaleString() }/>
                 <Table.Column title="Tags"
                               key="tags"
                               width={500}
@@ -62,7 +65,7 @@ export const TestRunsList = () => {
                                               .suite_runs
                                               .flatMap(suiteRun => suiteRun.spec_runs))
                                               .map((tag: ITag, tagIndex) => (
-                                                  <Tag key={tagIndex} color={randomTagColor()}>
+                                                  <Tag key={tagIndex} color={generateTagColor(tag.name)}>
                                                       {tag.name}
                                                   </Tag>
                                               ))

diff --git a/src/providers/data-provider.ts b/src/providers/data-provider.ts
@@ -13,7 +13,7 @@ export const dataProvider: DataProvider = {
 
         const response = await axios.get(url);
         return {
-            data: response.data.testRuns,
+            data: response.data.testRuns.reverse(),
             total: response.data.total,
         };
     },

diff --git a/test/unit/list-utils.test.tsx b/test/unit/list-utils.test.tsx
@@ -1,4 +1,10 @@
-import {calculateDuration, calculateSpecRuns, testRunsStatus, uniqueTags} from "../../src/pages/test-runs/list-utils";
+import {
+    calculateDuration,
+    calculateSpecRuns,
+    generateTagColor,
+    testRunsStatus,
+    uniqueTags
+} from "../../src/pages/test-runs/list-utils";
 import {apiResponse} from "../utils/dataMocks";
 import {ISpecRun, ITestRun} from "../../src/pages/test-runs/interfaces";
 
@@ -41,4 +47,17 @@ describe('TestRunsList Unit Tests', () => {
         const testRun = apiResponse.testRuns;
         expect(calculateSpecRuns(testRun)).toBe('1/2');
     });
+
+    it('should assign consistent colors to the same tags', () => {
+        const tagOne = "acceptance";
+        const tagTwo = "unit";
+        const tagThree = "acceptance";
+
+        const tagOneColor = generateTagColor(tagOne);
+        const tagTwoColor = generateTagColor(tagTwo);
+        const tagThreeColor = generateTagColor(tagThree);
+
+        expect(tagOneColor).toEqual(tagThreeColor);
+        expect(tagTwoColor).not.toEqual(tagOneColor);
+    })
 });