@salla.sa/twilight-components
Version:
Salla Web Component
103 lines (102 loc) • 4.15 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { newSpecPage } from "@stencil/core/testing";
import { SallaConditionalFields } from "../salla-conditional-fields";
describe("salla conditional fields", () => {
// it("should build", () => {
// expect(new SallaConditionalFields()).toBeTruthy();
// });
describe("checking for prop values", () => {
let page;
//@ts-ignore
let element;
it("should trigger change event", async () => {
page = await newSpecPage({
components: [SallaConditionalFields],
html: `<salla-conditional-fields>
<input
type="checkbox"
name="test"
value="123"
data-show-when="test = 123"
>
</salla-conditional-fields>`
});
element = await page.doc.querySelector('salla-conditional-fields');
const _callback = jest.fn();
salla.event.on('change', _callback);
await page.waitForChanges();
const input = await page.doc.querySelector("input");
input.checked = true;
await page.waitForChanges();
expect(_callback).toHaveBeenCalled();
});
it("should trigger change event", async () => {
page = await newSpecPage({
components: [SallaConditionalFields],
html: `<salla-conditional-fields>
<input
id="input123"
type="checkbox"
name="inputOne"
value="123"
data-show-when="inputOne = 123"
>
<input
id="input876"
type="checkbox"
name="inputTwo"
value="876"
data-show-when="inputTwo = 123"
>
</salla-conditional-fields>`
});
element = await page.doc.querySelector('salla-conditional-fields');
const _callback = jest.fn();
salla.event.on('change', _callback);
await page.waitForChanges();
const input = await page.doc.querySelector("input");
input.checked = true;
await page.waitForChanges();
expect(_callback).toHaveBeenCalled();
});
it("should ignore the change for unsupported inputs", async () => {
let cb = jest.fn();
salla.log = (str) => cb(str);
page = await newSpecPage({
components: [SallaConditionalFields],
html: `<salla-conditional-fields>
<input
type="radio"
name="test"
value="123"
data-show-when="test = 123"
>
</salla-conditional-fields>`
});
element = await page.doc.querySelector('salla-conditional-fields');
const input = await page.doc.querySelector("input");
input.checked = true;
await page.waitForChanges();
expect(cb).toHaveBeenLastCalledWith("Ignore the change because is not support input: INPUT");
});
it("should show inputs for selected and equal items", async () => {
page = await newSpecPage({
components: [SallaConditionalFields],
html: `<salla-conditional-fields>
<input
type="checkbox"
checked
name="test"
value="123"
data-show-when="test = 123"
>
</salla-conditional-fields>`
});
element = await page.doc.querySelector('salla-conditional-fields');
expect(element.children[0].classList.contains('hidden')).toBeFalsy();
});
});
});
//# sourceMappingURL=salla-conditional-fields.spec.js.map