[ACA-4487] support search forms layout (#2195)

* [ACA-4487] support search chips -initial commit

* * update adf, fixed comments and e2e

* * update context menu test

* * update tool bar test

* * remove await expect

* * add e2e back

projects/aca-testing-shared/src/components/search/filters/created-date-filter.ts

@@ -23,24 +23,22 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ElementFinder, by, protractor } from 'protractor';
-import { GenericFilterPanel } from './generic-filter-panel';
+import { by, ElementFinder, protractor } from 'protractor';
+import { GenericFilter } from './generic-filter';
 import { isPresentAndDisplayed } from '../../../utilities/utils';
 import { BrowserActions } from '@alfresco/adf-testing';
 
-export class CreatedDateFilter extends GenericFilterPanel {
+export class CreatedDateFilter extends GenericFilter {
   constructor() {
     super('Created date');
   }
 
-  fromField: ElementFinder = this.panelExpanded.element(by.cssContainingText('.adf-search-date-range .mat-form-field', 'From'));
+  fromField: ElementFinder = this.filterDialogOpened.element(by.cssContainingText('.adf-search-date-range .mat-form-field', 'From'));
   fromInput: ElementFinder = this.fromField.element(by.css(`[data-automation-id='date-range-from-input']`));
   fromFieldError: ElementFinder = this.fromField.element(by.css(`[data-automation-id='date-range-from-error']`));
-  toField: ElementFinder = this.panelExpanded.element(by.cssContainingText('.adf-search-date-range .mat-form-field', 'To'));
+  toField: ElementFinder = this.filterDialogOpened.element(by.cssContainingText('.adf-search-date-range .mat-form-field', 'To'));
   toInput: ElementFinder = this.toField.element(by.css(`[data-automation-id='date-range-to-input']`));
   toFieldError: ElementFinder = this.toField.element(by.css(`[data-automation-id='date-range-to-error']`));
-  clearButton: ElementFinder = this.panel.element(by.css('.adf-facet-buttons [data-automation-id="date-range-clear-btn"]'));
-  applyButton: ElementFinder = this.panel.element(by.css('.adf-facet-buttons [data-automation-id="date-range-apply-btn"]'));
 
   async isFromFieldDisplayed(): Promise<boolean> {
     return isPresentAndDisplayed(this.fromField);
@@ -58,26 +56,6 @@ export class CreatedDateFilter extends GenericFilterPanel {
     return isPresentAndDisplayed(this.toFieldError);
   }
 
-  async isClearButtonEnabled(): Promise<boolean> {
-    return this.clearButton.isEnabled();
-  }
-
-  async isApplyButtonEnabled(): Promise<boolean> {
-    return this.applyButton.isEnabled();
-  }
-
-  async clickClearButton(): Promise<void> {
-    if (await this.isClearButtonEnabled()) {
-      await BrowserActions.click(this.clearButton);
-    }
-  }
-
-  async clickApplyButton(): Promise<void> {
-    if (await this.isApplyButtonEnabled()) {
-      await BrowserActions.click(this.applyButton);
-    }
-  }
-
   async getFromValue(): Promise<string> {
     return BrowserActions.getInputValue(this.fromInput);
   }
@@ -106,20 +84,20 @@ export class CreatedDateFilter extends GenericFilterPanel {
     const fromValue = await this.getFromValue();
     const toValue = await this.getToValue();
     if (fromValue.length > 0 || toValue.length > 0) {
-      await this.expandPanel();
-      await this.clickClearButton();
-      await this.collapsePanel();
+      await this.openDialog();
+      await this.clickResetButton();
+      await this.closeDialog();
     }
   }
 
   async enterFromDate(date: string): Promise<void> {
-    await this.expandPanel();
+    await this.openDialog();
     await BrowserActions.clearWithBackSpace(this.fromInput);
     await this.fromInput.sendKeys(date, protractor.Key.TAB);
   }
 
   async enterToDate(date: string): Promise<void> {
-    await this.expandPanel();
+    await this.openDialog();
     await BrowserActions.clearWithBackSpace(this.toInput);
     await this.toInput.sendKeys(date, protractor.Key.TAB);
   }

projects/aca-testing-shared/src/components/search/filters/facet-filter.ts

@@ -24,29 +24,25 @@
  */
 
 import { ElementFinder, ElementArrayFinder, by, browser } from 'protractor';
-import { GenericFilterPanel } from './generic-filter-panel';
+import { GenericFilter } from './generic-filter';
 import { BrowserActions } from '@alfresco/adf-testing';
 
-export class FacetFilter extends GenericFilterPanel {
+export class FacetFilter extends GenericFilter {
   private readonly locators = {
-    checkbox: '.mat-checkbox',
-    checkboxChecked: '.mat-checkbox.mat-checkbox-checked',
-    button: '.adf-facet-buttons button',
-    categoryInput: 'input[data-automation-id^="facet-result-filter"]',
-    facetsFilter: '.adf-facet-result-filter'
+    checkbox: '.mat-menu-content .mat-checkbox',
+    checkboxChecked: '.mat-menu-content .mat-checkbox.mat-checkbox-checked',
+    categoryInput: '.mat-menu-content input[data-automation-id^="facet-result-filter"]',
+    facetsFilter: '.mat-menu-content .adf-facet-result-filter'
   };
 
   get facets(): ElementArrayFinder {
-    return this.panelExpanded.all(by.css(this.locators.checkbox));
+    return this.filterDialogOpened.all(by.css(this.locators.checkbox));
   }
   get selectedFacets(): ElementArrayFinder {
-    return this.panel.all(by.css(this.locators.checkboxChecked));
-  }
-  get clearButton(): ElementFinder {
-    return this.panel.element(by.cssContainingText(this.locators.button, 'Clear all'));
+    return this.filterDialogOpened.all(by.css(this.locators.checkboxChecked));
   }
   get facetsFilter(): ElementFinder {
-    return this.panelExpanded.element(by.css(this.locators.facetsFilter));
+    return this.filterDialogOpened.element(by.css(this.locators.facetsFilter));
   }
   get filterCategoryInput(): ElementFinder {
     return this.facetsFilter.element(by.css(this.locators.categoryInput));
@@ -66,28 +62,18 @@ export class FacetFilter extends GenericFilterPanel {
 
   async resetPanel(): Promise<void> {
     if ((await this.selectedFacets.count()) > 0) {
-      await this.expandPanel();
+      await this.openDialog();
       await this.selectedFacets.each(async (elem) => {
         await BrowserActions.click(elem);
       });
     }
-    await this.expandPanel();
+    await this.openDialog();
   }
 
   async isFilterFacetsDisplayed(): Promise<boolean> {
     return this.facetsFilter.isDisplayed();
   }
 
-  async isClearButtonEnabled(): Promise<boolean> {
-    return this.clearButton.isEnabled();
-  }
-
-  async clickClearButton(): Promise<void> {
-    if (await this.isClearButtonEnabled()) {
-      await BrowserActions.click(this.clearButton);
-    }
-  }
-
   async isFilterCategoryInputDisplayed(): Promise<boolean> {
     return this.filterCategoryInput.isDisplayed();
   }

projects/aca-testing-shared/src/components/search/filters/generic-filter-panel.ts

@@ -1,78 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2020 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { ElementFinder, by, browser } from 'protractor';
-import { isPresentAndDisplayed } from '../../../utilities/utils';
-import { BrowserActions } from '@alfresco/adf-testing';
-
-export class GenericFilterPanel {
-  private filterName: string;
-
-  constructor(filterName: string) {
-    this.filterName = filterName;
-  }
-
-  private readonly selectors = {
-    root: 'adf-search-filter',
-
-    panel: '.mat-expansion-panel',
-    panelExpanded: '.mat-expansion-panel.mat-expanded',
-    panelHeader: '.mat-expansion-panel-header'
-  };
-
-  get panel(): ElementFinder {
-    return browser.element(by.cssContainingText(this.selectors.panel, this.filterName));
-  }
-  get panelExpanded(): ElementFinder {
-    return browser.element(by.cssContainingText(this.selectors.panelExpanded, this.filterName));
-  }
-  get panelHeader(): ElementFinder {
-    return this.panel.element(by.css(this.selectors.panelHeader));
-  }
-
-  async clickPanelHeader(): Promise<void> {
-    await BrowserActions.click(this.panelHeader);
-  }
-
-  async isPanelDisplayed(): Promise<boolean> {
-    return isPresentAndDisplayed(this.panel);
-  }
-
-  async isPanelExpanded(): Promise<boolean> {
-    return isPresentAndDisplayed(this.panelExpanded);
-  }
-
-  async expandPanel(): Promise<void> {
-    if (!(await this.isPanelExpanded())) {
-      await this.clickPanelHeader();
-    }
-  }
-
-  async collapsePanel(): Promise<void> {
-    if (await this.isPanelExpanded()) {
-      await this.clickPanelHeader();
-    }
-  }
-}

projects/aca-testing-shared/src/components/search/filters/generic-filter.ts

@@ -0,0 +1,84 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, by, browser } from 'protractor';
+import { isPresentAndDisplayed, Utils } from '../../../utilities/utils';
+import { BrowserActions, TestElement } from '@alfresco/adf-testing';
+
+export class GenericFilter {
+  private filterName: string;
+
+  constructor(filterName: string) {
+    this.filterName = filterName;
+  }
+
+  private readonly selectors = {
+    root: 'adf-search-filter-chips',
+
+    chip: '.mat-chip',
+    chipDialog: '.mat-menu-content .adf-search-filter-menu-card'
+  };
+
+  get chip(): ElementFinder {
+    return browser.element(by.cssContainingText(this.selectors.chip, this.filterName));
+  }
+  get filterDialogOpened(): ElementFinder {
+    return browser.element(by.cssContainingText(this.selectors.chipDialog, this.filterName));
+  }
+
+  async getChipTitle(): Promise<string> {
+    return browser.element(by.cssContainingText(`${this.selectors.root} ${this.selectors.chip}`, this.filterName)).getAttribute('title');
+  }
+
+  async clickApplyButton(): Promise<void> {
+    await TestElement.byId('apply-filter-button').click();
+  }
+
+  async clickResetButton(): Promise<void> {
+    await TestElement.byId('cancel-filter-button').click();
+  }
+
+  async isDisplayed(): Promise<boolean> {
+    return isPresentAndDisplayed(this.chip);
+  }
+
+  async isDialogPresent(): Promise<boolean> {
+    return isPresentAndDisplayed(this.filterDialogOpened);
+  }
+
+  async openDialog(): Promise<void> {
+    if (!(await this.isDialogPresent())) {
+      await this.chip.click();
+      await BrowserActions.waitUntilActionMenuIsVisible();
+    }
+  }
+
+  async closeDialog(): Promise<void> {
+    if (await this.isDialogPresent()) {
+      await Utils.pressEscape();
+      await BrowserActions.waitUntilActionMenuIsNotVisible();
+    }
+  }
+}

projects/aca-testing-shared/src/components/search/filters/size-filter.ts

@@ -23,18 +23,17 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ElementFinder, by, ElementArrayFinder } from 'protractor';
-import { GenericFilterPanel } from './generic-filter-panel';
+import { by, ElementArrayFinder } from 'protractor';
+import { GenericFilter } from './generic-filter';
 import { BrowserActions } from '@alfresco/adf-testing';
 
-export class SizeFilter extends GenericFilterPanel {
+export class SizeFilter extends GenericFilter {
   constructor() {
     super('Size');
   }
 
-  facets: ElementArrayFinder = this.panelExpanded.all(by.css('.mat-checkbox'));
-  selectedFacets: ElementArrayFinder = this.panel.all(by.css('.mat-checkbox.mat-checkbox-checked'));
-  clearButton: ElementFinder = this.panel.element(by.cssContainingText('.adf-facet-buttons button', 'Clear all'));
+  facets: ElementArrayFinder = this.filterDialogOpened.all(by.css('.mat-checkbox'));
+  selectedFacets: ElementArrayFinder = this.filterDialogOpened.all(by.css('.mat-checkbox.mat-checkbox-checked'));
 
   async getFiltersValues(): Promise<string[]> {
     return this.facets.map((option) => {
@@ -50,22 +49,12 @@ export class SizeFilter extends GenericFilterPanel {
 
   async resetPanel(): Promise<void> {
     if ((await this.selectedFacets.count()) > 0) {
-      await this.expandPanel();
+      await this.openDialog();
       await this.selectedFacets.each(async (elem) => {
         await BrowserActions.click(elem);
       });
     }
-    await this.collapsePanel();
-  }
-
-  async isClearButtonEnabled(): Promise<boolean> {
-    return this.clearButton.isEnabled();
-  }
-
-  async clickClearButton(): Promise<void> {
-    if (await this.isClearButtonEnabled()) {
-      await BrowserActions.click(this.clearButton);
-    }
+    await this.closeDialog();
   }
 
   async checkSizeSmall(): Promise<void> {

projects/aca-testing-shared/src/components/search/index.ts

@@ -25,7 +25,7 @@
 
 export * from './filters/created-date-filter';
 export * from './filters/facet-filter';
-export * from './filters/generic-filter-panel';
+export * from './filters/generic-filter';
 export * from './filters/size-filter';
 export * from './search-filters';
 export * from './search-input';

projects/aca-testing-shared/src/components/search/search-filters.ts

@@ -32,7 +32,7 @@ import { isPresentAndDisplayed } from '../../utilities/utils';
 
 export class SearchFilters extends Component {
   mainPanel = browser.element(by.css('adf-search-filter'));
-  resetAllButton = this.byCssText('.mat-button', 'Reset all');
+  resetAllButton = browser.element(by.css('button[adf-reset-search]'));
 
   size = new SizeFilter();
   createdDate = new CreatedDateFilter();

projects/aca-testing-shared/src/components/toolbar/toolbar.ts

@@ -36,7 +36,6 @@ export class Toolbar extends Component {
   shareButton = this.byCss(`.mat-icon-button[title='Share']`);
   shareEditButton = this.byCss(`.mat-icon-button[title='Shared Link Settings']`);
   viewButton = this.byCss(`.mat-icon-button[title='View']`);
-  searchFiltersToggleButton = this.byCss(`.mat-icon-button[title='Toggle search filter']`);
   downloadButton = this.byCss(`.mat-icon-button[title='Download']`);
   editFolderButton = this.byId('app.toolbar.editFolder');
   viewDetailsButton = this.byCss(`.mat-icon-button[title='View Details']`);