@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/ui/bds-calendar.spec.ts

@@ -88,4 +88,180 @@ describe('bds-calendar', () => {
     expect(disabled.length).toBeGreaterThan(0);
     cleanup(el);
   });
+
+  it('shows the month matching `value` immediately on creation (view sync)', async () => {
+    const el = await fixture('<bds-calendar value="2020-05-15"></bds-calendar>');
+    const label = el.shadowRoot!.querySelector('.month-label')!;
+    expect(label.textContent).toContain('2020');
+    expect(label.textContent!.toLowerCase()).toContain('may');
+    cleanup(el);
+  });
+
+  it('uses a valid ARIA grid structure — role=row wrappers and gridcell wrappers around each day button', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    const grid = el.shadowRoot!.querySelector('[role="grid"]')!;
+    // NOTE: `:scope > [role="…"]` is not usable here — jsdom's CSS engine
+    // (nwsapi) fails to resolve `:scope` combinators when the query root is an
+    // element inside a ShadowRoot (confirmed: identical markup matches fine in
+    // the light DOM but returns 0 matches under attachShadow()). `.children`
+    // filtering enforces the same "direct child" semantics without relying on
+    // that broken combinator.
+    const directChildrenWithRole = (el: Element, role: string): Element[] =>
+      Array.from(el.children).filter(child => child.getAttribute('role') === role);
+
+    const rows = directChildrenWithRole(grid, 'row');
+    expect(rows.length).toBeGreaterThan(1);
+
+    const columnheaders = directChildrenWithRole(rows[0], 'columnheader');
+    expect(columnheaders.length).toBe(7);
+
+    const gridcells = directChildrenWithRole(rows[1], 'gridcell');
+    expect(gridcells.length).toBe(7);
+    // gridcell is a wrapper around the button, not the button itself
+    expect(gridcells[0].tagName).not.toBe('BUTTON');
+    expect(gridcells[0].querySelector('button.day')).not.toBeNull();
+    expect(gridcells[0].querySelector('button')?.getAttribute('role')).toBeNull();
+    cleanup(el);
+  });
+
+  it('keeps exactly one day tabbable after navigating to a month with no selected/today date', async () => {
+    const el = await fixture('<bds-calendar value="2020-05-15"></bds-calendar>') as BdsCalendar;
+    for (let i = 0; i < 3; i++) {
+      el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next month"]')!.click();
+      await el.updateComplete;
+    }
+    const tabbable = el.shadowRoot!.querySelectorAll('.day[tabindex="0"]');
+    expect(tabbable.length).toBe(1);
+    cleanup(el);
+  });
+
+  it('moves the roving tabindex and DOM focus when navigating with arrow keys', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    const initial = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-15"]')!;
+    // jsdom doesn't implement shadow-DOM focus retargeting, so stub
+    // shadowRoot.activeElement to simulate focus sitting on `initial`
+    // (same pattern used in bds-drawer.spec.ts).
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: initial, configurable: true });
+    initial.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await el.updateComplete;
+
+    const next = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-16"]')!;
+    expect(next.getAttribute('tabindex')).toBe('0');
+    expect(initial.getAttribute('tabindex')).toBe('-1');
+    cleanup(el);
+  });
+
+  it('does not select a date, update the form value, or fire bds-date-select when disabled', async () => {
+    const el = await fixture('<bds-calendar disabled></bds-calendar>') as BdsCalendar;
+    const dates: string[] = [];
+    el.addEventListener('bds-date-select', (e: Event) => {
+      dates.push((e as CustomEvent).detail.date);
+    });
+    const dayBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)')!;
+    expect(dayBtn.disabled).toBe(true);
+    dayBtn.click();
+    expect(dates.length).toBe(0);
+    expect(el.value).toBe('');
+    cleanup(el);
+  });
+
+  it('reflects the disabled state via formDisabledCallback', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>') as BdsCalendar;
+    expect(el.disabled).toBe(false);
+    el.formDisabledCallback(true);
+    expect(el.disabled).toBe(true);
+    await el.updateComplete;
+    expect(el.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+
+  it('exposes the --calendar_* component token surface with React-aligned defaults', () => {
+    const cssText = BdsCalendar.styles.cssText;
+    expect(cssText).toMatch(/border-radius:\s*var\(--calendar_button-radius,\s*var\(--bds-border_radius--circle\)\)/);
+    expect(cssText).toMatch(/var\(--calendar_day-bg--selected,\s*var\(--bds-color_interactive\)\)/);
+    expect(cssText).toMatch(/var\(--calendar_today-color,\s*var\(--bds-color_interactive\)\)/);
+    expect(cssText).toMatch(/var\(--calendar_day-bg--hover,\s*var\(--bds-color_bg--subtle\)\)/);
+  });
+
+  it('respects prefers-reduced-motion for day and nav-btn transitions', () => {
+    const cssText = BdsCalendar.styles.cssText;
+    expect(cssText).toMatch(/@media \(prefers-reduced-motion: reduce\)/);
+  });
+
+  it('defaults to Monday as the first weekday column', async () => {
+    const el = await fixture('<bds-calendar locale="en-US"></bds-calendar>');
+    const headers = el.shadowRoot!.querySelectorAll('.weekday');
+    expect(headers[0].textContent).toBe('Mon');
+    expect(headers[6].textContent).toBe('Sun');
+    cleanup(el);
+  });
+
+  it('honors first-day-of-week=0 (Sunday)', async () => {
+    const el = await fixture('<bds-calendar locale="en-US" first-day-of-week="0"></bds-calendar>');
+    expect(el.shadowRoot!.querySelector('.weekday')!.textContent).toBe('Sun');
+    cleanup(el);
+  });
+
+  it('renders `months` month grids', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15" months="2"></bds-calendar>');
+    expect(el.shadowRoot!.querySelectorAll('.grid').length).toBe(2);
+    const labels = Array.from(el.shadowRoot!.querySelectorAll('.month-label')).map(n => n.textContent);
+    expect(labels.some(l => /january/i.test(l ?? ''))).toBe(true);
+    expect(labels.some(l => /february/i.test(l ?? ''))).toBe(true);
+    cleanup(el);
+  });
+
+  it('disables dates rejected by the isDateDisallowed property', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    el.isDateDisallowed = (d: Date) => d.getDay() === 0 || d.getDay() === 6;
+    await el.updateComplete;
+    const sat = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-13"]')!; // Saturday
+    expect(sat.getAttribute('aria-disabled')).toBe('true');
+    cleanup(el);
+  });
+
+  it('navigates by a full year with Shift+PageDown', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    const initial = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-15"]')!;
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: initial, configurable: true });
+    initial.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', shiftKey: true, bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.month-label')!.textContent).toContain('2025');
+    cleanup(el);
+  });
+
+  it('localizes the month label via the locale attribute', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15" locale="nl-NL"></bds-calendar>');
+    expect(el.shadowRoot!.querySelector('.month-label')!.textContent!.toLowerCase()).toContain('januari');
+    cleanup(el);
+  });
+
+  it('keeps exactly one tabbable day and moves focus across months when months=2', async () => {
+    // Jan 31 2024 is real in January's grid and also appears as a greyed --outside
+    // leading cell in February's grid (buildMonthGrid always fills 42 cells).
+    // Exactly one real (non-outside) day must be tabbable, and arrow-key focus must
+    // land on the real Feb cell, not the disabled outside duplicate.
+    const el = await fixture('<bds-calendar value="2024-01-31" months="2"></bds-calendar>') as BdsCalendar;
+    expect(el.shadowRoot!.querySelectorAll('.day[tabindex="0"]').length).toBe(1);
+    const jan31 = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)[data-date="2024-01-31"]')!;
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: jan31, configurable: true });
+    jan31.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await el.updateComplete;
+    const feb1 = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)[data-date="2024-02-01"]')!;
+    expect(feb1.getAttribute('tabindex')).toBe('0');
+    expect(el.shadowRoot!.querySelectorAll('.day[tabindex="0"]').length).toBe(1);
+    cleanup(el);
+  });
+
+  it('never marks an outside day as selected/today, even when it matches the value', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-31"></bds-calendar>') as BdsCalendar;
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next month"]')!.click();
+    await el.updateComplete;
+    const cell = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-31"]')!;
+    expect(cell.classList.contains('--outside')).toBe(true);
+    expect(cell.classList.contains('--selected')).toBe(false);
+    expect(cell.getAttribute('aria-current')).toBeNull();
+    expect(cell.closest('[role="gridcell"]')!.getAttribute('aria-selected')).toBe('false');
+    cleanup(el);
+  });
 });