tests for filters (#1250)

cypress/apiRequests/Attribute.js

@@ -16,6 +16,7 @@ export function createAttribute({
       attribute{
         id
         name
+        slug
         choices(first: 100){
           edges{
             node{
@@ -82,3 +83,17 @@ export function getAttribute(attributeId) {
   }`;
   return cy.sendRequestWithQuery(query).its("body.data.attribute");
 }
+
+export function updateAttribute({ filterableInDashboard }) {
+  const mutation = `mutation{
+    attributeUpdate(id:"" input:{
+      filterableInDashboard:false
+    }){
+   	errors{
+    	field
+    	message
+    }
+  }
+}`;
+  return cy.sendRequestWithQuery(mutation);
+}

cypress/apiRequests/Product.js

@@ -87,6 +87,7 @@ export function updateChannelPriceInVariant(variantId, channelId) {
 }
 export function createProduct({
   attributeId,
+  attributeValue,
   name,
   productTypeId,
   categoryId,
@@ -102,10 +103,15 @@ export function createProduct({
     description,
     `description:"{\\"blocks\\":[{\\"type\\":\\"paragraph\\",\\"data\\":{\\"text\\":\\"${description}\\"}}]}"`
   );
+  const attributeValuesLine = getValueWithDefault(
+    attributeValue,
+    `values:["${attributeValue}"]`
+  );
   const mutation = `mutation{
     productCreate(input:{
       attributes:[{
         id:"${attributeId}"
+        ${attributeValuesLine}
       }]
       name:"${name}"
       slug:"${name}"

cypress/elements/attribute/attributes_details.js

@@ -5,6 +5,9 @@ export const ATTRIBUTES_DETAILS = {
   assignValuesButton: '[data-test-id="assignValueButton"]',
   valueRequired: '[name="valueRequired"]',
   valueNameInput: '[data-test-id="valueName"]',
+  dashboardProperties: {
+    useInFilteringCheckbox: '[name="filterableInDashboard"]'
+  },
   attributesInputTypes: {
     DROPDOWN: '[data-test-id="DROPDOWN"]',
     MULTISELECT: '[data-test-id="MULTISELECT"]',

cypress/elements/catalog/products/products-list.js

@@ -29,6 +29,7 @@ export const PRODUCTS_LIST = {
       channel: '[data-test="filterGroupActive"][data-test-id="channel"]'
     },
     filterField: {
+      filterField: '[data-test="filter-field"]',
       category: '[data-test="filter-field"][data-test-id="categories"]',
       collection: '[data-test="filter-field"][data-test-id="collections"]',
       productType: '[data-test="filter-field"][data-test-id="productType"]',

cypress/elements/shared/sharedElements.js

@@ -11,6 +11,9 @@ export const SHARED_ELEMENTS = {
   selectOption: '[data-test="selectFieldOption"]',
   richTextEditor: {
     empty: '[class*="codex-editor--empty"]'
+  },
+  filters: {
+    filterGroupActivateCheckbox: '[data-test="filterGroupActive"]'
   }
 };
 

cypress/integration/categories.js

@@ -9,7 +9,7 @@ import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
 import { createCategory } from "../steps/categoriesSteps";
 import { confirmationMessageShouldDisappear } from "../steps/shared/confirmationMessages";
 import filterTests from "../support/filterTests";
-import { categoryDetails, urlList } from "../url/urlList";
+import { categoryDetailsUrl, urlList } from "../url/urlList";
 import { deleteCategoriesStartsWith } from "../utils/categoryUtils";
 import * as channelsUtils from "../utils/channelsUtils";
 import * as productsUtils from "../utils/products/productsUtils";
@@ -85,11 +85,11 @@ filterTests(["all"], () => {
 
     it("should add subcategory", () => {
       const categoryName = `${startsWith}${faker.datatype.number()}`;
-      cy.visit(categoryDetails(category.id))
+      cy.visit(categoryDetailsUrl(category.id))
         .get(CATEGORY_DETAILS.createSubcategoryButton)
         .click();
       createCategory({ name: categoryName, description: categoryName })
-        .visit(categoryDetails(category.id))
+        .visit(categoryDetailsUrl(category.id))
         .contains(CATEGORY_DETAILS.categoryChildrenRow, categoryName)
         .should("be.visible");
       getCategory(category.id).then(categoryResp => {
@@ -98,7 +98,7 @@ filterTests(["all"], () => {
     });
 
     it("should add product to category", () => {
-      cy.visit(categoryDetails(category.id))
+      cy.visit(categoryDetailsUrl(category.id))
         .get(CATEGORY_DETAILS.productsTab)
         .click()
         .get(CATEGORY_DETAILS.addProducts)
@@ -108,7 +108,7 @@ filterTests(["all"], () => {
     });
 
     it("should remove product from category", () => {
-      cy.visit(categoryDetails(category.id))
+      cy.visit(categoryDetailsUrl(category.id))
         .get(CATEGORY_DETAILS.productsTab)
         .click();
       cy.contains(CATEGORY_DETAILS.productRow, product.name)

cypress/integration/configuration/attributes/filters.js

@@ -0,0 +1,52 @@
+import { updateAttribute } from "../../../apiRequests/Attribute";
+import { createProduct } from "../../../apiRequests/Product";
+import { SHARED_ELEMENTS } from "../../../elements/shared/sharedElements";
+import { enterAttributeAndChanegeIsFilterableInDashbord } from "../../../steps/attributesSteps";
+import {
+  enterProductListPage,
+  selectAttributeFilter,
+  showFilters
+} from "../../../steps/catalog/products/productsListSteps";
+import {
+  createTypeAttributeAndCategoryForProduct,
+  deleteProductsStartsWith
+} from "../../../utils/products/productsUtils";
+
+describe("Tests for using attributes in filters", () => {
+  const startsWith = "AttrFilter";
+
+  let attribute;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    deleteProductsStartsWith(startsWith);
+    createTypeAttributeAndCategoryForProduct(startsWith, [startsWith]).then(
+      ({ attribute: attributeResp, category, productType }) => {
+        attribute = attributeResp;
+        createProduct({
+          attributeId: attribute.id,
+          attributeValue: startsWith,
+          categoryId: category.id,
+          productTypeId: productType.id,
+          name: startsWith
+        });
+      }
+    );
+  });
+
+  it("should use attribute as filter", () => {
+    updateAttribute({ filterableInDashboard: false });
+    enterAttributeAndChanegeIsFilterableInDashbord(attribute.id);
+    enterProductListPage();
+    selectAttributeFilter(attribute.slug, startsWith);
+    cy.contains(SHARED_ELEMENTS.tableRow, startsWith).should("be.visible");
+  });
+
+  it("should remove attribute from filters", () => {
+    updateAttribute({ filterableInDashboard: false });
+    enterAttributeAndChanegeIsFilterableInDashbord(attribute.id);
+    enterProductListPage();
+    showFilters();
+    cy.contains(attribute.name).should("not.exist");
+  });
+});

cypress/steps/attributesSteps.js

@@ -1,5 +1,7 @@
 import { ATTRIBUTES_DETAILS } from "../elements/attribute/attributes_details";
 import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { attributeDetailsUrl } from "../url/urlList";
+import { confirmationMessageShouldDisappear } from "./shared/confirmationMessages";
 
 export function createAttributeWithInputType({
   name,
@@ -40,12 +42,14 @@ export function fillUpAttributeCreateFields({
 }
 
 export function saveAttribute() {
-  return cy
+  cy.addAliasToGraphRequest("AttributeCreate");
-    .addAliasToGraphRequest("AttributeCreate")
+  submitAttribute();
-    .get(BUTTON_SELECTORS.confirm)
+  return cy.wait("@AttributeCreate").its("response.body.data.attributeCreate");
-    .click()
+}
-    .wait("@AttributeCreate")
+
-    .its("response.body.data.attributeCreate");
+export function submitAttribute() {
+  cy.get(BUTTON_SELECTORS.confirm).click();
+  confirmationMessageShouldDisappear();
 }
 
 export function addSingleValue(valueName) {
@@ -80,3 +84,10 @@ export function selectNumericSystem({ unitSystem, unitsOf, unit }) {
     .get(ATTRIBUTES_DETAILS.unitsOptions[unit])
     .click();
 }
+
+export function enterAttributeAndChanegeIsFilterableInDashbord(attributeId) {
+  cy.visit(attributeDetailsUrl(attributeId))
+    .get(ATTRIBUTES_DETAILS.dashboardProperties.useInFilteringCheckbox)
+    .click();
+  submitAttribute();
+}

cypress/steps/catalog/products/productsListSteps.js

@@ -1,6 +1,10 @@
 import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
 import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors";
-import { getElementByDataTestId } from "../../../elements/shared/sharedElements";
+import {
+  getElementByDataTestId,
+  SHARED_ELEMENTS
+} from "../../../elements/shared/sharedElements";
+import { urlList } from "../../../url/urlList";
 import { waitForProgressBarToNotExist } from "../../shared/progressBar";
 
 export function isNumberOfProductsSameAsInSelectResultsOnPage() {
@@ -21,6 +25,7 @@ export function isNumberOfProductsSameAsInSelectResultsOnPage() {
       productsList => productsList.length === parseInt(numberOfResults, 10)
     );
 }
+
 export function getDisplayedColumnArray(columnName) {
   let productsList = new Array();
   return cy
@@ -45,6 +50,23 @@ export function selectFilterOption(filter, optionName) {
     .click();
   submitFilters();
 }
+
+export function selectAttributeFilter(attributeSlug, attributeValue) {
+  selectFilterByAttribute(attributeSlug);
+  cy.get(
+    `${getElementByDataTestId(attributeSlug)}${
+      PRODUCTS_LIST.filters.filterField.filterField
+    }`
+  )
+    .find(PRODUCTS_LIST.filters.filterOption)
+    .should("be.visible")
+    .contains(attributeValue)
+    .should("be.visible")
+    .find(BUTTON_SELECTORS.checkbox)
+    .click();
+  submitFilters();
+}
+
 export function selectProductsOutOfStock() {
   cy.get(PRODUCTS_LIST.filters.filterBy.stock)
     .click()
@@ -52,14 +74,27 @@ export function selectProductsOutOfStock() {
     .click();
   submitFilters();
 }
+
 export function selectFilterBy(filter) {
-  return cy
+  return showFilters()
-    .get(PRODUCTS_LIST.showFiltersButton)
-    .click()
     .get(PRODUCTS_LIST.filters.filterBy[filter])
     .click();
 }
 
+export function selectFilterByAttribute(attributeSlug) {
+  return showFilters()
+    .get(
+      `${getElementByDataTestId(attributeSlug)}${
+        SHARED_ELEMENTS.filters.filterGroupActivateCheckbox
+      }`
+    )
+    .click();
+}
+
+export function showFilters() {
+  return cy.get(PRODUCTS_LIST.showFiltersButton).click();
+}
+
 export function selectChannel(channelSlug) {
   selectFilterBy("channel");
   cy.get(getElementByDataTestId(channelSlug)).click();
@@ -71,3 +106,8 @@ function submitFilters() {
     .get(PRODUCTS_LIST.emptyProductRow)
     .should("not.exist");
 }
+
+export function enterProductListPage() {
+  cy.visit(urlList.products).softExpectSkeletonIsVisible();
+  waitForProgressBarToNotExist();
+}

cypress/url/urlList.js

@@ -27,22 +27,35 @@ export const urlList = {
   vouchers: "discounts/vouchers/"
 };
 
-export const productDetailsUrl = productId => `${urlList.products}${productId}`;
+export const appDetailsUrl = appId => `${urlList.apps}custom/${appId}`;
 
-export const userDetailsUrl = userId => `${urlList.staffMembers}${userId}`;
+export const attributeDetailsUrl = attributeId =>
+  `${urlList.attributes}${attributeId}`;
 
-export const staffMemberDetailsUrl = staffMemberId =>
+export const categoryDetailsUrl = categoryId =>
-  `${urlList.staffMembers}${staffMemberId}`;
+  `${urlList.categories}${categoryId}`;
+
+export const customerDetailsUrl = customerId =>
+  `${urlList.customers}${customerId}`;
+
+export const menuDetailsUrl = menuId => `${urlList.navigation}${menuId}`;
+
+export const pageTypeDetailsUrl = pageTypeId =>
+  `${urlList.pageTypes}${pageTypeId}`;
 
 export const permissionGroupDetails = permissionGroupId =>
   `${urlList.permissionsGroups}${permissionGroupId}`;
 
-export const categoryDetails = categoryId =>
+export const productDetailsUrl = productId => `${urlList.products}${productId}`;
-  `${urlList.categories}${categoryId}`;
+
+export const staffMemberDetailsUrl = staffMemberId =>
+  `${urlList.staffMembers}${staffMemberId}`;
 
 export const shippingZoneDetailsUrl = shippingZoneId =>
   `${urlList.shippingMethods}${shippingZoneId}`;
 
+export const userDetailsUrl = userId => `${urlList.staffMembers}${userId}`;
+
 export const weightRateUrl = (shippingZoneId, weightRateId) =>
   `${urlList.shippingMethods}${shippingZoneId}/${urlList.weightRete}${weightRateId}`;
 
@@ -51,13 +64,3 @@ export const warehouseDetailsUrl = warehouseId =>
 
 export const productTypeDetailsUrl = productTypeId =>
   `${urlList.productTypes}${productTypeId}`;
-
-export const menuDetailsUrl = menuId => `${urlList.navigation}${menuId}`;
-
-export const customerDetailsUrl = customerId =>
-  `${urlList.customers}${customerId}`;
-
-export const pageTypeDetailsUrl = pageTypeId =>
-  `${urlList.pageTypes}${pageTypeId}`;
-
-export const appDetailsUrl = appId => `${urlList.apps}custom/${appId}`;

cypress/utils/products/productsUtils.js

@@ -87,6 +87,7 @@ export function createTypeAttributeAndCategoryForProduct(
       return { attribute, category, productType };
     });
 }
+
 export function deleteProductsStartsWith(startsWith) {
   deleteAttributesStartsWith(startsWith);
   cy.deleteElementsStartsWith(deleteProductType, getProductTypes, startsWith);