@salla.sa/twilight-components
Version:
Salla Web Component
123 lines (122 loc) • 4.26 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { newE2EPage } from "@stencil/core/testing";
describe('salla-modal-e2e', () => {
let page;
let element;
beforeEach(async () => {
page = await newE2EPage({
html: `<salla-modal></salla-modal>`
});
element = await page.find('salla-modal');
});
it('should render the component', async () => {
expect(element).not.toBeNull();
});
it('should render unclosable (persistent) modal', async () => {
await page.$eval("salla-modal", elm => {
elm.isClosable = false;
});
await page.waitForChanges();
const closeButton = await element.find(".s-modal-close");
expect(closeButton).not.toBeNull();
});
it('should render modal with a width of "lg"', async () => {
await page.$eval("salla-modal", elm => {
elm.width = "lg";
});
await page.waitForChanges();
const closeButton = await element.find(".s-modal-lg");
expect(closeButton).not.toBeNull();
});
it('should render modal with a position of top aligned', async () => {
await page.$eval("salla-modal", elm => {
elm.position = "top";
});
await page.waitForChanges();
const closeButton = await element.find(".s-modal-align-top");
expect(closeButton).not.toBeNull();
});
it('should render modal with subtitle on top of the title', async () => {
await page.$eval("salla-modal", elm => {
elm.subTitleFirst = true;
});
await page.waitForChanges();
const subTitleFirst = await element.find(".s-modal-title-below");
expect(subTitleFirst).not.toBeNull();
});
it('should render modal with out any padding', async () => {
await page.$eval("salla-modal", elm => {
elm.noPadding = true;
});
await page.waitForChanges();
const noPadding = await element.find(".s-modal-nopadding");
expect(noPadding).not.toBeNull();
});
it('should render modal with a subtitle', async () => {
await page.$eval("salla-modal", elm => {
elm.subTitle = "This is the subtitle";
});
await page.waitForChanges();
const subtitle = await element.find(".s-modal-sub-title");
expect(subtitle.innerHTML).toEqual("This is the subtitle");
});
it('should render modal with an icon', async () => {
await page.$eval("salla-modal", elm => {
//@ts-ignore
elm.icon = "sicon-alert-engine";
});
await page.waitForChanges();
const icon = await element.find(".s-modal-icon");
expect(icon).not.toBeNull();
});
it('should render modal with an icon', async () => {
await page.$eval("salla-modal", elm => {
elm.iconStyle = "error";
});
await page.waitForChanges();
const iconStyle = await element.find(".s-modal-bg-error");
expect(iconStyle).not.toBeNull();
});
it('should render modal with an icon', async () => {
await page.$eval("salla-modal", elm => {
//@ts-ignore
elm.imageIcon = "https://via.placeholder.com/150";
});
await page.waitForChanges();
const iconStyle = await element.find(".s-modal-header-img");
expect(iconStyle).not.toBeNull();
});
it('should open the modal from a method', async () => {
await element.callMethod("open");
await page.waitForChanges();
const hiddenClass = await element.find(".s-hidden");
// const hiddenClass = await element.getAttribute("visible");
expect(hiddenClass).toBeNull();
});
it('should close the modal by clicking on the overlay', async () => {
await element.callMethod("open");
await page.waitForChanges();
const overlay = await element.find(".s-modal-overlay");
overlay.click();
await page.waitForChanges();
const modal = await element.getAttribute("visible");
expect(modal).toBeNull();
});
it('should close the modal by clicking on the close button', async () => {
await element.callMethod("open");
await page.waitForChanges();
const button = await element.find(".s-modal-close");
button.click();
await page.waitForChanges();
const modal = await element.getAttribute("visible");
expect(modal).toBeNull();
});
/**
* TODO: Unable to write an e2e test for the methods below. (checking prop is not enough)
* loading
* stopLoading
*/
});
//# sourceMappingURL=salla-modal.e2e.js.map