-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Drop dynamic column toggles in column picker (#3878)
* Drop dynamic column toggles * Replace removal icon * Add changeset * Add docs * Update docs * Fix types on order draft datagrid * Adjust collections column picker to new architecture * Adjust categories column picker to new architecture * Test column picker: adding, removing and searching for dynamic columns in picker (#3901) * test - column picker. Adding, removing and searching for dynamic columns in picker. * update tests tame with TC ids * removed unused row checks on products list view * Lint files --------- Co-authored-by: wojteknowacki <[email protected]>
- Loading branch information
1 parent
2ab11bb
commit 66976d5
Showing
28 changed files
with
476 additions
and
337 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "saleor-dashboard": minor | ||
| --- | ||
|
|
||
| Drop dynamic column toggles in column picker |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| /// <reference types="cypress"/> | ||
| /// <reference types="../../../support"/> | ||
|
|
||
| import { PRODUCT_DETAILS, SHARED_ELEMENTS } from "../../../elements"; | ||
| import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list"; | ||
| import { LOCAL_STORAGE_FOR_COLUMN_PICKER } from "../../../fixtures"; | ||
| import { urlList } from "../../../fixtures/urlList"; | ||
| import { ensureCanvasStatic } from "../../../support/customCommands/sharedElementsOperations/canvas"; | ||
| import { columnPickerPage } from "../../../support/pages"; | ||
|
|
||
| describe("As an admin I should be able to use column picker", () => { | ||
| beforeEach(() => { | ||
| cy.clearSessionData().loginUserViaRequest(); | ||
| }); | ||
|
|
||
| it( | ||
| "should be able to add new dynamic column to grid on product list via search. TC: SALEOR_2610", | ||
| { tags: ["@critical", "@allEnv", "@stable"] }, | ||
| () => { | ||
| const dynamicColumnToBeSearched = "ABV"; | ||
| cy.addAliasToGraphRequest("AvailableColumnAttributes"); | ||
| cy.visit(urlList.products); | ||
|
|
||
| ensureCanvasStatic(PRODUCTS_LIST.dataGridTable); | ||
| columnPickerPage.openColumnPicker(); | ||
| columnPickerPage.openDynamicColumnsSearch(); | ||
| columnPickerPage.typeNameInSearchColumnInput(dynamicColumnToBeSearched); | ||
| cy.waitForRequestAndCheckIfNoErrors("@AvailableColumnAttributes"); | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnSelector) | ||
| .should("have.length", 1) | ||
| .should("contain.text", dynamicColumnToBeSearched) | ||
| .find("button") | ||
| .click(); | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnSelector) | ||
| .invoke("text") | ||
| .then(selectedColumnName => { | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer) | ||
| // do not check by visible text just data-test-id since often text has ellipsis | ||
| .find(`[data-test-id="column-name-${selectedColumnName}"]`) | ||
| .should("be.visible"); | ||
| // newly added dynamic column is alway placed as last one on grid | ||
| cy.get(SHARED_ELEMENTS.dataGridTable) | ||
| .find("th") | ||
| .last() | ||
| .should("have.text", selectedColumnName); | ||
| }); | ||
| }, | ||
| ); | ||
| it( | ||
| "should be able to remove dynamic column from picker on products list. TC: SALEOR_2611", | ||
| { tags: ["@productsList", "@allEnv", "@stable"] }, | ||
| () => { | ||
| const listConfigLocalStorage = JSON.stringify( | ||
| LOCAL_STORAGE_FOR_COLUMN_PICKER.listConfigWithAttributeColumnPicker, | ||
| ); | ||
| // local storage is updated to avoid not necessary action of adding dynamic column in the beginning of test | ||
| cy.window().then(win => { | ||
| win.localStorage.setItem("listConfig", listConfigLocalStorage); | ||
| }); | ||
| cy.visit(urlList.products); | ||
| ensureCanvasStatic(PRODUCTS_LIST.dataGridTable); | ||
| columnPickerPage.openColumnPicker(); | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer) | ||
| .find(SHARED_ELEMENTS.selectedDynamicColumnNameSelector) | ||
| .should("have.length", 1) | ||
| .invoke("text") | ||
| .then(columnName => { | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer) | ||
| .find(SHARED_ELEMENTS.removeSelectedDynamicColumnButton) | ||
| .should("be.visible") | ||
| .should("have.length", 1) | ||
| .click(); | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer) | ||
| .find(SHARED_ELEMENTS.removeSelectedDynamicColumnButton) | ||
| .should("not.exist"); | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer) | ||
| .find(columnName) | ||
| .should("not.exist"); | ||
| }); | ||
| }, | ||
| ); | ||
| it( | ||
| "should validate: that there is always at least one active static column, use pagination when searching dynamic columns, hiding column picker works. TC: SALEOR_2612", | ||
| { tags: ["@productsList", "@allEnv", "@stable"] }, | ||
| () => { | ||
| cy.addAliasToGraphRequest("ProductDetails"); | ||
| // local storage accepts only strings | ||
| const listConfigLocalStorage = JSON.stringify( | ||
| LOCAL_STORAGE_FOR_COLUMN_PICKER.localStorageWithSingleStaticColumn, | ||
| ); | ||
| // local storage is updated to make sure only one static column is active | ||
| cy.window().then(win => { | ||
| win.localStorage.setItem("listConfig", listConfigLocalStorage); | ||
| }); | ||
| cy.visit(urlList.products); | ||
| ensureCanvasStatic(PRODUCTS_LIST.dataGridTable); | ||
| columnPickerPage.openColumnPicker(); | ||
| cy.get(SHARED_ELEMENTS.activeStaticColumnOnGridButton).should( | ||
| "have.length", | ||
| 1, | ||
| "There should be only one active static column", | ||
| ); | ||
| columnPickerPage.openDynamicColumnsSearch(); | ||
|
|
||
| cy.get(SHARED_ELEMENTS.paginationBackOnColumnPicker).should( | ||
| "have.attr", | ||
| "disabled", | ||
| ); | ||
| cy.get(SHARED_ELEMENTS.paginationForwardOnColumnPicker).click(); | ||
| cy.get(SHARED_ELEMENTS.paginationBackOnColumnPicker).should( | ||
| "not.have.attr", | ||
| "disabled", | ||
| ); | ||
| columnPickerPage | ||
| .selectDynamicColumnAtIndex(1) | ||
| .invoke("text") | ||
| .then(selectedColumnName => { | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer) | ||
| // do not check by visible text just data-test-id since often text has ellipsis | ||
| .find(`[data-test-id*="${selectedColumnName}"]`) | ||
| .should("be.visible"); | ||
| // newly added dynamic column is alway placed as last one on grid | ||
| cy.get(SHARED_ELEMENTS.dataGridTable) | ||
| .find("th") | ||
| .last() | ||
| .should("have.text", selectedColumnName); | ||
| //next line hides picker | ||
| cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true }); | ||
| cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist"); | ||
| // now it checks does picking record from grid works when picker is gone | ||
| cy.clickGridCell(1, 1); | ||
| cy.waitForRequestAndCheckIfNoErrors("@ProductDetails"); | ||
| cy.get(PRODUCT_DETAILS.productUpdateFormSection).should("be.visible"); | ||
| }); | ||
| }, | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| export const listConfigWithAttributeColumnPicker = { | ||
| APPS_LIST: { | ||
| rowNumber: 100, | ||
| }, | ||
| ATTRIBUTE_VALUE_LIST: { | ||
| rowNumber: 10, | ||
| }, | ||
| CATEGORY_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| COLLECTION_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| CUSTOMER_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| DRAFT_LIST: { | ||
| rowNumber: 20, | ||
| columns: ["number", "date", "customer", "total"], | ||
| }, | ||
| NAVIGATION_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| ORDER_LIST: { | ||
| rowNumber: 20, | ||
| columns: ["number", "date", "customer", "payment", "status", "total"], | ||
| }, | ||
| PAGES_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| PLUGIN_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| PRODUCT_LIST: { | ||
| columns: [ | ||
| "name", | ||
| "availability", | ||
| "description", | ||
| "price", | ||
| "productType", | ||
| "date", | ||
| "attribute:QXR0cmlidXRlOjIx", | ||
| ], | ||
| rowNumber: 20, | ||
| }, | ||
| SALES_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| SHIPPING_METHODS_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| STAFF_MEMBERS_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| PERMISSION_GROUP_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| VOUCHER_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| WAREHOUSE_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| WEBHOOK_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| TRANSLATION_ATTRIBUTE_VALUE_LIST: { | ||
| rowNumber: 10, | ||
| }, | ||
| " GIFT_CARD_LIST": { | ||
| rowNumber: 20, | ||
| }, | ||
| }; | ||
|
|
||
| export const localStorageWithSingleStaticColumn = { | ||
| APPS_LIST: { | ||
| rowNumber: 100, | ||
| }, | ||
| ATTRIBUTE_VALUE_LIST: { | ||
| rowNumber: 10, | ||
| }, | ||
| CATEGORY_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| COLLECTION_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| CUSTOMER_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| DRAFT_LIST: { | ||
| rowNumber: 20, | ||
| columns: ["number", "date", "customer", "total"], | ||
| }, | ||
| NAVIGATION_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| ORDER_LIST: { | ||
| rowNumber: 20, | ||
| columns: ["number", "date", "customer", "payment", "status", "total"], | ||
| }, | ||
| PAGES_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| PLUGIN_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| PRODUCT_LIST: { | ||
| columns: ["name"], | ||
| rowNumber: 20, | ||
| }, | ||
| SALES_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| SHIPPING_METHODS_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| STAFF_MEMBERS_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| PERMISSION_GROUP_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| VOUCHER_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| WAREHOUSE_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| WEBHOOK_LIST: { | ||
| rowNumber: 20, | ||
| }, | ||
| TRANSLATION_ATTRIBUTE_VALUE_LIST: { | ||
| rowNumber: 10, | ||
| }, | ||
| " GIFT_CARD_LIST": { | ||
| rowNumber: 20, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements"; | ||
|
|
||
| export function openColumnPicker() { | ||
| cy.get(SHARED_ELEMENTS.openColumnPickerButton).click(); | ||
| } | ||
| export function openDynamicColumnsSearch() { | ||
| cy.get(SHARED_ELEMENTS.openDynamicColumnsSearchButton).click(); | ||
| } | ||
| export function selectDynamicColumnAtIndex(columnIndex) { | ||
| return cy | ||
| .get(SHARED_ELEMENTS.dynamicColumnNameSelector) | ||
| .eq(columnIndex) | ||
| .click(); | ||
| } | ||
| export function typeNameInSearchColumnInput(columnName) { | ||
| return cy | ||
| .get(SHARED_ELEMENTS.dynamicColumnSearchInput) | ||
| .should("be.visible") | ||
| .click() | ||
| .type(columnName) | ||
| .blur(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.