Skip to content

Commit

Permalink
Yuhsuan/2064 e2e testid (#2356)
Browse files Browse the repository at this point in the history 
* add data testid attribute

* apply data testid attribute

* add data testid attribute

* add data testid attribute

* add data testid attribute

* add data testid attribute

* add region related testid

* add catalog related testid

* add header and table testid

* add load image related testid

* add matching tests related testid

* add moment related testid

* add pv related testid

* add widget related testid

* add profiler related testid

* add stats related testid

* add line query related testid

* improve docked widget testid

* add region list testid

* improve dialog testid

* improve numeric input spin box testid

* remove unused testid

* add progress cloud testid

* minor change
  • Loading branch information
@YuHsuan-Hwang
YuHsuan-Hwang committed May 6, 2024
1 parent bf5a5dc commit 90bdf82
Show file tree
Hide file tree
Showing 49 changed files with 484 additions and 187 deletions.
24 changes: 13 additions & 11 deletions src/components/Animator/AnimatorComponent.tsx
View file
Expand Up @@ -240,7 +240,7 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
numChannels - 1 - 4 * channelStep < channelStep / 2 ? [0, channelStep, 2 * channelStep, 3 * channelStep, numChannels - 1] : [0, channelStep, 2 * channelStep, 3 * channelStep, 4 * channelStep, numChannels - 1];
const channelTick = numChannels > 10 ? channelTickPre : Array.from(Array(numChannels).keys());
channelSlider = (
<div className="animator-slider">
<div className="animator-slider" data-testid="animator-slider">
<Radio
value={AnimationMode.CHANNEL}
disabled={appStore.animatorStore.animationActive}
Expand All @@ -262,15 +262,15 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
onChange={this.onChannelChanged}
disabled={appStore.animatorStore.animationActive}
/>
<div className="slider-info">
<div className="slider-info" data-testid="animator-slider-info">
<pre>{activeFrame.depthAxisInfo}</pre>
</div>
</React.Fragment>
)}
</div>
);
channelRangeSlider = (
<div className="animator-slider range-slider">
<div className="animator-slider range-slider" data-testid="animator-range-slider">
<div className="range-label" />
{!hideSliders && (
<React.Fragment>
Expand All @@ -293,7 +293,7 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
// Stokes Control
if (numStokes > 1) {
stokesSlider = (
<div className={classNames("animator-slider", "stokes-slider", {"tiled-label": this.width < 750})}>
<div className={classNames("animator-slider", "stokes-slider", {"tiled-label": this.width < 750})} data-testid="animator-polarization-slider">
<Radio value={AnimationMode.STOKES} disabled={appStore.animatorStore.animationActive} checked={appStore.animatorStore.animationMode === AnimationMode.STOKES} onChange={this.onAnimationModeChanged} label="Polarization" />
{hideSliders && (
<SafeNumericInput
Expand Down Expand Up @@ -343,7 +343,7 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
position={Position.TOP}
>
<Tooltip2 content="Playback mode" position={Position.TOP}>
<AnchorButton icon={this.getPlayModeIcon()} disabled={appStore.animatorStore.animationActive}>
<AnchorButton icon={this.getPlayModeIcon()} disabled={appStore.animatorStore.animationActive} data-testid="animator-playback-mode-button">
{!iconOnly && "Mode"}
</AnchorButton>
</Tooltip2>
Expand All @@ -352,26 +352,26 @@ export class AnimatorComponent extends React.Component<WidgetProps> {

const playbackButtons = (
<ButtonGroup fill={true} className="playback-buttons">
<Button icon={"chevron-backward"} onClick={this.onFirstClicked}>
<Button icon={"chevron-backward"} onClick={this.onFirstClicked} data-testid="animator-first-button">
{!iconOnly && "First"}
</Button>
<Button icon={"step-backward"} onClick={this.onPrevClicked}>
<Button icon={"step-backward"} onClick={this.onPrevClicked} data-testid="animator-previous-button">
{!iconOnly && "Prev"}
</Button>
{appStore.animatorStore.animationActive && (
<Button icon={"stop"} onClick={appStore.animatorStore.stopAnimation}>
<Button icon={"stop"} onClick={appStore.animatorStore.stopAnimation} data-testid="animator-play-stop-button">
{!iconOnly && "Stop"}
</Button>
)}
{!appStore.animatorStore.animationActive && (
<Button icon={"play"} onClick={appStore.animatorStore.startAnimation}>
<Button icon={"play"} onClick={appStore.animatorStore.startAnimation} data-testid="animator-play-stop-button">
{!iconOnly && "Play"}
</Button>
)}
<Button icon={"step-forward"} onClick={this.onNextClicked}>
<Button icon={"step-forward"} onClick={this.onNextClicked} data-testid="animator-next-button">
{!iconOnly && "Next"}
</Button>
<Button icon={"chevron-forward"} onClick={this.onLastClicked}>
<Button icon={"chevron-forward"} onClick={this.onLastClicked} data-testid="animator-last-button">
{!iconOnly && "Last"}
</Button>
</ButtonGroup>
Expand All @@ -390,6 +390,7 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
majorStepSize={1}
onValueChange={appStore.animatorStore.setFrameRate}
disabled={appStore.animatorStore.animationActive}
data-testid="animator-control-input"
/>
) : (
<SafeNumericInput
Expand All @@ -401,6 +402,7 @@ export class AnimatorComponent extends React.Component<WidgetProps> {
majorStepSize={1}
onValueChange={appStore.animatorStore.setStep}
disabled={appStore.animatorStore.animationActive}
data-testid="animator-control-input"
/>
)}
</ControlGroup>
Expand Down
37 changes: 23 additions & 14 deletions src/components/CatalogOverlay/CatalogOverlayComponent.tsx
View file
Expand Up @@ -232,7 +232,9 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
name={columnName}
cellRenderer={(rowIndex, columnIndex) => (
<Cell className="header-table-cell" key={`cell_${columnIndex}_${rowIndex}`} interactive={true}>
{coloumnData[rowIndex]}
<>
<div data-testid={"catalog-header-table-" + rowIndex + "-" + columnIndex}>{coloumnData[rowIndex]}</div>
</>
</Cell>
)}
/>
Expand All @@ -245,9 +247,16 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
let disable = profileStore.loadingData;
return (
<Cell className="header-table-cell" key={`cell_switch_${rowIndex}`}>
<React.Fragment>
<Switch className="cell-switch-button" key={`cell_switch_button_${rowIndex}`} disabled={disable} checked={display} onChange={changeEvent => this.handleHeaderDisplayChange(changeEvent, columnName)} />
</React.Fragment>
<>
<Switch
className="cell-switch-button"
key={`cell_switch_button_${rowIndex}`}
disabled={disable}
checked={display}
onChange={changeEvent => this.handleHeaderDisplayChange(changeEvent, columnName)}
data-testid={"catalog-header-table-switch-" + rowIndex}
/>
</>
</Cell>
);
}
Expand Down Expand Up @@ -730,7 +739,7 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
itemRenderer={this.renderFileIdPopOver}
popoverProps={{popoverClassName: "catalog-select", minimal: true, position: PopoverPosition.AUTO_END}}
>
<Button text={this.catalogFileId} rightIcon="double-caret-vertical" />
<Button text={this.catalogFileId} rightIcon="double-caret-vertical" data-testid="catalog-file-dropdown" />
</Select>
</FormGroup>
<FormGroup className="catalog-system" disabled={!isImageOverlay} inline={true} label="System">
Expand All @@ -743,7 +752,7 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
disabled={!isImageOverlay}
popoverProps={{popoverClassName: "catalog-select", minimal: true, position: PopoverPosition.AUTO_END}}
>
<Button text={activeSystem} disabled={!isImageOverlay} rightIcon="double-caret-vertical" />
<Button text={activeSystem} disabled={!isImageOverlay} rightIcon="double-caret-vertical" data-testid="catalog-system-dropdown" />
</Select>
</FormGroup>

Expand All @@ -770,7 +779,7 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
<div className="bp3-dialog-footer">
<div className={"table-info"}>
<table className="info-display">
<tbody>{tableInfo}</tbody>
<tbody data-testid="catalog-table-filtering-info">{tableInfo}</tbody>
</table>
</div>
<div className="footer-action-container">
Expand All @@ -784,7 +793,7 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
itemRenderer={this.renderPlotTypePopOver}
popoverProps={{popoverClassName: "catalog-select", minimal: true, position: PopoverPosition.AUTO_END}}
>
<Button className="bp3" text={catalogWidgetStore.catalogPlotType} rightIcon="double-caret-vertical" />
<Button className="bp3" text={catalogWidgetStore.catalogPlotType} rightIcon="double-caret-vertical" data-testid="catalog-rendering-type-dropdown" />
</Select>

<FormGroup className="catalog-axis" inline={true} label={this.xAxisLable} disabled={disable}>
Expand All @@ -801,7 +810,7 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
itemPredicate={this.filterColumn}
resetOnSelect={true}
>
<Button className="catalog-axis-button" text={catalogWidgetStore.xAxis} disabled={disable} rightIcon="double-caret-vertical" />
<Button className="catalog-axis-button" text={catalogWidgetStore.xAxis} disabled={disable} rightIcon="double-caret-vertical" data-testid="catalog-rendering-column-x-dropdown" />
</Select>
</FormGroup>

Expand All @@ -819,7 +828,7 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
itemPredicate={this.filterColumn}
resetOnSelect={true}
>
<Button className="catalog-axis-button" text={catalogWidgetStore.yAxis} disabled={isHistogram || disable} rightIcon="double-caret-vertical" />
<Button className="catalog-axis-button" text={catalogWidgetStore.yAxis} disabled={isHistogram || disable} rightIcon="double-caret-vertical" data-testid="catalog-rendering-column-y-dropdown" />
</Select>
</FormGroup>

Expand All @@ -836,10 +845,10 @@ export class CatalogOverlayComponent extends React.Component<WidgetProps> {
</div>
<div className="bp3-dialog-footer">
<div className="bp3-dialog-footer-actions">
<AnchorButton intent={Intent.SUCCESS} text="Apply filter" onClick={this.handleFilterRequest} disabled={disable || !profileStore.updateTableView || !profileStore.hasFilter} />
<AnchorButton intent={Intent.WARNING} text="Reset filter" onClick={this.handleResetClick} disabled={disable} />
<AnchorButton text="Close catalog" onClick={this.handleFileCloseClick} disabled={disable} />
<AnchorButton intent={Intent.PRIMARY} text="Plot" onClick={this.handlePlotClick} disabled={!this.enablePlotButton} />
<AnchorButton intent={Intent.SUCCESS} text="Apply filter" onClick={this.handleFilterRequest} disabled={disable || !profileStore.updateTableView || !profileStore.hasFilter} data-testid="catalog-filter-button" />
<AnchorButton intent={Intent.WARNING} text="Reset filter" onClick={this.handleResetClick} disabled={disable} data-testid="catalog-reset-button" />
<AnchorButton text="Close catalog" onClick={this.handleFileCloseClick} disabled={disable} data-testid="catalog-close-button" />
<AnchorButton intent={Intent.PRIMARY} text="Plot" onClick={this.handlePlotClick} disabled={!this.enablePlotButton} data-testid="catalog-plot-button" />
</div>
</div>
</div>
Expand Down
18 changes: 10 additions & 8 deletions ...lay/CatalogOverlayPlotSettingsPanelComponent/CatalogOverlayPlotSettingsPanelComponent.tsx
View file
Expand Up @@ -167,7 +167,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
itemPredicate={this.filterColumn}
resetOnSelect={true}
>
<Button text={widgetStore.sizeMapColumn} disabled={disabledOverlayPanel} rightIcon="double-caret-vertical" />
<Button text={widgetStore.sizeMapColumn} disabled={disabledOverlayPanel} rightIcon="double-caret-vertical" data-testid="catalog-settings-major-size-column-dropdown" />
</Select>
</FormGroup>
<FormGroup label={"Scaling"} inline={true} disabled={disableSizeMap}>
Expand Down Expand Up @@ -305,6 +305,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
value={widgetStore.catalogSize}
stepSize={0.5}
onValueChange={(value: number) => widgetStore.setCatalogSize(value)}
data-testid="catalog-settings-size-input"
/>
</Tooltip2>
</FormGroup>
Expand All @@ -319,6 +320,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
value={widgetStore.thickness}
stepSize={0.5}
onValueChange={(value: number) => widgetStore.setThickness(value)}
data-testid="catalog-settings-thickness-input"
/>
</Tooltip2>
</FormGroup>
Expand Down Expand Up @@ -356,7 +358,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
);

const colorMap = (
<div className="panel-container">
<div className="panel-container" data-testid="catalog-settings-color-tab">
<FormGroup label={"Color"} inline={true} disabled={disabledOverlayPanel || !widgetStore.disableColorMap}>
<AutoColorPickerComponent
color={widgetStore.catalogColor}
Expand Down Expand Up @@ -392,7 +394,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
itemPredicate={this.filterColumn}
resetOnSelect={true}
>
<Button text={widgetStore.colorMapColumn} disabled={disabledOverlayPanel} rightIcon="double-caret-vertical" />
<Button text={widgetStore.colorMapColumn} disabled={disabledOverlayPanel} rightIcon="double-caret-vertical" data-testid="catalog-settings-color-column-dropdown" />
</Select>
</FormGroup>
<FormGroup label={"Scaling"} inline={true} disabled={disableColorMap}>
Expand Down Expand Up @@ -442,7 +444,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
itemPredicate={this.filterColumn}
resetOnSelect={true}
>
<Button text={widgetStore.orientationMapColumn} disabled={disabledOverlayPanel} rightIcon="double-caret-vertical" />
<Button text={widgetStore.orientationMapColumn} disabled={disabledOverlayPanel} rightIcon="double-caret-vertical" data-testid="catalog-settings-orientation-column-dropdown" />
</Select>
</FormGroup>
<FormGroup label={"Scaling"} inline={true} disabled={disableOrientationMap}>
Expand Down Expand Up @@ -527,13 +529,13 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi
itemRenderer={this.renderShapePopOver}
popoverProps={{popoverClassName: "catalog-select", minimal: true, position: PopoverPosition.AUTO_END}}
>
<Button icon={this.getCatalogShape(widgetStore.catalogShape)} rightIcon="double-caret-vertical" disabled={disabledOverlayPanel} />
<Button icon={this.getCatalogShape(widgetStore.catalogShape)} rightIcon="double-caret-vertical" disabled={disabledOverlayPanel} data-testid="catalog-settings-shape-dropdown" />
</Select>
</FormGroup>
<Tabs id="catalogSettings" vertical={false} selectedTabId={widgetStore.settingsTabId} onChange={tabId => this.handleSelectedTabChanged(tabId)}>
<Tab id={CatalogSettingsTabs.SIZE} title="Size" panel={sizeMap} disabled={disabledOverlayPanel} />
<Tab id={CatalogSettingsTabs.COLOR} title="Color" panel={colorMap} disabled={disabledOverlayPanel} />
<Tab id={CatalogSettingsTabs.ORIENTATION} title="Orientation" panel={orientationMap} disabled={disabledOverlayPanel} />
<Tab id={CatalogSettingsTabs.COLOR} title="Color" panel={colorMap} disabled={disabledOverlayPanel} data-testid="catalog-settings-color-tab-title" />
<Tab id={CatalogSettingsTabs.ORIENTATION} title="Orientation" panel={orientationMap} disabled={disabledOverlayPanel} data-testid="catalog-settings-orientation-tab-title" />
</Tabs>
</div>
);
Expand Down Expand Up @@ -598,7 +600,7 @@ export class CatalogOverlayPlotSettingsPanelComponent extends React.Component<Wi

private renderShapePopOver = (shape: CatalogOverlayShape, itemProps: IItemRendererProps) => {
const shapeItem = this.getCatalogShape(shape);
return <MenuItem icon={shapeItem} key={shape} onClick={itemProps.handleClick} active={itemProps.modifiers.active} />;
return <MenuItem icon={shapeItem} key={shape} onClick={itemProps.handleClick} active={itemProps.modifiers.active} data-testid={"catalog-settings-shape-" + CatalogOverlayShape[shape].toLowerCase().replaceAll("_", "-")} />;
};

private handleSelectedTabChanged = (newTabId: React.ReactText) => {
Expand Down

0 comments on commit 90bdf82

Please sign in to comment.