@vibe/testkit
Version:
Vibe e2e testing toolkit
178 lines • 8.27 kB
JavaScript
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandCollapse = void 0;
const test_1 = require("@playwright/test");
const BaseElement_1 = require("./BaseElement");
const Button_1 = require("./Button");
const Link_1 = require("./Link");
/**
* Class representing an ExpandCollapse element.
* Extends the BaseElement class.
*/
class ExpandCollapse extends BaseElement_1.BaseElement {
/**
* Create an ExpandCollapse element.
* @param {Page} page - The Playwright page object.
* @param {Locator} locator - The locator for the ExpandCollapse element.
* @param {string} elementReportName - The name for reporting purposes.
*/
constructor(page, locator, elementReportName) {
super(page, locator, elementReportName);
this.headerButton = new Button_1.Button(page, locator.locator("button[aria-expanded]"), `${elementReportName} - Header Button`);
this.content = new BaseElement_1.BaseElement(page, locator.locator("[role='region']"), `${elementReportName} - Content`);
}
/**
* Click the header to toggle expand/collapse state.
* @returns {Promise<void>}
*/
toggle() {
return __awaiter(this, void 0, void 0, function* () {
yield test_1.test.step(`Toggle ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
yield this.headerButton.click();
}));
});
}
/**
* Expand the component if it's currently collapsed.
* @returns {Promise<void>}
*/
expand() {
return __awaiter(this, void 0, void 0, function* () {
yield test_1.test.step(`Expand ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
if (yield this.isCollapsed()) {
yield this.headerButton.click();
}
}));
});
}
/**
* Collapse the component if it's currently expanded.
* @returns {Promise<void>}
*/
collapse() {
return __awaiter(this, void 0, void 0, function* () {
yield test_1.test.step(`Collapse ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
if (!(yield this.isCollapsed())) {
yield this.headerButton.click();
}
}));
});
}
/**
* Check if the component is collapsed.
* @returns {Promise<boolean>} True if collapsed, false if expanded.
*/
isCollapsed() {
return __awaiter(this, void 0, void 0, function* () {
return yield test_1.test.step(`Check if ${this.getElementReportName()} is collapsed`, () => __awaiter(this, void 0, void 0, function* () {
return !(yield this.headerButton.isExpanded());
}));
});
}
/**
* Get the header/title text.
* @returns {Promise<string>} The header text content.
*/
getHeaderText() {
return __awaiter(this, void 0, void 0, function* () {
return yield test_1.test.step(`Get header text of ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
return yield this.headerButton.getText();
}));
});
}
/**
* Check if the content section is visible.
* @returns {Promise<boolean>} True if content is visible, false otherwise.
*/
isContentVisible() {
return __awaiter(this, void 0, void 0, function* () {
return yield test_1.test.step(`Check if content of ${this.getElementReportName()} is visible`, () => __awaiter(this, void 0, void 0, function* () {
return yield this.content.isVisible();
}));
});
}
/**
* Get the content element for further interactions.
* @returns {BaseElement} The content element wrapped in BaseElement.
*/
getContentElement() {
return new BaseElement_1.BaseElement(this.getPage(), this.content.getLocator(), `content of ${this.getElementReportName()}`);
}
/**
* Get the content text.
* @returns {Promise<string>} The content text.
*/
getContentText() {
return __awaiter(this, void 0, void 0, function* () {
return yield test_1.test.step(`Get content text of ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
yield this.content.waitForElementToBeVisible();
return yield this.content.getText();
}));
});
}
/**
* Click on an item within the content area by its text.
* @param {string} itemText - The text of the item to click.
* @returns {Promise<void>}
*/
clickItemByText(itemText) {
return __awaiter(this, void 0, void 0, function* () {
yield test_1.test.step(`Click item "${itemText}" in ${this.getElementReportName()} content`, () => __awaiter(this, void 0, void 0, function* () {
// Ensure the component is expanded first
yield this.expand();
// Wait for content to be visible
yield this.content.waitForElementToBeVisible();
// Find and click the item
const item = new BaseElement_1.BaseElement(this.getPage(), this.content.getLocator().getByText(itemText, { exact: false }), `item "${itemText}" in ${this.getElementReportName()} content`);
yield item.click();
}));
});
}
/**
* Click on an item within the content area by exact text match.
* @param {string} itemText - The exact text of the item to click.
* @returns {Promise<void>}
*/
clickItemByExactText(itemText) {
return __awaiter(this, void 0, void 0, function* () {
yield test_1.test.step(`Click item with exact text "${itemText}" in ${this.getElementReportName()} content`, () => __awaiter(this, void 0, void 0, function* () {
// Ensure the component is expanded first
yield this.expand();
// Wait for content to be visible
yield this.content.waitForElementToBeVisible();
// Find and click the item with exact text match
const item = new BaseElement_1.BaseElement(this.getPage(), this.content.getLocator().getByText(itemText, { exact: true }), `item with exact text "${itemText}" in ${this.getElementReportName()} content`);
yield item.click();
}));
});
}
/**
* Click on a link within the content area by its text.
* @param {string} linkText - The text of the link to click.
* @returns {Promise<void>}
*/
clickLinkInContent(linkText) {
return __awaiter(this, void 0, void 0, function* () {
yield test_1.test.step(`Click link "${linkText}" in ${this.getElementReportName()} content`, () => __awaiter(this, void 0, void 0, function* () {
// Ensure the component is expanded first
yield this.expand();
// Wait for content to be visible
yield this.content.waitForElementToBeVisible();
// Find and click the link
const link = new Link_1.Link(this.getPage(), this.content.getLocator().locator("a").filter({ hasText: linkText }), `link "${linkText}" in ${this.getElementReportName()} content`);
yield link.click();
}));
});
}
}
exports.ExpandCollapse = ExpandCollapse;
//# sourceMappingURL=ExpandCollapse.js.map