How to use coveo-search-ui - 10 common examples

QueryEvents,
  IBuildingQueryEventArgs,
  Initialization,
} from 'coveo-search-ui';

export interface IItemGroupingOptions {
  fieldToGroup: string;
  fieldForRanking: string;
}

export class ItemGrouping extends Component {
  static ID = 'ItemGrouping';

  static options: IItemGroupingOptions = {

    fieldToGroup: ComponentOptions.buildStringOption({
      defaultValue: '@groupid',
    }),

    fieldForRanking: ComponentOptions.buildStringOption({
      defaultValue: '@color'
    })
  };

  constructor(public element: HTMLElement, public options: IItemGroupingOptions, public bindings: IComponentBindings) {
    super(element, ItemGrouping.ID, bindings);
    this.options = ComponentOptions.initComponentOptions(element, ItemGrouping, options);
    this.bind.onRootElement(QueryEvents.buildingQuery, (args: IBuildingQueryEventArgs) => this.handleBuildingQuery(args));
    this.bind.onRootElement(QueryEvents.doneBuildingQuery, (args: IBuildingQueryEventArgs) => this.handleDoneBuildingQuery(args));
  }

  // Define the field to be used for grouping

export interface IItemGroupingOptions {
  fieldToGroup: string;
  fieldForRanking: string;
}

export class ItemGrouping extends Component {
  static ID = 'ItemGrouping';

  static options: IItemGroupingOptions = {

    fieldToGroup: ComponentOptions.buildStringOption({
      defaultValue: '@groupid',
    }),

    fieldForRanking: ComponentOptions.buildStringOption({
      defaultValue: '@color'
    })
  };

  constructor(public element: HTMLElement, public options: IItemGroupingOptions, public bindings: IComponentBindings) {
    super(element, ItemGrouping.ID, bindings);
    this.options = ComponentOptions.initComponentOptions(element, ItemGrouping, options);
    this.bind.onRootElement(QueryEvents.buildingQuery, (args: IBuildingQueryEventArgs) => this.handleBuildingQuery(args));
    this.bind.onRootElement(QueryEvents.doneBuildingQuery, (args: IBuildingQueryEventArgs) => this.handleDoneBuildingQuery(args));
  }

  // Define the field to be used for grouping
  private handleBuildingQuery(args: IBuildingQueryEventArgs) {
    args.queryBuilder.filterField = this.options.fieldToGroup;
    args.queryBuilder.maximumAge = 0;
  }

it('should be accessible with analytics suggestions', async done => {
        const analyticsSuggestionsElement = $$('div', {
          className: Component.computeCssClassName(AnalyticsSuggestions)
        });
        const analyticsElement = $$('div', {
          className: Component.computeCssClassName(Analytics)
        });
        getResultsColumn().appendChild(analyticsSuggestionsElement.el);
        getResultsColumn().appendChild(analyticsElement.el);

        await afterQuerySuccess();
        setText(omniboxElement, 'm');
        showSuggestions(omniboxElement);
        await afterDelay(1000);
        const axeResults = await axe.run(getRoot());
        expect(axeResults).toBeAccessible();
        done();
      });

it('should be accessible when the clickable element is focused', async done => {
        await afterDeferredQuerySuccess();
        getOverlayInstance().openOverlay();
        await afterDelay(1000);
        $$(getRoot())
          .find('span.coveo-accessible-button')
          .focus();
        const axeResults = await axe.run(getRoot());
        expect(axeResults).toBeAccessible();
        done();
      });
    });

it('should be accessible with analytics suggestions', async done => {
        const analyticsSuggestionsElement = $$('div', {
          className: Component.computeCssClassName(AnalyticsSuggestions)
        });
        const analyticsElement = $$('div', {
          className: Component.computeCssClassName(Analytics)
        });
        getResultsColumn().appendChild(analyticsSuggestionsElement.el);
        getResultsColumn().appendChild(analyticsElement.el);

        await afterQuerySuccess();
        setText(omniboxElement, 'm');
        showSuggestions(omniboxElement);
        await afterDelay(1000);
        const axeResults = await axe.run(getRoot());
        expect(axeResults).toBeAccessible();
        done();
      });

it('should be accessible when configured as a span', async done => {
      const tab = $$('span', {
        className: Component.computeCssClassName(Tab),
        'data-caption': 'All Content',
        'data-id': 'All'
      });

      getTabSection().appendChild(tab.el);

      await afterQuerySuccess();
      const axeResults = await axe.run(getRoot());
      expect(axeResults).toBeAccessible();
      done();
    });
  });

it('should be accessible with analytics suggestions', async done => {
        const analyticsSuggestionsElement = $$('div', {
          className: Component.computeCssClassName(AnalyticsSuggestions)
        });
        const analyticsElement = $$('div', {
          className: Component.computeCssClassName(Analytics)
        });
        getResultsColumn().appendChild(analyticsSuggestionsElement.el);
        getResultsColumn().appendChild(analyticsElement.el);

        await afterQuerySuccess();
        setText(omniboxElement, 'm');
        showSuggestions(omniboxElement);
        await afterDelay(1000);
        const axeResults = await axe.run(getRoot());
        expect(axeResults).toBeAccessible();
        done();
      });

const getResultListCardElement = () => {
      return $$('div', {
        className: Component.computeCssClassName(ResultList),
        'data-layout': 'card'
      });
    };
    it('should be accessible', async done => {

it('should be accessible', async done => {
      const advancedSearchElement = getAdvancedSearchElement();
      getResultsColumn().appendChild(advancedSearchElement.el);
      await afterQuerySuccess();
      const advancedSearch = get(advancedSearchElement.el) as AdvancedSearch;
      advancedSearch.open();
      const axeResults = await axe.run(getRoot());
      expect(axeResults).toBeAccessible();
      done();
    });
  });

it('search should be accessible', async done => {
      const facetElement = getFacetElement();
      getFacetColumn().appendChild(facetElement.el);
      await afterDeferredQuerySuccess();
      (get(facetElement.el) as Facet).facetSearch.focus();
      await afterDelay(1000);
      const axeResults = await axe.run(getRoot());
      expect(axeResults).toBeAccessible();
      done();
    });