feat: chart and dashboard card list view e2e cypress test (#10669)

* card view cypress tests

* update test config

* chart filter cypress test

* move setting to superset test config

* update test description card view

.github/workflows/superset-e2e.yml

@@ -12,9 +12,9 @@ jobs:
         browser: ['chrome']
     env:
       FLASK_ENV: development
+      ENABLE_REACT_CRUD_VIEWS: true
       SUPERSET_CONFIG: tests.superset_test_config
-      SUPERSET__SQLALCHEMY_DATABASE_URI:
-        postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
+      SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
       PYTHONPATH: ${{ github.workspace }}
       REDIS_PORT: 16379
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts

@@ -0,0 +1,106 @@
+/**
+ * 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 { CHART_LIST } from './chart_list.helper';
+
+describe('chart card view', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.server();
+    cy.visit(CHART_LIST);
+  });
+
+  it('should load cards', () => {
+    cy.get('.chart-list-view');
+    cy.get('.ant-card').should('be.visible');
+    cy.get('.ant-card').should('have.length', 25);
+  });
+
+  it('should allow to favorite/unfavorite chart card', () => {
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-selected']")
+      .should('not.exist');
+    cy.get(".ant-card .card-actions [data-test='favorite-unselected']")
+      .first()
+      .click();
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-selected']")
+      .should('exist');
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-unselected']")
+      .should('not.exist');
+
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-unselected']")
+      .should('not.exist');
+    cy.get(".ant-card .card-actions [data-test='favorite-selected']")
+      .first()
+      .click();
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-unselected']")
+      .should('exist');
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-selected']")
+      .should('not.exist');
+  });
+
+  it('should sort correctly', () => {
+    // sort Alphabetical
+    cy.get('.Select__control').last().should('be.visible');
+    cy.get('.Select__control').last().click();
+    cy.get('.Select__menu').contains('Alphabetical').click();
+    cy.get('.chart-list-view').should('be.visible');
+    cy.get('.ant-card').first().contains('% Rural');
+
+    // sort Recently Modified
+    cy.get('.Select__control').last().should('be.visible');
+    cy.get('.Select__control').last().click();
+    cy.get('.Select__menu').contains('Recently Modified').click();
+    cy.get('.chart-list-view').should('be.visible');
+    cy.get('.ant-card').first().contains('Unicode Cloud');
+    cy.get('.ant-card').last().contains('Life Expectancy VS Rural %');
+  });
+
+  it('should delete correctly', () => {
+    // show delete modal
+    cy.get('.ant-dropdown-trigger').last().trigger('mouseover');
+    cy.get('.ant-dropdown-menu-item').contains('Delete').should('exist');
+    cy.get('.ant-dropdown-menu-item').contains('Delete').click();
+    cy.get('.modal-dialog').should('be.visible');
+    cy.get('.modal-dialog .btn-danger').should('have.attr', 'disabled');
+    cy.get(".modal-dialog input[id='delete']").type('DELETE');
+    cy.get('.modal-dialog .btn-danger').should('not.have.attr', 'disabled');
+    cy.get('.modal-dialog .btn-default').contains('Cancel').click();
+  });
+
+  it('should edit correctly', () => {
+    // show edit modal
+    cy.get('.ant-dropdown-trigger').last().trigger('mouseover');
+    cy.get('.ant-dropdown-menu-item').contains('Edit').should('exist');
+    cy.get('.ant-dropdown-menu-item').contains('Edit').click();
+    cy.get('.modal-dialog').should('be.visible');
+    cy.get('.modal-dialog input[name="name"]').should('not.have.value');
+    cy.get('.modal-dialog .btn-default').contains('Cancel').click();
+  });
+});

superset-frontend/cypress-base/cypress/integration/chart_list/chart_list.helper.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export const CHART_LIST = '/chart/list/';

superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts

@@ -0,0 +1,60 @@
+/**
+ * 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 { CHART_LIST } from './chart_list.helper';
+
+describe('chart filters', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.server();
+    cy.visit(CHART_LIST);
+  });
+
+  it('should filter by owners correctly', () => {
+    // filter by owners
+    cy.get('.Select__control').first().click();
+    cy.get('.Select__menu').contains('alpha user').click();
+    cy.get('.ant-card').should('not.exist');
+    cy.get('.Select__control').first().click();
+    cy.get('.Select__menu').contains('gamma user').click();
+    cy.get('.ant-card').should('not.exist');
+  });
+
+  it('should filter by viz type correctly', () => {
+    // filter by viz type
+    cy.get('.Select__control').eq(1).click();
+    cy.get('.Select__menu').contains('area').click({ timeout: 5000 });
+    cy.get('.ant-card').its('length').should('be.gt', 0);
+    cy.get('.ant-card').contains("World's Pop Growth").should('exist');
+    cy.get('.Select__control').eq(1).click();
+    cy.get('.Select__control').eq(1).type('world_map{enter}');
+    cy.get('.ant-card').should('have.length', 1);
+    cy.get('.ant-card').contains('% Rural').should('exist');
+  });
+
+  it('should filter by datasource correctly', () => {
+    // filter by datasource
+    cy.get('.Select__control').eq(2).click();
+    cy.get('.Select__menu').contains('unicode_test').click();
+    cy.get('.ant-card').should('have.length', 1);
+    cy.get('.ant-card').contains('Unicode Cloud').should('exist');
+    cy.get('.Select__control').eq(2).click();
+    cy.get('.Select__control').eq(2).type('energy_usage{enter}{enter}');
+    cy.get('.ant-card').its('length').should('be.gt', 0);
+  });
+});

superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { CHART_LIST } from './chart_list.helper';
+
+describe('chart list view', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.server();
+    cy.visit(CHART_LIST);
+    cy.get('[data-test="list-view"]').click();
+  });
+
+  it.skip('should load rows', () => {
+    cy.get('.chart-list-view');
+    cy.get('table[role="table"]').should('be.visible');
+
+    // check chart list view header
+    cy.get('th[role="columnheader"]:nth-child(2)').contains('Chart');
+    cy.get('th[role="columnheader"]:nth-child(3)').contains(
+      'Visualization Type',
+    );
+    cy.get('th[role="columnheader"]:nth-child(4)').contains('Datasource');
+    cy.get('th[role="columnheader"]:nth-child(5)').contains('Modified By');
+    cy.get('th[role="columnheader"]:nth-child(6)').contains('Last Modified');
+    cy.get('th[role="columnheader"]:nth-child(7)').contains('Actions');
+    cy.get('.table-row').should('have.length', 25);
+  });
+
+  it('should sort correctly', () => {
+    cy.get('th[role="columnheader"]:nth-child(2)').click();
+    cy.get('.table-row td:nth-child(2):eq(0)').contains('% Rural');
+  });
+});

superset-frontend/cypress-base/cypress/integration/dashboard_list/card_view.test.ts

@@ -0,0 +1,110 @@
+/**
+ * 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 { DASHBOARD_LIST } from './dashboard_list.helper';
+
+describe('Dashboard card view', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.server();
+    cy.visit(DASHBOARD_LIST);
+  });
+
+  it('should load cards', () => {
+    cy.get('.dashboard-list-view');
+    cy.get('.ant-card').should('be.visible');
+    cy.get('.ant-card').should('have.length', 4);
+  });
+
+  it('should allow to favorite/unfavorite dashboard card', () => {
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-selected']")
+      .should('not.exist');
+    cy.get(".ant-card .card-actions [data-test='favorite-unselected']")
+      .first()
+      .click();
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-selected']")
+      .should('exist');
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-unselected']")
+      .should('not.exist');
+
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-unselected']")
+      .should('not.exist');
+    cy.get(".ant-card .card-actions [data-test='favorite-selected']")
+      .first()
+      .click();
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-unselected']")
+      .should('exist');
+    cy.get('.ant-card .card-actions')
+      .first()
+      .find("[data-test='favorite-selected']")
+      .should('not.exist');
+  });
+
+  it('should sort correctly', () => {
+    // sort alphabetical
+    cy.get('.Select__control').last().should('be.visible');
+    cy.get('.Select__control').last().click({ force: true });
+    cy.get('.Select__menu').contains('Alphabetical').click();
+    cy.get('.dashboard-list-view').should('be.visible');
+    cy.get('.ant-card').first().contains('Tabbed Dashboard');
+    cy.get('.ant-card').last().contains("World Bank's Data");
+
+    // sort recently modified
+    cy.get('.Select__control').last().should('be.visible');
+    cy.get('.Select__control').last().click({ force: true });
+    cy.get('.Select__menu').contains('Recently Modified').click();
+    cy.get('.dashboard-list-view').should('be.visible');
+    cy.get('.ant-card').first().contains('Tabbed Dashboard');
+    cy.get('.ant-card').last().contains("World Bank's Data");
+  });
+
+  it('should delete correctly', () => {
+    // show delete modal
+    cy.get('.ant-dropdown-trigger').last().trigger('mouseover');
+    cy.get('.ant-dropdown-menu-item').contains('Delete').should('exist');
+    cy.get('.ant-dropdown-menu-item').contains('Delete').click();
+    cy.get('.modal-dialog').should('be.visible');
+    cy.get('.modal-dialog .btn-danger').should('have.attr', 'disabled');
+    cy.get(".modal-dialog input[id='delete']").type('DELETE');
+    cy.get('.modal-dialog .btn-danger').should('not.have.attr', 'disabled');
+    cy.get('.modal-dialog .btn-default').contains('Cancel').click();
+  });
+
+  it('should edit correctly', () => {
+    // show edit modal
+    cy.get('.ant-dropdown-trigger').last().trigger('mouseover');
+    cy.get('.ant-dropdown-menu-item').contains('Edit').should('exist');
+    cy.get('.ant-dropdown-menu-item').contains('Edit').click();
+    cy.get('.modal-dialog').should('be.visible');
+    cy.get('.modal-dialog input[name="dashboard_title"]').should(
+      'not.have.value',
+    );
+    cy.get('.modal-dialog input[name="slug"]').should('not.have.value');
+    cy.get('.modal-dialog .btn-default').contains('Cancel').click();
+  });
+});

superset-frontend/cypress-base/cypress/integration/dashboard_list/dashboard_list.helper.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export const DASHBOARD_LIST = '/dashboard/list/';

superset-frontend/cypress-base/cypress/integration/dashboard_list/filter.test.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 { DASHBOARD_LIST } from './dashboard_list.helper';
+
+describe('dashboard filters', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.server();
+    cy.visit(DASHBOARD_LIST);
+  });
+
+  it('should filter by owners correctly', () => {
+    // filter by owners
+    cy.get('.Select__control').first().click();
+    cy.get('.Select__menu').contains('alpha user').click();
+    cy.get('.ant-card').should('not.exist');
+    cy.get('.Select__control').first().click();
+    cy.get('.Select__menu').contains('gamma user').click();
+    cy.get('.ant-card').should('not.exist');
+  });
+
+  it('should filter by published correctly', () => {
+    // filter by published
+    cy.get('.Select__control').eq(1).click();
+    cy.get('.Select__menu').contains('Published').click();
+    cy.get('.ant-card').should('have.length', 2);
+    cy.get('.ant-card').first().contains('USA Births Names').should('exist');
+    cy.get('.Select__control').eq(1).click();
+    cy.get('.Select__control').eq(1).type('unpub{enter}');
+    cy.get('.ant-card').should('have.length', 2);
+  });
+});

superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 { DASHBOARD_LIST } from './dashboard_list.helper';
+
+describe('dashboard list view', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.server();
+    cy.visit(DASHBOARD_LIST);
+    cy.get('[data-test="list-view"]').click();
+  });
+
+  it('should load rows', () => {
+    cy.get('.dashboard-list-view');
+    cy.get('table[role="table"]').should('be.visible');
+    // check dashboard list view header
+    cy.get('th[role="columnheader"]:nth-child(2)').contains('Title');
+    cy.get('th[role="columnheader"]:nth-child(3)').contains('Owners');
+    cy.get('th[role="columnheader"]:nth-child(4)').contains('Modified By');
+    cy.get('th[role="columnheader"]:nth-child(5)').contains('Published');
+    cy.get('th[role="columnheader"]:nth-child(6)').contains('Modified');
+    cy.get('th[role="columnheader"]:nth-child(7)').contains('Actions');
+    cy.get('.table-row').should('have.length', 4);
+  });
+
+  it('should sort correctly', () => {
+    cy.get('th[role="columnheader"]:nth-child(2)').click();
+    cy.get('.table-row td:nth-child(2):eq(0)').contains('Tabbed Dashboard');
+    cy.get('th[role="columnheader"]:nth-child(6)').click();
+    cy.get('.table-row  td:nth-child(2):eq(0)').contains("World Bank's Data");
+  });
+});

superset-frontend/cypress-base/cypress/integration/explore/chart.test.js

@@ -25,7 +25,7 @@ describe('No Results', () => {
     cy.route('POST', '/superset/explore_json/**').as('getJson');
   });
 
-  it('No results  message shows up', () => {
+  it('No results message shows up', () => {
     const formData = {
       ...FORM_DATA_DEFAULTS,
       metrics: [NUM_METRIC],

tests/superset_test_config.py

@@ -57,6 +57,7 @@ PUBLIC_ROLE_LIKE_GAMMA = True
 AUTH_ROLE_PUBLIC = "Public"
 EMAIL_NOTIFICATIONS = False
 ENABLE_ROW_LEVEL_SECURITY = True
+ENABLE_REACT_CRUD_VIEWS = os.environ.get("ENABLE_REACT_CRUD_VIEWS", False)
 
 CACHE_CONFIG = {"CACHE_TYPE": "simple"}