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:
adam-stasiak-polidea 2020-10-15 01:12:01 +02:00 committed by GitHub
parent 0262daa228
commit fc03549299
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 229 additions and 72 deletions

View File

@ -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();
});
});

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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,

View File

@ -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

View File

@ -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 && (

View File

@ -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>
</>
}

View File

@ -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}

View File

@ -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> &nbsp;
<strong data-test="popover-title">{title}</strong> &nbsp;
{info && (
<InfoTooltipWithTrigger tooltip={info} label="date-free-tooltip" />
)}

View File

@ -254,7 +254,6 @@ function styled<
selectRef.current = stateManager;
}
};
return (
<MaybeSortableSelect
ref={setRef}

View File

@ -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={

View File

@ -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>
);

View File

@ -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>

View File

@ -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 />

View File

@ -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 }) => (
/*

View File

@ -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

View File

@ -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"
/>
&nbsp;
</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>

View File

@ -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}
/>
</>

View File

@ -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>
);

View File

@ -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

View File

@ -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>

View File

@ -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',

View File

@ -271,6 +271,7 @@ class ChartHolder extends React.Component {
{editMode && (
<HoverMenu position="top">
<DeleteComponentButton
data-test="chart-delete-button"
onDelete={this.handleDeleteComponent}
/>
</HoverMenu>

View File

@ -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()

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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>
);

View File

@ -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'

View File

@ -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}

View File

@ -82,6 +82,7 @@ class AdhocMetricOption extends React.PureComponent {
return (
<div
className="metric-option"
data-test="metric-option"
onMouseDownCapture={e => e.stopPropagation()}
>
<OverlayTrigger

View File

@ -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 && (

View File

@ -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>

View File

@ -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')}

View File

@ -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"

View File

@ -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)}

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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" /> &nbsp; {t('Add Annotation Layer')}
<i
data-test="add-annotation-layer-button"
className="fa fa-plus"
/>{' '}
&nbsp; {t('Add Annotation Layer')}
</ListGroupItem>
</OverlayTrigger>
</ListGroup>

View File

@ -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]}

View File

@ -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>
)}

View File

@ -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>

View File

@ -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}

View File

@ -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)}

View File

@ -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>

View File

@ -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)}

View File

@ -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}

View File

@ -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">&times;</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>

View File

@ -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">&times;</button>
<h4 class="modal-title">Source Code</h4>