superset/superset-frontend/cypress-base/cypress/utils/index.ts

132 lines
4.0 KiB
TypeScript

/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { getChartAlias, Slice } from 'cypress/utils/vizPlugins';
export * from './vizPlugins';
export { default as parsePostForm } from './parsePostForm';
export interface ChartSpec {
name: string;
viz: string;
}
export function setGridMode(type: 'card' | 'list') {
cy.get(`[aria-label="${type}-view"]`).click();
}
export function toggleBulkSelect() {
cy.getBySel('bulk-select').click();
}
export function clearAllInputs() {
cy.get('body').then($body => {
if ($body.find('.ant-select-clear').length) {
cy.get('.ant-select-clear').click({ multiple: true, force: true });
}
});
}
const toSlicelike = ($chart: JQuery<HTMLElement>): Slice => {
const chartId = $chart.attr('data-test-chart-id');
const vizType = $chart.attr('data-test-viz-type');
return {
slice_id: chartId ? parseInt(chartId, 10) : null,
form_data: {
viz_type: vizType || null,
},
};
};
export function getChartGridComponent({ name, viz }: ChartSpec) {
return cy
.get(`[data-test-chart-name="${name}"]`)
.should('have.attr', 'data-test-viz-type', viz);
}
export function getChartAliasBySpec(chart: ChartSpec) {
return getChartGridComponent(chart).then($chart =>
cy.wrap(getChartAlias(toSlicelike($chart))),
);
}
export function getChartAliasesBySpec(charts: readonly ChartSpec[]) {
const aliases: string[] = [];
charts.forEach(chart =>
getChartAliasBySpec(chart).then(alias => {
aliases.push(alias);
}),
);
// Wrapping the aliases is key.
// That way callers can chain off this function
// and actually get the list of aliases.
return cy.wrap(aliases);
}
export function waitForChartLoad(chart: ChartSpec) {
return getChartGridComponent(chart).then(gridComponent => {
const chartId = gridComponent.attr('data-test-chart-id');
// the chart should load in under half a minute
return (
cy
// this id only becomes visible when the chart is loaded
.get(`#chart-id-${chartId}`, {
timeout: 30000,
})
.should('be.visible')
// return the chart grid component
.then(() => gridComponent)
);
});
}
/**
* Drag an element and drop it to another element.
* Usage:
* drag(source).to(target);
*/
export function drag(selector: string, content: string | number | RegExp) {
const dataTransfer = { data: {} };
return {
to(target: string | Cypress.Chainable) {
cy.get('.dragdroppable')
.contains(selector, content)
.trigger('mousedown', { which: 1, force: true })
.trigger('dragstart', { dataTransfer, force: true })
.trigger('drag', { force: true });
(typeof target === 'string' ? cy.get(target) : target)
.trigger('dragover', { dataTransfer, force: true })
.trigger('drop', { dataTransfer, force: true })
.trigger('dragend', { dataTransfer, force: true })
.trigger('mouseup', { which: 1, force: true });
},
};
}
export function resize(selector: string) {
return {
to(cordX: number, cordY: number) {
cy.get(selector)
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { which: 1, cordX, cordY, force: true })
.trigger('mouseup', { which: 1, force: true });
},
};
}