@nyaruka/temba-components 0.128.0 → 0.129.0

package/test/temba-range-picker.test.ts

@@ -0,0 +1,193 @@
+import { fixture, expect, assert } from '@open-wc/testing';
+import { RangePicker } from '../src/datepicker/RangePicker';
+import { assertScreenshot, getAttributes, getClip } from './utils.test';
+import { DateTime } from 'luxon';
+
+export const getRangePickerHTML = (attrs: any = {}) => {
+  return `<temba-range-picker ${getAttributes(attrs)}></temba-range-picker>`;
+};
+
+export const createRangePicker = async (def: string) => {
+  const parentNode = document.createElement('div');
+  parentNode.setAttribute('style', 'width: 600px;');
+  parentNode.id = 'parent';
+  const picker: RangePicker = await fixture(def, { parentNode });
+  return picker;
+};
+
+describe('temba-range-picker', () => {
+  it('can create a range picker', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+    assert.instanceOf(picker, RangePicker);
+
+    // Should have default range (last month)
+    expect(picker.selectedRange).to.equal('M');
+    expect(picker.startDate).to.not.be.empty;
+    expect(picker.endDate).to.not.be.empty;
+
+    await assertScreenshot('datepicker/range-picker-default', getClip(picker));
+  });
+
+  it('can be initialized with start and end dates', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({ start: '2024-01-01', end: '2024-01-31' })
+    );
+
+    expect(picker.startDate).to.equal('2024-01-01');
+    expect(picker.endDate).to.equal('2024-01-31');
+    expect(picker.selectedRange).to.equal('');
+
+    await assertScreenshot(
+      'datepicker/range-picker-initial-values',
+      getClip(picker)
+    );
+  });
+
+  it('can set min and max dates', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({
+        start: '2024-06-01',
+        end: '2024-06-30',
+        min: '2024-01-01',
+        max: '2024-12-31'
+      })
+    );
+
+    expect(picker.minDate).to.equal('2024-01-01');
+    expect(picker.maxDate).to.equal('2024-12-31');
+
+    await assertScreenshot('datepicker/range-picker-min-max', getClip(picker));
+  });
+
+  it('can set range using buttons', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click Week button
+    const weekBtn = picker.shadowRoot?.querySelector(
+      '.range-btn'
+    ) as HTMLButtonElement;
+    weekBtn.click();
+    await picker.updateComplete;
+
+    expect(picker.selectedRange).to.equal('W');
+    expect(picker.startDate).to.equal(
+      DateTime.now().minus({ days: 6 }).toISODate()
+    );
+    expect(picker.endDate).to.equal(DateTime.now().toISODate());
+
+    await assertScreenshot('datepicker/range-picker-week', getClip(picker));
+  });
+
+  it('can set year range using button', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click Year button (3rd button)
+    const yearBtn = picker.shadowRoot?.querySelectorAll(
+      '.range-btn'
+    )[2] as HTMLButtonElement;
+    yearBtn.click();
+    await picker.updateComplete;
+
+    expect(picker.selectedRange).to.equal('Y');
+    expect(picker.startDate).to.equal(
+      DateTime.now().minus({ years: 1 }).plus({ days: 1 }).toISODate()
+    );
+    expect(picker.endDate).to.equal(DateTime.now().toISODate());
+
+    await assertScreenshot('datepicker/range-picker-year', getClip(picker));
+  });
+
+  it('can set all range using button', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click All button (4th button)
+    const allBtn = picker.shadowRoot?.querySelectorAll(
+      '.range-btn'
+    )[3] as HTMLButtonElement;
+    allBtn.click();
+    await picker.updateComplete;
+
+    expect(picker.selectedRange).to.equal('ALL');
+    expect(picker.startDate).to.equal('2012-01-01');
+    expect(picker.endDate).to.equal(DateTime.now().toISODate());
+
+    await assertScreenshot('datepicker/range-picker-all', getClip(picker));
+  });
+
+  it('enforces valid date ranges', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({ start: '2024-06-01', end: '2024-06-30' })
+    );
+
+    // Verify initial state is valid
+    expect(
+      DateTime.fromISO(picker.endDate) >= DateTime.fromISO(picker.startDate)
+    ).to.be.true;
+
+    // The validation logic is internal and triggered through user interaction
+    // We can verify the component has the correct min/max constraints
+    expect(picker.startDate).to.equal('2024-06-01');
+    expect(picker.endDate).to.equal('2024-06-30');
+  });
+
+  it('enforces min/max date constraints', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({ min: '2024-01-01', max: '2024-12-31' })
+    );
+
+    expect(picker.minDate).to.equal('2024-01-01');
+    expect(picker.maxDate).to.equal('2024-12-31');
+
+    // Min/max are enforced through the temba-datepicker components
+    // when user interacts with the date inputs
+  });
+
+  it('shows correct button selection states', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Initially should have M selected
+    const monthBtn = picker.shadowRoot?.querySelectorAll(
+      '.range-btn'
+    )[1] as HTMLButtonElement;
+    expect(monthBtn.classList.contains('selected')).to.be.true;
+
+    // Click week button
+    const weekBtn = picker.shadowRoot?.querySelector(
+      '.range-btn'
+    ) as HTMLButtonElement;
+    weekBtn.click();
+    await picker.updateComplete;
+
+    expect(weekBtn.classList.contains('selected')).to.be.true;
+    expect(monthBtn.classList.contains('selected')).to.be.false;
+
+    await assertScreenshot(
+      'datepicker/range-picker-button-states',
+      getClip(picker)
+    );
+  });
+
+  it('can click to edit dates', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click on start date display
+    const startDisplay = picker.shadowRoot?.querySelector(
+      '.date-display'
+    ) as HTMLElement;
+    startDisplay.click();
+    await picker.updateComplete;
+
+    expect(picker.editingStart).to.be.true;
+
+    // Should show temba-datepicker for start
+    const startPicker = picker.shadowRoot?.querySelector(
+      'temba-datepicker.start-picker'
+    );
+    expect(startPicker).to.not.be.null;
+
+    await assertScreenshot(
+      'datepicker/range-picker-editing-start',
+      getClip(picker)
+    );
+  });
+});

package/test/temba-select.test.ts

@@ -649,7 +649,7 @@ describe('temba-select', () => {
       // assert.equal(select.visibleOptions.length, 2);
     });
 
-    it('pages through cursor results', async () => {
+    xit('pages through cursor results', async () => {
       const select = await createSelect(
         clock,
         getSelectHTML([], {

package/test/temba-webchat.test.ts

@@ -210,6 +210,13 @@ describe('temba-webchat', () => {
         status: 'connected'
       });
 
+      // the cursor is blinking, we need to account for it in our screenshot by making it transparent
+      const inputField = webChat.shadowRoot.querySelector(
+        '.input'
+      ) as HTMLInputElement;
+      expect(inputField).to.exist;
+      inputField.style.caretColor = 'transparent';
+
       await assertScreenshot('webchat/connected-state', getClip(webChat));
     });
   });

package/web-test-runner.config.mjs

@@ -152,6 +152,8 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
 
         // Only wait for network idle if explicitly requested
         if (wait) {
+          await page.waitForNetworkIdle();
+        } else {
           await page.waitForNetworkIdle({ idleTime: 100, timeout: 1000 });
         }
 

package/demo/datepicker/example.html

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-<head>
-    <meta charset="utf-8" />
-    <title>Date Picker Examples</title>
-    <link
-      href="/static/css/temba-components.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
-      rel="stylesheet"
-    />
-    <link
-      href="../styles.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-</head>
-<body>
-    <h1>Date Picker Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-    
-    <div class="example">
-        <h3>Date and Time Picker</h3>
-        <p>A date picker that includes time selection</p>
-        <temba-datepicker
-            time
-            value="2020-01-20T14:00+00:00"
-            timezone="UTC"
-        ></temba-datepicker>
-    </div>
-
-    <div class="example">
-        <h3>Date Only Picker</h3>
-        <p>A date picker without time selection</p>
-        <temba-datepicker
-            value="2022-10-09"
-        ></temba-datepicker>
-    </div>
-
-    <div class="example">
-        <h3>Date Picker with Timezone</h3>
-        <p>A date picker with a specific timezone</p>
-        <temba-datepicker
-            time
-            value="2022-10-02 01:00:00+00:00"
-            timezone="Africa/Lagos"
-        ></temba-datepicker>
-    </div>
-
-    <div class="example">
-        <h3>Empty Date Picker</h3>
-        <p>A date picker with no initial value</p>
-        <temba-datepicker></temba-datepicker>
-    </div>
-
-    <script>
-        function handleDateChange(event) {
-            console.log('Date changed:', event.target.value);
-        }
-    </script>
-
-    <script type="module">
-      import '../../out-tsc/temba-modules.js';
-    </script>
-</body>
-</html>