From 5e34ce5ce917617146797241d90dee40edab9a92 Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Tue, 31 Oct 2023 12:08:28 +0100 Subject: [PATCH] [NO JIRA] Make test selector in a better shape for future refactoring --- .../main/js/apps/code/__tests__/Code-it.ts | 4 +- .../src/main/js/helpers/testSelector.ts | 132 ++++++++---------- 2 files changed, 64 insertions(+), 72 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts b/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts index f0f92a72982..726cd47a676 100644 --- a/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts +++ b/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts @@ -28,7 +28,7 @@ import { isDiffMetric } from '../../../helpers/measures'; import { mockComponent } from '../../../helpers/mocks/component'; import { mockMeasure } from '../../../helpers/testMocks'; import { renderAppWithComponentContext } from '../../../helpers/testReactTestingUtils'; -import { ReactTestingQuery, byLabelText, byRole, byText } from '../../../helpers/testSelector'; +import { QuerySelector, byLabelText, byRole, byText } from '../../../helpers/testSelector'; import { ComponentQualifier } from '../../../types/component'; import { MetricKey } from '../../../types/metrics'; import { Component } from '../../../types/types'; @@ -400,7 +400,7 @@ function getPageObject(user: UserEvent) { newCodeBtn: byRole('radio', { name: 'projects.view.new_code' }), overallCodeBtn: byRole('radio', { name: 'projects.view.overall_code' }), measureRow: (name: string | RegExp) => byLabelText(name), - measureValueCell: (row: ReactTestingQuery, name: string, value: string) => { + measureValueCell: (row: QuerySelector, name: string, value: string) => { const i = Array.from(screen.getAllByRole('columnheader')).findIndex( (c) => c.textContent?.includes(name), ); diff --git a/server/sonar-web/src/main/js/helpers/testSelector.ts b/server/sonar-web/src/main/js/helpers/testSelector.ts index 1e4b9af3dde..921cad108aa 100644 --- a/server/sonar-web/src/main/js/helpers/testSelector.ts +++ b/server/sonar-web/src/main/js/helpers/testSelector.ts @@ -32,7 +32,7 @@ function maybeScreen(container?: HTMLElement) { return container ? within(container) : screen; } -export interface ReactTestingQuery { +interface ReactTestingQuery { find( container?: HTMLElement, waitForOptions?: waitForOptions, @@ -45,43 +45,44 @@ export interface ReactTestingQuery { getAll(container?: HTMLElement): T[]; query(container?: HTMLElement): T | null; queryAll(container?: HTMLElement): T[] | null; +} - byText(...args: Parameters>): ReactTestingQuery; - byRole(...args: Parameters>): ReactTestingQuery; - byPlaceholderText(...args: Parameters>): ReactTestingQuery; - byLabelText(...args: Parameters>): ReactTestingQuery; - byTestId(...args: Parameters>): ReactTestingQuery; - byDisplayValue(...args: Parameters>): ReactTestingQuery; - by(selector: ReactTestingQuery): ReactTestingQuery; - - getAt(index: number, container?: HTMLElement): T; - findAt( - index: number, - container?: HTMLElement, - waitForOptions?: waitForOptions, - ): Promise; +export class QuerySelector { + dispatchQuery: ReactTestingQuery; - queryAt(index: number, container?: HTMLElement): T | null; -} + constructor(dispatchQuery: ReactTestingQuery) { + this.dispatchQuery = dispatchQuery; + } -abstract class ChainingQuery implements ReactTestingQuery { - abstract find( + find( container?: HTMLElement, waitForOptions?: waitForOptions, - ): Promise; + ): Promise { + return this.dispatchQuery.find(container, waitForOptions); + } - abstract findAll( + findAll( container?: HTMLElement, waitForOptions?: waitForOptions, - ): Promise; + ): Promise { + return this.dispatchQuery.findAll(container, waitForOptions); + } - abstract get(container?: HTMLElement): T; + get(container?: HTMLElement): T { + return this.dispatchQuery.get(container); + } - abstract getAll(container?: HTMLElement): T[]; + getAll(container?: HTMLElement): T[] { + return this.dispatchQuery.getAll(container); + } - abstract query(container?: HTMLElement): T | null; + query(container?: HTMLElement): T | null { + return this.dispatchQuery.query(container); + } - abstract queryAll(container?: HTMLElement): T[] | null; + queryAll(container?: HTMLElement): T[] | null { + return this.dispatchQuery.queryAll(container); + } getAt(index: number, container?: HTMLElement): T { return this.getAll(container)[index]; @@ -103,31 +104,31 @@ abstract class ChainingQuery implements ReactTestingQuery { return null; } - by(selector: ReactTestingQuery): ReactTestingQuery { + by(selector: ReactTestingQuery): QuerySelector { return new ChainDispatch(this, selector); } - byText(...args: Parameters>): ReactTestingQuery { + byText(...args: Parameters>): QuerySelector { return this.by(new DispatchByText(args)); } - byRole(...args: Parameters>): ReactTestingQuery { + byRole(...args: Parameters>): QuerySelector { return this.by(new DispatchByRole(args)); } - byPlaceholderText(...args: Parameters>): ReactTestingQuery { + byPlaceholderText(...args: Parameters>): QuerySelector { return this.by(new DispatchByPlaceholderText(args)); } - byLabelText(...args: Parameters>): ReactTestingQuery { + byLabelText(...args: Parameters>): QuerySelector { return this.by(new DispatchByLabelText(args)); } - byTestId(...args: Parameters>): ReactTestingQuery { + byTestId(...args: Parameters>): QuerySelector { return this.by(new DispatchByTestId(args)); } - byDisplayValue(...args: Parameters>): ReactTestingQuery { + byDisplayValue(...args: Parameters>): QuerySelector { return this.by(new DispatchByDisplayValue(args)); } @@ -136,64 +137,61 @@ abstract class ChainingQuery implements ReactTestingQuery { } } -class ChainDispatch extends ChainingQuery { - insideQuery: ReactTestingQuery; - elementQuery: ReactTestingQuery; +class ChainDispatch extends QuerySelector { + innerQuery: QuerySelector; - constructor(insideQuery: ReactTestingQuery, elementQuery: ReactTestingQuery) { - super(); - this.insideQuery = insideQuery; - this.elementQuery = elementQuery; + constructor(insideQuery: QuerySelector, elementQuery: ReactTestingQuery) { + super(elementQuery); + this.innerQuery = insideQuery; } async find( container?: HTMLElement, waitForOptions?: waitForOptions, ) { - return this.elementQuery.find(await this.insideQuery.find(container, waitForOptions)); + return this.dispatchQuery.find(await this.innerQuery.find(container, waitForOptions)); } async findAll( container?: HTMLElement, waitForOptions?: waitForOptions, ) { - return this.elementQuery.findAll(await this.insideQuery.find(container, waitForOptions)); + return this.dispatchQuery.findAll(await this.innerQuery.find(container, waitForOptions)); } get(container?: HTMLElement) { - return this.elementQuery.get(this.insideQuery.get(container)); + return this.dispatchQuery.get(this.innerQuery.get(container)); } getAll(container?: HTMLElement) { - const containers = this.insideQuery.getAll(container); + const containers = this.innerQuery.getAll(container); return containers.reduce( - (acc, item) => [...acc, ...(this.elementQuery.queryAll(item) ?? [])], + (acc, item) => [...acc, ...(this.dispatchQuery.queryAll(item) ?? [])], [], ); } query(container?: HTMLElement) { - const innerContainer = this.insideQuery.query(container); + const innerContainer = this.innerQuery.query(container); if (innerContainer) { - return this.elementQuery.query(innerContainer); + return this.dispatchQuery.query(innerContainer); } return null; } queryAll(container?: HTMLElement) { - const innerContainer = this.insideQuery.query(container); + const innerContainer = this.innerQuery.query(container); if (innerContainer) { - return this.elementQuery.queryAll(innerContainer); + return this.dispatchQuery.queryAll(innerContainer); } return null; } } -class DispatchByText extends ChainingQuery { +class DispatchByText implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -228,11 +226,10 @@ class DispatchByText extends ChainingQuery { } } -class DispatchByLabelText extends ChainingQuery { +class DispatchByLabelText implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -267,11 +264,10 @@ class DispatchByLabelText extends ChainingQuery { } } -class DispatchByRole extends ChainingQuery { +class DispatchByRole implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -306,11 +302,10 @@ class DispatchByRole extends ChainingQuery { } } -class DispatchByTestId extends ChainingQuery { +class DispatchByTestId implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -345,11 +340,10 @@ class DispatchByTestId extends ChainingQuery { } } -class DispatchByTitle extends ChainingQuery { +class DispatchByTitle implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -384,11 +378,10 @@ class DispatchByTitle extends ChainingQuery { } } -class DispatchByDisplayValue extends ChainingQuery { +class DispatchByDisplayValue implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -423,11 +416,10 @@ class DispatchByDisplayValue extends ChainingQuery { } } -class DispatchByPlaceholderText extends ChainingQuery { +class DispatchByPlaceholderText implements ReactTestingQuery { readonly args: Parameters>; constructor(args: Parameters>) { - super(); this.args = args; } @@ -463,29 +455,29 @@ class DispatchByPlaceholderText extends ChainingQuery { } export function byText(...args: Parameters>) { - return new DispatchByText(args); + return new QuerySelector(new DispatchByText(args)); } export function byRole(...args: Parameters>) { - return new DispatchByRole(args); + return new QuerySelector(new DispatchByRole(args)); } export function byPlaceholderText(...args: Parameters>) { - return new DispatchByPlaceholderText(args); + return new QuerySelector(new DispatchByPlaceholderText(args)); } export function byLabelText(...args: Parameters>) { - return new DispatchByLabelText(args); + return new QuerySelector(new DispatchByLabelText(args)); } export function byTestId(...args: Parameters>) { - return new DispatchByTestId(args); + return new QuerySelector(new DispatchByTestId(args)); } export function byTitle(...args: Parameters>) { - return new DispatchByTitle(args); + return new QuerySelector(new DispatchByTitle(args)); } export function byDisplayValue(...args: Parameters>) { - return new DispatchByDisplayValue(args); + return new QuerySelector(new DispatchByDisplayValue(args)); } -- 2.39.5