mirror of https://github.com/apache/superset.git
chore: Added data-test attributes for testing (#11254)
* Added data-test attributes for testing * fixed incorrect naming change * review changes
This commit is contained in:
parent
0262daa228
commit
fc03549299
|
@ -128,12 +128,18 @@ describe('DashboardList', () => {
|
|||
});
|
||||
|
||||
it('delete', () => {
|
||||
wrapper.find('[data-test="trash"]').first().simulate('click');
|
||||
wrapper
|
||||
.find('[data-test="dashboard-list-trash-icon"]')
|
||||
.first()
|
||||
.simulate('click');
|
||||
expect(wrapper.find(ConfirmStatusChange)).toExist();
|
||||
});
|
||||
|
||||
it('card view delete', () => {
|
||||
wrapper.find('[data-test="trash"]').last().simulate('click');
|
||||
wrapper
|
||||
.find('[data-test="dashboard-list-trash-icon"]')
|
||||
.last()
|
||||
.simulate('click');
|
||||
expect(wrapper.find(ConfirmStatusChange)).toExist();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -229,8 +229,9 @@ export default class CRUDCollection extends React.PureComponent<
|
|||
}
|
||||
if (allowDeletes) {
|
||||
tds.push(
|
||||
<td key="__actions">
|
||||
<td key="__actions" data-test="crud-delete-option">
|
||||
<i
|
||||
{...{ 'data-test': 'crud-delete-icon' }}
|
||||
role="button"
|
||||
aria-label="Delete item"
|
||||
tabIndex={0}
|
||||
|
@ -241,7 +242,7 @@ export default class CRUDCollection extends React.PureComponent<
|
|||
);
|
||||
}
|
||||
const trs = [
|
||||
<tr className="row" key={record.id}>
|
||||
<tr {...{ 'data-test': 'table-row' }} className="row" key={record.id}>
|
||||
{tds}
|
||||
</tr>,
|
||||
];
|
||||
|
@ -275,7 +276,7 @@ export default class CRUDCollection extends React.PureComponent<
|
|||
const content = data.length
|
||||
? data.map(d => this.renderItem(d))
|
||||
: this.renderEmptyCell();
|
||||
return <tbody>{content}</tbody>;
|
||||
return <tbody data-test="table-content-rows">{content}</tbody>;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -287,12 +288,13 @@ export default class CRUDCollection extends React.PureComponent<
|
|||
buttonSize="sm"
|
||||
buttonStyle="primary"
|
||||
onClick={this.onAddItem}
|
||||
data-test="add-item-button"
|
||||
>
|
||||
<i className="fa fa-plus" /> {t('Add Item')}
|
||||
</Button>
|
||||
)}
|
||||
</span>
|
||||
<table className="table">
|
||||
<table data-test="crud-table" className="table">
|
||||
{this.renderHeaderRow()}
|
||||
{this.renderTableBody()}
|
||||
</table>
|
||||
|
|
|
@ -195,15 +195,22 @@ class Chart extends React.PureComponent {
|
|||
return this.renderErrorMessage();
|
||||
}
|
||||
if (errorMessage) {
|
||||
return <Alert bsStyle="warning">{errorMessage}</Alert>;
|
||||
return (
|
||||
<Alert data-test="alert-warning" bsStyle="warning">
|
||||
{errorMessage}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ErrorBoundary
|
||||
onError={this.handleRenderContainerFailure}
|
||||
showMessage={false}
|
||||
>
|
||||
<Styles className="chart-container">
|
||||
<div className={`slice_container ${isFaded ? ' faded' : ''}`}>
|
||||
<Styles className="chart-container" data-test="chart-container">
|
||||
<div
|
||||
className={`slice_container ${isFaded ? ' faded' : ''}`}
|
||||
data-test="slice-container"
|
||||
>
|
||||
<ChartRenderer {...this.props} data-test={this.props.vizType} />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -67,6 +67,7 @@ export default function DeleteModal({
|
|||
<StyleFormGroup>
|
||||
<FormLabel htmlFor="delete">{t('type "delete" to confirm')}</FormLabel>
|
||||
<FormControl
|
||||
data-test="delete-modal-input"
|
||||
id="delete"
|
||||
type="text"
|
||||
bsSize="sm"
|
||||
|
|
|
@ -158,6 +158,7 @@ export default function EditableTitle({
|
|||
/>
|
||||
) : (
|
||||
<input
|
||||
data-test="editable-title-input"
|
||||
ref={contentRef}
|
||||
required
|
||||
type={isEditing ? 'text' : 'button'}
|
||||
|
@ -187,6 +188,7 @@ export default function EditableTitle({
|
|||
}
|
||||
return (
|
||||
<span
|
||||
data-test="editable-title"
|
||||
className={cx(
|
||||
'editable-title',
|
||||
extraClasses,
|
||||
|
|
|
@ -46,7 +46,12 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
|
|||
label="fave-unfave"
|
||||
tooltip={t('Click to favorite/unfavorite')}
|
||||
>
|
||||
<a href="#" onClick={this.onClick} className="fave-unfave-icon">
|
||||
<a
|
||||
href="#"
|
||||
onClick={this.onClick}
|
||||
className="fave-unfave-icon"
|
||||
data-test="fave-unfave-icon"
|
||||
>
|
||||
<Icon
|
||||
name={
|
||||
this.props.isStarred
|
||||
|
|
|
@ -280,7 +280,7 @@ function ListView<T extends object = any>({
|
|||
|
||||
return (
|
||||
<ListViewStyles>
|
||||
<div className={`superset-list-view ${className}`}>
|
||||
<div data-test={className} className={`superset-list-view ${className}`}>
|
||||
<div className="header">
|
||||
<div className="header-left">
|
||||
{cardViewEnabled && (
|
||||
|
|
|
@ -169,6 +169,7 @@ function ListViewCard({
|
|||
}: CardProps) {
|
||||
return (
|
||||
<StyledCard
|
||||
data-test="styled-card"
|
||||
cover={
|
||||
<Cover>
|
||||
<a href={url}>
|
||||
|
@ -222,7 +223,9 @@ function ListViewCard({
|
|||
<TitleContainer>
|
||||
<TitleLink href={url}>{title}</TitleLink>
|
||||
{titleRight && <div className="title-right"> {titleRight}</div>}
|
||||
<div className="card-actions">{actions}</div>
|
||||
<div className="card-actions" data-test="card-actions">
|
||||
{actions}
|
||||
</div>
|
||||
</TitleContainer>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -73,19 +73,22 @@ export default function Modal({
|
|||
title,
|
||||
}: ModalProps) {
|
||||
return (
|
||||
<StyledModal show={show} onHide={onHide}>
|
||||
<BaseModal.Header closeButton>
|
||||
<StyledModal show={show} onHide={onHide} data-test={`${title}-modal`}>
|
||||
<BaseModal.Header data-test={`${title}-modal-header`} closeButton>
|
||||
<BaseModal.Title>
|
||||
<Title>{title}</Title>
|
||||
</BaseModal.Title>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Body>{children}</BaseModal.Body>
|
||||
<BaseModal.Footer>
|
||||
<BaseModal.Body data-test={`${title}-modal-body`}>
|
||||
{children}
|
||||
</BaseModal.Body>
|
||||
<BaseModal.Footer data-test={`${title}-modal-footer`}>
|
||||
<span className="float-right">
|
||||
<Button onClick={onHide} cta>
|
||||
<Button data-test="modal-cancel-button" onClick={onHide} cta>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
data-test="modal-delete-button"
|
||||
buttonStyle={primaryButtonType}
|
||||
disabled={disablePrimaryButton}
|
||||
onClick={onHandledPrimaryAction}
|
||||
|
|
|
@ -38,7 +38,7 @@ export default function PopoverSection({
|
|||
return (
|
||||
<div className={`PopoverSection ${!isSelected ? 'dimmed' : ''}`}>
|
||||
<div role="button" tabIndex={0} onClick={onSelect} className="pointer">
|
||||
<strong>{title}</strong>
|
||||
<strong data-test="popover-title">{title}</strong>
|
||||
{info && (
|
||||
<InfoTooltipWithTrigger tooltip={info} label="date-free-tooltip" />
|
||||
)}
|
||||
|
|
|
@ -254,7 +254,6 @@ function styled<
|
|||
selectRef.current = stateManager;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MaybeSortableSelect
|
||||
ref={setRef}
|
||||
|
|
|
@ -57,7 +57,7 @@ class URLShortLinkButton extends React.Component {
|
|||
renderPopover() {
|
||||
const emailBody = t('%s%s', this.props.emailContent, this.state.shortUrl);
|
||||
return (
|
||||
<Popover id="shorturl-popover">
|
||||
<Popover id="shorturl-popover" data-test="shorturl-popover">
|
||||
<CopyToClipboard
|
||||
text={this.state.shortUrl}
|
||||
copyNode={
|
||||
|
|
|
@ -211,7 +211,11 @@ export default function TableCollection({
|
|||
highlightRowId,
|
||||
}: TableCollectionProps) {
|
||||
return (
|
||||
<Table {...getTableProps()} className="table table-hover">
|
||||
<Table
|
||||
{...getTableProps()}
|
||||
className="table table-hover"
|
||||
data-test="listview-table"
|
||||
>
|
||||
<thead>
|
||||
{headerGroups.map(headerGroup => (
|
||||
<tr {...headerGroup.getHeaderGroupProps()}>
|
||||
|
@ -272,6 +276,7 @@ export default function TableCollection({
|
|||
const rowId = row.original.id;
|
||||
return (
|
||||
<tr
|
||||
data-test="table-row"
|
||||
{...row.getRowProps()}
|
||||
className={cx('table-row', {
|
||||
'table-row-selected':
|
||||
|
@ -285,6 +290,7 @@ export default function TableCollection({
|
|||
const columnCellProps = cell.column.cellProps || {};
|
||||
return (
|
||||
<td
|
||||
data-test="table-cell"
|
||||
className={cx('table-cell', {
|
||||
'table-cell-loader': loading,
|
||||
[cell.column.size || '']: cell.column.size,
|
||||
|
@ -293,7 +299,7 @@ export default function TableCollection({
|
|||
{...columnCellProps}
|
||||
>
|
||||
<span className={cx({ 'loading-bar': loading })}>
|
||||
<span>{cell.render('Cell')}</span>
|
||||
<span data-test="cell-text">{cell.render('Cell')}</span>
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
|
|
|
@ -53,8 +53,13 @@ function AddSliceCard({
|
|||
}) {
|
||||
return (
|
||||
<div ref={innerRef} className="chart-card-container" style={style}>
|
||||
<div className={cx('chart-card', isSelected && 'is-selected')}>
|
||||
<div className="card-title">{sliceName}</div>
|
||||
<div
|
||||
className={cx('chart-card', isSelected && 'is-selected')}
|
||||
data-test="chart-card"
|
||||
>
|
||||
<div className="card-title" data-test="card-title">
|
||||
{sliceName}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="item">
|
||||
<span>{t('Modified')} </span>
|
||||
|
|
|
@ -47,7 +47,11 @@ class BuilderComponentPane extends React.PureComponent {
|
|||
renderTabs(height) {
|
||||
const { isSticky } = this.props;
|
||||
return (
|
||||
<Tabs className="m-t-10 tabs-components" id="tabs">
|
||||
<Tabs
|
||||
className="m-t-10 tabs-components"
|
||||
id="tabs"
|
||||
data-test="tabs-component"
|
||||
>
|
||||
<Tab eventKey={1} title={t('Components')}>
|
||||
<NewTabs />
|
||||
<NewRow />
|
||||
|
|
|
@ -223,7 +223,7 @@ class DashboardBuilder extends React.Component {
|
|||
</Sticky>
|
||||
|
||||
<div className="dashboard-content">
|
||||
<div className="grid-container">
|
||||
<div className="grid-container" data-test="grid-container">
|
||||
<ParentSize>
|
||||
{({ width }) => (
|
||||
/*
|
||||
|
|
|
@ -132,7 +132,7 @@ class DashboardGrid extends React.PureComponent {
|
|||
|
||||
return width < 100 ? null : (
|
||||
<div className="dashboard-grid" ref={this.setGridRef}>
|
||||
<div className="grid-content">
|
||||
<div className="grid-content" data-test="grid-content">
|
||||
{/* make the area above components droppable */}
|
||||
{editMode && (
|
||||
<DragDroppable
|
||||
|
|
|
@ -356,7 +356,10 @@ class Header extends React.PureComponent {
|
|||
.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_WARNING_MESSAGE;
|
||||
|
||||
return (
|
||||
<StyledDashboardHeader className="dashboard-header">
|
||||
<StyledDashboardHeader
|
||||
className="dashboard-header"
|
||||
data-test="dashboard-header"
|
||||
>
|
||||
<div className="dashboard-component-header header-large">
|
||||
<EditableTitle
|
||||
title={dashboardTitle}
|
||||
|
@ -384,7 +387,10 @@ class Header extends React.PureComponent {
|
|||
|
||||
<div className="button-container">
|
||||
{userCanSaveAs && (
|
||||
<div className="button-container">
|
||||
<div
|
||||
className="button-container"
|
||||
data-test="dashboard-edit-actions"
|
||||
>
|
||||
{editMode && (
|
||||
<>
|
||||
<ButtonGroup className="m-r-5">
|
||||
|
@ -396,7 +402,11 @@ class Header extends React.PureComponent {
|
|||
this.state.emphasizeUndo ? 'primary' : undefined
|
||||
}
|
||||
>
|
||||
<i title="Undo" className="undo-action fa fa-reply" />
|
||||
<i
|
||||
title="Undo"
|
||||
className="undo-action fa fa-reply"
|
||||
data-test="undo-action"
|
||||
/>
|
||||
|
||||
</Button>
|
||||
<Button
|
||||
|
@ -416,6 +426,7 @@ class Header extends React.PureComponent {
|
|||
className="m-r-5"
|
||||
onClick={this.constructor.discardChanges}
|
||||
buttonStyle="default"
|
||||
data-test="discard-changes-button"
|
||||
>
|
||||
{t('Discard Changes')}
|
||||
</Button>
|
||||
|
@ -424,6 +435,7 @@ class Header extends React.PureComponent {
|
|||
disabled={!hasUnsavedChanges}
|
||||
buttonStyle="primary"
|
||||
onClick={this.overwriteDashboard}
|
||||
data-test="header-save-button"
|
||||
>
|
||||
{t('Save')}
|
||||
</Button>
|
||||
|
|
|
@ -171,7 +171,9 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||
colorScheme={colorScheme}
|
||||
onSave={onSave}
|
||||
isMenuItem
|
||||
triggerNode={<span>{t('Save as')}</span>}
|
||||
triggerNode={
|
||||
<span data-test="save-as-menu-item">{t('Save as')}</span>
|
||||
}
|
||||
canOverwrite={userCanEdit}
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -50,8 +50,9 @@ export default class IconButton extends React.PureComponent {
|
|||
onClick={this.handleClick}
|
||||
tabIndex="0"
|
||||
role="button"
|
||||
data-test="icon-button"
|
||||
>
|
||||
<span className={className} />
|
||||
<span data-test="icon-button-span" className={className} />
|
||||
{label && <span className="icon-button-label">{label}</span>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -224,7 +224,7 @@ class PropertiesModal extends React.PureComponent {
|
|||
return (
|
||||
<Modal show={this.props.show} onHide={this.props.onHide} bsSize="lg">
|
||||
<form onSubmit={this.submit}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Header closeButton data-test="dashboard-properties-modal">
|
||||
<Modal.Title>
|
||||
<div>
|
||||
<span className="float-left">{t('Dashboard Properties')}</span>
|
||||
|
@ -241,6 +241,7 @@ class PropertiesModal extends React.PureComponent {
|
|||
<Col md={6}>
|
||||
<FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
|
||||
<FormControl
|
||||
data-test="dashboard-title-input"
|
||||
name="dashboard_title"
|
||||
type="text"
|
||||
bsSize="sm"
|
||||
|
@ -333,7 +334,13 @@ class PropertiesModal extends React.PureComponent {
|
|||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<span className="float-right">
|
||||
<Button type="button" buttonSize="sm" onClick={onHide} cta>
|
||||
<Button
|
||||
type="button"
|
||||
buttonSize="sm"
|
||||
onClick={onHide}
|
||||
data-test="properties-modal-cancel-button"
|
||||
cta
|
||||
>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
|
|
|
@ -194,7 +194,11 @@ class SaveModal extends React.PureComponent {
|
|||
}
|
||||
modalFooter={
|
||||
<div>
|
||||
<Button buttonStyle="primary" onClick={this.saveDashboard}>
|
||||
<Button
|
||||
data-test="save-modal-save-button"
|
||||
buttonStyle="primary"
|
||||
onClick={this.saveDashboard}
|
||||
>
|
||||
{t('Save')}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
@ -135,6 +135,7 @@ export class UnwrappedDragDroppable extends React.Component {
|
|||
<div
|
||||
style={style}
|
||||
ref={this.setRef}
|
||||
data-test="dragdroppable-object"
|
||||
className={cx(
|
||||
'dragdroppable',
|
||||
orientation === 'row' && 'dragdroppable-row',
|
||||
|
|
|
@ -271,6 +271,7 @@ class ChartHolder extends React.Component {
|
|||
{editMode && (
|
||||
<HoverMenu position="top">
|
||||
<DeleteComponentButton
|
||||
data-test="chart-delete-button"
|
||||
onDelete={this.handleDeleteComponent}
|
||||
/>
|
||||
</HoverMenu>
|
||||
|
|
|
@ -246,6 +246,7 @@ class Markdown extends React.PureComponent {
|
|||
}
|
||||
readOnly={false}
|
||||
onLoad={this.setEditor}
|
||||
data-test="editor"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -315,6 +316,7 @@ class Markdown extends React.PureComponent {
|
|||
editMode={editMode}
|
||||
>
|
||||
<div
|
||||
data-test="dashboard-markdown-editor"
|
||||
className={cx(
|
||||
'dashboard-markdown',
|
||||
isEditing && 'dashboard-markdown--editing',
|
||||
|
@ -341,6 +343,7 @@ class Markdown extends React.PureComponent {
|
|||
<div
|
||||
ref={dragSourceRef}
|
||||
className="dashboard-component dashboard-component-chart-holder"
|
||||
data-test="dashboard-component-chart-holder"
|
||||
>
|
||||
{editMode && isEditing
|
||||
? this.renderEditMode()
|
||||
|
|
|
@ -159,6 +159,7 @@ class Row extends React.PureComponent {
|
|||
rowItems.length === 0 && 'grid-row--empty',
|
||||
backgroundStyle.className,
|
||||
)}
|
||||
data-test={`grid-row-${backgroundStyle.className}`}
|
||||
>
|
||||
{rowItems.map((componentId, itemIndex) => (
|
||||
<DashboardComponent
|
||||
|
|
|
@ -226,7 +226,10 @@ class Tabs extends React.PureComponent {
|
|||
dropIndicatorProps: tabsDropIndicatorProps,
|
||||
dragSourceRef: tabsDragSourceRef,
|
||||
}) => (
|
||||
<div className="dashboard-component dashboard-component-tabs">
|
||||
<div
|
||||
className="dashboard-component dashboard-component-tabs"
|
||||
data-test="dashboard-component-tabs"
|
||||
>
|
||||
{editMode && renderHoverMenu && (
|
||||
<HoverMenu innerRef={tabsDragSourceRef} position="left">
|
||||
<DragHandle position="left" />
|
||||
|
@ -241,6 +244,7 @@ class Tabs extends React.PureComponent {
|
|||
animation
|
||||
mountOnEnter
|
||||
unmountOnExit={false}
|
||||
data-test="nav-list"
|
||||
>
|
||||
{tabIds.map((tabId, tabIndex) => (
|
||||
// react-bootstrap doesn't render a Tab if we move this to its own Tab.jsx so we
|
||||
|
|
|
@ -50,7 +50,11 @@ export default class DraggableNewComponent extends React.PureComponent {
|
|||
editMode
|
||||
>
|
||||
{({ dragSourceRef }) => (
|
||||
<div ref={dragSourceRef} className="new-component">
|
||||
<div
|
||||
ref={dragSourceRef}
|
||||
className="new-component"
|
||||
data-test="new-component"
|
||||
>
|
||||
<div className={cx('new-component-placeholder', className)} />
|
||||
{label}
|
||||
</div>
|
||||
|
|
|
@ -81,7 +81,7 @@ DATASOURCE_TYPES_ARR.forEach(o => {
|
|||
|
||||
function CollectionTabTitle({ title, collection }) {
|
||||
return (
|
||||
<div>
|
||||
<div data-test={`collection-tab-${title}`}>
|
||||
{title} <Badge>{collection ? collection.length : 0}</Badge>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -132,12 +132,17 @@ export default class AdhocFilterEditPopover extends React.Component {
|
|||
const hasUnsavedChanges = !adhocFilter.equals(propsAdhocFilter);
|
||||
|
||||
return (
|
||||
<Popover id="filter-edit-popover" {...popoverProps}>
|
||||
<Popover
|
||||
id="filter-edit-popover"
|
||||
{...popoverProps}
|
||||
data-test="filter-edit-popover"
|
||||
>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Tabs
|
||||
id="adhoc-filter-edit-tabs"
|
||||
defaultActiveKey={adhocFilter.expressionType}
|
||||
className="adhoc-filter-edit-tabs"
|
||||
data-test="adhoc-filter-edit-tabs"
|
||||
style={{ height: this.state.height, width: this.state.width }}
|
||||
>
|
||||
<Tab
|
||||
|
@ -176,6 +181,7 @@ export default class AdhocFilterEditPopover extends React.Component {
|
|||
</Tabs>
|
||||
<div>
|
||||
<Button
|
||||
data-test="adhoc-filter-edit-popover-save-button"
|
||||
disabled={!stateIsValid}
|
||||
buttonStyle={
|
||||
hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
|
||||
|
|
|
@ -225,10 +225,16 @@ export default class AdhocMetricEditPopover extends React.Component {
|
|||
const stateIsValid = adhocMetric.isValid();
|
||||
const hasUnsavedChanges = !adhocMetric.equals(propsAdhocMetric);
|
||||
return (
|
||||
<Popover id="metrics-edit-popover" title={popoverTitle} {...popoverProps}>
|
||||
<Popover
|
||||
id="metrics-edit-popover"
|
||||
data-test="metrics-edit-popover"
|
||||
title={popoverTitle}
|
||||
{...popoverProps}
|
||||
>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Tabs
|
||||
id="adhoc-metric-edit-tabs"
|
||||
data-test="adhoc-metric-edit-tabs"
|
||||
defaultActiveKey={adhocMetric.expressionType}
|
||||
className="adhoc-metric-edit-tabs"
|
||||
style={{ height: this.state.height, width: this.state.width }}
|
||||
|
@ -269,7 +275,7 @@ export default class AdhocMetricEditPopover extends React.Component {
|
|||
data-test="adhoc-metric-edit-tab#custom"
|
||||
>
|
||||
{this.props.datasourceType !== 'druid' ? (
|
||||
<FormGroup>
|
||||
<FormGroup data-test="sql-editor">
|
||||
<SQLEditor
|
||||
showLoadingForImport
|
||||
ref={this.handleAceEditorRef}
|
||||
|
|
|
@ -82,6 +82,7 @@ class AdhocMetricOption extends React.PureComponent {
|
|||
return (
|
||||
<div
|
||||
className="metric-option"
|
||||
data-test="metric-option"
|
||||
onMouseDownCapture={e => e.stopPropagation()}
|
||||
>
|
||||
<OverlayTrigger
|
||||
|
|
|
@ -53,7 +53,12 @@ export default class ControlPanelSection extends React.Component {
|
|||
label && (
|
||||
<div>
|
||||
<span>
|
||||
<span role="button" tabIndex={0} onClick={this.toggleExpand}>
|
||||
<span
|
||||
data-test="clickable-control-panel-section-title"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={this.toggleExpand}
|
||||
>
|
||||
{label}
|
||||
</span>{' '}
|
||||
{description && (
|
||||
|
|
|
@ -208,7 +208,7 @@ class ControlPanelsContainer extends React.Component {
|
|||
/>
|
||||
</Alert>
|
||||
)}
|
||||
<Tabs id="controlSections">
|
||||
<Tabs id="controlSections" data-test="control-tabs">
|
||||
<Tab eventKey="query" title={t('Data')}>
|
||||
{querySectionsToRender.map(this.renderControlPanelSection)}
|
||||
</Tab>
|
||||
|
|
|
@ -238,6 +238,7 @@ export class DisplayQueryButton extends React.PureComponent {
|
|||
return (
|
||||
<DropdownButton
|
||||
noCaret
|
||||
data-test="query-dropdown"
|
||||
title={
|
||||
<span>
|
||||
<i className="fa fa-bars" />
|
||||
|
@ -265,7 +266,9 @@ export class DisplayQueryButton extends React.PureComponent {
|
|||
<ModalTrigger
|
||||
isMenuItem
|
||||
animation={animation}
|
||||
triggerNode={<span>{t('View query')}</span>}
|
||||
triggerNode={
|
||||
<span data-test="view-query-menu-item">{t('View query')}</span>
|
||||
}
|
||||
modalTitle={t('View query')}
|
||||
bsSize="large"
|
||||
beforeOpen={() => this.beforeOpen('query')}
|
||||
|
|
|
@ -83,11 +83,12 @@ export default class EmbedCodeButton extends React.Component {
|
|||
renderPopover() {
|
||||
const html = this.generateEmbedHTML();
|
||||
return (
|
||||
<Popover id="embed-code-popover">
|
||||
<Popover id="embed-code-popover" data-test="embed-code-popover">
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col-sm-10">
|
||||
<textarea
|
||||
data-test="embed-code-textarea"
|
||||
name="embedCode"
|
||||
value={html}
|
||||
rows="4"
|
||||
|
|
|
@ -61,7 +61,11 @@ export default function ExploreActionButtons({
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="btn-group results" role="group">
|
||||
<div
|
||||
className="btn-group results"
|
||||
role="group"
|
||||
data-test="btn-group-results"
|
||||
>
|
||||
{latestQueryFormData && (
|
||||
<URLShortLinkButton
|
||||
url={getExploreLongUrl(latestQueryFormData)}
|
||||
|
|
|
@ -159,7 +159,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
|
|||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Header data-test="properties-edit-modal" closeButton>
|
||||
<Modal.Title>Edit Chart Properties</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
|
@ -172,6 +172,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
|
|||
</FormLabel>
|
||||
<FormControl
|
||||
name="name"
|
||||
data-test="properties-name-input"
|
||||
type="text"
|
||||
bsSize="sm"
|
||||
value={name}
|
||||
|
@ -249,10 +250,17 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
|
|||
</Row>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button type="button" buttonSize="sm" onClick={onHide} cta>
|
||||
<Button
|
||||
data-test="properties-modal-cancel-button"
|
||||
type="button"
|
||||
buttonSize="sm"
|
||||
onClick={onHide}
|
||||
cta
|
||||
>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
data-test="properties-save-button"
|
||||
type="submit"
|
||||
buttonSize="sm"
|
||||
buttonStyle="primary"
|
||||
|
|
|
@ -114,6 +114,7 @@ export default function QueryAndSaveBtns({
|
|||
data-toggle="modal"
|
||||
disabled={saveButtonDisabled}
|
||||
onClick={onSave}
|
||||
data-test="query-save-button"
|
||||
>
|
||||
<i className="fa fa-plus-circle" /> Save
|
||||
</Button>
|
||||
|
|
|
@ -136,7 +136,7 @@ class SaveModal extends React.Component {
|
|||
<Modal.Header closeButton>
|
||||
<Modal.Title>{t('Save Chart')}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Modal.Body data-test="save-modal-body">
|
||||
{(this.state.alert || this.props.alert) && (
|
||||
<Alert>
|
||||
{this.state.alert ? this.state.alert : this.props.alert}
|
||||
|
@ -150,18 +150,20 @@ class SaveModal extends React.Component {
|
|||
/>
|
||||
</Alert>
|
||||
)}
|
||||
<FormGroup>
|
||||
<FormGroup data-test="radio-group">
|
||||
<Radio
|
||||
id="overwrite-radio"
|
||||
inline
|
||||
disabled={!(this.props.can_overwrite && this.props.slice)}
|
||||
checked={this.state.action === 'overwrite'}
|
||||
onChange={this.changeAction.bind(this, 'overwrite')}
|
||||
data-test="save-overwrite-radio"
|
||||
>
|
||||
{t('Save (Overwrite)')}
|
||||
</Radio>
|
||||
<Radio
|
||||
id="saveas-radio"
|
||||
data-test="saveas-radio"
|
||||
inline
|
||||
checked={this.state.action === 'saveas'}
|
||||
onChange={this.changeAction.bind(this, 'saveas')}
|
||||
|
@ -180,6 +182,7 @@ class SaveModal extends React.Component {
|
|||
placeholder="Name"
|
||||
value={this.state.newSliceName}
|
||||
onChange={this.onSliceNameChange}
|
||||
data-test="new-chart-name"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
|
@ -206,7 +209,7 @@ class SaveModal extends React.Component {
|
|||
</FormGroup>
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Modal.Footer data-test="save-modal-footer">
|
||||
<div className="float-right">
|
||||
<Button id="btn_cancel" buttonSize="sm" onClick={this.props.onHide}>
|
||||
{t('Cancel')}
|
||||
|
@ -227,6 +230,7 @@ class SaveModal extends React.Component {
|
|||
buttonStyle="primary"
|
||||
onClick={this.saveOrOverwrite.bind(this, false)}
|
||||
disabled={!this.state.newSliceName}
|
||||
data-test="btn-modal-save"
|
||||
>
|
||||
{t('Save')}
|
||||
</Button>
|
||||
|
|
|
@ -113,6 +113,7 @@ class AnnotationLayerControl extends React.PureComponent {
|
|||
const { theme } = this.props;
|
||||
return (
|
||||
<Popover
|
||||
data-test="annotation-popover"
|
||||
style={{ maxWidth: 'none' }}
|
||||
title={
|
||||
annotation ? t('Edit Annotation Layer') : t('Add Annotation Layer')
|
||||
|
@ -188,7 +189,11 @@ class AnnotationLayerControl extends React.PureComponent {
|
|||
overlay={this.renderPopover('overlay-new')}
|
||||
>
|
||||
<ListGroupItem>
|
||||
<i className="fa fa-plus" /> {t('Add Annotation Layer')}
|
||||
<i
|
||||
data-test="add-annotation-layer-button"
|
||||
className="fa fa-plus"
|
||||
/>{' '}
|
||||
{t('Add Annotation Layer')}
|
||||
</ListGroupItem>
|
||||
</OverlayTrigger>
|
||||
</ListGroup>
|
||||
|
|
|
@ -90,6 +90,7 @@ export default class BoundsControl extends React.Component {
|
|||
<Row>
|
||||
<Col xs={6}>
|
||||
<FormControl
|
||||
data-test="min-bound"
|
||||
type="text"
|
||||
placeholder={t('Min')}
|
||||
onChange={this.onMinChange}
|
||||
|
@ -99,6 +100,7 @@ export default class BoundsControl extends React.Component {
|
|||
<Col xs={6}>
|
||||
<FormControl
|
||||
type="text"
|
||||
data-test="max-bound"
|
||||
placeholder={t('Max')}
|
||||
onChange={this.onMaxChange}
|
||||
value={this.state.minMax[1]}
|
||||
|
|
|
@ -210,6 +210,7 @@ class DatasourceControl extends React.PureComponent {
|
|||
className=""
|
||||
bsSize="sm"
|
||||
id="datasource_menu"
|
||||
data-test="datasource-menu"
|
||||
>
|
||||
<MenuItem eventKey="3" onClick={this.toggleChangeDatasourceModal}>
|
||||
{t('Change Dataset')}
|
||||
|
@ -225,7 +226,11 @@ class DatasourceControl extends React.PureComponent {
|
|||
</MenuItem>
|
||||
)}
|
||||
{this.props.isEditable && (
|
||||
<MenuItem eventKey="3" onClick={this.toggleEditDatasourceModal}>
|
||||
<MenuItem
|
||||
data-test="edit-dataset"
|
||||
eventKey="3"
|
||||
onClick={this.toggleEditDatasourceModal}
|
||||
>
|
||||
{t('Edit Dataset')}
|
||||
</MenuItem>
|
||||
)}
|
||||
|
|
|
@ -523,9 +523,10 @@ class DateFilterControl extends React.Component {
|
|||
this.startEndSectionRef = ref;
|
||||
}}
|
||||
>
|
||||
<InputGroup>
|
||||
<InputGroup data-test="date-input-group">
|
||||
<div style={{ margin: '5px 0' }}>
|
||||
<Datetime
|
||||
inputProps={{ 'data-test': 'date-from-input' }}
|
||||
value={this.state.since}
|
||||
defaultValue={this.state.since}
|
||||
viewDate={this.state.since}
|
||||
|
@ -546,6 +547,7 @@ class DateFilterControl extends React.Component {
|
|||
</div>
|
||||
<div style={{ margin: '5px 0' }}>
|
||||
<Datetime
|
||||
inputProps={{ 'data-test': 'date-to-input' }}
|
||||
value={this.state.until}
|
||||
defaultValue={this.state.until}
|
||||
viewDate={this.state.until}
|
||||
|
@ -572,6 +574,7 @@ class DateFilterControl extends React.Component {
|
|||
</Tabs>
|
||||
<div className="clearfix">
|
||||
<Button
|
||||
data-test="date-ok-button"
|
||||
buttonSize="small"
|
||||
className="float-right ok"
|
||||
buttonStyle="primary"
|
||||
|
@ -601,7 +604,11 @@ class DateFilterControl extends React.Component {
|
|||
overlay={this.renderPopover()}
|
||||
onClick={this.handleClickTrigger}
|
||||
>
|
||||
<Label name="popover-trigger" className="pointer">
|
||||
<Label
|
||||
name="popover-trigger"
|
||||
className="pointer"
|
||||
data-test="popover-trigger"
|
||||
>
|
||||
{formatTimeRange(timeRange, this.props.endpoints)}
|
||||
</Label>
|
||||
</OverlayTrigger>
|
||||
|
|
|
@ -90,6 +90,7 @@ export default class TextControl extends React.Component<
|
|||
<FormGroup controlId={this.state.controlId} bsSize="small">
|
||||
<FormControl
|
||||
type="text"
|
||||
data-test="inline-name"
|
||||
placeholder={this.props.placeholder}
|
||||
onChange={this.onChange}
|
||||
onFocus={this.props.onFocus}
|
||||
|
|
|
@ -151,7 +151,9 @@ export default class VizTypeControl extends React.PureComponent {
|
|||
className={`viztype-selector ${isSelected ? 'selected' : ''}`}
|
||||
src={type.thumbnail}
|
||||
/>
|
||||
<div className="viztype-label">{type.name}</div>
|
||||
<div className="viztype-label" data-test="viztype-label">
|
||||
{type.name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -174,7 +176,7 @@ export default class VizTypeControl extends React.PureComponent {
|
|||
const rows = [];
|
||||
for (let i = 0; i <= filteredTypes.length; i += IMAGE_PER_ROW) {
|
||||
rows.push(
|
||||
<Row key={`row-${i}`}>
|
||||
<Row data-test="viz-row" key={`row-${i}`}>
|
||||
{filteredTypes.slice(i, i + IMAGE_PER_ROW).map(entry => (
|
||||
<Col md={12 / IMAGE_PER_ROW} key={`grid-col-${entry.key}`}>
|
||||
{this.renderItem(entry)}
|
||||
|
|
|
@ -445,6 +445,7 @@ function ChartList(props: ChartListProps) {
|
|||
>
|
||||
{confirmDelete => (
|
||||
<div
|
||||
data-test="chart-list-delete-option"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className="action-button"
|
||||
|
@ -458,6 +459,7 @@ function ChartList(props: ChartListProps) {
|
|||
)}
|
||||
{canEdit && (
|
||||
<Menu.Item
|
||||
data-test="chart-list-edit-option"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => openChartEditModal(chart)}
|
||||
|
@ -493,7 +495,7 @@ function ChartList(props: ChartListProps) {
|
|||
actions={
|
||||
<ListViewCard.Actions>
|
||||
{renderFaveStar(chart.id)}
|
||||
<Dropdown overlay={menu}>
|
||||
<Dropdown data-test="dropdown-options" overlay={menu}>
|
||||
<Icon name="more-horiz" />
|
||||
</Dropdown>
|
||||
</ListViewCard.Actions>
|
||||
|
|
|
@ -295,7 +295,10 @@ function DashboardList(props: DashboardListProps) {
|
|||
className="action-button"
|
||||
onClick={confirmDelete}
|
||||
>
|
||||
<Icon name="trash" />
|
||||
<Icon
|
||||
data-test="dashboard-list-trash-icon"
|
||||
name="trash"
|
||||
/>
|
||||
</span>
|
||||
</TooltipWrapper>
|
||||
)}
|
||||
|
@ -447,7 +450,11 @@ function DashboardList(props: DashboardListProps) {
|
|||
className="action-button"
|
||||
onClick={confirmDelete}
|
||||
>
|
||||
<ListViewCard.MenuIcon name="trash" /> Delete
|
||||
<ListViewCard.MenuIcon
|
||||
data-test="dashboard-list-view-card-trash-icon"
|
||||
name="trash"
|
||||
/>{' '}
|
||||
Delete
|
||||
</div>
|
||||
)}
|
||||
</ConfirmStatusChange>
|
||||
|
@ -464,6 +471,7 @@ function DashboardList(props: DashboardListProps) {
|
|||
)}
|
||||
{canEdit && (
|
||||
<Menu.Item
|
||||
data-test="dashboard-list-edit-option"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => openDashboardEditModal(dashboard)}
|
||||
|
|
|
@ -268,7 +268,10 @@ class FilterBox extends React.Component {
|
|||
if (showDateFilter) {
|
||||
return (
|
||||
<div className="row space-1">
|
||||
<div className="col-lg-12 col-xs-12 filter-container">
|
||||
<div
|
||||
className="col-lg-12 col-xs-12 filter-container"
|
||||
data-test="date-filter-container"
|
||||
>
|
||||
{this.renderFilterBadge(chartId, TIME_RANGE, label)}
|
||||
<DateFilterControl
|
||||
name={TIME_RANGE}
|
||||
|
|
|
@ -80,16 +80,16 @@
|
|||
<!-- Modal for misc messages / alerts -->
|
||||
<div class="misc-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<div class="modal-content" data-test="modal-content">
|
||||
<div class="modal-header" data-test="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-test="modal-header-close-button">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title"></h4>
|
||||
<h4 data-test="modal-title" class="modal-title"></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div data-test="modal-body" class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div data-test="modal-footer" class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1278,9 +1278,9 @@
|
|||
<div class="bs-component">
|
||||
<div class="modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<div class="modal-content" data-test="modal-content">
|
||||
<div class="modal-header" data-test="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-test="modal-header-close-button">×</button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
@ -1288,7 +1288,7 @@
|
|||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn btn-primary" data-test="save-changes">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1323,7 +1323,7 @@
|
|||
|
||||
<div id="source-modal" class="modal fade">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content" data-test="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Source Code</h4>
|
||||
|
|
Loading…
Reference in New Issue