@triptease/tt-calendar 6.1.1 → 6.2.0

package/test/tt-calendar.test.ts

@@ -1,255 +0,0 @@
-import { elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { DateTime, Settings } from 'luxon';
-import '../src/tt-calendar.js'; // This handles the registration
-import { Calendar } from '../src/TtCalendar.js';
-
-describe('Calendar', () => {
-  describe('initialization', () => {
-    const originalNow = DateTime.now().toMillis();
-
-    afterEach(() => {
-      Settings.defaultZone = 'system';
-      Settings.now = () => originalNow;
-    });
-
-    it('should render with default props', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar></tt-calendar>`);
-      expect(el).to.exist;
-      expect(el.range).to.be.false;
-      expect(el.value).to.be.undefined;
-    });
-
-    ['Australia/Brisbane', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Etc/UTC'].forEach((timezone) => {
-      it(`should render the correct days of the week in ${timezone} timezone`, async () => {
-        Settings.defaultZone = timezone;
-        const now = DateTime.local(2025, 6, 4, 22, 0, 0).toMillis();
-        Settings.now = () => now;
-        const today = DateTime.now().toISO()!;
-        const el = await fixture<Calendar>(html` <tt-calendar value="${today}"></tt-calendar>`);
-
-        const sunday = DateTime.fromISO(today).startOf('week').plus({ days: 6 }).toFormat('ccc');
-
-        const headers = el.shadowRoot!.querySelectorAll('th');
-        expect(headers[0].textContent?.trim()).to.equal(sunday);
-
-        const dayRows = el.shadowRoot!.querySelectorAll('tr');
-        const secondRowOfDays = dayRows[2].querySelectorAll('td');
-
-        expect(secondRowOfDays[0].textContent?.trim()).to.equal('8');
-      });
-    });
-  });
-
-  describe('visibility', () => {
-    xit('should toggle visibility when calling toggleVisibility', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar></tt-calendar>`);
-
-      expect(el).to.be.instanceOf(Calendar);
-
-      el.toggleVisibility();
-      await elementUpdated(el);
-
-      await expect(el.shadowRoot!.querySelector('[part="dialog"]')?.getAttribute('inert')).not.to.exist;
-
-      el.toggleVisibility();
-      await elementUpdated(el);
-      await expect(el.shadowRoot!.querySelector('[part="dialog"]')?.getAttribute('inert')).to.exist;
-    });
-
-    xit('should close on outside click', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar></tt-calendar>`);
-      el.toggleVisibility();
-      await elementUpdated(el);
-
-      const focusOutEvent = new FocusEvent('focusout', {
-        relatedTarget: document.body,
-      });
-      el.shadowRoot!.querySelector('[part="calendar"]')?.dispatchEvent(focusOutEvent);
-      await elementUpdated(el);
-
-      await expect(el.shadowRoot!.querySelector('[part="calendar"]')?.getAttribute('inert')).to.exist;
-    });
-
-    xit('should focus calendar div when opened', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar></tt-calendar>`);
-      el.toggleVisibility();
-
-      await elementUpdated(el);
-
-      const calendar = el.shadowRoot!.querySelector('[part="calendar"]');
-      expect(calendar).to.exist;
-      expect(el.shadowRoot!.activeElement === calendar).to.be.true;
-    });
-  });
-
-  ['Australia/Brisbane', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Etc/UTC'].forEach((timezone) => {
-    describe(`single date selection in ${timezone} timezone`, () => {
-      const originalNow = DateTime.now().toMillis();
-
-      afterEach(() => {
-        Settings.defaultZone = 'system';
-        Settings.now = () => originalNow;
-      });
-
-      const selectDay = (day: string, el: HTMLElement): void => {
-        if (!el.shadowRoot) {
-          throw new Error('Shadow root not found');
-        }
-
-        const allCells = el.shadowRoot.querySelectorAll('td[role="gridcell"]');
-        const dayCell = Array.from(allCells).filter((cell) => cell.textContent?.trim() === day)[0] as HTMLElement;
-        dayCell.click();
-      };
-
-      it('should emit date-selection event when selecting a date', async () => {
-        Settings.defaultZone = timezone;
-        const el = await fixture<Calendar>(html` <tt-calendar value="2025-01-09"></tt-calendar>`);
-        const listener = oneEvent(el, 'date-selection');
-        await elementUpdated(el);
-        selectDay('4', el);
-
-        await elementUpdated(el);
-
-        const { detail } = await listener;
-        const actual = detail as Date;
-        const expected = '2025-01-04';
-        expect(actual).to.equal(expected);
-      });
-    });
-  });
-  ['Australia/Brisbane', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Etc/UTC'].forEach((timezone) => {
-    describe('date range selection', () => {
-      it(`should emit date-range-selection event when selecting range in ${timezone} timezone`, async () => {
-        Settings.defaultZone = timezone;
-        Settings.now = () => DateTime.local(2025, 7, 1, 22, 0, 0).toMillis();
-        const el = await fixture<Calendar>(html` <tt-calendar range></tt-calendar>`);
-        const listener = oneEvent(el, 'date-range-selection');
-
-        el.toggleVisibility();
-        await elementUpdated(el);
-
-        const days = el.shadowRoot!.querySelectorAll('.day');
-        const firstDay = days[0] as HTMLElement;
-        const lastDay = days[5] as HTMLElement;
-
-        firstDay.click();
-        lastDay.click();
-
-        await elementUpdated(el);
-
-        const { detail } = await listener;
-
-        expect(detail).to.have.property('startDate');
-        expect(detail).to.have.property('endDate');
-
-        const { startDate, endDate } = detail;
-        const expectedStartDate = '2025-07-01';
-        const expectedEndDate = '2025-07-06';
-        await expect(startDate).to.equal(expectedStartDate);
-        await expect(endDate).to.equal(expectedEndDate);
-      });
-
-      it('should disable dates before the start of the range when selecting', async () => {
-        Settings.defaultZone = timezone;
-        const el = await fixture<Calendar>(html` <tt-calendar range></tt-calendar>`);
-        el.toggleVisibility();
-        await elementUpdated(el);
-
-        const days = el.shadowRoot!.querySelectorAll('.day');
-        (days[5] as HTMLElement).click();
-        await elementUpdated(el);
-
-        await expect(days[4].getAttribute('aria-disabled')).to.equal('true');
-      });
-
-      it('should disable dates before min-date', async () => {
-        Settings.defaultZone = timezone;
-        Settings.now = () => DateTime.local(2025, 7, 1, 22, 0, 0).toMillis();
-        const el = await fixture<Calendar>(html` <tt-calendar min-date="2025-07-05"></tt-calendar>`);
-        el.toggleVisibility();
-        await elementUpdated(el);
-
-        const disabledDate = el.shadowRoot!.querySelector('[data-date="2025-07-04"]') as HTMLElement;
-        const enabledDate = el.shadowRoot!.querySelector('[data-date="2025-07-05"]') as HTMLElement;
-
-        await expect(disabledDate.getAttribute('aria-disabled')).to.equal('true');
-        await expect(enabledDate.getAttribute('aria-disabled')).to.equal('false');
-      });
-
-      it('should disable dates before max-date', async () => {
-        Settings.defaultZone = timezone;
-        Settings.now = () => DateTime.local(2025, 7, 1, 22, 0, 0).toMillis();
-        const el = await fixture<Calendar>(html` <tt-calendar max-date="2025-07-05"></tt-calendar>`);
-        el.toggleVisibility();
-        await elementUpdated(el);
-
-        const disabledDate = el.shadowRoot!.querySelector('[data-date="2025-07-06"]') as HTMLElement;
-        const enabledDate = el.shadowRoot!.querySelector('[data-date="2025-07-05"]') as HTMLElement;
-
-        await expect(disabledDate.getAttribute('aria-disabled')).to.equal('true');
-        await expect(enabledDate.getAttribute('aria-disabled')).to.equal('false');
-      });
-
-      it('should disable dates after selected date + max days', async () => {
-        Settings.defaultZone = timezone;
-        Settings.now = () => DateTime.local(2025, 7, 1, 22, 0, 0).toMillis();
-        const el = await fixture<Calendar>(html` <tt-calendar range max-days="1"></tt-calendar>`);
-        el.toggleVisibility();
-        await elementUpdated(el);
-
-        const dateStart = el.shadowRoot!.querySelector('[data-date="2025-07-06"]') as HTMLElement;
-        dateStart.click();
-        await elementUpdated(el);
-
-        const disabledDate = el.shadowRoot!.querySelector('[data-date="2025-07-08"]') as HTMLElement;
-
-        await expect(disabledDate.getAttribute('aria-disabled')).to.equal('true');
-      });
-    });
-  });
-
-  describe('clear selection', () => {
-    it('should clear selection', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar range></tt-calendar>`);
-      const listener = oneEvent(el, 'date-range-selection');
-
-      el.toggleVisibility();
-      await elementUpdated(el);
-
-      const clearButton = el.shadowRoot!.querySelector('button#clear-selection') as HTMLElement;
-      expect(clearButton).to.exist;
-      clearButton.click();
-
-      const { detail } = await listener;
-      expect(detail.startDate).to.be.undefined;
-      expect(detail.endDate).to.be.undefined;
-    });
-  });
-
-  describe('a11y', () => {
-    it('should have proper ARIA attributes', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar></tt-calendar>`);
-      el.toggleVisibility();
-      await elementUpdated(el);
-
-      const days = el.shadowRoot!.querySelectorAll('.day');
-      days.forEach((day) => {
-        expect(day.getAttribute('role')).to.equal('gridcell');
-        expect(day.getAttribute('aria-label')).to.exist;
-      });
-    });
-
-    it('should have proper ARIA selected states', async () => {
-      const el = await fixture<Calendar>(html` <tt-calendar range></tt-calendar>`);
-      el.toggleVisibility();
-      await elementUpdated(el);
-
-      const firstDay = el.shadowRoot!.querySelector('.day') as HTMLElement;
-      firstDay.click();
-
-      await elementUpdated(el);
-
-      await expect(firstDay?.getAttribute('aria-selected')).to.equal('true');
-    });
-  });
-});

package/tsconfig.cjs.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.packages.cjs.json",
-  "compilerOptions": {
-    "rootDir": "./",
-    "outDir": "dist/cjs"
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.packages.esm.json",
-  "compilerOptions": {
-    "rootDir": "./",
-    "outDir": "dist/esm"
-  },
-  "include": ["src/**/*.ts", "test/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}