chore(new-ui): implement test steps display in new ui (#599)

* feat: implement test steps display in new ui * fix: fix minor visual glitches and remove console logs * fix: fix review issues
gemini-testing · Sep 11, 2024 · 7a7b9b1 · 7a7b9b1
1 parent de93a62
commit 7a7b9b1
Show file tree

Hide file tree

Showing 55 changed files with 19,042 additions and 23,024 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@ sqlite.db
 .DS_Store
 .nyc_output
 tmp
+**/.testplane
 
 **/playwright-report
 hermione-report

diff --git a/lib/adapters/test-result/index.ts b/lib/adapters/test-result/index.ts
@@ -1,5 +1,5 @@
 import {TestStatus} from '../../constants';
-import {ErrorDetails, ImageBase64, ImageFile, ImageInfoFull, TestError} from '../../types';
+import {ErrorDetails, ImageBase64, ImageFile, ImageInfoFull, TestError, TestStepCompressed} from '../../types';
 
 export interface ReporterTestResult {
     readonly attempt: number;
@@ -9,7 +9,7 @@ export interface ReporterTestResult {
     readonly errorDetails: ErrorDetails | null;
     readonly file: string;
     readonly fullName: string;
-    readonly history: string[];
+    readonly history: TestStepCompressed[];
     readonly id: string;
     readonly imageDir: string;
     readonly imagesInfo: ImageInfoFull[];

diff --git a/lib/adapters/test-result/playwright.ts b/lib/adapters/test-result/playwright.ts
@@ -15,7 +15,7 @@ import {
     ImageInfoDiff,
     ImageInfoFull, ImageInfoNoRef, ImageInfoPageError, ImageInfoPageSuccess, ImageInfoSuccess, ImageInfoUpdated,
     ImageSize,
-    TestError
+    TestError, TestStepCompressed, TestStepKey
 } from '../../types';
 import type {CoordBounds} from 'looks-same';
 
@@ -153,6 +153,17 @@ const getImageData = (attachment: PlaywrightAttachment | undefined): PlaywrightI
     };
 };
 
+const getHistory = (steps?: PlaywrightTestResult['steps']): TestStepCompressed[] => {
+    return steps?.map(step => ({
+        [TestStepKey.Name]: step.title,
+        [TestStepKey.Args]: [],
+        [TestStepKey.IsFailed]: Boolean(step.error),
+        [TestStepKey.Duration]: step.duration,
+        [TestStepKey.Children]: getHistory(step.steps),
+        [TestStepKey.IsGroup]: step.steps?.length > 0
+    })) ?? [];
+};
+
 export class PlaywrightTestResultAdapter implements ReporterTestResult {
     private readonly _testCase: PlaywrightTestCase;
     private readonly _testResult: PlaywrightTestResult;
@@ -219,8 +230,8 @@ export class PlaywrightTestResultAdapter implements ReporterTestResult {
         return this.testPath.join(DEFAULT_TITLE_DELIMITER);
     }
 
-    get history(): string[] {
-        return this._testResult.steps.map(step => `${step.title} <- ${step.duration}ms\n`);
+    get history(): TestStepCompressed[] {
+        return getHistory(this._testResult.steps);
     }
 
     get id(): string {

diff --git a/lib/adapters/test-result/reporter.ts b/lib/adapters/test-result/reporter.ts
@@ -1,5 +1,5 @@
 import {TestStatus} from '../../constants';
-import {TestError, ErrorDetails, ImageInfoFull, ImageBase64, ImageFile} from '../../types';
+import {TestError, ErrorDetails, ImageInfoFull, ImageBase64, ImageFile, TestStepCompressed} from '../../types';
 import {ReporterTestResult} from './index';
 import _ from 'lodash';
 import {extractErrorDetails} from './utils';
@@ -52,7 +52,7 @@ export class ReporterTestAdapter implements ReporterTestResult {
         return this._testResult.fullName;
     }
 
-    get history(): string[] {
+    get history(): TestStepCompressed[] {
         return this._testResult.history;
     }
 

diff --git a/lib/adapters/test-result/sqlite.ts b/lib/adapters/test-result/sqlite.ts
@@ -7,7 +7,7 @@ import {
     ImageInfoFull,
     ImageBase64,
     ImageFile,
-    RawSuitesRow
+    RawSuitesRow, TestStepCompressed
 } from '../../types';
 import {ReporterTestResult} from './index';
 import {Writable} from 'type-fest';
@@ -76,12 +76,12 @@ export class SqliteTestResultAdapter implements ReporterTestResult {
         return this._parsedTestResult.fullName as string;
     }
 
-    get history(): string[] {
+    get history(): TestStepCompressed[] {
         if (!_.has(this._parsedTestResult, 'history')) {
-            this._parsedTestResult.history = tryParseJson(this._testResult[DB_COLUMN_INDEXES.history]) as string[];
+            this._parsedTestResult.history = tryParseJson(this._testResult[DB_COLUMN_INDEXES.history]) as TestStepCompressed[];
         }
 
-        return this._parsedTestResult.history as string[];
+        return this._parsedTestResult.history as TestStepCompressed[];
     }
 
     get id(): string {

diff --git a/lib/adapters/test-result/testplane.ts b/lib/adapters/test-result/testplane.ts
@@ -4,7 +4,6 @@ import type Testplane from 'testplane';
 import type {Test as TestplaneTest} from 'testplane';
 import {ValueOf} from 'type-fest';
 
-import {getCommandsHistory} from '../../history-utils';
 import {ERROR, FAIL, SUCCESS, TestStatus, UNKNOWN_SESSION_ID, UPDATED} from '../../constants';
 import {getError, hasUnrelatedToScreenshotsErrors, isImageDiffError, isNoRefImageError, wrapLinkByTag} from '../../common-utils';
 import {
@@ -20,7 +19,7 @@ import {
     ImageInfoPageSuccess,
     ImageInfoSuccess,
     ImageInfoUpdated,
-    TestError
+    TestError, TestStepCompressed, TestStepKey
 } from '../../types';
 import {ReporterTestResult} from './index';
 import {getSuitePath} from '../../plugin-utils';
@@ -47,6 +46,24 @@ const wrapSkipComment = (skipComment: string | null | undefined): string => {
     return skipComment ? wrapLinkByTag(skipComment) : 'Unknown reason';
 };
 
+const getHistory = (history?: TestplaneTestResult['history']): TestStepCompressed[] => {
+    return history?.map(h => {
+        const result: TestStepCompressed = {
+            [TestStepKey.Name]: h[TestStepKey.Name],
+            [TestStepKey.Args]: h[TestStepKey.Args],
+            [TestStepKey.Duration]: h[TestStepKey.Duration],
+            [TestStepKey.IsFailed]: h[TestStepKey.IsFailed],
+            [TestStepKey.IsGroup]: h[TestStepKey.IsGroup]
+        };
+
+        if (h[TestStepKey.Children] && h[TestStepKey.IsFailed]) {
+            result[TestStepKey.Children] = getHistory(h[TestStepKey.Children]);
+        }
+
+        return result;
+    }) ?? [];
+};
+
 export interface TestplaneTestResultAdapterOptions {
     attempt: number;
     status: TestStatus;
@@ -163,8 +180,8 @@ export class TestplaneTestResultAdapter implements ReporterTestResult {
         return this._attempt;
     }
 
-    get history(): string[] {
-        return getCommandsHistory((this._testResult as TestplaneTestResult).history) as string[];
+    get history(): TestStepCompressed[] {
+        return getHistory((this._testResult as TestplaneTestResult).history);
     }
 
     get error(): undefined | TestError {

diff --git a/lib/adapters/test/testplane.ts b/lib/adapters/test/testplane.ts
@@ -63,6 +63,7 @@ export class TestplaneTestAdapter implements TestAdapter {
             {key: 'meta', value: meta}
         ].forEach(({key, value}) => {
             if (value) {
+                // @ts-expect-error TODO: fix this assignment.
                 test[key] = value;
             }
         });

diff --git a/lib/history-utils.js b/lib/history-utils.js
diff --git a/lib/plugin-utils.ts b/lib/plugin-utils.ts
@@ -1,6 +1,6 @@
 import {TestplaneSuite} from './types';
 
-export const getSuitePath = (suite?: TestplaneSuite): string[] => {
+export const getSuitePath = (suite?: TestplaneSuite | null): string[] => {
     if (!suite) {
         return [];
     }

diff --git a/lib/sqlite-client.ts b/lib/sqlite-client.ts
@@ -7,7 +7,7 @@ import NestedError from 'nested-error-stacks';
 import {getShortMD5} from './common-utils';
 import {TestStatus, DB_SUITES_TABLE_NAME, SUITES_TABLE_COLUMNS, LOCAL_DATABASE_NAME, DATABASE_URLS_JSON_NAME} from './constants';
 import {createTablesQuery} from './db-utils/common';
-import type {ImageInfoFull, TestError} from './types';
+import type {ImageInfoFull, TestError, TestStepCompressed} from './types';
 import {HtmlReporter} from './plugin-api';
 import {ReporterTestResult} from './adapters/test-result';
 import {DbTestResultTransformer} from './adapters/test-result/transformers/db';
@@ -33,7 +33,7 @@ interface DeleteParams {
 export interface DbTestResult {
     description?: string | null;
     error?: TestError;
-    history: string[];
+    history: TestStepCompressed[];
     imagesInfo: ImageInfoFull[];
     metaInfo: Record<string, unknown>;
     multipleTabs: boolean;

diff --git a/lib/static/components/section/body/history/index.jsx b/lib/static/components/section/body/history/index.jsx
@@ -6,17 +6,36 @@ import Details from '../../../details';
 
 import './index.styl';
 import {Card, List} from '@gravity-ui/uikit';
+import {TestStepKey} from '@/types';
 
 const History = ({history}) => {
+    function transformHistoryTreeToNestedArrays(item, level) {
+        const transformedItem = Object.assign({}, item);
+        transformedItem[TestStepKey.Name] = `${'\t'.repeat(level)}${transformedItem[TestStepKey.Name]}`;
+
+        const stepArgs = transformedItem[TestStepKey.Args];
+        if (stepArgs && stepArgs.length > 0) {
+            transformedItem[TestStepKey.Name] += `(${stepArgs.map(arg => `"${arg}"`).join(', ')})`;
+        }
+
+        if (!transformedItem[TestStepKey.Children]) {
+            return [transformedItem];
+        }
+
+        return [transformedItem].concat(transformedItem[TestStepKey.Children].map(childItem => transformHistoryTreeToNestedArrays(childItem, level + 1)));
+    }
+
+    const flatHistory = history.map(item => transformHistoryTreeToNestedArrays(item, 0)).flat(Infinity);
+
     const renderHistoryItem = (item) => {
-        const [name, time] = item.split(' <- ');
         return (
             <div className='history-item'>
-                <span className='history-item__name'>{name}</span>
-                <span className='history-item__time'>{time}</span>
+                <span className='history-item__name'>{item[TestStepKey.Name]}</span>
+                <span className='history-item__time'>{item[TestStepKey.Duration]} ms</span>
             </div>
         );
     };
+
     return (
         isEmpty(history)
             ? null
@@ -25,7 +44,7 @@ const History = ({history}) => {
                 content={
                     <Card className='details__card' view='filled'>
                         <div style={{display: `flex`}}>
-                            <List items={history} renderItem={renderHistoryItem} filterable={false} virtualized={false}/>
+                            <List items={flatHistory} renderItem={renderHistoryItem} filterable={false} virtualized={false}/>
                         </div>
                     </Card>
                 }
@@ -37,7 +56,7 @@ const History = ({history}) => {
 History.propTypes = {
     resultId: PropTypes.string.isRequired,
     // from store
-    history: PropTypes.arrayOf(PropTypes.string)
+    history: PropTypes.arrayOf(PropTypes.object)
 };
 
 export default connect(({tree}, {resultId}) => {

diff --git a/lib/static/modules/action-names.ts b/lib/static/modules/action-names.ts
@@ -61,5 +61,6 @@ export default {
     GROUP_TESTS_BY_KEY: 'GROUP_TESTS_BY_KEY',
     TOGGLE_BROWSER_CHECKBOX: 'TOGGLE_BROWSER_CHECKBOX',
     SUITES_PAGE_SET_CURRENT_SUITE: 'SUITES_PAGE_SET_CURRENT_SUITE',
-    SUITES_PAGE_SET_SECTION_EXPANDED: 'SUITES_PAGE_SET_SECTION_EXPANDED'
+    SUITES_PAGE_SET_SECTION_EXPANDED: 'SUITES_PAGE_SET_SECTION_EXPANDED',
+    SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED'
 } as const;
diff --git a/lib/static/modules/actions/suites-page.ts b/lib/static/modules/actions/suites-page.ts
@@ -17,6 +17,15 @@ type SetSectionExpandedStateAction = Action<typeof actionNames.SUITES_PAGE_SET_S
 export const setSectionExpandedState = (payload: SetSectionExpandedStateAction['payload']): SetSectionExpandedStateAction =>
     ({type: actionNames.SUITES_PAGE_SET_SECTION_EXPANDED, payload});
 
+type SetStepsExpandedStateAction = Action<typeof actionNames.SUITES_PAGE_SET_STEPS_EXPANDED, {
+    resultId: string;
+    expandedById: Record<string, boolean>;
+}>;
+
+export const setStepsExpandedState = (payload: SetStepsExpandedStateAction['payload']): SetStepsExpandedStateAction =>
+    ({type: actionNames.SUITES_PAGE_SET_STEPS_EXPANDED, payload});
+
 export type SuitesPageAction =
     | SuitesPageSetCurrentSuiteAction
-    | SetSectionExpandedStateAction;
+    | SetSectionExpandedStateAction
+    | SetStepsExpandedStateAction;
diff --git a/lib/static/modules/default-state.ts b/lib/static/modules/default-state.ts
@@ -98,7 +98,8 @@ export default Object.assign({config: configDefaults}, {
     },
     ui: {
         suitesPage: {
-            expandedSectionsById: {}
+            expandedSectionsById: {},
+            expandedStepsByResultId: {}
         }
     }
 }) satisfies State;
diff --git a/lib/static/modules/reducers/suites-page.ts b/lib/static/modules/reducers/suites-page.ts
@@ -18,6 +18,21 @@ export default (state: State, action: SuitesPageAction): State => {
                 }
             }) as State;
         }
+        case actionNames.SUITES_PAGE_SET_STEPS_EXPANDED: {
+            if (!action.payload.resultId) {
+                return state;
+            }
+
+            return applyStateUpdate(state, {
+                ui: {
+                    suitesPage: {
+                        expandedStepsByResultId: {
+                            [action.payload.resultId]: action.payload.expandedById
+                        }
+                    }
+                }
+            }) as State;
+        }
         default:
             return state;
     }

diff --git a/lib/static/new-ui.css b/lib/static/new-ui.css
@@ -7,6 +7,9 @@
     --color-link-hover: #818cf8;
     --color-bg-dark: #101827;
     --color-bg-gray: #eee;
+
+    --color-pink-100: #fce0ff;
+    --color-pink-600: #be00ffbf;
 }
 
 .g-root {

diff --git a/lib/static/new-ui/components/AttemptPickerItem/index.module.css b/lib/static/new-ui/components/AttemptPickerItem/index.module.css
@@ -18,15 +18,15 @@
 }
 
 .attempt-picker-item--fail {
-    --g-button-background-color: #fce0ff;
-    --g-button-text-color: #bd1993;
-    --g-button-border-color: #bd1993;
+    --g-button-background-color: var(--color-pink-100);
+    --g-button-text-color: var(--color-pink-600);
+    --g-button-border-color: var(--color-pink-600);
 }
 
 .attempt-picker-item--fail_error {
-    --g-button-background-color: #fce0ff;
-    --g-button-text-color: #bd1993;
-    --g-button-border-color: #bd1993;
+    --g-button-background-color: var(--color-pink-100);
+    --g-button-text-color: var(--color-pink-600);
+    --g-button-border-color: var(--color-pink-600);
 }
 
 .attempt-picker-item--non-matched {