UNPKG

@skyux/layout

Version:

This library was generated with [Nx](https://nx.dev).

973 lines (947 loc) 30.2 kB
import { By } from '@angular/platform-browser'; import { SkyAppTestUtility } from '@skyux-sdk/testing'; import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; import { SkyComponentHarness, SkyQueryableComponentHarness } from '@skyux/core/testing'; import { SkyHelpInlineHarness } from '@skyux/help-inline/testing'; import { SkyIconHarness } from '@skyux/icon/testing'; import { SkyWaitHarness } from '@skyux/indicators/testing'; /** * Allows interaction with a SKY UX action button component. * @deprecated Use `SkyActionButtonHarness` instead. * @internal */ class SkyActionButtonFixture { /** * The action button's current header text. */ get headerText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('.sky-action-button-header'))); } /** * The action button's current details text. */ get detailsText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('sky-action-button-details'))); } /** * The action button's current icon type. */ get iconType() { const svgElement = this.#debugEl.query(By.css('sky-icon svg')); if (svgElement) { return svgElement.nativeElement.getAttribute('data-sky-icon'); } return undefined; } #debugEl; constructor(fixture, skyTestId) { this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-action-button'); } /** * Clicks the action button. */ actionClick() { this.#debugEl .query(By.css('.sky-action-button')) .triggerEventHandler('click', {}); } } /** * Allows interaction with a SKY UX avatar component. * @deprecated * @internal */ class SkyCardFixture { /** * The card's current title. */ get titleText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('sky-card-title'))); } /** * The card's current content text. */ get contentText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('sky-card-content'))); } /** * A flag indicating whether the user can select the card. */ get selectable() { return !!this.#debugEl.query(By.css('.sky-card-check')); } /** * A flag indicating whether the card is currently selected. If the card * is not selectable, an error is thrown. */ get selected() { if (this.selectable) { return this.#getCheckInputEl().nativeElement.checked; } throw new Error('The card is not selectable.'); } #debugEl; constructor(fixture, skyTestId) { this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-card'); } /** * Selects the card. */ select() { if (!this.selected) { this.#clickCheckLabelEl(); } } /** * Deselects the card. */ deselect() { if (this.selected) { this.#clickCheckLabelEl(); } } #clickCheckLabelEl() { this.#debugEl .query(By.css('.sky-card-check label.sky-checkbox-wrapper')) .nativeElement.click(); } #getCheckInputEl() { return this.#debugEl.query(By.css('.sky-card-check .sky-checkbox-wrapper input')); } } /** * Allows interaction with a SKY UX page summary component. * @deprecated * @internal */ class SkyPageSummaryFixture { /** * The page summary's current title text. */ get titleText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('sky-page-summary-title .sky-page-summary-title'))); } /** * The page summary's current subtitle text. */ get subtitleText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('sky-page-summary-subtitle .sky-page-summary-subtitle'))); } /** * The page summary's current content text. */ get contentText() { return SkyAppTestUtility.getText(this.#debugEl.query(By.css('sky-page-summary-content .sky-page-summary-content'))); } #debugEl; constructor(fixture, skyTestId) { this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-page-summary'); } } /** * Harness for interacting with a back to top component in tests. */ class SkyBackToTopHarness extends ComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-back-to-top'; } #getBackToTop = this.locatorFor('.sky-back-to-top button'); /** * Clicks the back to top button. */ async clickBackToTop() { return await (await this.#getBackToTop()).click(); } } /** * Harness for interacting with a box component in tests. */ class SkyBoxHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-box'; } #getBox = this.locatorFor('.sky-box'); #getHeading = this.locatorForOptional('.sky-box-header-content h2, .sky-box-header-content h3, .sky-box-header-content h4, .sky-box-header-content h5'); #getH2 = this.locatorForOptional('.sky-box-header-content h2'); #getH3 = this.locatorForOptional('.sky-box-header-content h3'); #getH4 = this.locatorForOptional('.sky-box-header-content h4'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyBoxHarness` that meets certain criteria */ static with(filters) { return SkyBoxHarness.getDataSkyIdPredicate(filters); } /** * Clicks the help inline button. */ async clickHelpInline() { return await (await this.#getHelpInline()).click(); } /** * Gets the help popover content. */ async getHelpPopoverContent() { return await (await this.#getHelpInline()).getPopoverContent(); } /** * Gets the help popover title. */ async getHelpPopoverTitle() { return await (await this.#getHelpInline()).getPopoverTitle(); } /** * Gets the box's heading text. If `headingHidden` is true, * the text will still be returned. */ async getHeadingText() { return await (await this.#getHeading())?.text(); } /** * Whether the heading is hidden. */ async getHeadingHidden() { const heading = await this.#getHeading(); return (await heading?.hasClass('sky-screen-reader-only')) ?? false; } /** * The semantic heading level used for the checkbox group. Returns undefined if heading level is not set. */ async getHeadingLevel() { return (await this.#getH2()) ? 2 : (await this.#getH3()) ? 3 : (await this.#getH4()) ? 4 : 5; } /** * The heading style used for the checkbox group. */ async getHeadingStyle() { const heading = await this.#getHeading(); const isHeadingStyle2 = await heading?.hasClass('sky-font-heading-2'); const isHeadingStyle3 = await heading?.hasClass('sky-font-heading-3'); const isHeadingStyle4 = await heading?.hasClass('sky-font-heading-4'); return isHeadingStyle2 ? 2 : isHeadingStyle3 ? 3 : isHeadingStyle4 ? 4 : 5; } /** * Gets the aria-label property of the box */ async getAriaLabel() { return await (await this.#getBox()).getAttribute('aria-label'); } /** * Gets the aria-labelledby property of the box */ async getAriaLabelledby() { return await (await this.#getBox()).getAttribute('aria-labelledby'); } /** * Gets the aria-role property of the box */ async getAriaRole() { return await (await this.#getBox()).getAttribute('role'); } async #getHelpInline() { const harness = await this.locatorForOptional(SkyHelpInlineHarness.with({ ancestor: '.sky-box-header-content', }))(); if (harness) { return harness; } throw Error('No help inline found.'); } } /** * Harness for interacting with a description list description component in tests. * @internal */ class SkyDescriptionListDescriptionHarness extends ComponentHarness { /** * @internal */ static { this.hostSelector = 'dd'; } async getText() { const description = (await (await this.locatorFor('.sky-description-list-description')()).text()).trim(); if (description === '') { return await (await this.locatorFor('.sky-description-list-default-value')()).text(); } return description; } } /** * Harness for interacting with a description list term component in tests. * @internal */ class SkyDescriptionListTermHarness extends ComponentHarness { /** * @internal */ static { this.hostSelector = 'dt'; } async getText() { return await (await this.locatorFor('span.description-list-term')()).text(); } } /** * Harness for interacting with a description list content component in tests. */ class SkyDescriptionListContentHarness extends ComponentHarness { /** * @internal */ static { this.hostSelector = 'div.sky-description-list-content'; } #getDescription = this.locatorForOptional(SkyDescriptionListDescriptionHarness); #getTerm = this.locatorForOptional(SkyDescriptionListTermHarness); /** * Clicks the help inline button. */ async clickHelpInline() { await (await this.#getHelpInline()).click(); } /** * Gets the description component text. */ async getDescriptionText() { const description = await this.#getDescription(); if (description === null) { throw Error('No description list description found.'); } return await description.getText(); } /** * Gets the help popover content. */ async getHelpPopoverContent() { return await (await this.#getHelpInline()).getPopoverContent(); } /** * Gets the help popover title. */ async getHelpPopoverTitle() { return await (await this.#getHelpInline()).getPopoverTitle(); } /** * Gets the term component text. */ async getTermText() { const term = await this.#getTerm(); if (term === null) { throw Error('No description list term found.'); } return await term.getText(); } async #getHelpInline() { const harness = await this.locatorForOptional(SkyHelpInlineHarness)(); if (harness) { return harness; } throw Error('No help inline found.'); } } /** * Harness for interacting with a description list component in tests. */ class SkyDescriptionListHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-description-list'; } #getListEl = this.locatorFor('.sky-description-list'); #getContentEls = this.locatorForAll(SkyDescriptionListContentHarness); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyDescriptionListHarness` that meets certain criteria */ static with(filters) { return SkyDescriptionListHarness.getDataSkyIdPredicate(filters); } /** * Gets the description list content items. */ async getContent() { const items = await this.#getContentEls(); if (items.length === 0) { throw new Error('Unable to find any description list content.'); } return items; } /** * Gets the mode of the description list. */ async getMode() { const listEl = await this.#getListEl(); const longDescription = await listEl.hasClass('sky-description-list-long-description-mode'); const horizontal = await listEl.hasClass('sky-description-list-horizontal-mode'); if (longDescription) { return 'longDescription'; } else if (horizontal) { return 'horizontal'; } else { return 'vertical'; } } } const sizes = ['xs', 'sm', 'md', 'lg']; /** * Harness for interacting with a fluid grid column component in tests. */ class SkyColumnHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-column'; } /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyColumnHarness` that meets certain criteria */ static with(filters) { return SkyColumnHarness.getDataSkyIdPredicate(filters); } /** * Gets the size of the column in an XSmall responsive context. */ async getXSmallSize() { return await this.#getColumnSize(0); } /** * Gets the size of the column in a Small responsive context. */ async getSmallSize() { return await this.#getColumnSize(1); } /** * Gets the size of the column in a Medium responsive context. */ async getMediumSize() { return await this.#getColumnSize(2); } /** * Gets the size of the column in a Large responsive context. */ async getLargeSize() { return await this.#getColumnSize(3); } async #getColumnSize(index) { const size = sizes[index]; const result = await this.#getColumnClass(size); /* istanbul ignore if */ if (!result && !index) { throw Error('No column sizes found.'); } return result || (await this.#getColumnSize(index - 1)); } async #getColumnClass(size) { const host = await this.host(); for (let i = 12; i; i--) { if (await host.hasClass(`sky-column-${size}-${i}`)) { return i; } } return 0; } } /** * Harness for interacting with a fluid grid column component in tests. */ class SkyRowHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-row'; } #getRow = this.locatorFor('.sky-row'); #getColumns = this.locatorForAll(SkyColumnHarness); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyRowHarness` that meets certain criteria */ static with(filters) { return SkyRowHarness.getDataSkyIdPredicate(filters); } /** * Gets all of the columns in the row. */ async getColumns() { return await this.#getColumns(); } /** * Gets the ordering of the columns in the row. * @returns `normal` | `reverse` */ async getColumnOrder() { const row = await this.#getRow(); return (await row.hasClass('sky-row-reverse')) ? 'reverse' : 'normal'; } } /** * Harness for interacting with a fluid grid component in tests. */ class SkyFluidGridHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-fluid-grid'; } #getGrid = this.locatorFor('.sky-fluid-grid'); #getRows = this.locatorForAll(SkyRowHarness); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyFluidGridHarness` that meets certain criteria */ static with(filters) { return SkyFluidGridHarness.getDataSkyIdPredicate(filters); } /** * Gets the gutter size for the grid. */ async getGutterSize() { const grid = await this.#getGrid(); const small = await grid.hasClass('sky-fluid-grid-gutter-size-small'); const medium = await grid.hasClass('sky-fluid-grid-gutter-size-medium'); if (small) { return 'small'; } else if (medium) { return 'medium'; } else { return 'large'; } } /** * Gets all of the rows in the grid. */ async getRows() { return await this.#getRows(); } /** * Whether the fluid grid has margin enabled. */ async hasMargin() { return !(await (await this.#getGrid()).hasClass('sky-fluid-grid-no-margin')); } } /** * Harness for interacting with a text expand modal component in tests. */ class SkyTextExpandModalHarness extends ComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-text-expand-modal'; } #getCloseButton = this.locatorFor('sky-modal-footer button.sky-btn'); #getHeader = this.locatorFor('sky-modal-header'); #getText = this.locatorFor('sky-modal-content.sky-text-expand-modal-content'); /** * Clicks the modal close button. */ async clickCloseButton() { const button = await this.#getCloseButton(); await button.click(); } /** * Gets the modal title. */ async getExpandModalTitle() { return await (await this.#getHeader()).text(); } /** * Gets the expanded text in the modal. */ async getText() { return await (await this.#getText()).text(); } } /** * Harness for interacting with a text expand component in tests. */ class SkyTextExpandHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-text-expand'; } #documentRootLocator = this.documentRootLocatorFactory(); #getExpandCollapseButton = this.locatorForOptional('.sky-text-expand-see-more'); #getText = this.locatorFor('.sky-text-expand-text'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyTextExpandHarness` that meets certain criteria. */ static with(filters) { return SkyTextExpandHarness.getDataSkyIdPredicate(filters); } /** * Clicks the button element that expands or collapses text. */ async clickExpandCollapseButton() { const button = await this.#getExpandCollapseButton(); if (button === null) { throw Error('Could not find button element.'); } await button.click(); } /** * Gets the harness to interact with the modal expanded view. */ async getExpandedViewModal() { const modal = await this.#documentRootLocator.locatorForOptional(SkyTextExpandModalHarness)(); if (modal === null) { throw Error('Could not find text expand modal.'); } return modal; } /** * Gets the text content of the text expand. */ async getText() { return await (await this.#getText()).text(); } /** * Whether the text will expand to a modal. */ async textExpandsToModal() { return ((await (await this.#getExpandCollapseButton())?.getAttribute('aria-haspopup')) !== null); } /** * Whether the text is expanded. */ async isExpanded() { if (await this.textExpandsToModal()) { try { await this.getExpandedViewModal(); return true; } catch { return false; } } return ((await (await this.#getExpandCollapseButton())?.getAttribute('aria-expanded')) === 'true'); } } /** * Harness for interacting with a text expand repeater items in tests. */ class SkyTextExpandRepeaterItemHarness extends SkyQueryableComponentHarness { /** * @internal */ static { this.hostSelector = 'li.sky-text-expand-repeater-item'; } } /** * Harness for interacting with a text expand repeater component in tests. */ class SkyTextExpandRepeaterHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-text-expand-repeater'; } #getExpandCollapseButton = this.locatorForOptional('.sky-text-expand-repeater-see-more'); #getOL = this.locatorForOptional('ol.sky-text-expand-repeater-container'); #getUL = this.locatorForOptional('ul.sky-text-expand-repeater-container'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyTextExpandRepeaterHarness` that meets certain criteria. */ static with(filters) { return SkyTextExpandRepeaterHarness.getDataSkyIdPredicate(filters); } /** * Clicks the button element that expands or collapses text. */ async clickExpandCollapseButton() { const button = await this.#getExpandCollapseButton(); if (button === null) { throw Error('Could not find button element. The repeater does not contain enough elements to be expandable.'); } await button.click(); } /** * Gets an array of container harnesses for the repeater items. */ async getItems() { return await this.locatorForAll(SkyTextExpandRepeaterItemHarness)(); } /** * Gets the list style. */ async getListStyle() { let list = await this.#getOL(); if (list) { return 'ordered'; } else { list = await this.#getUL(); return (await list?.hasClass('sky-text-expand-repeater-list-style-none')) ? 'unstyled' : 'unordered'; } } /** * Whether the text is expanded. */ async isExpanded() { return ((await (await this.#getExpandCollapseButton())?.getAttribute('aria-expanded')) === 'true'); } } /** * Harness to interact with a toolbar item component in tests. */ class SkyToolbarItemHarness extends SkyQueryableComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-toolbar-item'; } /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyToolbarItemHarness` that meets certain criteria. */ static with(filters) { return SkyToolbarItemHarness.getDataSkyIdPredicate(filters); } } /** * Harness to interact with a toolbar view actions component in tests. */ class SkyToolbarViewActionsHarness extends SkyQueryableComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-toolbar-view-actions'; } } /** * Harness to interact with a toolbar section component in tests. */ class SkyToolbarSectionHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-toolbar-section'; } #getViewActions = this.locatorForOptional(SkyToolbarViewActionsHarness); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyToolbarSectionHarness` that meets certain criteria. */ static with(filters) { return SkyToolbarSectionHarness.getDataSkyIdPredicate(filters); } /** * Gets a specific toolbar item based on the filter criteria. * @param filter The filter criteria. */ async getItem(filter) { return await this.locatorFor(SkyToolbarItemHarness.with(filter))(); } /** * Gets an array of toolbar items based on the filter criteria. * If no filter is provided, returns all toolbar items. * @param filters The optional filter criteria. */ async getItems(filters) { return await this.locatorForAll(SkyToolbarItemHarness.with(filters || {}))(); } /** * Gets the harness to interact with the toolbar's view actions. */ async getViewActions() { const actions = await this.#getViewActions(); if (actions === null) { throw Error('Unable to find toolbar section view actions.'); } return actions; } } /** * Harness for interacting with a toolbar component in tests. */ class SkyToolbarHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-toolbar'; } #getViewActions = this.locatorForOptional(SkyToolbarViewActionsHarness); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyToolbarHarness` that meets certain criteria. */ static with(filters) { return SkyToolbarHarness.getDataSkyIdPredicate(filters); } /** * Gets a specific toolbar item based on the filter criteria. * @param filter The filter criteria. */ async getItem(filter) { return await this.locatorFor(SkyToolbarItemHarness.with(filter))(); } /** * Gets an array of toolbar items based on the filter criteria. * If no filter is provided, returns all toolbar items. * @param filters The optional filter criteria. */ async getItems(filters) { return await this.locatorForAll(SkyToolbarItemHarness.with(filters || {}))(); } /** * Gets a specific toolbar section based on the filter criteria. * @param filter The filter criteria. */ async getSection(filter) { return await this.locatorFor(SkyToolbarSectionHarness.with(filter))(); } /** * Gets an array of toolbar sections based on the filter criteria. * If no filter is provided, returns all toolbar sections. * @param filters The optional filter criteria. */ async getSections(filters) { return await this.locatorForAll(SkyToolbarSectionHarness.with(filters || {}))(); } /** * Gets the harness to interact with the toolbar's view actions. */ async getViewActions() { const actions = await this.#getViewActions(); if (actions === null) { throw Error('Unable to find toolbar view actions.'); } return actions; } } /** * Harness for interacting with a action button component in tests. */ class SkyActionButtonHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-action-button'; } #actionButton = this.locatorFor('.sky-action-button'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyActionButtonHarness` that meets certain criteria. */ static with(filters) { return SkyActionButtonHarness.getDataSkyIdPredicate(filters).addOption('header', filters.header, async (harness, header) => { const harnessHeaderText = await harness.getHeaderText(); return await HarnessPredicate.stringMatches(harnessHeaderText, header); }); } /** * Clicks the action button. */ async click() { return await (await this.#actionButton()).click(); } /** * Gets the action button details text. */ async getDetailsText() { const details = await this.locatorFor('sky-action-button-details')(); return (await details.text()).trim(); } /** * Gets the action button header text. */ async getHeaderText() { const header = await this.locatorFor('.sky-action-button-header')(); return (await header.text()).trim(); } /** * Gets the action button icon type. */ async getIconType() { const icon = await this.locatorFor(SkyIconHarness)(); return await icon.getIconName(); } /** * Gets the action button link. */ async getLink() { return (await (await this.#actionButton()).getProperty('href')).trim(); } } /** * Harness for interacting with a action button container component in tests. */ class SkyActionButtonContainerHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-action-button-container'; } /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyActionButtonContainerHarness` that meets certain criteria. */ static with(filters) { return SkyActionButtonContainerHarness.getDataSkyIdPredicate(filters); } /** * Gets a specific action button based on the filter criteria. * @param filter The filter criteria. */ async getActionButton(filter) { return await this.locatorFor(SkyActionButtonHarness.with(filter))(); } /** * Gets an array of action buttons based on the filter criteria. * If no filter is provided, returns all action buttons. * @param filters The optional filter criteria. */ async getActionButtons(filters) { return await this.locatorForAll(SkyActionButtonHarness.with(filters || {}))(); } /** * Gets the alignment of the buttons inside the container. */ async getAlignment() { return (await (await this.locatorFor('.sky-action-button-flex')()).hasClass('sky-action-button-flex-align-left')) ? 'left' : 'center'; } } /** * Harness for interacting with an inline delete component in tests. */ class SkyInlineDeleteHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-inline-delete'; } #getDeleteButton = this.locatorFor('button.sky-inline-delete-button'); #getCancelButton = this.locatorFor('button.sky-btn-default'); #waitHarness = this.locatorFor(SkyWaitHarness); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyInlineDeleteHarness` that meets certain criteria. */ static with(filters) { return SkyInlineDeleteHarness.getDataSkyIdPredicate(filters); } /** * Clicks the delete button. */ async clickDeleteButton() { return await (await this.#getDeleteButton()).click(); } /** * Clicks the cancel button. */ async clickCancelButton() { return await (await this.#getCancelButton()).click(); } /** * Whether the inline delete is pending. */ async isPending() { return await (await this.#waitHarness()).isWaiting(); } } /** * Generated bundle index. Do not edit. */ export { SkyActionButtonContainerHarness, SkyActionButtonFixture, SkyActionButtonHarness, SkyBackToTopHarness, SkyBoxHarness, SkyCardFixture, SkyColumnHarness, SkyDescriptionListContentHarness, SkyDescriptionListHarness, SkyFluidGridHarness, SkyInlineDeleteHarness, SkyPageSummaryFixture, SkyRowHarness, SkyTextExpandHarness, SkyTextExpandModalHarness, SkyTextExpandRepeaterHarness, SkyTextExpandRepeaterItemHarness, SkyToolbarHarness, SkyToolbarItemHarness, SkyToolbarSectionHarness, SkyToolbarViewActionsHarness }; //# sourceMappingURL=skyux-layout-testing.mjs.map