@skyux/lists 8.7.0 → 9.0.0-alpha.0

package/fesm2022/skyux-lists-testing.mjs

@@ -0,0 +1,664 @@
+import * as i0 from '@angular/core';
+import { NgModule } from '@angular/core';
+import { SkyFilterModule, SkyPagingModule, SkySortModule, SkyInfiniteScrollModule } from '@skyux/lists';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+import { By } from '@angular/platform-browser';
+import { SkyComponentHarness } from '@skyux/core/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { SkyCheckboxHarness } from '@skyux/forms/testing';
+import { SkyChevronHarness } from '@skyux/indicators/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+/**
+ * @internal
+ */
+class SkyFilterTestingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterTestingModule, exports: [SkyFilterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterTestingModule, imports: [SkyFilterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterTestingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyFilterModule],
+                }]
+        }] });
+
+/**
+ * Provides information for and interaction with a SKY UX filter summary component.
+ * By using the fixture API, a test insulates itself against updates to the internals
+ * of a component, such as changing its DOM structure.
+ * @internal
+ */
+class SkyFilterFixtureSummary {
+    #debugElement;
+    #fixture;
+    constructor(fixture, skyTestId) {
+        this.#fixture = fixture;
+        this.#debugElement = SkyAppTestUtility.getDebugElementByTestId(this.#fixture, skyTestId, 'sky-filter-summary');
+    }
+    async filterCloseClick(index) {
+        const summaryItems = this.#debugElement.nativeElement.querySelectorAll('sky-filter-summary-item');
+        if (summaryItems.length > index) {
+            const summaryItem = summaryItems[index];
+            if (summaryItem instanceof HTMLElement) {
+                const closeButton = summaryItem.querySelector('.sky-token-btn-close');
+                if (closeButton instanceof HTMLElement) {
+                    closeButton.click();
+                    this.#fixture.detectChanges();
+                    return this.#fixture.whenStable();
+                }
+            }
+        }
+        throw new Error(`Unable to click close for a filter index ${index}`);
+    }
+}
+
+/**
+ * Provides information for and interaction with a SKY UX filter button component.
+ * By using the fixture API, a test insulates itself against updates to the internals
+ * of a component, such as changing its DOM structure.
+ * @internal
+ */
+class SkyFilterFixtureButton {
+    #debugElement;
+    #fixture;
+    constructor(fixture, skyTestId) {
+        this.#fixture = fixture;
+        this.#debugElement = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-filter-button');
+    }
+    /**
+     * Click the button to apply the filter.
+     */
+    async clickFilterButton() {
+        const button = this.#getButtonElement();
+        if (button instanceof HTMLButtonElement && !button.disabled) {
+            button.click();
+        }
+        this.#fixture.detectChanges();
+        return this.#fixture.whenStable();
+    }
+    get button() {
+        const buttonElement = this.#getButtonElement();
+        return {
+            ariaControls: buttonElement?.getAttribute('aria-controls') ?? undefined,
+            ariaExpanded: buttonElement?.getAttribute('aria-expanded') === 'true',
+            disabled: !!buttonElement?.disabled,
+            id: buttonElement?.id,
+        };
+    }
+    /**
+     * Get the button text.
+     */
+    get buttonText() {
+        const text = this.#getButtonElement()?.innerText;
+        return this.#normalizeText(text);
+    }
+    #getButtonElement() {
+        return this.#debugElement.nativeElement.querySelector('.sky-filter-btn');
+    }
+    #normalizeText(text) {
+        let retVal = '';
+        if (text) {
+            retVal = text?.trim().replace(/\s+/g, ' ');
+        }
+        return retVal;
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyPagingTestingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingTestingModule, exports: [SkyPagingModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingTestingModule, imports: [SkyPagingModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingTestingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyPagingModule],
+                }]
+        }] });
+
+/**
+ * Provides information for and interaction with a SKY UX paging component.
+ * By using the fixture API, a test insulates itself against updates to the internals
+ * of a component, such as changing its DOM structure.
+ * @internal
+ */
+class SkyPagingFixture {
+    #_debugEl;
+    /**
+     * The id of the active page, if available.
+     */
+    get activePageId() {
+        return this.#getPageId(this.#activePageButton);
+    }
+    /**
+     * Properties of the page links displayed in the paging component.
+     */
+    get pageLinks() {
+        return this.#pagingLinks.map((page) => {
+            return {
+                id: this.#getPageId(page.nativeElement),
+                isActive: page.nativeElement.classList.contains('sky-paging-current'),
+                isEnabled: !page.nativeElement.disabled,
+            };
+        });
+    }
+    #fixture;
+    constructor(fixture, skyTestId) {
+        this.#fixture = fixture;
+        this.#_debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-paging');
+        this.#waitForComponentInitialization();
+    }
+    /**
+     * Selects the specified page by id, if it is enabled.
+     */
+    async selectPage(id) {
+        const pageButton = this.#getPageLink(id.toString());
+        if (pageButton !== undefined && !pageButton.disabled) {
+            pageButton.click();
+            this.#fixture.detectChanges();
+            return this.#fixture.whenStable();
+        }
+    }
+    /**
+     * Clicks the next page button, if it is enabled.
+     */
+    async selectNextPage() {
+        const nextButton = this.#nextPageButton;
+        if (nextButton !== undefined && !nextButton.disabled) {
+            nextButton.click();
+            this.#fixture.detectChanges();
+            return this.#fixture.whenStable();
+        }
+    }
+    /**
+     * Clicks the previous page button, if it is enabled.
+     */
+    async selectPreviousPage() {
+        const previousButton = this.#previousPageButton;
+        if (previousButton !== undefined && !previousButton.disabled) {
+            previousButton.click();
+            this.#fixture.detectChanges();
+            return this.#fixture.whenStable();
+        }
+    }
+    //#region helpers
+    get #activePageButton() {
+        return this.#_debugEl.query(By.css('.sky-list-paging-link .sky-paging-current'))?.nativeElement;
+    }
+    get #nextPageButton() {
+        return this.#_debugEl.query(By.css('.sky-paging-btn[sky-cmp-id="next"]'))
+            ?.nativeElement;
+    }
+    get #previousPageButton() {
+        return this.#_debugEl.query(By.css('.sky-paging-btn[sky-cmp-id="previous"]'))?.nativeElement;
+    }
+    get #pagingLinks() {
+        return this.#_debugEl.queryAll(By.css('.sky-list-paging-link button'));
+    }
+    #getPageLink(id) {
+        return this.#_debugEl.query(By.css(`.sky-list-paging-link button[sky-cmp-id="${id}"]`))?.nativeElement;
+    }
+    #getPageId(page) {
+        return page?.getAttribute('sky-cmp-id') ?? '';
+    }
+    async #waitForComponentInitialization() {
+        this.#fixture.detectChanges();
+        await this.#fixture.whenStable();
+        this.#fixture.detectChanges();
+        return this.#fixture.whenStable();
+    }
+}
+
+/**
+ * Harness for interacting with a repeater item component in tests.
+ */
+class SkyRepeaterItemHarness extends SkyComponentHarness {
+    /**
+     * @internal
+     */
+    static { this.hostSelector = 'sky-repeater-item'; }
+    #getBackToTop = this.locatorForOptional('button.sky-repeater-item-reorder-top');
+    #getCheckbox = this.locatorForOptional(SkyCheckboxHarness);
+    #getChevron = this.locatorForOptional(SkyChevronHarness);
+    #getContent = this.locatorFor('.sky-repeater-item-content');
+    #getItem = this.locatorFor('.sky-repeater-item');
+    #getReorderHandle = this.locatorForOptional('button.sky-repeater-item-grab-handle');
+    #getTitle = this.locatorFor('.sky-repeater-item-title');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a
+     * `SkyRepeaterItemHarness` that meets certain criteria.
+     */
+    static with(filters) {
+        return SkyRepeaterItemHarness.getDataSkyIdPredicate(filters)
+            .addOption('contentText', filters.contentText, async (harness, text) => HarnessPredicate.stringMatches(await harness.getContentText(), text))
+            .addOption('titleText', filters.titleText, async (harness, text) => HarnessPredicate.stringMatches(await harness.getTitleText(), text));
+    }
+    /**
+     * Returns a child harness.
+     */
+    async queryHarness(query) {
+        return this.locatorForOptional(query)();
+    }
+    /**
+     * Returns child harnesses.
+     */
+    async queryHarnesses(harness) {
+        return this.locatorForAll(harness)();
+    }
+    /**
+     * Returns a child test element.
+     */
+    async querySelector(selector) {
+        return this.locatorForOptional(selector)();
+    }
+    /**
+     * Returns child test elements.
+     */
+    async querySelectorAll(selector) {
+        return this.locatorForAll(selector)();
+    }
+    /**
+     * Clicks on the repeater item.
+     */
+    async click() {
+        await (await this.#getItem()).click();
+    }
+    /**
+     * Whether the repeater item is selectable.
+     */
+    async isSelectable() {
+        return !!(await this.#getCheckbox());
+    }
+    /**
+     * Whether the repeater item is selected.
+     */
+    async isSelected() {
+        const checkbox = await this.#getCheckbox();
+        if (!checkbox) {
+            throw new Error('Could not determine if repeater item is selected because it is not selectable.');
+        }
+        return checkbox.isChecked();
+    }
+    /**
+     * Selects the repeater item.
+     */
+    async select() {
+        const checkbox = await this.#getCheckbox();
+        if (!checkbox) {
+            throw new Error('Could not select the repeater item because it is not selectable.');
+        }
+        await checkbox.check();
+    }
+    /**
+     * Deselects the repeater item.
+     */
+    async deselect() {
+        const checkbox = await this.#getCheckbox();
+        if (!checkbox) {
+            throw new Error('Could not deselect the repeater item because it is not selectable.');
+        }
+        await checkbox.uncheck();
+    }
+    /**
+     * Gets the text of the repeater item content.
+     */
+    async getContentText() {
+        return (await this.#getContent()).text();
+    }
+    /**
+     * Gets the text of the repeater item title.
+     */
+    async getTitleText() {
+        return (await this.#getTitle()).text();
+    }
+    /**
+     * Whether the repeater item is collapsible.
+     */
+    async isCollapsible() {
+        return !!(await this.#getChevron());
+    }
+    /**
+     * Whether the repeater item is expanded, or throws an error informing of the lack of collapsibility.
+     */
+    async isExpanded() {
+        const chevron = await this.#getChevron();
+        if (chevron) {
+            return (await chevron.getDirection()) === 'up';
+        }
+        throw new Error('Could not determine if repeater item is expanded because it is not collapsible.');
+    }
+    /**
+     * Expands the repeater item, or does nothing if already expanded.
+     */
+    async expand() {
+        const chevron = await this.#getChevron();
+        if (chevron) {
+            if ((await chevron.getDirection()) === 'down') {
+                await chevron.toggle();
+            }
+            return;
+        }
+        throw new Error('Could not expand the repeater item because it is not collapsible.');
+    }
+    /**
+     * Collapses the repeater item, or does nothing if already collapsed.
+     */
+    async collapse() {
+        const chevron = await this.#getChevron();
+        if (chevron) {
+            if ((await chevron.getDirection()) === 'up') {
+                await chevron.toggle();
+            }
+            return;
+        }
+        throw new Error('Could not collapse the repeater item because it is not collapsible.');
+    }
+    /**
+     * Whether the repeater item is reorderable.
+     */
+    async isReorderable() {
+        return !!(await this.#getReorderHandle());
+    }
+    /**
+     * Moves the repeater item to the top of the list
+     */
+    async sendToTop() {
+        if (await this.isReorderable()) {
+            await (await this.#getBackToTop())?.click();
+        }
+        else {
+            throw new Error('Could not send to top because the repeater is not reorderable.');
+        }
+    }
+}
+
+/**
+ * Harness for interacting with a repeater component in tests.
+ */
+class SkyRepeaterHarness extends SkyComponentHarness {
+    /**
+     * @internal
+     */
+    static { this.hostSelector = 'sky-repeater'; }
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a
+     * `SkyRepeaterHarness` that meets certain criteria.
+     */
+    static with(filters) {
+        return SkyRepeaterHarness.getDataSkyIdPredicate(filters);
+    }
+    /**
+     * Gets a list of child repeater items.
+     */
+    async getRepeaterItems(filters) {
+        return this.locatorForAll(SkyRepeaterItemHarness.with(filters || {}))();
+    }
+}
+
+/**
+ * @internal
+ */
+class SkySortTestingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkySortTestingModule, imports: [NoopAnimationsModule], exports: [SkySortModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortTestingModule, imports: [NoopAnimationsModule, SkySortModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortTestingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [NoopAnimationsModule],
+                    exports: [SkySortModule],
+                }]
+        }] });
+
+/**
+ * Provides information for and interaction with a SKY UX sort component.
+ * By using the fixture API, a test insulates itself against updates to the internals
+ * of a component, such as changing its DOM structure.
+ * @internal
+ */
+class SkySortFixture {
+    /**
+     * The active sort menu item, if one exists. Menu items are only available when the menu dropdown
+     * is open. If the menu dropdown is closed, this property will be undefined.
+     */
+    get activeMenuItem() {
+        return this.menuItems?.find((x) => x.isActive);
+    }
+    /**
+     * The sort menu's properties.
+     */
+    get menu() {
+        /* istanbul ignore next */
+        const buttonText = SkyAppTestUtility.getText(this.#getSortButtonTextEl()) || '';
+        return {
+            buttonText,
+            isOpen: this.#getDropdownMenuEl() !== null,
+        };
+    }
+    /**
+     * The properties of each sort menu item. Menu items are only available when the menu dropdown
+     * is open. If the menu dropdown is closed, this property will be undefined.
+     */
+    get menuItems() {
+        // Return undefined when we can't determine what the options are.
+        // We do this to avoid any confusion with an empty set of options.
+        if (!this.menu.isOpen) {
+            return;
+        }
+        return this.#getSortItems().map((item, i) => {
+            const itemButton = item.querySelector('button');
+            return {
+                index: i,
+                isActive: item.classList.contains('sky-sort-item-selected'),
+                text: SkyAppTestUtility.getText(itemButton),
+            };
+        });
+    }
+    #debugEl;
+    #fixture;
+    constructor(fixture, skyTestId) {
+        this.#fixture = fixture;
+        this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-sort');
+    }
+    /**
+     * Closes the sort dropdown menu if it isn't closed already.
+     */
+    async closeMenu() {
+        // if the menu is already closed, do nothing
+        if (!this.menu.isOpen) {
+            return;
+        }
+        const menu = this.#getDropdownButtonEl();
+        if (menu !== undefined && !menu.disabled) {
+            menu.click();
+            this.#fixture.detectChanges();
+            await this.#fixture.whenStable();
+            this.#fixture.detectChanges();
+            return this.#fixture.whenStable();
+        }
+    }
+    /**
+     * Opens the sort dropdown menu if it isn't open already.
+     */
+    async openMenu() {
+        // if the menu is already open, do nothing
+        if (this.menu.isOpen) {
+            return;
+        }
+        const menu = this.#getDropdownButtonEl();
+        if (menu !== undefined && !menu.disabled) {
+            menu.click();
+            this.#fixture.detectChanges();
+            await this.#fixture.whenStable();
+            this.#fixture.detectChanges();
+            return this.#fixture.whenStable();
+        }
+    }
+    /**
+     * Ensures the sort menu is open and selects the menu item with the specified index, if it exists.
+     * @param menuItemIndex The index of the menu item to select.
+     */
+    async selectMenuItemByIndex(menuItemIndex) {
+        return this.#selectMenuItem((_item, index) => {
+            return index === menuItemIndex;
+        });
+    }
+    /**
+     * Ensures the sort menu is open and selects the menu item with the specified text,
+     * if a matching item is available.
+     * @param menuItemText The text of the menu item to select.
+     */
+    async selectMenuItemByText(menuItemText) {
+        /* istanbul ignore else */
+        if (menuItemText) {
+            return this.#selectMenuItem((item) => {
+                return SkyAppTestUtility.getText(item) === menuItemText;
+            });
+        }
+        else {
+            return;
+        }
+    }
+    //#region helpers
+    #getDropdownButtonEl() {
+        return this.#debugEl.query(By.css('.sky-dropdown-button')).nativeElement;
+    }
+    #getDropdownMenuEl() {
+        return document.querySelector('sky-overlay .sky-dropdown-menu');
+    }
+    #getSortButtonTextEl() {
+        return this.#debugEl.query(By.css('.sky-sort-btn-text')).nativeElement;
+    }
+    #getSortItems() {
+        const resultNodes = document.querySelectorAll('sky-overlay .sky-sort-item');
+        return Array.prototype.slice.call(resultNodes);
+    }
+    /**
+     * Ensures the sort menu is open and selects the menu item via a selection predicate,
+     * if a matching item is available.
+     * @param selectionPredicate The menu item selector method to use.
+     */
+    async #selectMenuItem(selectionPredicate) {
+        // make sure the sort menu is open
+        if (!this.menu.isOpen) {
+            await this.openMenu();
+        }
+        // find the requested menu item using the selectionPredicate parameter
+        const items = this.#getSortItems();
+        const targetItem = items.find((item, index) => selectionPredicate(item, index));
+        // if we found the item, select it
+        if (targetItem) {
+            // we've got the '.sky-sort-item' div, but we want to click it's child button element
+            const targetButton = targetItem.querySelector('button');
+            targetButton?.click();
+            this.#fixture.detectChanges();
+            return this.#fixture.whenStable();
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyInfiniteScrollTestingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollTestingModule, exports: [SkyInfiniteScrollModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollTestingModule, imports: [SkyInfiniteScrollModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollTestingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyInfiniteScrollModule],
+                }]
+        }] });
+
+/**
+ * Provides information for and interaction with a SKY UX infinite scroll component.
+ * By using the fixture API, a test insulates itself against updates to the internals
+ * of a component, such as changing its DOM structure.
+ * @deprecated Use `SkyInfiniteScrollHarness` instead.
+ * @internal
+ */
+class SkyInfiniteScrollFixture {
+    #debugElement;
+    #fixture;
+    constructor(fixture, skyTestId) {
+        this.#fixture = fixture;
+        this.#debugElement = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-infinite-scroll');
+    }
+    get loadMoreButtonIsVisible() {
+        return this.#getButton() instanceof HTMLButtonElement;
+    }
+    async clickLoadMoreButton() {
+        const button = this.#getButton();
+        if (button instanceof HTMLButtonElement) {
+            button.click();
+        }
+        this.#fixture.detectChanges();
+        return this.#fixture.whenStable();
+    }
+    #getButton() {
+        return this.#debugElement.nativeElement.querySelector('.sky-infinite-scroll .sky-btn');
+    }
+}
+
+/**
+ * Harness for interacting with an infinite scroll component in tests.
+ * @internal
+ */
+class SkyInfiniteScrollHarness extends SkyComponentHarness {
+    /**
+     * @internal
+     */
+    static { this.hostSelector = 'sky-infinite-scroll'; }
+    #showMoreButton = this.locatorForOptional('button.sky-infinite-scroll-load-more-button');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a
+     * `SkyInfiniteScrollHarness` that meets certain criteria.
+     */
+    static with(filters) {
+        return this.getDataSkyIdPredicate(filters);
+    }
+    /**
+     * Whether the infinite scroll is enabled.
+     */
+    async isEnabled() {
+        return (await this.locatorForOptional('.sky-infinite-scroll')()) !== null;
+    }
+    /**
+     * Whether the infinite scroll is loading.
+     */
+    async isLoading() {
+        return (await this.isEnabled()) && (await this.#showMoreButton()) === null;
+    }
+    /**
+     * Clicks the "Load more" button.
+     */
+    async loadMore() {
+        const button = await this.#showMoreButton();
+        if (button) {
+            await button.click();
+        }
+        else {
+            if (!(await this.isEnabled())) {
+                throw new Error('Unable to click the "Load more" button because the infinite scroll is not enabled.');
+            }
+            else {
+                throw new Error('Unable to click the "Load more" button because the infinite scroll is loading.');
+            }
+        }
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyFilterFixtureButton, SkyFilterFixtureSummary, SkyFilterTestingModule, SkyInfiniteScrollFixture, SkyInfiniteScrollHarness, SkyInfiniteScrollTestingModule, SkyPagingFixture, SkyPagingTestingModule, SkyRepeaterHarness, SkyRepeaterItemHarness, SkySortFixture, SkySortTestingModule };
+//# sourceMappingURL=skyux-lists-testing.mjs.map