mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
chore: E2E Dashboards Cross-references (#21805)
This commit is contained in:
parent
40f82545ab
commit
2fe68a3633
@ -5,8 +5,9 @@
|
|||||||
"owners": [1],
|
"owners": [1],
|
||||||
"viz_type": "line",
|
"viz_type": "line",
|
||||||
"cache_timeout": 1000,
|
"cache_timeout": 1000,
|
||||||
"datasource_id": 1,
|
"datasource_id": 2,
|
||||||
"datasource_type": "table"
|
"datasource_type": "table",
|
||||||
|
"params": "{\"viz_type\":\"line\",\"metrics\":[\"count\"]}"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"slice_name": "2 - Sample chart",
|
"slice_name": "2 - Sample chart",
|
||||||
@ -14,8 +15,9 @@
|
|||||||
"owners": [1],
|
"owners": [1],
|
||||||
"viz_type": "line",
|
"viz_type": "line",
|
||||||
"cache_timeout": 1000,
|
"cache_timeout": 1000,
|
||||||
"datasource_id": 1,
|
"datasource_id": 2,
|
||||||
"datasource_type": "table"
|
"datasource_type": "table",
|
||||||
|
"params": "{\"viz_type\":\"line\",\"metrics\":[\"count\"]}"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"slice_name": "3 - Sample chart",
|
"slice_name": "3 - Sample chart",
|
||||||
@ -23,8 +25,9 @@
|
|||||||
"owners": [1],
|
"owners": [1],
|
||||||
"viz_type": "line",
|
"viz_type": "line",
|
||||||
"cache_timeout": 1000,
|
"cache_timeout": 1000,
|
||||||
"datasource_id": 1,
|
"datasource_id": 2,
|
||||||
"datasource_type": "table"
|
"datasource_type": "table",
|
||||||
|
"params": "{\"viz_type\":\"line\",\"metrics\":[\"count\"]}"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"slice_name": "4 - Sample chart",
|
"slice_name": "4 - Sample chart",
|
||||||
@ -32,7 +35,8 @@
|
|||||||
"owners": [1],
|
"owners": [1],
|
||||||
"viz_type": "line",
|
"viz_type": "line",
|
||||||
"cache_timeout": 1000,
|
"cache_timeout": 1000,
|
||||||
"datasource_id": 1,
|
"datasource_id": 2,
|
||||||
"datasource_type": "table"
|
"datasource_type": "table",
|
||||||
|
"params": "{\"viz_type\":\"line\",\"metrics\":[\"count\"]}"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -14,5 +14,33 @@
|
|||||||
{
|
{
|
||||||
"dashboard_title": "4 - Sample dashboard",
|
"dashboard_title": "4 - Sample dashboard",
|
||||||
"slug": "4-sample-dashboard"
|
"slug": "4-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "5 - Sample dashboard",
|
||||||
|
"slug": "5-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "6 - Sample dashboard",
|
||||||
|
"slug": "6-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "7 - Sample dashboard",
|
||||||
|
"slug": "7-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "8 - Sample dashboard",
|
||||||
|
"slug": "8-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "9 - Sample dashboard",
|
||||||
|
"slug": "9-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "10 - Sample dashboard",
|
||||||
|
"slug": "10-sample-dashboard"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"dashboard_title": "11 - Sample dashboard",
|
||||||
|
"slug": "11-sample-dashboard"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -23,7 +23,11 @@ import {
|
|||||||
interceptBulkDelete,
|
interceptBulkDelete,
|
||||||
interceptUpdate,
|
interceptUpdate,
|
||||||
interceptDelete,
|
interceptDelete,
|
||||||
|
visitSampleChartFromList,
|
||||||
|
saveChartToDashboard,
|
||||||
|
interceptFiltering,
|
||||||
} from '../explore/utils';
|
} from '../explore/utils';
|
||||||
|
import { interceptGet as interceptDashboardGet } from '../dashboard/utils';
|
||||||
|
|
||||||
function orderAlphabetical() {
|
function orderAlphabetical() {
|
||||||
setFilter('Sort', 'Alphabetical');
|
setFilter('Sort', 'Alphabetical');
|
||||||
@ -43,14 +47,69 @@ function confirmDelete() {
|
|||||||
cy.getBySel('modal-confirm-button').click();
|
cy.getBySel('modal-confirm-button').click();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function visitChartList() {
|
||||||
|
interceptFiltering();
|
||||||
|
cy.visit(CHART_LIST);
|
||||||
|
cy.wait('@filtering');
|
||||||
|
}
|
||||||
|
|
||||||
describe('Charts list', () => {
|
describe('Charts list', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.preserveLogin();
|
cy.preserveLogin();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('Cross-referenced dashboards', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
visitChartList();
|
||||||
|
});
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
cy.createSampleDashboards([0, 1, 2, 3]);
|
||||||
|
cy.createSampleCharts([0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show the cross-referenced dashboards in the table cell', () => {
|
||||||
|
interceptDashboardGet();
|
||||||
|
cy.getBySel('table-row')
|
||||||
|
.first()
|
||||||
|
.find('[data-test="table-row-cell"]')
|
||||||
|
.find('[data-test="crosslinks"]')
|
||||||
|
.should('be.empty');
|
||||||
|
cy.getBySel('table-row')
|
||||||
|
.eq(10)
|
||||||
|
.find('[data-test="table-row-cell"]')
|
||||||
|
.find('[data-test="crosslinks"]')
|
||||||
|
.contains('Supported Charts Dashboard')
|
||||||
|
.invoke('removeAttr', 'target')
|
||||||
|
.click();
|
||||||
|
cy.wait('@get');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show the newly added dashboards in a tooltip', () => {
|
||||||
|
interceptDashboardGet();
|
||||||
|
visitSampleChartFromList('1 - Sample chart');
|
||||||
|
saveChartToDashboard('1 - Sample dashboard');
|
||||||
|
saveChartToDashboard('2 - Sample dashboard');
|
||||||
|
saveChartToDashboard('3 - Sample dashboard');
|
||||||
|
saveChartToDashboard('4 - Sample dashboard');
|
||||||
|
visitChartList();
|
||||||
|
cy.getBySel('count-crosslinks').should('be.visible');
|
||||||
|
cy.getBySel('crosslinks')
|
||||||
|
.first()
|
||||||
|
.trigger('mouseover')
|
||||||
|
.then(() => {
|
||||||
|
cy.get('.ant-tooltip')
|
||||||
|
.contains('4 - Sample dashboard')
|
||||||
|
.invoke('removeAttr', 'target')
|
||||||
|
.click();
|
||||||
|
cy.wait('@get');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('list mode', () => {
|
describe('list mode', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.visit(CHART_LIST);
|
visitChartList();
|
||||||
setGridMode('list');
|
setGridMode('list');
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -94,7 +153,7 @@ describe('Charts list', () => {
|
|||||||
|
|
||||||
describe('card mode', () => {
|
describe('card mode', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.visit(CHART_LIST);
|
visitChartList();
|
||||||
setGridMode('card');
|
setGridMode('card');
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -126,8 +185,8 @@ describe('Charts list', () => {
|
|||||||
|
|
||||||
describe('common actions', () => {
|
describe('common actions', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.createSampleCharts();
|
cy.createSampleCharts([0, 1, 2, 3]);
|
||||||
cy.visit(CHART_LIST);
|
visitChartList();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should allow to favorite/unfavorite', () => {
|
it('should allow to favorite/unfavorite', () => {
|
||||||
|
@ -21,7 +21,7 @@ import { interceptFav, interceptUnfav } from './utils';
|
|||||||
|
|
||||||
describe('Dashboard actions', () => {
|
describe('Dashboard actions', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
cy.visit(SAMPLE_DASHBOARD_1);
|
cy.visit(SAMPLE_DASHBOARD_1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -648,7 +648,7 @@ describe('Dashboard edit', () => {
|
|||||||
|
|
||||||
describe('Edit properties', () => {
|
describe('Edit properties', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
visitEdit();
|
visitEdit();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -700,7 +700,7 @@ describe('Dashboard edit', () => {
|
|||||||
|
|
||||||
describe('Edit mode', () => {
|
describe('Edit mode', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
visitEdit();
|
visitEdit();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -737,7 +737,7 @@ describe('Dashboard edit', () => {
|
|||||||
|
|
||||||
describe('Components', () => {
|
describe('Components', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
});
|
});
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -196,7 +196,7 @@ describe('Native filters', () => {
|
|||||||
|
|
||||||
describe('Nativefilters tests initial state required', () => {
|
describe('Nativefilters tests initial state required', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Verify that default value is respected after revisit', () => {
|
it('Verify that default value is respected after revisit', () => {
|
||||||
@ -379,7 +379,7 @@ describe('Native filters', () => {
|
|||||||
|
|
||||||
describe('Nativefilters basic interactions', () => {
|
describe('Nativefilters basic interactions', () => {
|
||||||
before(() => {
|
before(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
visitDashboard();
|
visitDashboard();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -437,7 +437,7 @@ describe('Native filters', () => {
|
|||||||
|
|
||||||
describe('Nativefilters initial state not required', () => {
|
describe('Nativefilters initial state not required', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("User can check 'Filter has default value'", () => {
|
it("User can check 'Filter has default value'", () => {
|
||||||
|
@ -127,7 +127,7 @@ describe('Dashboards list', () => {
|
|||||||
|
|
||||||
describe('common actions', () => {
|
describe('common actions', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.createSampleDashboards();
|
cy.createSampleDashboards([0, 1, 2, 3]);
|
||||||
cy.visit(DASHBOARD_LIST);
|
cy.visit(DASHBOARD_LIST);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -16,7 +16,113 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
import { CHART_LIST } from 'cypress/utils/urls';
|
||||||
|
import { interceptGet as interceptDashboardGet } from 'cypress/integration/dashboard/utils';
|
||||||
import { FORM_DATA_DEFAULTS, NUM_METRIC } from './visualizations/shared.helper';
|
import { FORM_DATA_DEFAULTS, NUM_METRIC } from './visualizations/shared.helper';
|
||||||
|
import {
|
||||||
|
interceptFiltering,
|
||||||
|
saveChartToDashboard,
|
||||||
|
visitSampleChartFromList,
|
||||||
|
} from './utils';
|
||||||
|
|
||||||
|
// SEARCH_THRESHOLD is 10. We need to add at least 11 dashboards to show search
|
||||||
|
const SAMPLE_DASHBOARDS_INDEXES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||||
|
|
||||||
|
function openDashboardsAddedTo() {
|
||||||
|
cy.getBySel('actions-trigger').click();
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-title')
|
||||||
|
.contains('Dashboards added to')
|
||||||
|
.trigger('mouseover');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDashboardsAddedTo() {
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-title')
|
||||||
|
.contains('Dashboards added to')
|
||||||
|
.trigger('mouseout');
|
||||||
|
cy.getBySel('actions-trigger').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function verifyDashboardsSubmenuItem(dashboardName) {
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup').contains(dashboardName);
|
||||||
|
closeDashboardsAddedTo();
|
||||||
|
}
|
||||||
|
|
||||||
|
function verifyDashboardSearch() {
|
||||||
|
openDashboardsAddedTo();
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup').trigger('mouseover');
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup')
|
||||||
|
.find('input[placeholder="Search"]')
|
||||||
|
.type('1');
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup').contains('1 - Sample dashboard');
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup')
|
||||||
|
.find('input[placeholder="Search"]')
|
||||||
|
.type('Blahblah');
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup').contains('No results found');
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup')
|
||||||
|
.find('[aria-label="close-circle"]')
|
||||||
|
.click();
|
||||||
|
closeDashboardsAddedTo();
|
||||||
|
}
|
||||||
|
|
||||||
|
function verifyDashboardLink() {
|
||||||
|
interceptDashboardGet();
|
||||||
|
openDashboardsAddedTo();
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup').trigger('mouseover');
|
||||||
|
cy.get('.ant-dropdown-menu-submenu-popup a')
|
||||||
|
.first()
|
||||||
|
.invoke('removeAttr', 'target')
|
||||||
|
.click();
|
||||||
|
cy.wait('@get');
|
||||||
|
}
|
||||||
|
|
||||||
|
function verifyMetabar(text) {
|
||||||
|
cy.getBySel('metadata-bar').contains(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveAndVerifyDashboard(number) {
|
||||||
|
saveChartToDashboard(`${number} - Sample dashboard`);
|
||||||
|
verifyMetabar(`Added to ${number} dashboard(s)`);
|
||||||
|
openDashboardsAddedTo();
|
||||||
|
verifyDashboardsSubmenuItem(`${number} - Sample dashboard`);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('Cross-referenced dashboards', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
interceptFiltering();
|
||||||
|
|
||||||
|
cy.preserveLogin();
|
||||||
|
cy.visit(CHART_LIST);
|
||||||
|
cy.wait('@filtering');
|
||||||
|
});
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
cy.createSampleDashboards(SAMPLE_DASHBOARDS_INDEXES);
|
||||||
|
cy.createSampleCharts([0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show the cross-referenced dashboards', () => {
|
||||||
|
visitSampleChartFromList('1 - Sample chart');
|
||||||
|
|
||||||
|
cy.getBySel('metadata-bar').contains('Not added to any dashboard');
|
||||||
|
openDashboardsAddedTo();
|
||||||
|
verifyDashboardsSubmenuItem('None');
|
||||||
|
|
||||||
|
saveAndVerifyDashboard('1');
|
||||||
|
saveAndVerifyDashboard('2');
|
||||||
|
saveAndVerifyDashboard('3');
|
||||||
|
saveAndVerifyDashboard('4');
|
||||||
|
saveAndVerifyDashboard('5');
|
||||||
|
saveAndVerifyDashboard('6');
|
||||||
|
saveAndVerifyDashboard('7');
|
||||||
|
saveAndVerifyDashboard('8');
|
||||||
|
saveAndVerifyDashboard('9');
|
||||||
|
saveAndVerifyDashboard('10');
|
||||||
|
saveAndVerifyDashboard('11');
|
||||||
|
|
||||||
|
verifyDashboardSearch();
|
||||||
|
verifyDashboardLink();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('No Results', () => {
|
describe('No Results', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -49,3 +49,23 @@ export function setFilter(filter: string, option: string) {
|
|||||||
|
|
||||||
cy.wait('@filtering');
|
cy.wait('@filtering');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function saveChartToDashboard(dashboardName: string) {
|
||||||
|
cy.getBySel('query-save-button').click();
|
||||||
|
cy.get(
|
||||||
|
'[data-test="save-chart-modal-select-dashboard-form"] [aria-label="Select a dashboard"]',
|
||||||
|
)
|
||||||
|
.first()
|
||||||
|
.click();
|
||||||
|
cy.get(
|
||||||
|
'.ant-select-selection-search-input[aria-label="Select a dashboard"]',
|
||||||
|
).type(dashboardName);
|
||||||
|
cy.get(`.ant-select-item-option[title="${dashboardName}"]`).click();
|
||||||
|
cy.getBySel('btn-modal-save').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function visitSampleChartFromList(chartName: string) {
|
||||||
|
cy.getBySel('table-row').contains(chartName).click();
|
||||||
|
cy.intercept('POST', '/superset/explore_json/**').as('getJson');
|
||||||
|
cy.wait(500);
|
||||||
|
}
|
||||||
|
@ -112,7 +112,7 @@ export default function CrossLinks({
|
|||||||
>
|
>
|
||||||
{links}
|
{links}
|
||||||
{hasHiddenElements && (
|
{hasHiddenElements && (
|
||||||
<span ref={plusRef} className="count">
|
<span ref={plusRef} className="count" data-test="count-crosslinks">
|
||||||
+{elementsTruncated}
|
+{elementsTruncated}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -203,7 +203,7 @@ const MetadataBar = ({ items }: MetadataBarProps) => {
|
|||||||
const { ref } = useResizeDetector({ onResize });
|
const { ref } = useResizeDetector({ onResize });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Bar ref={ref} count={count}>
|
<Bar ref={ref} count={count} data-test="metadata-bar">
|
||||||
{sortedItems.map((item, index) => (
|
{sortedItems.map((item, index) => (
|
||||||
<Item
|
<Item
|
||||||
barWidth={width}
|
barWidth={width}
|
||||||
|
Loading…
Reference in New Issue
Block a user