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

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { newSpecPage } from "@stencil/core/testing";
import { SallaButton } from "../salla-button";
describe("salla button", () => {
  it('should build', () => {
    expect(new SallaButton()).toBeTruthy();
  });
  describe("checking for prop values", () => {
    let page;
    let element;
    beforeEach(async () => {
      page = await newSpecPage({
        components: [SallaButton],
        html: '<salla-button></salla-button>'
      });
      element = await page.doc.querySelector('salla-button');
    });
    it('should work for shape prop', async () => {
      expect(element.shape).toBe('btn');
    });
    it('should work for color prop', async () => {
      expect(element.color).toBe('primary');
    });
    it('should work for fill prop', async () => {
      expect(element.fill).toBe('solid');
    });
    it('should work for size prop', async () => {
      expect(element.size).toBe('medium');
    });
    it('should work for width prop', async () => {
      expect(element.width).toBe('normal');
    });
    it('should work for loading prop', async () => {
      expect(element.loading).toBe(false);
    });
    it('should work for loaderPosition prop', async () => {
      expect(element.loaderPosition).toBe('after');
    });
    // Testing for prop value changes
    it('should change shape prop', async () => {
      element.shape = 'icon';
      await page.waitForChanges();
      expect(element.shape).toBe('icon');
    });
    it('should change color prop', async () => {
      element.color = 'success';
      await page.waitForChanges();
      expect(element.color).toBe('success');
    });
    it('should change fill prop', async () => {
      element.fill = 'outline';
      await page.waitForChanges();
      expect(element.fill).toBe('outline');
    });
    it('should change size prop', async () => {
      element.size = 'small';
      await page.waitForChanges();
      expect(element.size).toBe('small');
    });
    it('should change width prop', async () => {
      element.width = 'wide';
      await page.waitForChanges();
      expect(element.width).toBe('wide');
    });
    it('should change loading prop', async () => {
      element.loading = true;
      await page.waitForChanges();
      expect(element.loading).toBe(true);
    });
    it('should change loaderPosition prop', async () => {
      element.loaderPosition = "start";
      await page.waitForChanges();
      expect(element.loaderPosition).toBe("start");
    });
    it("should render href", async () => {
      element.href = "https://google.com";
      await page.waitForChanges();
      expect(element.href).toBe("https://google.com");
    });
    it("should render anchor tag for href prop", async () => {
      element.href = "https://google.com";
      await page.waitForChanges();
      expect(element.children[0].nodeName).toBe("A");
    });
    it("should render button tag only for undefined (default) href prop", async () => {
      await page.waitForChanges();
      expect(element.children[0].nodeName).toBe("BUTTON");
    });
  });
  describe('checking for method calls', () => {
    let page;
    let element;
    beforeEach(async () => {
      page = await newSpecPage({
        components: [SallaButton],
        html: '<salla-button href="https://google.com"></salla-button>',
      });
      element = await page.doc.querySelector('salla-button');
    });
    it("should be able to call method to change the body of the button", async () => {
      await page.root.setText("Hello");
      await page.waitForChanges();
      expect(page.rootInstance.text.innerHTML).toBe("Hello");
    });
    it("should be able to call method to start loading animation", async () => {
      await page.root.load();
      await page.waitForChanges();
      expect(element.loading).toBe(true);
    });
    it("should be able to call method to start loading animation at the center by hiding the text", async () => {
      element.loaderPosition = "center";
      await page.waitForChanges();
      await page.root.load();
      await page.waitForChanges();
      expect(element.loading).toBe(true);
    });
    it("should be able to call method to stop loading animation at the center by showing the text", async () => {
      element.loaderPosition = "center";
      await page.waitForChanges();
      await page.root.stop();
      await page.waitForChanges();
      expect(element.loading).toBe(false);
    });
    it("should be able to call method to stop loading animation", async () => {
      await page.root.stop();
      await page.waitForChanges();
      expect(element.loading).toBe(false);
    });
    it("should be able to call method to disable the button", async () => {
      await page.root.disable();
      await page.waitForChanges();
      expect(element.disabled).toBe(true);
    });
    it("should be able to call method to disable the button", async () => {
      await page.root.enable();
      await page.waitForChanges();
      expect(element.disabled).toBe(false);
    });
  });
});
//# sourceMappingURL=salla-button.spec.js.map