@nyaruka/temba-components 0.129.1 → 0.129.3

package/test/temba-utils-uuid.test.ts

@@ -0,0 +1,48 @@
+import { assert } from '@open-wc/testing';
+import { generateUUID } from '../src/utils';
+
+describe('UUID Generation', () => {
+  it('generates a valid UUID v4 format', () => {
+    const uuid = generateUUID();
+
+    // Check that it's a string
+    assert.isString(uuid);
+
+    // Check UUID v4 format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
+    const uuidPattern =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    assert.match(uuid, uuidPattern, 'Should match UUID v4 format');
+
+    // Check length
+    assert.equal(uuid.length, 36);
+
+    // Check that it contains hyphens in the right places
+    assert.equal(uuid[8], '-');
+    assert.equal(uuid[13], '-');
+    assert.equal(uuid[18], '-');
+    assert.equal(uuid[23], '-');
+  });
+
+  it('generates unique UUIDs', () => {
+    const uuid1 = generateUUID();
+    const uuid2 = generateUUID();
+    const uuid3 = generateUUID();
+
+    // All should be different
+    assert.notEqual(uuid1, uuid2);
+    assert.notEqual(uuid2, uuid3);
+    assert.notEqual(uuid1, uuid3);
+  });
+
+  it('generates many unique UUIDs', () => {
+    const uuids = new Set();
+    const count = 1000;
+
+    for (let i = 0; i < count; i++) {
+      uuids.add(generateUUID());
+    }
+
+    // All should be unique
+    assert.equal(uuids.size, count, 'All generated UUIDs should be unique');
+  });
+});

package/test/temba-webchat.test.ts

@@ -10,7 +10,6 @@ import {
 import { expect, assert } from '@open-wc/testing';
 
 let clock: any;
-mockNow('2021-03-31T00:31:00.000-00:00');
 
 const TAG = 'temba-webchat';
 
@@ -35,12 +34,11 @@ class MockWebSocket {
     this.url = url;
     // Only auto-open if enabled
     if (this.autoOpen) {
-      setTimeout(() => {
-        this.readyState = 1; // OPEN
-        if (this.onopen) {
-          this.onopen(new Event('open'));
-        }
-      }, 0);
+      // Use synchronous execution instead of setTimeout to avoid clock advancing issues
+      this.readyState = 1; // OPEN
+      if (this.onopen) {
+        this.onopen(new Event('open'));
+      }
     }
   }
 
@@ -85,8 +83,11 @@ describe('temba-webchat', () => {
   let mockWebSocket: MockWebSocket;
   let webSocketStub: SinonStub;
   let cookieStub: SinonStub;
+  let mockedNow: SinonStub;
 
   beforeEach(() => {
+    mockedNow = mockNow('2021-03-31T00:31:00.000-00:00');
+
     // Mock WebSocket
     originalWebSocket = window.WebSocket;
     webSocketStub = stub(window, 'WebSocket').callsFake((url: string) => {
@@ -98,13 +99,18 @@ describe('temba-webchat', () => {
     // Mock document.cookie
     cookieStub = stub(document, 'cookie').value('');
 
-    clock = useFakeTimers();
+    // Use fake timers but with a shorter timeout to avoid test hanging
+    clock = useFakeTimers({
+      shouldAdvanceTime: true,
+      advanceTimeDelta: 10
+    });
   });
 
   afterEach(() => {
     clock.restore();
     webSocketStub.restore();
     cookieStub.restore();
+    mockedNow.restore();
     window.WebSocket = originalWebSocket;
   });
 
@@ -185,6 +191,7 @@ describe('temba-webchat', () => {
 
       await mouseClickElement(toggleElement);
       await webChat.updateComplete;
+      clock.tick(50);
 
       // Now it should be open and connecting
       expect(webChat.open).to.equal(true);
@@ -235,12 +242,14 @@ describe('temba-webchat', () => {
 
       await mouseClickElement(toggleElement);
       await webChat.updateComplete;
+      clock.tick(50);
 
       expect(webChat.open).to.equal(true);
 
       // Click toggle again
       await mouseClickElement(toggleElement);
       await webChat.updateComplete;
+      clock.tick(50);
 
       expect(webChat.open).to.equal(false);
     });
@@ -288,6 +297,7 @@ describe('temba-webchat', () => {
       // Open chat - this should trigger socket connection
       webChat.open = true;
       await webChat.updateComplete;
+      clock.tick(50);
 
       expect(webChat.status).to.equal('connecting');
       expect(webSocketStub.called).to.be.true;
@@ -296,6 +306,7 @@ describe('temba-webchat', () => {
       // Now simulate the socket opening
       mockWebSocket.manualOpen();
       await webChat.updateComplete;
+      clock.tick(50);
 
       expect(webChat.status).to.equal('connected');
     });
@@ -329,7 +340,7 @@ describe('temba-webchat', () => {
 
       webChat.open = true;
       await webChat.updateComplete;
-      await clock.tick(0);
+      clock.tick(50);
 
       expect(mockWebSocket.url).to.equal(
         'wss://localhost.textit.com/wc/connect/my-channel/'
@@ -344,7 +355,7 @@ describe('temba-webchat', () => {
 
       webChat.open = true;
       await webChat.updateComplete;
-      await clock.tick(0);
+      clock.tick(50);
 
       expect(mockWebSocket.url).to.equal(
         'wss://localhost.textit.com/wc/connect/my-channel/?chat_id=chat-123'
@@ -358,9 +369,13 @@ describe('temba-webchat', () => {
 
       webChat.open = true;
       await webChat.updateComplete;
-      await clock.tick(0);
 
-      expect(mockWebSocket.sentMessages).to.have.length(1);
+      // Manually open the socket to trigger the start_chat command
+      mockWebSocket.manualOpen();
+      await webChat.updateComplete;
+      clock.tick(100);
+
+      expect(mockWebSocket.sentMessages.length).to.be.at.least(1);
       const sentMessage = JSON.parse(mockWebSocket.sentMessages[0]);
       expect(sentMessage.type).to.equal('start_chat');
     });
@@ -379,6 +394,7 @@ describe('temba-webchat', () => {
 
       mockWebSocket.manualOpen();
       await webChat.updateComplete;
+      clock.tick(50);
 
       const sentMessage = JSON.parse(mockWebSocket.sentMessages[0]);
       expect(sentMessage.type).to.equal('start_chat');
@@ -393,11 +409,13 @@ describe('temba-webchat', () => {
 
       webChat.open = true;
       await webChat.updateComplete;
+      clock.tick(50);
 
       expect(webChat.status).to.equal('connecting');
 
       mockWebSocket.close();
       await webChat.updateComplete;
+      clock.tick(50);
 
       expect(webChat.status).to.equal('disconnected');
     });

package/test/utils.test.ts

@@ -10,11 +10,11 @@ interface Clip {
 import { expect, fixture, html, assert, waitUntil } from '@open-wc/testing';
 import MouseHelper from './MouseHelper';
 import { Store } from '../src/store/Store';
-import { replace, stub } from 'sinon';
-import { Select, SelectOption } from '../src/select/Select';
-import { Options } from '../src/options/Options';
+import { stub } from 'sinon';
+import { Select, SelectOption } from '../src/form/select/Select';
+import { Options } from '../src/display/Options';
 import { Attachment } from '../src/interfaces';
-import { Compose } from '../src/compose/Compose';
+import { Compose } from '../src/form/Compose';
 
 export interface CodeMock {
   endpoint: RegExp;
@@ -297,11 +297,7 @@ export const loadStore = async () => {
 };
 
 export const mockNow = (isodate: string) => {
-  const now = DateTime.fromISO(isodate);
-  // mock the current time
-  replace(DateTime, 'now', () => {
-    return now;
-  });
+  return stub(DateTime, 'now').returns(DateTime.fromISO(isodate));
 };
 
 export const getOptions = (select: Select<SelectOption>): Options => {

package/web-dev-server.config.mjs

@@ -30,7 +30,7 @@ export default {
                   path.resolve(`./demo/data/flows/${uuid}.json`),
                   JSON.stringify({ definition: JSON.parse(body) }, null, 2)
                 );
-                console.log(`Flow ${uuid} saved successfully.`);
+                // console.log(`Flow ${uuid} saved successfully.`);
                 context.body = {
                   status: 'success',
                   message: `Flow ${uuid} saved successfully.`,

package/demo/alert/example.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-<head>
-    <meta charset="utf-8" />
-    <title>Alert 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>Alert Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-    
-    <div class="example">
-        <h3>Basic Alert</h3>
-        <p>A simple alert component</p>
-        <temba-alert>This is a basic alert message.</temba-alert>
-    </div>
-
-    <div class="example">
-        <h3>Success Alert</h3>
-        <p>An alert for successful actions</p>
-        <temba-alert level="success">Your changes have been saved successfully!</temba-alert>
-    </div>
-
-    <div class="example">
-        <h3>Warning Alert</h3>
-        <p>An alert for warning messages</p>
-        <temba-alert level="warning">Please review your input before proceeding.</temba-alert>
-    </div>
-
-    <div class="example">
-        <h3>Error Alert</h3>
-        <p>An alert for error messages</p>
-        <temba-alert level="error">An error occurred while processing your request.</temba-alert>
-    </div>
-
-    <div class="example">
-        <h3>Info Alert</h3>
-        <p>An alert for informational messages</p>
-        <temba-alert level="info">This feature is currently in beta testing.</temba-alert>
-    </div>
-
-    <div class="example">
-        <h3>Dismissible Alert</h3>
-        <p>An alert that can be closed</p>
-        <temba-alert dismissible>This alert can be dismissed by clicking the X button.</temba-alert>
-    </div>
-
-    <script type="module">
-      import '../../out-tsc/temba-modules.js';
-    </script>
-</body>
-</html>

package/demo/button/example.html

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <title>Button 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>Button Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-
-    <div class="example">
-      <h3>Basic Button</h3>
-      <p>A simple button component</p>
-      <temba-button name="Click Me"></temba-button>
-    </div>
-
-    <div class="example">
-      <h3>Primary Button</h3>
-      <p>A primary styled button</p>
-      <temba-button primary name="Primary Action"></temba-button>
-    </div>
-
-    <div class="example">
-      <h3>Secondary Button</h3>
-      <p>A secondary styled button</p>
-      <temba-button secondary name="Secondary Action"></temba-button>
-    </div>
-
-    <div class="example">
-      <h3>Small Button</h3>
-      <p>A smaller button variant</p>
-      <temba-button small name="Small Button"></temba-button>
-    </div>
-
-    <div class="example">
-      <h3>Disabled Button</h3>
-      <p>A button that cannot be clicked</p>
-      <temba-button disabled name="Disabled Button"></temba-button>
-    </div>
-
-    <div class="example">
-      <h3>Multiple Buttons</h3>
-      <p>Several buttons in a row with proper constraints</p>
-      <div style="display: flex; gap: 10px; flex-wrap: wrap; max-width: 400px">
-        <div style="flex: 0 0 auto; max-width: 100px">
-          <temba-button name="Save"></temba-button>
-        </div>
-        <div style="flex: 0 0 auto; max-width: 100px">
-          <temba-button secondary name="Cancel"></temba-button>
-        </div>
-        <div style="flex: 0 0 auto; max-width: 100px">
-          <temba-button primary name="Submit"></temba-button>
-        </div>
-      </div>
-    </div>
-
-    <script type="module">
-      import '../../out-tsc/temba-modules.js';
-    </script>
-  </body>
-</html>

package/demo/chart/horizontal-demo.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Horizontal Chart Demo</title>
-
-    <link rel="stylesheet" href="../styles.css" />
-  </head>
-  <body>
-    <div class="demo-container">
-      <h1>Horizontal Bar Chart Demo</h1>
-
-      <div class="demo-section">
-        <h2>Regular Vertical Bar Chart</h2>
-        <temba-chart
-          type="bar"
-          header="Monthly Sales (Vertical)"
-          style="height: 300px; display: block"
-        ></temba-chart>
-      </div>
-
-      <div class="demo-section">
-        <h2>Horizontal Bar Chart</h2>
-        <temba-chart
-          type="bar"
-          horizontal
-          header="Monthly Sales (Horizontal)"
-          style="height: 300px; display: block"
-        ></temba-chart>
-      </div>
-
-      <div class="demo-section">
-        <h2>Horizontal Bar Chart with Percentages</h2>
-        <temba-chart
-          type="bar"
-          horizontal
-          percent
-          header="Monthly Sales with Percentages (Horizontal)"
-          style="height: 300px; display: block"
-        ></temba-chart>
-      </div>
-    </div>
-
-    <script>
-      // Sample data for the charts
-      const sampleData = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
-        datasets: [
-          {
-            label: 'Product A',
-            data: [65, 59, 80, 81, 56, 55],
-            backgroundColor: 'rgba(54, 162, 235, 0.6)',
-            borderColor: 'rgba(54, 162, 235, 1)',
-            borderWidth: 1
-          },
-          {
-            label: 'Product B',
-            data: [28, 48, 40, 19, 86, 27],
-            backgroundColor: 'rgba(255, 99, 132, 0.6)',
-            borderColor: 'rgba(255, 99, 132, 1)',
-            borderWidth: 1
-          }
-        ]
-      };
-
-      // Wait for the DOM to be ready and charts to be defined
-      document.addEventListener('DOMContentLoaded', () => {
-        setTimeout(() => {
-          const charts = document.querySelectorAll('temba-chart');
-          charts.forEach((chart) => {
-            chart.data = sampleData;
-          });
-        }, 100);
-      });
-    </script>
-    <script type="module">
-      import '../../out-tsc/temba-modules.js';
-    </script>
-  </body>
-</html>

package/demo/checkbox/example.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-<head>
-    <meta charset="utf-8" />
-    <title>Checkbox 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>Checkbox Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-    
-    <div class="example">
-        <h3>Basic Checkbox</h3>
-        <p>A simple checkbox component</p>
-        <temba-checkbox label="Check this out" checked></temba-checkbox>
-    </div>
-
-    <div class="example">
-        <h3>Unchecked Checkbox</h3>
-        <p>A checkbox that starts unchecked</p>
-        <temba-checkbox label="This is not checked"></temba-checkbox>
-    </div>
-
-    <div class="example">
-        <h3>Checkbox with Help Text</h3>
-        <p>A checkbox with additional help text</p>
-        <temba-checkbox
-            name="schedule"
-            label="Schedule for later delivery"
-            help_text="This is something you should think long and hard about"
-        ></temba-checkbox>
-    </div>
-
-    <div class="example">
-        <h3>Disabled Checkbox</h3>
-        <p>A checkbox that cannot be changed</p>
-        <temba-checkbox
-            name="disabled"
-            label="You can't check this one"
-            help_text="It is disabled, don't click it"
-            disabled
-        ></temba-checkbox>
-    </div>
-
-    <div class="example">
-        <h3>Multiple Checkboxes</h3>
-        <p>Several checkboxes in a row</p>
-        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
-            <temba-checkbox label="Option 1" checked></temba-checkbox>
-            <temba-checkbox label="Option 2"></temba-checkbox>
-            <temba-checkbox label="Option 3" checked></temba-checkbox>
-        </div>
-    </div>
-
-    <script type="module">
-      import '../../out-tsc/temba-modules.js';
-    </script>
-</body>
-</html>

package/demo/compose/example.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-<head>
-    <meta charset="utf-8" />
-    <title>Compose 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>Compose Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-    
-    <div class="example">
-        <h3>Basic Compose</h3>
-        <p>A simple compose component for text input</p>
-        <temba-compose placeholder="Type your message here..."></temba-compose>
-    </div>
-
-    <div class="example">
-        <h3>Compose with Counter</h3>
-        <p>A compose component with character counting</p>
-        <temba-compose 
-            placeholder="Enter your message (max 160 characters)..."
-            counter
-            maxlength="160">
-        </temba-compose>
-    </div>
-
-    <div class="example">
-        <h3>Compose with Attachments</h3>
-        <p>A compose component that supports file attachments</p>
-        <temba-compose 
-            placeholder="Write your message and attach files..."
-            attachments>
-        </temba-compose>
-    </div>
-
-    <div class="example">
-        <h3>Rich Text Compose</h3>
-        <p>A compose component with rich text formatting</p>
-        <temba-compose 
-            placeholder="Format your text with rich editing..."
-            rich-text>
-        </temba-compose>
-    </div>
-
-    <div class="example">
-        <h3>Multi-line Compose</h3>
-        <p>A compose component with multiple lines</p>
-        <temba-compose 
-            placeholder="Enter a longer message..."
-            rows="4">
-        </temba-compose>
-    </div>
-
-    <script type="module">
-      import '../../out-tsc/temba-modules.js';
-    </script>
-</body>
-</html>