@salla.sa/twilight-components
Version:
Salla Web Component
134 lines (133 loc) • 4.63 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { newSpecPage } from "@stencil/core/testing";
import { SallaModal } from "../salla-modal";
describe("salla modal", () => {
it("should build", () => {
expect(new SallaModal()).toBeTruthy();
});
describe("checking for props", () => {
let page;
let element;
beforeEach(async () => {
page = await newSpecPage({
components: [SallaModal],
html: '<salla-modal visible></salla-modal>'
});
element = await page.doc.querySelector('salla-modal');
});
it('should work for is-closable prop', async () => {
element.isClosable = true;
await page.waitForChanges();
expect(element.isClosable).toBe(true);
});
it('should work for width prop', async () => {
element.width = 'xl';
await page.waitForChanges();
expect(element.width).toBe('xl');
});
it('should work for position prop', async () => {
element.position = 'top';
await page.waitForChanges();
expect(element.position).toBe('top');
});
it('should work for visible prop', async () => {
element.visible = true;
await page.waitForChanges();
expect(element.visible).toBe(true);
});
it('should work for is-loading prop', async () => {
element.isLoading = true;
await page.waitForChanges();
expect(element.isLoading).toBe(true);
});
it('should work for sub-title-first prop', async () => {
element.subTitleFirst = true;
await page.waitForChanges();
expect(element.subTitleFirst).toBe(true);
});
it('should work for no-padding prop', async () => {
element.noPadding = true;
await page.waitForChanges();
expect(element.noPadding).toBe(true);
});
it('should work for sub-title prop', async () => {
element.subTitle = 'sub-title';
await page.waitForChanges();
expect(element.subTitle).toBe('sub-title');
});
it('should work for icon prop', async () => {
element.icon = 'salla-heart';
await page.waitForChanges();
expect(element.icon).toBe('salla-heart');
});
it('should work for icon-style prop', async () => {
element.iconStyle = 'outlined';
await page.waitForChanges();
expect(element.iconStyle).toBe('outlined');
});
it('should work for image-icon prop', async () => {
element.imageIcon = 'https://via.placeholder.com/100';
await page.waitForChanges();
expect(element.imageIcon).toBe('https://via.placeholder.com/100');
});
});
describe("checking for method calls", () => {
let page;
let element;
beforeEach(async () => {
page = await newSpecPage({
components: [SallaModal],
html: '<salla-modal></salla-modal>'
});
element = await page.doc.querySelector('salla-modal');
});
it("should set modal title", async () => {
jest.clearAllTimers();
await page.waitForChanges();
let title = "My Modal";
await element.setTitle(title);
jest.advanceTimersByTime(200);
await page.waitForChanges();
const titleDiv = await page.doc.querySelector('.s-modal-header-content');
expect(titleDiv.textContent).toBe(title);
});
it("should open modal", async () => {
element.open();
await page.waitForChanges();
const visibilityStyle = element.getAttribute('visible', null);
expect(visibilityStyle).not.toBeNull();
});
it("should close modal", async () => {
element.close();
await page.waitForChanges();
const visibilityStyle = element.getAttribute('visible', null);
expect(visibilityStyle).toBeNull();
});
it("should close the modal by clicking on the overlay", async () => {
const overlay = await page.doc.querySelector('.s-modal-overlay');
const _callback = jest.fn();
overlay.addEventListener('click', _callback);
//@ts-ignore
overlay.click();
await page.waitForChanges();
const visibilityStyle = element.getAttribute('visible', null);
expect(visibilityStyle).toBeNull();
});
it('should start loading', async () => {
element.loading();
await page.waitForChanges();
expect(element.isLoading).toBe(true);
});
it('should stop loading', async () => {
element.loading();
await page.waitForChanges();
element.stopLoading();
await page.waitForChanges();
expect(element.isLoading).toBe(false);
});
// modalVisibilityChanged event on modal prop changes, it will toggle the modal as well.
});
});
//# sourceMappingURL=salla-modal.spec.js.map