@brandsync/wc 1.10.0 → 1.11.0

package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.cmp.test.js

@@ -0,0 +1,280 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+const parts = (root, p) => Array.from(sr(root).querySelectorAll(`[part~="${p}"]`));
+const text = (el) => (el?.textContent ?? '').replace(/\s+/g, ' ').trim();
+const STEPS = [
+    { id: 'company', label: 'Add company details', done: true },
+    { id: 'team', label: 'Invite your team', done: true },
+    { id: 'customers', label: 'Import customers', done: true },
+    { id: 'bank', label: 'Connect your bank', description: 'Import transactions automatically so payments are matched to invoices.', estimate: 'About 3 min', actionLabel: 'Connect bank' },
+    { id: 'template', label: 'Choose an invoice template' },
+    { id: 'invoice', label: 'Send your first invoice' },
+];
+describe('bs-onboarding-checklist', () => {
+    it('defaults to the panel, built on bs-card, as a labelled region', async () => {
+        const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+        expect(root).toEqualAttribute('type', 'panel');
+        expect(part(root, 'container').tagName).toBe('BS-CARD');
+        expect(part(root, 'container')).toEqualAttribute('role', 'region');
+        expect(part(root, 'container')).toEqualAttribute('aria-labelledby', 'heading');
+        expect(text(part(root, 'heading'))).toBe('Get started');
+    });
+    describe('panel', () => {
+        it('is 420px wide (Figma)', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-onboarding-checklist", { steps: STEPS })));
+            const root = wrap.querySelector('bs-onboarding-checklist');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(420);
+        });
+        it('shows "3 of 6 done", 50 % and a bar at 50', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            expect(text(part(root, 'progress'))).toContain('3 of 6 done');
+            expect(text(part(root, 'progress'))).toContain('50 %');
+            expect(sr(root).querySelector('bs-progress-linear').value).toBe(50);
+        });
+        it('lists every step; the first undone one is current, expanded, with aria-current', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            const items = Array.from(sr(root).querySelectorAll('ol > li'));
+            expect(items).toHaveLength(6);
+            const current = items.filter(li => li.getAttribute('aria-current') === 'step');
+            expect(current).toHaveLength(1);
+            expect(text(current[0])).toContain('Connect your bank');
+            expect(text(current[0])).toContain('Import transactions automatically');
+            expect(text(current[0])).toContain('About 3 min');
+        });
+        it('marks finished and unfinished steps for assistive tech', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            const rows = parts(root, 'step').filter(li => li.getAttribute('aria-current') !== 'step');
+            expect(text(rows[0])).toContain('Done');
+            expect(text(rows[3])).toContain('Not done');
+        });
+        it('colours the step status icons with the icon/action token', async () => {
+            const probe = document.createElement('div');
+            document.body.appendChild(probe);
+            probe.style.color = 'var(--bs-icon-action)';
+            const expected = getComputedStyle(probe).color;
+            probe.remove();
+            const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            const status = sr(root).querySelector('.bs-oc__status');
+            expect(getComputedStyle(status).color).toBe(expected);
+        });
+        it('has Skip for now and the step action on the current step, emitting with the step id', async () => {
+            const { root, waitForChanges } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            const events = [];
+            root.addEventListener('bsStepAction', (e) => events.push(['action', e.detail]));
+            root.addEventListener('bsStepSkip', (e) => events.push(['skip', e.detail]));
+            expect(text(part(root, 'skip'))).toBe('Skip for now');
+            expect(text(part(root, 'action'))).toBe('Connect bank');
+            part(root, 'skip').click();
+            part(root, 'action').click();
+            await waitForChanges();
+            expect(events).toEqual([['skip', { id: 'bank' }], ['action', { id: 'bank' }]]);
+        });
+        it('hides Skip for steps with skippable: false, and the action without an actionLabel', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { steps: [{ id: 'a', label: 'A', skippable: false }] }));
+            expect(part(root, 'skip')).toBeNull();
+            expect(part(root, 'action')).toBeNull();
+        });
+        it('moves the current step on when a step is marked done', async () => {
+            const { root, waitForChanges } = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            root.steps = STEPS.map(s => (s.id === 'bank' ? { ...s, done: true } : s));
+            await waitForChanges();
+            expect(text(sr(root).querySelector('[aria-current="step"]'))).toContain('Choose an invoice template');
+            expect(text(part(root, 'progress'))).toContain('4 of 6 done');
+            expect(text(part(root, 'progress'))).toContain('67 %');
+        });
+        it('shows the close button only when closable, and emits bsClose', async () => {
+            const a = await render(h("bs-onboarding-checklist", { steps: STEPS }));
+            expect(part(a.root, 'close')).toBeNull();
+            const { root, waitForChanges } = await render(h("bs-onboarding-checklist", { steps: STEPS, closable: true }));
+            let closed = 0;
+            root.addEventListener('bsClose', () => closed++);
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(closed).toBe(1);
+        });
+        it('handles an empty step list without dividing by zero', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", null));
+            expect(text(part(root, 'progress'))).toContain('0 of 0 done');
+            expect(text(part(root, 'progress'))).toContain('0 %');
+        });
+        it('lets props override the copy and progress template', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS, heading: "Setup", description: "Hello.", progressLabel: "{done}/{total}", skipLabel: "Later" }));
+            expect(text(part(root, 'heading'))).toBe('Setup');
+            expect(text(part(root, 'description'))).toBe('Hello.');
+            expect(text(part(root, 'progress'))).toContain('3/6');
+            expect(text(part(root, 'skip'))).toBe('Later');
+        });
+        it('renders the heading at the requested level, clamped to 1-6', async () => {
+            const tags = [];
+            for (const level of [1, 2, 9]) {
+                const { root } = await render(h("bs-onboarding-checklist", { steps: STEPS, headingLevel: level }));
+                tags.push(part(root, 'heading').tagName);
+            }
+            expect(tags).toEqual(['H1', 'H2', 'H6']);
+        });
+    });
+    describe('dashboard', () => {
+        it('shows the summary, progress, See all steps, and the current + next two steps as cards', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS }));
+            expect(text(part(root, 'heading'))).toBe('Finish setting up');
+            expect(text(part(root, 'description'))).toBe('3 of 6 done.');
+            expect(text(part(root, 'see-all'))).toBe('See all steps');
+            const cards = parts(root, 'step');
+            expect(cards).toHaveLength(3);
+            expect(text(cards[0])).toContain('Connect your bank');
+            expect(text(cards[0])).toContain('Start');
+            expect(cards[0].getAttribute('aria-current')).toBe('step');
+            expect(text(cards[1])).toContain('Choose an invoice template');
+            expect(text(cards[1])).toContain('After the step before');
+            expect(cards[1].getAttribute('aria-current')).toBeNull();
+        });
+        it('tints the current card\'s icon brand blue and the others neutral, as in the Figma', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS }));
+            const intents = parts(root, 'step-art').map(t => t.intent);
+            expect(intents).toEqual(['brand', 'default', 'default']);
+        });
+        it('keeps the step cards the same height when labels wrap differently', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '1077px' } }, h("bs-onboarding-checklist", { type: "dashboard", steps: [
+                    { id: 'a', label: 'Short' },
+                    { id: 'b', label: 'A much longer step label that wraps onto two lines' },
+                    { id: 'c', label: 'Medium label here' },
+                ] })));
+            const root = wrap.querySelector('bs-onboarding-checklist');
+            await new Promise(r => setTimeout(r, 200));
+            const surfaces = Array.from(sr(root).querySelectorAll('bs-card.bs-oc__step-card')).map(c => Math.round(c.shadowRoot.querySelector('.bs-card').getBoundingClientRect().height));
+            expect(new Set(surfaces).size).toBe(1);
+        });
+        it('makes the step cards 146px tall (Figma)', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '1077px' } }, h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS })));
+            const root = wrap.querySelector('bs-onboarding-checklist');
+            await new Promise(r => setTimeout(r, 200));
+            const cards = Array.from(sr(root).querySelectorAll('bs-card.bs-oc__step-card'));
+            expect(cards.map(c => Math.round(c.getBoundingClientRect().height))).toEqual([146, 146, 146]);
+            // The visible surface (border and background) is that tall too, not just the box around it.
+            expect(cards.map(c => Math.round(c.shadowRoot.querySelector('.bs-card').getBoundingClientRect().height))).toEqual([146, 146, 146]);
+        });
+        it('keeps the Start and See all steps links indented like the Figma (not pulled back under the label)', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS }));
+            const label = sr(root).querySelector('.bs-oc__step-card-label').getBoundingClientRect();
+            const start = part(root, 'action').shadowRoot.querySelector('[part="label"]').getBoundingClientRect();
+            // the link's text starts to the right of the label's left edge (the button's own padding)
+            expect(start.left - label.left).toBeGreaterThanOrEqual(8);
+            // Figma: about 12px in, not the 20px bs-button adds around an end icon.
+            expect(start.left - label.left).toBeLessThanOrEqual(14);
+        });
+        it('shows fewer cards when fewer steps remain', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "dashboard", steps: [{ id: 'a', label: 'A', done: true }, { id: 'b', label: 'B' }] }));
+            expect(parts(root, 'step')).toHaveLength(1);
+        });
+        it('emits bsStepAction (Start) with the id, bsOpen (See all steps) and bsClose', async () => {
+            const { root, waitForChanges } = await render(h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS, closable: true }));
+            const events = [];
+            root.addEventListener('bsStepAction', (e) => events.push(['action', e.detail]));
+            root.addEventListener('bsOpen', () => events.push('open'));
+            root.addEventListener('bsClose', () => events.push('close'));
+            part(root, 'action').click();
+            part(root, 'see-all').click();
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(events).toEqual([['action', { id: 'bank' }], 'open', 'close']);
+        });
+        it('offers a slot per step for its icon', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS }, h("svg", { slot: "icon-bank", id: "mine", viewBox: "0 0 24 24" }, h("path", { d: "M0 0" }))));
+            const slot = sr(root).querySelector('slot[name="icon-bank"]');
+            expect(slot.assignedElements().map(e => e.id)).toEqual(['mine']);
+        });
+        it('fills its container wide, and stacks the step cards in a narrow one', async () => {
+            const wide = await render(h("div", { style: { width: '1077px' } }, h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS })));
+            const w = wide.root.querySelector('bs-onboarding-checklist');
+            const cards = parts(w, 'step').map(c => c.getBoundingClientRect());
+            expect(cards[1].left).toBeGreaterThan(cards[0].left);
+            const narrow = await render(h("div", { style: { width: '380px' } }, h("bs-onboarding-checklist", { type: "dashboard", steps: STEPS })));
+            const n = narrow.root.querySelector('bs-onboarding-checklist');
+            const stacked = parts(n, 'step').map(c => c.getBoundingClientRect());
+            expect(stacked[1].top).toBeGreaterThan(stacked[0].top);
+        });
+    });
+    describe('launcher', () => {
+        it.each([
+            ['icon', 260],
+            ['inline', 300],
+        ])('the %s layout is %ipx wide (Figma)', async (layout, width) => {
+            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-onboarding-checklist", { type: "launcher", launcherLayout: layout, steps: STEPS })));
+            const root = wrap.querySelector('bs-onboarding-checklist');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(width);
+        });
+        it('sizes the ring launcher to its content (not collapsed, not full width)', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-onboarding-checklist", { type: "launcher", launcherLayout: "ring", steps: STEPS })));
+            const root = wrap.querySelector('bs-onboarding-checklist');
+            const w = part(root, 'container').getBoundingClientRect().width;
+            expect(w).toBeGreaterThan(120);
+            expect(w).toBeLessThan(220);
+            // Figma: 156px wide.
+            expect(Math.abs(w - 156)).toBeLessThanOrEqual(20);
+        });
+        it('shows Setup and "N% complete", as a single button that emits bsOpen', async () => {
+            const { root, waitForChanges } = await render(h("bs-onboarding-checklist", { type: "launcher", steps: STEPS }));
+            expect(text(part(root, 'launcher'))).toContain('Setup');
+            expect(text(part(root, 'launcher'))).toContain('50% complete');
+            expect(part(root, 'launcher').tagName).toBe('BUTTON');
+            let opened = 0;
+            root.addEventListener('bsOpen', () => opened++);
+            part(root, 'launcher').click();
+            await waitForChanges();
+            expect(opened).toBe(1);
+        });
+        it('takes custom progress text', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "launcher", steps: STEPS, progressText: "3 steps left" }));
+            expect(text(part(root, 'launcher'))).toContain('3 steps left');
+        });
+        it('uses a circular progress in the ring layout, and a chevron in the inline one', async () => {
+            const ring = await render(h("bs-onboarding-checklist", { type: "launcher", launcherLayout: "ring", steps: STEPS }));
+            expect(sr(ring.root).querySelector('bs-progress').value).toBe(50);
+            expect(sr(ring.root).querySelector('bs-icon-tile')).toBeNull();
+            const inline = await render(h("bs-onboarding-checklist", { type: "launcher", launcherLayout: "inline", steps: STEPS }));
+            expect(sr(inline.root).querySelector('.bs-oc__chevron')).not.toBeNull();
+            const icon = await render(h("bs-onboarding-checklist", { type: "launcher", steps: STEPS }));
+            expect(sr(icon.root).querySelector('bs-icon-tile')).not.toBeNull();
+            expect(sr(icon.root).querySelector('bs-progress')).toBeNull();
+        });
+        it('turns the inline launcher tile green when everything is done', async () => {
+            const { root } = await render(h("bs-onboarding-checklist", { type: "launcher", launcherLayout: "inline", steps: STEPS.map(s => ({ ...s, done: true })) }));
+            expect(part(root, 'art').intent).toBe('success');
+        });
+    });
+    describe('completion', () => {
+        it('is the "You\'re all set" card: success tile, 100 %, Go to dashboard and Hide checklist', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-onboarding-checklist", { type: "completion", steps: STEPS.map(s => ({ ...s, done: true })) })));
+            const root = wrap.querySelector('bs-onboarding-checklist');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(380);
+            expect(text(part(root, 'heading'))).toBe('You’re all set');
+            expect(part(root, 'art').intent).toBe('success');
+            expect(text(part(root, 'progress'))).toContain('6 of 6 done');
+            expect(text(part(root, 'progress'))).toContain('100 %');
+            expect(text(part(root, 'primary'))).toBe('Go to dashboard');
+            expect(text(part(root, 'secondary'))).toBe('Hide checklist');
+        });
+        it('uses the same base surface as the other forms (not a raised one)', async () => {
+            const bg = async (type) => {
+                const { root } = await render(h("bs-onboarding-checklist", { type: type, steps: STEPS.map(s => ({ ...s, done: true })) }));
+                const card = part(root, 'container');
+                expect(card).toEqualAttribute('surface', 'base');
+                return getComputedStyle(card.shadowRoot.querySelector('.bs-card')).backgroundColor;
+            };
+            expect(await bg('completion')).toBe(await bg('panel'));
+        });
+        it('makes the buttons full width and emits bsDone / bsHide', async () => {
+            const { root, waitForChanges } = await render(h("bs-onboarding-checklist", { type: "completion", steps: STEPS.map(s => ({ ...s, done: true })) }));
+            const card = part(root, 'container').getBoundingClientRect();
+            expect(part(root, 'primary').getBoundingClientRect().width).toBeGreaterThan(card.width - 40);
+            const events = [];
+            root.addEventListener('bsDone', () => events.push('done'));
+            root.addEventListener('bsHide', () => events.push('hide'));
+            part(root, 'primary').click();
+            part(root, 'secondary').click();
+            await waitForChanges();
+            expect(events).toEqual(['done', 'hide']);
+        });
+    });
+});