UNPKG

@skyux/indicators

Version:

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

840 lines (821 loc) 25.1 kB
import { SkyComponentHarness } from '@skyux/core/testing'; import { SkyHelpInlineHarness as SkyHelpInlineHarness$1 } from '@skyux/help-inline/testing'; import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; import { By } from '@angular/platform-browser'; import { SkyAppTestUtility } from '@skyux-sdk/testing'; /** * Harness for interacting with an alert component in tests. */ class SkyAlertHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-alert'; } #getAlert = this.locatorFor('.sky-alert'); #getContent = this.locatorFor('.sky-alert-content'); #getCloseButton = this.locatorFor('.sky-alert-close'); #getScreenReaderTextEl = this.locatorForOptional('.sky-screen-reader-only'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyAlertHarness` that meets certain criteria. */ static with(filters) { return SkyAlertHarness.getDataSkyIdPredicate(filters); } /** * Gets the current alert type. */ async getAlertType() { const alert = await this.#getAlert(); if (await alert.hasClass('sky-alert-danger')) { return 'danger'; } if (await alert.hasClass('sky-alert-info')) { return 'info'; } if (await alert.hasClass('sky-alert-success')) { return 'success'; } return 'warning'; } /** * Gets the current alert text. */ async getText() { return await (await this.#getContent()).text(); } /** * Closes the alert. */ async close() { if (!(await this.isCloseable())) { throw new Error('The alert is not closeable.'); } await (await this.#getCloseButton()).click(); } /** * Whether the user closed the alert. */ async isClosed() { const alert = await this.#getAlert(); return await alert.getProperty('hidden'); } /** * Whether the user can close the alert. */ async isCloseable() { const closeBtn = await this.#getCloseButton(); return !(await closeBtn.getProperty('hidden')); } /** * Gets the `descriptionType` of the label component. */ async getDescriptionType() { const srEl = await this.#getScreenReaderTextEl(); if (!srEl) { return 'none'; } const srText = await srEl.text(); switch (srText) { case 'Attention:': return 'attention'; case 'Caution:': return 'caution'; case 'Completed:': return 'completed'; case 'Danger:': return 'danger'; case 'Error:': return 'error'; case 'Important information:': return 'important-info'; case 'Important warning:': return 'important-warning'; case 'Success:': return 'success'; case 'Warning:': return 'warning'; default: return 'custom'; } } /** * Gets the custom text used for the screen reader description of the label component icon. */ async getCustomDescription() { const descriptionType = await this.getDescriptionType(); if (descriptionType === 'custom') { const srEl = await this.#getScreenReaderTextEl(); if (srEl) { return await srEl.text(); } } return ''; } } /** * Harness for interacting with a chevron component in tests. * @internal */ class SkyChevronHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-chevron'; } #getButton = this.locatorFor('button.sky-chevron'); /** * Gets the chevron direction. */ async getDirection() { return (await (await this.#getButton()).hasClass('sky-chevron-up')) ? 'up' : 'down'; } /** * Whether the chevron is disabled. */ async isDisabled() { const disabled = await (await this.#getButton()).getAttribute('disabled'); return disabled !== null; } /** * Toggles the chevron. */ async toggle() { if (await this.isDisabled()) { throw new Error('Could not toggle the checkbox because it is disabled.'); } else { await (await this.#getButton()).click(); } } } /** * Harness for interacting with a help inline component in tests. * @docsId SkyHelpInlineHarnessLegacy * @deprecated Use the `SkyHelpInlineHarness` from `@skyux/help-inline/testing` instead. */ class SkyHelpInlineHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-help-inline'; } #getInlineHelpButton = this.locatorFor('.sky-help-inline'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyInlineHelpHarness` that meets certain criteria */ static with(filters) { return SkyHelpInlineHarness.getDataSkyIdPredicate(filters); } /** * Clicks the help inline icon button */ async click() { await (await this.#getInlineHelpButton()).click(); } } /** * Harness for interacting with an illustration component in tests. */ class SkyIllustrationHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-illustration'; } #getImage = this.locatorFor('.sky-illustration-img'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyIllustrationHarness` that meets certain criteria. */ static with(filters) { return SkyIllustrationHarness.getDataSkyIdPredicate(filters); } /** * Gets the specified name of the illustration. */ async getName() { const img = await this.#getImage(); const name = await img.getAttribute('data-sky-illustration-name'); if (name === null) { throw new Error('Name was not set.'); } return name; } /** * Gets the specified size of the illustration. */ async getSize() { const img = await this.#getImage(); const height = await img.getAttribute('height'); const width = await img.getAttribute('width'); if (height !== width) { throw new Error('The image height and width do not match.'); } switch (height) { case '0': throw new Error('Size was not set.'); case '48': return 'sm'; case '64': return 'md'; case '80': return 'lg'; case '96': return 'xl'; } throw new Error('The image dimensions do not match the specified illustration size.'); } } /** * Harness for interacting with a key info label component in tests. * @internal */ class SkyKeyInfoLabelHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-key-info-label'; } /** * Gets the text value of the component content. */ async getText() { return await (await this.host()).text(); } } /** * Harness for interacting with a key info value component in tests. * @internal */ class SkyKeyInfoValueHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-key-info-value'; } /** * Gets the text value of the component content. */ async getText() { return await (await this.host()).text(); } } /** * Harness for interacting with a key info component in tests. */ class SkyKeyInfoHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-key-info'; } #getLabel = this.locatorFor(SkyKeyInfoLabelHarness); #getValue = this.locatorFor(SkyKeyInfoValueHarness); #getWrapper = this.locatorFor('.sky-key-info'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyKeyInfoHarness` that meets certain criteria. */ static with(filters) { return SkyKeyInfoHarness.getDataSkyIdPredicate(filters); } /** * Gets the current value text. */ async getValueText() { return await (await this.#getValue()).getText(); } /** * Gets the current label text. */ async getLabelText() { return await (await this.#getLabel()).getText(); } /** * Gets the current layout type. */ async getLayout() { return (await (await this.#getWrapper()).hasClass('sky-key-info-horizontal')) ? 'horizontal' : 'vertical'; } } /** * Harness for interacting with a label component in tests. */ class SkyLabelHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-label'; } #getWrapper = this.locatorFor('.sky-label'); #getTextEl = this.locatorFor('.sky-label-text'); #getScreenReaderTextEl = this.locatorForOptional('.sky-screen-reader-only'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyLookupHarness` that meets certain criteria. */ static with(filters) { return SkyLabelHarness.getDataSkyIdPredicate(filters); } /** * Gets the text of the label component. */ async getLabelText() { return await (await this.#getTextEl()).text(); } /** * Gets the `labelType` of the label component. */ async getLabelType() { const labelClasses = await (await this.#getWrapper()).getProperty('classList'); if (labelClasses.contains('sky-label-success')) { return 'success'; } if (labelClasses.contains('sky-label-danger')) { return 'danger'; } if (labelClasses.contains('sky-label-warning')) { return 'warning'; } return 'info'; } /** * Gets the `descriptionType` of the label component. */ async getDescriptionType() { const srEl = await this.#getScreenReaderTextEl(); if (!srEl) { return 'none'; } const srText = await srEl.text(); switch (srText) { case 'Attention:': return 'attention'; case 'Caution:': return 'caution'; case 'Completed:': return 'completed'; case 'Danger:': return 'danger'; case 'Error:': return 'error'; case 'Important information:': return 'important-info'; case 'Important warning:': return 'important-warning'; case 'Success:': return 'success'; case 'Warning:': return 'warning'; default: return 'custom'; } } /** * Gets the custom text used for the screen reader description of the label component icon. */ async getCustomDescription() { const descriptionType = await this.getDescriptionType(); if (descriptionType === 'custom') { const srEl = await this.#getScreenReaderTextEl(); if (srEl) { return await srEl.text(); } } return ''; } } /** * Harness for interacting with a status indicator component in tests. */ class SkyStatusIndicatorHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-status-indicator'; } #getIconWrapper = this.locatorFor('.sky-status-indicator-icon'); #getMessage = this.locatorForOptional('.sky-status-indicator-message'); #getScreenReaderTextEl = this.locatorForOptional('.sky-screen-reader-only'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyStatusIndicatorHarness` that meets certain criteria. */ static with(filters) { return SkyStatusIndicatorHarness.getDataSkyIdPredicate(filters); } async #getHelpInline() { const harness = await this.locatorForOptional(SkyHelpInlineHarness$1)(); if (harness) { return harness; } throw Error('No help inline found.'); } /** * Gets the current status indicator type. */ async getIndicatorType() { const wrapper = await this.#getIconWrapper(); if (await wrapper.hasClass('sky-status-indicator-icon-danger')) { return 'danger'; } if (await wrapper.hasClass('sky-status-indicator-icon-info')) { return 'info'; } if (await wrapper.hasClass('sky-status-indicator-icon-success')) { return 'success'; } return 'warning'; } /** * Gets the current status indicator text. */ async getText() { const message = await this.#getMessage(); if (message) { return await message.text(); } throw new Error('Status indicator text was not found. Did you set the descriptionType input?'); } /** * Gets the `descriptionType` of the status indicator component. */ async getDescriptionType() { const srEl = await this.#getScreenReaderTextEl(); if (!srEl) { return 'none'; } const srText = await srEl.text(); switch (srText) { case 'Attention:': return 'attention'; case 'Caution:': return 'caution'; case 'Completed:': return 'completed'; case 'Danger:': return 'danger'; case 'Error:': return 'error'; case 'Important information:': return 'important-info'; case 'Important warning:': return 'important-warning'; case 'Success:': return 'success'; case 'Warning:': return 'warning'; default: return 'custom'; } } /** * Gets the custom text used for the screen reader description of the status indicator component icon. */ async getCustomDescription() { const descriptionType = await this.getDescriptionType(); if (descriptionType === 'custom') { const srEl = await this.#getScreenReaderTextEl(); if (srEl) { return await srEl.text(); } } return ''; } /** * Clicks the help inline button. */ async clickHelpInline() { return await (await this.#getHelpInline()).click(); } /** * Gets the help inline popover content. */ async getHelpPopoverContent() { return await (await this.#getHelpInline()).getPopoverContent(); } /** * Gets the help inline popover title. */ async getHelpPopoverTitle() { return await (await this.#getHelpInline()).getPopoverTitle(); } } /** * Harness to interact with a text highlight directive in tests. */ class SkyTextHighlightHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = '[skyHighlight]'; } /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyTextHighlightHarness` that meets certain criteria. */ static with(filters) { return SkyTextHighlightHarness.getDataSkyIdPredicate(filters); } /** * Gets an array of all instances of highlighted text. */ async getHighlights() { return await this.locatorForAll('mark.sky-highlight-mark')(); } } /** * Harness for interacting with a token component in tests. */ class SkyTokenHarness extends ComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-token'; } #getActionButton = this.locatorFor('button.sky-token-btn-action'); #getDismissButton = this.locatorFor('button.sky-token-btn-close'); #getWrapper = this.locatorFor('.sky-token'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyTokenHarness` that meets certain criteria. */ static with(filters) { return new HarnessPredicate(this, filters).addOption('text', filters.text, async (harness, test) => await HarnessPredicate.stringMatches(await (await harness.host()).text(), test)); } /** * Selects the token. */ async select() { if (await this.isDisabled()) { throw new Error('Could not select the token because it is disabled.'); } await (await this.host()).click(); } /** * Dismisses the token. */ async dismiss() { if (!(await this.isDismissible())) { throw new Error('Could not dismiss the token because it is not dismissible.'); } await (await this.#getDismissButton()).click(); } /** * Returns the text content of the token. */ async getText() { return await (await this.host()).text(); } /** * Whether the token is disabled. */ async isDisabled() { return await (await this.#getWrapper()).hasClass('sky-token-disabled'); } /** * Whether the token is dismissible. */ async isDismissible() { return await (await this.#getWrapper()).hasClass('sky-token-dismissible'); } /** * Whether the token is focused. */ async isFocused() { return await (await this.#getActionButton()).isFocused(); } } /** * Harness for interacting with a tokens component in tests. */ class SkyTokensHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-tokens'; } /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyTokensHarness` that meets certain criteria. */ static with(filters) { return SkyTokensHarness.getDataSkyIdPredicate(filters); } /** * Dismisses all tokens, or tokens that meet certain criteria. */ async dismissTokens(filters) { const tokens = await this.getTokens(filters); for (const token of tokens) { await token.dismiss(); } } /** * Returns a list of tokens. */ async getTokens(filters) { return await this.locatorForAll(SkyTokenHarness.with(filters || {}))(); } /** * Returns the text content of all tokens. */ async getTokensText() { const tokens = await this.getTokens(); const values = []; for (const token of tokens) { values.push(await token.getText()); } return values; } } /** * Harness for interacting with a wait component in tests. */ class SkyWaitHarness extends SkyComponentHarness { /** * @internal */ static { this.hostSelector = 'sky-wait'; } #getWaitMask = this.locatorForOptional('.sky-wait-mask'); #getWaitContainer = this.locatorFor('.sky-wait-container'); /** * Gets a `HarnessPredicate` that can be used to search for a * `SkyWaitHarness` that meets certain criteria. */ static with(filters) { if (filters.servicePageWaitType === 'blocking') { return SkyWaitHarness.getDataSkyIdPredicate({ dataSkyId: 'page-wait-blocking', }); } else if (filters.servicePageWaitType === 'non-blocking') { return SkyWaitHarness.getDataSkyIdPredicate({ dataSkyId: 'page-wait-non-blocking', }); } return SkyWaitHarness.getDataSkyIdPredicate(filters); } /** * Gets the ARIA label for the wait component or throws an error if not waiting. */ async getAriaLabel() { const waitMask = await this.#getWaitMask(); if (waitMask) { return ((await waitMask.getAttribute('aria-label')) || /* istanbul ignore next */ ''); } throw new Error('An ARIA label cannot be determined because the wait component is not visible.'); } /** * Gets the waiting state of the wait component. */ async isWaiting() { return !!(await this.#getWaitMask()); } /** * Gets the full page state of the wait component. */ async isFullPage() { return await (await this.#getWaitContainer()).hasClass('sky-wait-full-page'); } /** * Gets the blocking state of the wait component. */ async isNonBlocking() { return await (await this.#getWaitContainer()).hasClass('sky-wait-non-blocking'); } } /** * Allows interaction with a SKY UX alert component. * @deprecated Use `SkyAlertHarness` instead. * @internal */ class SkyAlertFixture { /** * The alert's current text. */ get text() { return SkyAppTestUtility.getText(this.#debugEl); } /** * A flag indicating whether the alert can be closed. */ get closeable() { const closeBtnEl = this.#getCloseBtnEl(); return SkyAppTestUtility.isVisible(closeBtnEl); } /** * Returns a flag indicating whether the alert is closed. */ get closed() { return !SkyAppTestUtility.isVisible(this.#getAlertEl()); } /** * The alert's current type. */ get alertType() { const clsList = this.#getAlertEl().nativeElement.classList; if (clsList.contains('sky-alert-danger')) { return 'danger'; } if (clsList.contains('sky-alert-info')) { return 'info'; } if (clsList.contains('sky-alert-success')) { return 'success'; } if (clsList.contains('sky-alert-warning')) { return 'warning'; } return undefined; } #debugEl; constructor(fixture, skyTestId) { this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-alert'); } /** * Closes the alert. If the alert is not closeable, an error is thrown. */ close() { if (this.closeable) { const closeBtnEl = this.#getCloseBtnEl(); closeBtnEl.triggerEventHandler('click', {}); } else { throw new Error('The alert is not closeable.'); } } #getAlertEl() { return this.#debugEl.query(By.css('.sky-alert')); } #getCloseBtnEl() { return this.#debugEl.query(By.css('.sky-alert-close')); } } /** * Allows interaction with a SKY UX label component. * @internal */ class SkyLabelFixture { /** * The label's current type. */ get labelType() { const clsList = this.#getLabelEl().nativeElement.classList; if (clsList.contains('sky-label-danger')) { return 'danger'; } if (clsList.contains('sky-label-info')) { return 'info'; } if (clsList.contains('sky-label-success')) { return 'success'; } if (clsList.contains('sky-label-warning')) { return 'warning'; } return undefined; } /** * The label's current text. */ get text() { const labelEl = this.#getLabelEl(); return SkyAppTestUtility.getText(labelEl); } #debugEl; constructor(fixture, skyTestId) { this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-label'); } #getLabelEl() { return this.#debugEl.query(By.css('.sky-label')); } } /** * @internal */ class SkyWaitFixture { get isWaiting() { return this.#innerWaitComponentContainsClass('.sky-wait-mask'); } get isFullPage() { return this.#innerWaitComponentContainsClass('.sky-wait-mask-loading-fixed'); } get ariaLabel() { const div = this.#debugEl.nativeElement.querySelector('.sky-wait-mask'); return div.getAttribute('aria-label'); } get isNonBlocking() { return this.#innerWaitComponentContainsClass('.sky-wait-mask-loading-non-blocking'); } #debugEl; constructor(fixture, skyTestId) { this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-wait'); } #innerWaitComponentContainsClass(className) { const element = this.#debugEl.nativeElement.querySelector(className); return element !== null; } } /** * Generated bundle index. Do not edit. */ export { SkyAlertFixture, SkyAlertHarness, SkyChevronHarness, SkyHelpInlineHarness, SkyIllustrationHarness, SkyKeyInfoHarness, SkyLabelFixture, SkyLabelHarness, SkyStatusIndicatorHarness, SkyTextHighlightHarness, SkyTokenHarness, SkyTokensHarness, SkyWaitFixture, SkyWaitHarness }; //# sourceMappingURL=skyux-indicators-testing.mjs.map