@bitforgehq/ui 0.4.0 → 0.5.0-next.4

package/fesm2022/bitforgehq-ui-testing.mjs

@@ -110,29 +110,44 @@ function provideBfTesting(options = {}) {
 	return makeEnvironmentProviders([...providers, ɵprovideBfDocumentReset()]);
 }
 var BfSelectHarness = class BfSelectHarness extends ComponentHarness {
-	static hostSelector = "bf-select";
-	select = this.locatorFor("select");
+	static hostSelector = "bf-select, [data-bf-select]";
+	nativeSelect = this.locatorForOptional("select");
+	combobox = this.locatorForOptional("[role=\"combobox\"]");
 	label = this.locatorForOptional("label");
 	error = this.locatorForOptional("p[id$=\"-error\"]");
 	help = this.locatorForOptional("p[id$=\"-help\"]");
 	nativeOptions = this.locatorForAll("option");
+	styledOptions = this.locatorForAll("[data-bf-select-options] > span");
 	static with(filters = {}) {
 		return new HarnessPredicate(BfSelectHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
 	}
 	async getLabel() {
 		const label = await this.label();
 		if (label) return (await label.text({ exclude: "[aria-hidden=\"true\"]" })).trim();
-		return await (await this.select()).getAttribute("aria-label") ?? "";
+		return await (await this.control()).getAttribute("aria-label") ?? "";
+	}
+	async isOpen() {
+		if (await this.nativeSelect()) return false;
+		return await (await this.control()).getAttribute("aria-expanded") === "true";
 	}
 	async getValueLabel() {
+		if (!await this.nativeSelect()) {
+			const field = await this.control();
+			return await field.getAttribute("data-placeholder") !== null ? "" : (await field.text()).trim();
+		}
 		for (const option of await this.options()) if (option.choice && await option.element.getProperty("selected")) return option.label;
 		return "";
 	}
 	async getOptionLabels() {
+		if (!await this.nativeSelect()) return (await this.styledChoices()).map((option) => option.label);
 		return (await this.options()).filter((option) => option.choice).map((option) => option.label);
 	}
 	async selectOption(label) {
 		if (await this.isDisabled()) throw new Error(`BfSelectHarness: the select is disabled, so "${label}" cannot be chosen`);
+		if (!await this.nativeSelect()) {
+			await this.selectStyled(label);
+			return;
+		}
 		const options = await this.options();
 		const option = options.find((o) => o.choice && o.label === label);
 		if (!option) {
@@ -140,18 +155,20 @@ var BfSelectHarness = class BfSelectHarness extends ComponentHarness {
 			throw new Error(`BfSelectHarness: no option "${label}" (options: ${known.join(", ")})`);
 		}
 		if (await option.element.getProperty("disabled")) throw new Error(`BfSelectHarness: the option "${label}" is disabled`);
-		const select = await this.select();
+		const select = await this.control();
 		await select.setInputValue(await option.element.getProperty("value"));
 		await select.dispatchEvent("change");
 	}
 	async isDisabled() {
-		return (await this.select()).getProperty("disabled");
+		if (!await this.nativeSelect()) return await (await this.control()).getAttribute("aria-disabled") === "true";
+		return (await this.control()).getProperty("disabled");
 	}
 	async isReadonly() {
-		return await (await this.select()).getAttribute("aria-readonly") === "true";
+		return await (await this.control()).getAttribute("aria-readonly") === "true";
 	}
 	async isRequired() {
-		return (await this.select()).getProperty("required");
+		if (!await this.nativeSelect()) return await (await this.control()).getAttribute("aria-required") === "true";
+		return (await this.control()).getProperty("required");
 	}
 	async getErrorText() {
 		return (await (await this.error())?.text())?.trim() ?? "";
@@ -160,10 +177,61 @@ var BfSelectHarness = class BfSelectHarness extends ComponentHarness {
 		return (await (await this.help())?.text())?.trim() ?? "";
 	}
 	async focus() {
-		await (await this.select()).focus();
+		await (await this.control()).focus();
 	}
 	async blur() {
-		await (await this.select()).blur();
+		await (await this.control()).blur();
+	}
+	async control() {
+		const native = await this.nativeSelect();
+		if (native) return native;
+		const field = await this.combobox();
+		if (!field) throw new Error("BfSelectHarness: found neither a native select nor a combobox field");
+		return field;
+	}
+	async open() {
+		if (!await this.isOpen()) await (await this.control()).click();
+	}
+	async close() {
+		if (await this.isOpen()) await (await this.control()).sendKeys(TestKey.ESCAPE);
+	}
+	async listOptions() {
+		const id = await (await this.control()).getAttribute("aria-controls");
+		if (!id) return [];
+		const root = this.documentRootLocatorFactory();
+		const [elements, labels] = await Promise.all([root.locatorForAll(`[id="${id}"] [role="option"]`)(), root.locatorForAll(`[id="${id}"] [role="option"] [data-label]`)()]);
+		return Promise.all(elements.map(async (element, i) => ({
+			element,
+			label: (await (labels[i] ?? element).text()).trim()
+		})));
+	}
+	async styledChoices() {
+		return Promise.all((await this.styledOptions()).map(async (element) => {
+			const [label, disabled] = await Promise.all([element.text(), element.getAttribute("data-disabled")]);
+			return {
+				label: label.trim(),
+				disabled: disabled !== null
+			};
+		}));
+	}
+	async selectStyled(label) {
+		const choices = await this.styledChoices();
+		const choice = choices.find((o) => o.label === label);
+		if (!choice) {
+			const known = choices.map((o) => o.label);
+			throw new Error(`BfSelectHarness: no option "${label}" (options: ${known.join(", ")})`);
+		}
+		if (choice.disabled) throw new Error(`BfSelectHarness: the option "${label}" is disabled`);
+		if (await this.isReadonly()) return;
+		await this.open();
+		const option = (await this.listOptions()).find((o) => o.label === label);
+		if (!option) {
+			await this.close();
+			throw new Error(`BfSelectHarness: the open list has no option "${label}"`);
+		}
+		await option.element.click();
+		await new Promise((resolve) => setTimeout(resolve));
+		await this.forceStabilize();
 	}
 	async options() {
 		return Promise.all((await this.nativeOptions()).map(async (element, index) => {
@@ -1083,6 +1151,342 @@ var BfToggleHarness = class BfToggleHarness extends ComponentHarness {
 		return (await (await this.error())?.text())?.trim() ?? "";
 	}
 };
-export { BfCalendarHarness, BfChartHarness, BfComboboxHarness, BfDateInputHarness, BfDateTimeInputHarness, BfDesktopToastHarness, BfDialogHarness, BfMenuButtonHarness, BfMenuHarness, BfMenuItemHarness, BfPaginationHarness, BfPopoverHarness, BfRadioGroupHarness, BfSegmentedHarness, BfSelectHarness, BfSidePanelHarness, BfSidebarToggleHarness, BfTabGroupHarness, BfTableHarness, BfTimeInputHarness, BfToggleHarness, BfTooltipHarness, installBfJsdomShims, provideBfTesting };
+var BfFileInputHarness = class BfFileInputHarness extends ComponentHarness {
+	static hostSelector = "bf-file-input";
+	label = this.locatorForOptional("label");
+	error = this.locatorForOptional("p[id$=\"-error\"]");
+	box = this.locatorForOptional("[data-box]");
+	pick = this.locatorForOptional("[data-pick]");
+	ariaLabelText = this.locatorForOptional("[data-aria-label]");
+	dropzone = this.locatorForOptional("[data-dropzone]");
+	nativeInput = this.locatorFor("input[type=\"file\"]");
+	names = this.locatorForAll("[data-file] [data-name]");
+	removeButtons = this.locatorForAll("[data-file] button");
+	rejectedNames = this.locatorForAll("[data-rejected] [data-rejected-name]");
+	rejectedMessages = this.locatorForAll("[data-rejected] [data-rejected-message]");
+	static with(filters = {}) {
+		return new HarnessPredicate(BfFileInputHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+	}
+	async getLabel() {
+		const label = await this.label();
+		if (label) return (await label.text({ exclude: "[aria-hidden=\"true\"]" })).trim();
+		return (await (await this.ariaLabelText())?.text())?.trim() ?? "";
+	}
+	async getErrorText() {
+		return (await (await this.error())?.text())?.trim() ?? "";
+	}
+	async getVariant() {
+		return await this.dropzone() !== null || await this.box() === null ? "dropzone" : "field";
+	}
+	async isDisabled() {
+		return (await this.nativeInput()).getProperty("disabled");
+	}
+	async isReadonly() {
+		return await this.pick() === null;
+	}
+	async addFiles(files) {
+		const target = await this.box();
+		if (!target || await this.isDisabled() || await this.isReadonly()) return;
+		const data = { dataTransfer: { files } };
+		await target.dispatchEvent("drop", data);
+	}
+	async getFileNames() {
+		return Promise.all((await this.names()).map(async (name) => (await name.text()).trim()));
+	}
+	async getRejected() {
+		const [names, messages] = await Promise.all([this.rejectedNames(), this.rejectedMessages()]);
+		return Promise.all(names.map(async (name, index) => ({
+			name: (await name.text()).trim(),
+			message: (await messages[index]?.text() ?? "").trim()
+		})));
+	}
+	async removeFile(name) {
+		const index = (await this.getFileNames()).indexOf(name);
+		if (index < 0) throw new Error(`BfFileInputHarness: no chosen file is named "${name}"`);
+		const button = (await this.removeButtons())[index];
+		if (!button) throw new Error(`BfFileInputHarness: "${name}" cannot be removed from this field`);
+		await button.click();
+	}
+};
+var BfImageInputHarness = class BfImageInputHarness extends ComponentHarness {
+	static hostSelector = "bf-image-input";
+	label = this.locatorForOptional("label");
+	error = this.locatorForOptional("p[id$=\"-error\"]");
+	tile = this.locatorFor("[data-tile]");
+	preview = this.locatorForOptional("[data-tile] img");
+	removeButton = this.locatorForOptional("[data-remove]");
+	rejection = this.locatorForOptional("[data-rejection]");
+	nativeInput = this.locatorFor("input[type=\"file\"]");
+	static with(filters = {}) {
+		return new HarnessPredicate(BfImageInputHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+	}
+	async getLabel() {
+		const label = await this.label();
+		if (label) return (await label.text({ exclude: "[aria-hidden=\"true\"]" })).trim();
+		return await (await this.tile()).getAttribute("aria-label") ?? "";
+	}
+	async getErrorText() {
+		return (await (await this.error())?.text())?.trim() ?? "";
+	}
+	async isDisabled() {
+		return (await this.nativeInput()).getProperty("disabled");
+	}
+	async isReadonly() {
+		return await (await this.tile()).getProperty("tagName") !== "BUTTON";
+	}
+	async hasPreview() {
+		return await this.preview() !== null;
+	}
+	async getPreviewSrc() {
+		return (await this.preview())?.getAttribute("src") ?? null;
+	}
+	async addFile(file) {
+		if (await this.isDisabled() || await this.isReadonly()) return;
+		const data = { dataTransfer: { files: [file] } };
+		await (await this.tile()).dispatchEvent("drop", data);
+	}
+	async remove() {
+		const button = await this.removeButton();
+		if (!button) throw new Error("BfImageInputHarness: there is no Remove button, so nothing can be removed");
+		await button.click();
+	}
+	async getRejectedMessage() {
+		return (await (await this.rejection())?.text())?.trim() ?? "";
+	}
+};
+var BfMediaCardHarness = class BfMediaCardHarness extends ComponentHarness {
+	static hostSelector = "bf-media-card";
+	media = this.locatorFor("[data-media]");
+	image = this.locatorForOptional("[data-media] img");
+	heading = this.locatorForOptional("[data-body] h1, [data-body] h2, [data-body] h3, [data-body] h4, [data-body] h5, [data-body] h6");
+	loadingLabel = this.locatorForOptional("[data-loading-label]");
+	failedLabel = this.locatorForOptional("[data-failed-label]");
+	selectButton = this.locatorForOptional("button[data-select]");
+	static with(filters = {}) {
+		return new HarnessPredicate(BfMediaCardHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getTitle(), label));
+	}
+	async getTitle() {
+		return (await (await this.heading())?.text())?.trim() ?? "";
+	}
+	async getState() {
+		const state = await (await this.media()).getAttribute("data-state");
+		return state === "loading" || state === "loaded" || state === "failed" ? state : "empty";
+	}
+	async getSrc() {
+		return await (await this.image())?.getAttribute("src") ?? "";
+	}
+	async getAlt() {
+		return await (await this.image())?.getAttribute("alt") ?? "";
+	}
+	async getLoadingLabel() {
+		return (await (await this.loadingLabel())?.text())?.trim() ?? "";
+	}
+	async getFailedMessage() {
+		return (await (await this.failedLabel())?.text())?.trim() ?? "";
+	}
+	async loadImage() {
+		await (await this.requireImage()).dispatchEvent("load");
+	}
+	async failImage() {
+		await (await this.requireImage()).dispatchEvent("error");
+	}
+	async isSelectable() {
+		return await this.selectButton() !== null;
+	}
+	async isSelected() {
+		return await (await this.selectButton())?.getAttribute("aria-pressed") === "true";
+	}
+	async toggleSelected() {
+		const button = await this.selectButton();
+		if (!button) throw new Error("BfMediaCardHarness: the card is not selectable");
+		await button.click();
+	}
+	async requireImage() {
+		const image = await this.image();
+		if (!image) throw new Error("BfMediaCardHarness: the card shows no image (no src, or it failed)");
+		return image;
+	}
+};
+var BfImageTileHarness = class BfImageTileHarness extends ComponentHarness {
+	static hostSelector = "bf-image-tile";
+	tile = this.locatorFor("bf-image-tile > div");
+	media = this.locatorFor("[data-media]");
+	image = this.locatorForOptional("[data-media] img");
+	title = this.locatorFor("[data-title]");
+	meta = this.locatorFor("[data-meta]");
+	placeholder = this.locatorForOptional("[data-placeholder]");
+	failed = this.locatorForOptional("[data-failed]");
+	action = this.locatorForOptional("[data-title] [data-bf-action]");
+	static with(filters = {}) {
+		return new HarnessPredicate(BfImageTileHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getTitle(), label));
+	}
+	async getTitle() {
+		return (await (await this.title()).text()).trim();
+	}
+	async getMeta() {
+		return (await (await this.meta()).text()).trim();
+	}
+	async getState() {
+		const state = await (await this.media()).getAttribute("data-state");
+		return state === "loading" || state === "loaded" || state === "failed" ? state : "empty";
+	}
+	async getSrc() {
+		return await (await this.image())?.getAttribute("src") ?? "";
+	}
+	async getAlt() {
+		return await (await this.image())?.getAttribute("alt") ?? "";
+	}
+	async getPlaceholderText() {
+		return (await (await this.placeholder())?.text())?.trim() ?? "";
+	}
+	async getFailedMessage() {
+		return (await (await this.failed())?.text())?.trim() ?? "";
+	}
+	async isSelected() {
+		return await (await this.tile()).getAttribute("data-selected") !== null;
+	}
+	async isClickable() {
+		return await this.action() !== null;
+	}
+	async click() {
+		const action = await this.action();
+		if (!action) throw new Error("BfImageTileHarness: the tile has no bfAction link or button");
+		await action.click();
+	}
+	async loadImage() {
+		await (await this.requireImage()).dispatchEvent("load");
+	}
+	async failImage() {
+		await (await this.requireImage()).dispatchEvent("error");
+	}
+	async requireImage() {
+		const image = await this.image();
+		if (!image) throw new Error("BfImageTileHarness: the tile shows no picture (no src, or it failed)");
+		return image;
+	}
+};
+var BfImageViewerHarness = class BfImageViewerHarness extends ComponentHarness {
+	static hostSelector = "bf-image-viewer";
+	image = this.locatorForOptional("img[data-image]");
+	frame = this.locatorFor("[data-frame]");
+	caption = this.locatorForOptional("[data-caption]");
+	counter = this.locatorFor("[data-counter]");
+	closeButton = this.locatorFor("[data-close] button");
+	nextButton = this.locatorForOptional("[data-next] button");
+	previousButton = this.locatorForOptional("[data-previous] button");
+	static with(filters = {}) {
+		return new HarnessPredicate(BfImageViewerHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+	}
+	async getLabel() {
+		return await (await this.host()).getAttribute("data-label") ?? "";
+	}
+	async getIndex() {
+		return Number(await (await this.host()).getAttribute("data-index"));
+	}
+	async getCount() {
+		return Number(await (await this.host()).getAttribute("data-count"));
+	}
+	async getCounterText() {
+		return await this.getCount() < 2 ? "" : (await (await this.counter()).text()).trim();
+	}
+	async getSrc() {
+		return await (await this.image())?.getAttribute("src") ?? "";
+	}
+	async getAlt() {
+		return await (await this.image())?.getAttribute("alt") ?? "";
+	}
+	async getCaption() {
+		return (await (await this.caption())?.text())?.trim() ?? "";
+	}
+	async isLoaded() {
+		return await (await this.frame()).getAttribute("data-status") === "loaded";
+	}
+	async hasFailed() {
+		return await (await this.frame()).getAttribute("data-status") === "error";
+	}
+	async loadImage() {
+		await (await this.requireImage()).dispatchEvent("load");
+	}
+	async failImage() {
+		await (await this.requireImage()).dispatchEvent("error");
+	}
+	async next() {
+		const button = await this.nextButton();
+		if (!button) throw new Error("BfImageViewerHarness: a viewer of one image has no next button");
+		await button.click();
+	}
+	async previous() {
+		const button = await this.previousButton();
+		if (!button) throw new Error("BfImageViewerHarness: a viewer of one image has no previous button");
+		await button.click();
+	}
+	async pressKey(key) {
+		const keys = {
+			ArrowLeft: TestKey.LEFT_ARROW,
+			ArrowRight: TestKey.RIGHT_ARROW,
+			Home: TestKey.HOME,
+			End: TestKey.END,
+			Escape: TestKey.ESCAPE
+		};
+		await (await this.closeButton()).sendKeys(keys[key]);
+	}
+	async close() {
+		await (await this.closeButton()).click();
+	}
+	async requireImage() {
+		const image = await this.image();
+		if (!image) throw new Error("BfImageViewerHarness: the viewer shows no image (it failed to load)");
+		return image;
+	}
+};
+var BfChatComposerHarness = class BfChatComposerHarness extends ComponentHarness {
+	static hostSelector = "bf-chat-composer";
+	textarea = this.locatorFor("textarea");
+	label = this.locatorForOptional("label");
+	button = this.locatorFor("button[data-action]");
+	static with(filters = {}) {
+		return new HarnessPredicate(BfChatComposerHarness, filters).addOption("label", filters.label, async (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+	}
+	async getLabel() {
+		const label = await this.label();
+		return (label ? (await label.text()).trim() : "") || (await (await this.textarea()).getAttribute("aria-label") ?? "");
+	}
+	async getValue() {
+		return (await this.textarea()).getProperty("value");
+	}
+	async setValue(text) {
+		const textarea = await this.textarea();
+		await textarea.clear();
+		if (text) {
+			await textarea.setInputValue(text);
+			await textarea.dispatchEvent("input");
+		}
+	}
+	async send() {
+		if (await this.isRunning() || !await this.canAct()) return;
+		await (await this.button()).click();
+	}
+	async pressEnter() {
+		await (await this.textarea()).sendKeys(TestKey.ENTER);
+	}
+	async stop() {
+		if (!await this.isRunning() || !await this.canAct()) return;
+		await (await this.button()).click();
+	}
+	async isRunning() {
+		return await (await this.button()).getAttribute("data-mode") === "stop";
+	}
+	async isDisabled() {
+		return (await this.textarea()).getProperty("disabled");
+	}
+	async canAct() {
+		const button = await this.button();
+		return !await button.getProperty("disabled") && await button.getAttribute("aria-disabled") !== "true";
+	}
+	async getButtonLabel() {
+		return (await (await this.button()).text()).trim();
+	}
+};
+export { BfCalendarHarness, BfChartHarness, BfChatComposerHarness, BfComboboxHarness, BfDateInputHarness, BfDateTimeInputHarness, BfDesktopToastHarness, BfDialogHarness, BfFileInputHarness, BfImageInputHarness, BfImageTileHarness, BfImageViewerHarness, BfMediaCardHarness, BfMenuButtonHarness, BfMenuHarness, BfMenuItemHarness, BfPaginationHarness, BfPopoverHarness, BfRadioGroupHarness, BfSegmentedHarness, BfSelectHarness, BfSidePanelHarness, BfSidebarToggleHarness, BfTabGroupHarness, BfTableHarness, BfTimeInputHarness, BfToggleHarness, BfTooltipHarness, installBfJsdomShims, provideBfTesting };
 
 //# sourceMappingURL=bitforgehq-ui-testing.mjs.map