@aquera/nile-elements 0.0.79 → 0.0.81

package/dist/src/nile-stepper/nile-stepper.test.js

@@ -0,0 +1,165 @@
+"use strict";
+// import { fixture, expect, html } from "@open-wc/testing"
+// import './nile-stepper';
+// import { NileStepper } from "./nile-stepper";
+// import { NileStepperItem } from "../nile-stepper-item";
+// import { NileVerticalStepperItem } from "../nile-vertical-stepper-item";
+// describe('NileStepper', () => {
+//     it('should have default properties in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);
+//         expect(stepper.isVertical).to.be.false;
+//         expect(stepper.contentBelow).to.be.false;
+//         expect(stepper.currentStep).to.equal(0);
+//         expect(stepper.completedStep).to.equal(0);
+//         expect(stepper.size).to.equal('md');
+//         expect(stepper.icon).to.equal('tick');
+//     });
+//     it('should reflect properties to attributes in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical contentBelow current-step="1" completed-step="2" size="lg" icon="check"></nile-stepper>
+//     `);
+//         expect(stepper.getAttribute('vertical')).to.equal('');
+//         expect(stepper.getAttribute('contentBelow')).to.equal('');
+//         expect(stepper.getAttribute('current-step')).to.equal('1');
+//         expect(stepper.getAttribute('completed-step')).to.equal('2');
+//         expect(stepper.getAttribute('size')).to.equal('lg');
+//         expect(stepper.getAttribute('icon')).to.equal('check');
+//     });
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//         </nile-stepper>
+//         `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+//     it('should update NileStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+//     it('should render stepper with content below items correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper content-below>
+//         <nile-stepper-item title="Step 1" subtitle="Subtitle 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2" subtitle="Subtitle 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].contentBelow).to.be.true;
+//         expect(items[1].contentBelow).to.be.true;
+//     });
+//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE
+//     // it('should render stepper items with correct icons', async () => {
+//     //     const stepper = await fixture<NileStepper>(html`
+//     //     <nile-stepper icon="star">
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     </nile-stepper>
+//     // `);
+//     //     const items = stepper.querySelectorAll('nile-stepper-item');
+//     //     expect(items[0].icon).to.equal('star');
+//     //     expect(items[1].icon).to.equal('star');
+//     // });
+//     it('should emit events when currentStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="1" completed-step="4">
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         let currentChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-current-change', (event) => {
+//             currentChangeEvent = event as CustomEvent;
+//         });
+//         stepper.currentStep = 2;
+//         await stepper.updateComplete;
+//         expect(currentChangeEvent).to.exist;
+//         expect(currentChangeEvent!.detail.value).to.equal(2);
+//         expect(items[1].isCurrent).to.equal(true);
+//         expect(items[0].isComplete).to.equal(true);
+//     });
+//     it('should emit events when completedStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper completed-step="1"></nile-stepper>
+//     `);
+//         let completedChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-completed-change', (event) => {
+//             completedChangeEvent = event as CustomEvent;
+//         });
+//         stepper.completedStep = 2;
+//         await stepper.updateComplete;
+//         expect(completedChangeEvent).to.exist;
+//         expect(completedChangeEvent!.detail.value).to.equal(2);
+//     });
+//     it('should render slot content inside stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="2">
+//         <nile-stepper-item title="Step 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//         expect(items[1].isCurrent).to.equal(true);
+//     });
+// })
+// describe('NileVerticalStepperItem', () => {
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+//     it('should render slot content inside vertical stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item title="Step 1"></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item title="Step 2"></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//     });
+// })
+//# sourceMappingURL=nile-stepper.test.js.map

package/dist/src/nile-stepper/nile-stepper.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-stepper.test.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.test.ts"],"names":[],"mappings":"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","sourcesContent":["// import { fixture, expect, html } from \"@open-wc/testing\"\n// import './nile-stepper';\n// import { NileStepper } from \"./nile-stepper\";\n// import { NileStepperItem } from \"../nile-stepper-item\";\n// import { NileVerticalStepperItem } from \"../nile-vertical-stepper-item\";\n// describe('NileStepper', () => {\n//     it('should have default properties in NileStepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);\n//         expect(stepper.isVertical).to.be.false;\n//         expect(stepper.contentBelow).to.be.false;\n//         expect(stepper.currentStep).to.equal(0);\n//         expect(stepper.completedStep).to.equal(0);\n//         expect(stepper.size).to.equal('md');\n//         expect(stepper.icon).to.equal('tick');\n//     });\n\n//     it('should reflect properties to attributes in NileStepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper vertical contentBelow current-step=\"1\" completed-step=\"2\" size=\"lg\" icon=\"check\"></nile-stepper>\n//     `);\n//         expect(stepper.getAttribute('vertical')).to.equal('');\n//         expect(stepper.getAttribute('contentBelow')).to.equal('');\n//         expect(stepper.getAttribute('current-step')).to.equal('1');\n//         expect(stepper.getAttribute('completed-step')).to.equal('2');\n//         expect(stepper.getAttribute('size')).to.equal('lg');\n//         expect(stepper.getAttribute('icon')).to.equal('check');\n//     });\n\n//     it('should render vertical stepper correctly', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper vertical>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//         </nile-stepper>\n//         `);\n//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;\n//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;\n//     });\n\n//     it('should update NileStepperItems when NileStepper properties change', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper>\n//         <nile-stepper-item></nile-stepper-item>\n//         <nile-stepper-item></nile-stepper-item>\n//         <nile-stepper-item></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         stepper.currentStep = 2;\n//         stepper.completedStep = 3;\n//         await stepper.updateComplete;\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         expect(items[0].isComplete).to.be.true;\n//         expect(items[1].isCurrent).to.be.true;\n//         expect(items[2].isComplete).to.be.true;\n//     });\n\n//     it('should render stepper with content below items correctly', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper content-below>\n//         <nile-stepper-item title=\"Step 1\" subtitle=\"Subtitle 1\"></nile-stepper-item>\n//         <nile-stepper-item title=\"Step 2\" subtitle=\"Subtitle 2\"></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         expect(items[0].contentBelow).to.be.true;\n//         expect(items[1].contentBelow).to.be.true;\n//     });\n\n//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE\n//     // it('should render stepper items with correct icons', async () => {\n//     //     const stepper = await fixture<NileStepper>(html`\n//     //     <nile-stepper icon=\"star\">\n//     //     <nile-stepper-item></nile-stepper-item>\n//     //     <nile-stepper-item></nile-stepper-item>\n//     //     </nile-stepper>\n//     // `);\n//     //     const items = stepper.querySelectorAll('nile-stepper-item');\n//     //     expect(items[0].icon).to.equal('star');\n//     //     expect(items[1].icon).to.equal('star');\n//     // });\n\n//     it('should emit events when currentStep changes', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper current-step=\"1\" completed-step=\"4\">\n//             <nile-stepper-item></nile-stepper-item>\n//             <nile-stepper-item></nile-stepper-item>\n//             <nile-stepper-item></nile-stepper-item>\n//             <nile-stepper-item></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         let currentChangeEvent: CustomEvent | null = null;\n//         stepper.addEventListener('nile-current-change', (event) => {\n//             currentChangeEvent = event as CustomEvent;\n//         });\n//         stepper.currentStep = 2;\n//         await stepper.updateComplete;\n//         expect(currentChangeEvent).to.exist;\n//         expect(currentChangeEvent!.detail.value).to.equal(2);\n//         expect(items[1].isCurrent).to.equal(true);\n//         expect(items[0].isComplete).to.equal(true);\n//     });\n\n//     it('should emit events when completedStep changes', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper completed-step=\"1\"></nile-stepper>\n//     `);\n//         let completedChangeEvent: CustomEvent | null = null;\n//         stepper.addEventListener('nile-completed-change', (event) => {\n//             completedChangeEvent = event as CustomEvent;\n//         });\n//         stepper.completedStep = 2;\n//         await stepper.updateComplete;\n//         expect(completedChangeEvent).to.exist;\n//         expect(completedChangeEvent!.detail.value).to.equal(2);\n//     });\n\n//     it('should render slot content inside stepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper current-step=\"2\">\n//         <nile-stepper-item title=\"Step 1\"></nile-stepper-item>\n//         <nile-stepper-item title=\"Step 2\"></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         expect(items.length).to.equal(2);\n//         expect(items[0].title).to.equal('Step 1');\n//         expect(items[1].title).to.equal('Step 2');\n//         expect(items[1].isCurrent).to.equal(true);\n//     });\n// })\n\n// describe('NileVerticalStepperItem', () => {\n//     it('should render vertical stepper correctly', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper vertical>\n//         <nile-stepper-item></nile-stepper-item>\n//         <nile-stepper-item></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;\n//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;\n//     });\n\n//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//           <nile-stepper vertical>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//           </nile-stepper>\n//         `);\n//         stepper.currentStep = 2;\n//         stepper.completedStep = 3;\n//         await stepper.updateComplete;\n//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');\n//         expect(items[0].isComplete).to.be.true;\n//         expect(items[1].isCurrent).to.be.true;\n//         expect(items[2].isComplete).to.be.true;\n//     });\n\n//     it('should render slot content inside vertical stepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//           <nile-stepper vertical>\n//             <nile-vertical-stepper-item title=\"Step 1\"></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item title=\"Step 2\"></nile-vertical-stepper-item>\n//           </nile-stepper>\n//         `);\n//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');\n//         expect(items.length).to.equal(2);\n//         expect(items[0].title).to.equal('Step 1');\n//         expect(items[1].title).to.equal('Step 2');\n//     });\n// })\n"]}