@salla.sa/twilight-components/dist/collection/components/salla-product-availability/test/salla-product-availability.spec.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { newSpecPage } from "@stencil/core/testing";
import { SallaProductAvailability } from "../salla-product-availability";
describe('salla product availability', () => {
  it('should build', () => {
    expect(new SallaProductAvailability()).toBeTruthy();
  });
  describe('checking for props', () => {
    let page;
    let element;
    beforeEach(async () => {
      page = await newSpecPage({
        components: [SallaProductAvailability],
        html: `<salla-product-availability is-subscribed="true" notify-options-availability="false"></salla-product-availability>`
      });
      element = await page.doc.querySelector('salla-product-availability');
    });
    it('should work for channels prop', async () => {
      element.channels = 'sms,mobile';
      await page.waitForChanges();
      expect(element.channels).toBe('sms,mobile');
    });
    it('should work for productId prop', async () => {
      element.productId = 123;
      await page.waitForChanges();
      expect(element.productId).toBe(123);
    });
    it('should work for isSubscribed prop', async () => {
      element.isSubscribed = true;
      await page.waitForChanges();
      expect(element.isSubscribed).toBe(true);
    });
  });
  describe('checking for UI', () => {
    let page;
    let element;
    beforeEach(async () => {
      page = await newSpecPage({
        components: [SallaProductAvailability],
        html: `<salla-product-availability></salla-product-availability>`
      });
      element = await page.doc.querySelector('salla-product-availability');
    });
    it('should render subscribed message only', async () => {
      element.isSubscribed = true;
      await page.waitForChanges();
      const subscribedMessage = await page.doc.querySelector('.s-product-availability-subscribed');
      expect(subscribedMessage).not.toBeNull();
    });
    it('should render salla button', async () => {
      element.isSubscribed = false;
      await page.waitForChanges();
      const button = await page.doc.querySelector('salla-button');
      expect(button).not.toBeNull();
    });
    it.skip('should render the modal', async () => {
      salla.config.isUser = jest.fn().mockReturnValue(false);
      element.notifyOptionsAvailability = true;
      element.isSubscribed = false;
      await page.waitForChanges();
      const subscribedMessage = await page.doc.querySelector('.s-product-availability-body');
      expect(subscribedMessage).not.toBeNull();
    });
  });
  describe('checking for button clicks', () => {
    let page;
    let element;
    beforeEach(async () => {
      page = await newSpecPage({
        components: [SallaProductAvailability],
        html: `<salla-product-availability></salla-product-availability>`
      });
      element = await page.doc.querySelector('salla-product-availability');
    });
    it('should close the modal using cancel button', async () => {
      element.isSubscribed = false;
      await page.waitForChanges();
      const cancelButton = await page.doc.querySelector('salla-button.modal-cancel-btn');
      cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.click();
      await page.waitForChanges();
      const modalElement = await page.doc.querySelector('salla-modal');
      expect(modalElement).toBeNull();
    });
    it('should close the modal using cancel button', async () => {
      element.isSubscribed = false;
      await page.waitForChanges();
      const submitButton = await page.doc.querySelector('salla-button.submit-btn');
      submitButton === null || submitButton === void 0 ? void 0 : submitButton.click();
      await page.waitForChanges();
      const modalElement = await page.doc.querySelector('salla-modal');
      // TODO: It would be great if there is another way to test the function specifically.
      expect(modalElement).toBeNull();
    });
  });
});
//# sourceMappingURL=salla-product-availability.spec.js.map