@nyaruka/temba-components 0.122.0 → 0.124.0

package/test/utils.test.ts

@@ -11,6 +11,8 @@ 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';
 
 export interface CodeMock {
   endpoint: RegExp;
@@ -188,7 +190,9 @@ export const assertScreenshot = async (
     await waitUntil(waitFor.predicate);
   }
 
-  const threshold = 0.1;
+  // detect if we're running in copilot's environment and use adaptive threshold
+  const isCopilotEnvironment = (window as any).isCopilotEnvironment;
+  const threshold = isCopilotEnvironment ? 1.0 : 0.1;
   const exclude: Clip[] = [];
 
   try {
@@ -238,7 +242,7 @@ export const getClip = (ele: HTMLElement) => {
   return newClip;
 };
 
-export const mouseClickElement = async (ele: HTMLElement) => {
+export const mouseClickElement = async (ele: HTMLElement | Element) => {
   const bounds = ele.getBoundingClientRect();
   await mouseClick(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
 };
@@ -277,3 +281,53 @@ export const mockNow = (isodate: string) => {
     return now;
   });
 };
+
+export const getOptions = (select: Select<SelectOption>): Options => {
+  return select.shadowRoot.querySelector('temba-options[visible]');
+};
+
+export const clickOption = async (
+  clock: any,
+  select: Select<SelectOption>,
+  index: number
+) => {
+  const options = getOptions(select);
+  const option = options.shadowRoot.querySelector(
+    `[data-option-index="${index}"]`
+  ) as HTMLDivElement;
+
+  await mouseClickElement(option);
+  await options.updateComplete;
+  await select.updateComplete;
+  await clock.runAll();
+
+  checkTimers(clock);
+};
+export const openSelect = async (clock: any, select: Select<SelectOption>) => {
+  const container = select.shadowRoot.querySelector('.select-container');
+  container.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+  clock.runAll();
+
+  // add more explicit waiting and clock ticks
+  await select.updateComplete;
+  clock.runAll();
+
+  // ensure options are visible before proceeding
+  await waitFor(100);
+  clock.runAll();
+};
+
+export const openAndClick = async (
+  clock: any,
+  select: Select<SelectOption>,
+  idx: number
+) => {
+  await openSelect(clock, select);
+
+  // Add this line to ensure proper timing when running as part of a test suite
+  await select.updateComplete;
+  clock.tick(50); // Give extra time for options to render
+
+  await clickOption(clock, select, idx);
+};

package/test-assets/list/flow-results.json

@@ -0,0 +1,17 @@
+[
+  {
+    "key": "name",
+    "name": "Name",
+    "categories": ["Text"]
+  },
+  {
+    "key": "age", 
+    "name": "Age",
+    "categories": ["Number"]
+  },
+  {
+    "key": "gender",
+    "name": "Gender",
+    "categories": ["Male", "Female", "Other"]
+  }
+]

package/test-assets/list/runs.json

@@ -0,0 +1,126 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "id": 1,
+      "uuid": "run-uuid-1",
+      "contact": {
+        "uuid": "contact-uuid-1",
+        "name": "John Doe",
+        "urn": "tel:+1234567890",
+        "anon_display": "1234567890"
+      },
+      "flow": {
+        "uuid": "flow-uuid-1",
+        "name": "Registration Flow"
+      },
+      "exit_type": "completed",
+      "exited_on": "2023-12-01T10:30:00.000Z",
+      "created_on": "2023-12-01T10:00:00.000Z",
+      "modified_on": "2023-12-01T10:30:00.000Z",
+      "responded": true,
+      "values": {
+        "name": {
+          "name": "Name",
+          "key": "name", 
+          "value": "John Doe",
+          "category": "Text"
+        },
+        "age": {
+          "name": "Age",
+          "key": "age",
+          "value": "25",
+          "category": "Number"
+        }
+      }
+    },
+    {
+      "id": 2,
+      "uuid": "run-uuid-2", 
+      "contact": {
+        "uuid": "contact-uuid-2",
+        "name": "Jane Smith",
+        "urn": "tel:+1987654321",
+        "anon_display": "1987654321"
+      },
+      "flow": {
+        "uuid": "flow-uuid-1",
+        "name": "Registration Flow"
+      },
+      "exit_type": "interrupted",
+      "exited_on": "2023-12-01T11:15:00.000Z",
+      "created_on": "2023-12-01T11:00:00.000Z",
+      "modified_on": "2023-12-01T11:15:00.000Z",
+      "responded": false,
+      "values": {}
+    },
+    {
+      "id": 3,
+      "uuid": "run-uuid-3",
+      "contact": {
+        "uuid": "contact-uuid-3", 
+        "name": null,
+        "urn": "tel:+1122334455",
+        "anon_display": "1122334455"
+      },
+      "flow": {
+        "uuid": "flow-uuid-1",
+        "name": "Registration Flow"
+      },
+      "exit_type": "expired",
+      "exited_on": "2023-12-01T12:00:00.000Z",
+      "created_on": "2023-12-01T11:30:00.000Z",
+      "modified_on": "2023-12-01T12:00:00.000Z",
+      "responded": true,
+      "values": {
+        "name": {
+          "name": "Name",
+          "key": "name",
+          "value": "Anonymous User",
+          "category": "Text"
+        }
+      }
+    },
+    {
+      "id": 4,
+      "uuid": "run-uuid-4",
+      "contact": {
+        "uuid": "contact-uuid-4",
+        "name": "Active User",
+        "urn": "tel:+1555666777",
+        "anon_display": "1555666777"
+      },
+      "flow": {
+        "uuid": "flow-uuid-1",
+        "name": "Registration Flow"
+      },
+      "exit_type": null,
+      "exited_on": null,
+      "created_on": "2023-12-01T12:30:00.000Z",
+      "modified_on": "2023-12-01T12:45:00.000Z",
+      "responded": true,
+      "values": {}
+    },
+    {
+      "id": 5,
+      "uuid": "run-uuid-5",
+      "contact": {
+        "uuid": "contact-uuid-5",
+        "name": "Pending User",
+        "urn": "tel:+1888999000",
+        "anon_display": "1888999000"
+      },
+      "flow": {
+        "uuid": "flow-uuid-1",
+        "name": "Registration Flow"
+      },
+      "exit_type": null,
+      "exited_on": null,
+      "created_on": "2023-12-01T13:00:00.000Z",
+      "modified_on": "2023-12-01T13:00:00.000Z",
+      "responded": false,
+      "values": {}
+    }
+  ]
+}

package/test-assets/style.css

@@ -25,6 +25,29 @@ temba-dialog {
   caret-color: transparent;
 }
 
+/* Disable CSS animations for deterministic screenshots */
+*,
+*::before,
+*::after {
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+}
+
+/* Override CSS custom properties for animation control in tests */
+:root {
+  --test-animation-duration: 0s !important;
+  --test-animation-play-state: paused !important;
+}
+
+/* Force disable spin animations by overriding keyframes - this pierces shadow DOM */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(0deg); }
+}
+
 html {
   --transition-speed: 0ms !important;
   --input-caret: transparent !important;

package/web-test-runner.config.mjs

@@ -186,7 +186,7 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
           await page.screenshot({ path: testFile, clip });
 
           try {
-            const result = await checkScreenshot(filename);
+            const result = await checkScreenshot(filename, excluded, threshold);
             // const end = Date.now();
             // console.log(`Screenshot took ${end - start}ms`);
             resolve(result);
@@ -351,6 +351,28 @@ export default {
           '--force-device-scale-factor=1',
           '--no-sandbox',
           '--disable-gpu',
+          '--disable-font-subpixel-positioning',
+          '--disable-lcd-text',
+          '--force-prefers-reduced-motion',
+          '--disable-background-timer-throttling',
+          '--disable-backgrounding-occluded-windows',
+          '--disable-renderer-backgrounding',
+          // additional flags for consistent rendering across environments
+          '--disable-gpu-sandbox',
+          '--disable-software-rasterizer',
+          '--disable-background-networking',
+          '--disable-default-apps',
+          '--disable-extensions',
+          '--disable-sync',
+          '--disable-translate',
+          '--hide-crash-restore-bubble',
+          '--metrics-recording-only',
+          '--no-first-run',
+          '--safebrowsing-disable-auto-update',
+          '--use-mock-keychain',
+          '--disable-ipc-flooding-protection',
+          '--disable-component-update',
+          '--disable-domain-reliability',
         ],
         headless: true,
       },
@@ -363,13 +385,17 @@ export default {
         await page.setUserAgent(
           'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36'
         );
+        
+        // detect if we're running in copilot's environment
+        const isCopilotEnvironment = process.env.COPILOT_API_URL || process.env.COPILOT_AGENT_CALLBACK_URL;
+        
+        // inject script into every document that loads
+        await page.evaluateOnNewDocument((watched, copilotEnv) => {
+          window.watched = watched;
+          window.isCopilotEnvironment = copilotEnv;
+        }, config.watch, !!isCopilotEnvironment);
+        
         await page.once('load', async () => {
-          await page.addScriptTag({
-            content: `
-            window.watched = ${config.watch};
-          `,
-          });
-
           await wireScreenshots(page, context, wait, replaceScreenshots);
         });
 

package/xliff/es.xlf

@@ -15,6 +15,9 @@
 <trans-unit id="s4788ee206c4570c7">
   <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
+<trans-unit id="s73b4d70c02f4b4e0">
+  <source>No options</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/fr.xlf

@@ -14,6 +14,9 @@
 <trans-unit id="s4788ee206c4570c7">
   <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
+<trans-unit id="s73b4d70c02f4b4e0">
+  <source>No options</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/pt.xlf

@@ -14,6 +14,9 @@
 <trans-unit id="s4788ee206c4570c7">
   <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
+<trans-unit id="s73b4d70c02f4b4e0">
+  <source>No options</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/out-tsc/src/outboxmonitor/OutboxMonitor.js

@@ -1,136 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ResizeElement } from '../ResizeElement';
-import { fetchResults } from '../utils';
-const MIN_BACKLOG = 500000;
-export class OutboxMonitor extends ResizeElement {
-    constructor() {
-        super(...arguments);
-        this.backlogSize = 0;
-        this.endpoint = '/msg/menu/';
-        this.folders = {};
-        this.fetches = 0;
-        this.msgsPerSecond = 0;
-    }
-    static get styles() {
-        return css `
-      .monitor {
-        margin: 1rem;
-        margin-bottom: -0.5rem;
-      }
-
-      .header {
-        font-weight: bold;
-      }
-
-      .estimate {
-        font-size: 0.9em;
-      }
-    `;
-    }
-    fetchFolders() {
-        fetchResults(this.endpoint).then((items) => {
-            items
-                .filter((item) => item.id === 'outbox' || item.id === 'sent' || item.id === 'failed')
-                .forEach((item) => {
-                if (this.folders[item.id]) {
-                    this.folders[item.id].current = item.count;
-                }
-                else {
-                    this.folders[item.id] = {
-                        start: item.count,
-                        current: item.count
-                    };
-                }
-            });
-            if (this.firstFetch) {
-                this.lastFetch = new Date();
-            }
-            else {
-                this.firstFetch = new Date();
-            }
-            this.fetches++;
-            this.scheduleRefresh(Math.min(this.fetches * 5000, 60000));
-            const outbox = this.folders['outbox'];
-            this.backlogSize = outbox.current;
-            if (outbox.current > 1) {
-                this.estimateCompletion();
-            }
-        });
-    }
-    estimateCompletion() {
-        if (this.lastFetch) {
-            const time = (this.lastFetch.getTime() - this.firstFetch.getTime()) / 1000;
-            const sent = this.folders['sent'];
-            const failed = this.folders['failed'];
-            const totalCompleted = sent.current + failed.current;
-            const startCount = sent.start + failed.start;
-            const sentInWindow = totalCompleted - startCount;
-            this.msgsPerSecond = sentInWindow / time;
-            const remaining = this.folders['outbox'].current;
-            const secondsRemaining = remaining / this.msgsPerSecond;
-            this.estimatedCompletionDate = new Date(new Date().getTime() + secondsRemaining * 1000);
-        }
-    }
-    scheduleRefresh(time) {
-        setTimeout(() => {
-            this.fetchFolders();
-        }, time);
-    }
-    firstUpdated(changes) {
-        if (changes.has('endpoint') && this.endpoint) {
-            this.fetchFolders();
-        }
-    }
-    hasBacklog() {
-        return this.backlogSize > MIN_BACKLOG;
-    }
-    render() {
-        const roundedRate = Math.round(this.msgsPerSecond);
-        if (this.hasBacklog() && this.estimatedCompletionDate && !this.isMobile()) {
-            return html `<div class="monitor">
-        <temba-alert
-          ><div class="header">Outbox Notice</div>
-          <div class="estimate">
-            If your outbox becomes too full, you won't be able to send new flows
-            or broadcasts. Your channels are currently sending at
-            ${roundedRate.toLocaleString()}
-            message${roundedRate == 1 ? '' : 's'} per second. At that rate, your
-            outbox will clear
-            <temba-date
-              value="${this.estimatedCompletionDate.toISOString()}"
-              display="duration"
-            ></temba-date
-            >.
-          </div></temba-alert
-        >
-      </div>`;
-        }
-        else {
-            return null;
-        }
-    }
-}
-__decorate([
-    property({ type: Number })
-], OutboxMonitor.prototype, "backlogSize", void 0);
-__decorate([
-    property({ type: String })
-], OutboxMonitor.prototype, "endpoint", void 0);
-__decorate([
-    property({ type: Object })
-], OutboxMonitor.prototype, "firstFetch", void 0);
-__decorate([
-    property({ type: Object })
-], OutboxMonitor.prototype, "lastFetch", void 0);
-__decorate([
-    property({ type: Number })
-], OutboxMonitor.prototype, "fetches", void 0);
-__decorate([
-    property({ type: Number })
-], OutboxMonitor.prototype, "msgsPerSecond", void 0);
-__decorate([
-    property({ type: Object })
-], OutboxMonitor.prototype, "estimatedCompletionDate", void 0);
-//# sourceMappingURL=OutboxMonitor.js.map

package/out-tsc/src/outboxmonitor/OutboxMonitor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OutboxMonitor.js","sourceRoot":"","sources":["../../../src/outboxmonitor/OutboxMonitor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ResizeElement } from '../ResizeElement';\nimport { fetchResults } from '../utils';\n\nconst MIN_BACKLOG = 500000;\nexport class OutboxMonitor extends ResizeElement {\n  @property({ type: Number })\n  backlogSize = 0;\n\n  @property({ type: String })\n  endpoint = '/msg/menu/';\n\n  folders: { [id: string]: { start: number; current: number } } = {};\n\n  @property({ type: Object })\n  firstFetch: Date;\n\n  @property({ type: Object })\n  lastFetch: Date;\n\n  @property({ type: Number })\n  fetches = 0;\n\n  @property({ type: Number })\n  msgsPerSecond = 0;\n\n  @property({ type: Object })\n  estimatedCompletionDate: Date;\n\n  public static get styles() {\n    return css`\n      .monitor {\n        margin: 1rem;\n        margin-bottom: -0.5rem;\n      }\n\n      .header {\n        font-weight: bold;\n      }\n\n      .estimate {\n        font-size: 0.9em;\n      }\n    `;\n  }\n\n  private fetchFolders() {\n    fetchResults(this.endpoint).then((items) => {\n      items\n        .filter(\n          (item) =>\n            item.id === 'outbox' || item.id === 'sent' || item.id === 'failed'\n        )\n        .forEach((item) => {\n          if (this.folders[item.id]) {\n            this.folders[item.id].current = item.count;\n          } else {\n            this.folders[item.id] = {\n              start: item.count,\n              current: item.count\n            };\n          }\n        });\n\n      if (this.firstFetch) {\n        this.lastFetch = new Date();\n      } else {\n        this.firstFetch = new Date();\n      }\n      this.fetches++;\n\n      this.scheduleRefresh(Math.min(this.fetches * 5000, 60000));\n\n      const outbox = this.folders['outbox'];\n\n      this.backlogSize = outbox.current;\n      if (outbox.current > 1) {\n        this.estimateCompletion();\n      }\n    });\n  }\n\n  private estimateCompletion() {\n    if (this.lastFetch) {\n      const time =\n        (this.lastFetch.getTime() - this.firstFetch.getTime()) / 1000;\n      const sent = this.folders['sent'];\n      const failed = this.folders['failed'];\n\n      const totalCompleted = sent.current + failed.current;\n      const startCount = sent.start + failed.start;\n\n      const sentInWindow = totalCompleted - startCount;\n      this.msgsPerSecond = sentInWindow / time;\n\n      const remaining = this.folders['outbox'].current;\n      const secondsRemaining = remaining / this.msgsPerSecond;\n\n      this.estimatedCompletionDate = new Date(\n        new Date().getTime() + secondsRemaining * 1000\n      );\n    }\n  }\n\n  private scheduleRefresh(time: number) {\n    setTimeout(() => {\n      this.fetchFolders();\n    }, time);\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('endpoint') && this.endpoint) {\n      this.fetchFolders();\n    }\n  }\n\n  public hasBacklog() {\n    return this.backlogSize > MIN_BACKLOG;\n  }\n\n  public render() {\n    const roundedRate = Math.round(this.msgsPerSecond);\n    if (this.hasBacklog() && this.estimatedCompletionDate && !this.isMobile()) {\n      return html`<div class=\"monitor\">\n        <temba-alert\n          ><div class=\"header\">Outbox Notice</div>\n          <div class=\"estimate\">\n            If your outbox becomes too full, you won't be able to send new flows\n            or broadcasts. Your channels are currently sending at\n            ${roundedRate.toLocaleString()}\n            message${roundedRate == 1 ? '' : 's'} per second. At that rate, your\n            outbox will clear\n            <temba-date\n              value=\"${this.estimatedCompletionDate.toISOString()}\"\n              display=\"duration\"\n            ></temba-date\n            >.\n          </div></temba-alert\n        >\n      </div>`;\n    } else {\n      return null;\n    }\n  }\n}\n"]}

package/src/outboxmonitor/OutboxMonitor.ts

@@ -1,148 +0,0 @@
-import { css, html, PropertyValueMap } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ResizeElement } from '../ResizeElement';
-import { fetchResults } from '../utils';
-
-const MIN_BACKLOG = 500000;
-export class OutboxMonitor extends ResizeElement {
-  @property({ type: Number })
-  backlogSize = 0;
-
-  @property({ type: String })
-  endpoint = '/msg/menu/';
-
-  folders: { [id: string]: { start: number; current: number } } = {};
-
-  @property({ type: Object })
-  firstFetch: Date;
-
-  @property({ type: Object })
-  lastFetch: Date;
-
-  @property({ type: Number })
-  fetches = 0;
-
-  @property({ type: Number })
-  msgsPerSecond = 0;
-
-  @property({ type: Object })
-  estimatedCompletionDate: Date;
-
-  public static get styles() {
-    return css`
-      .monitor {
-        margin: 1rem;
-        margin-bottom: -0.5rem;
-      }
-
-      .header {
-        font-weight: bold;
-      }
-
-      .estimate {
-        font-size: 0.9em;
-      }
-    `;
-  }
-
-  private fetchFolders() {
-    fetchResults(this.endpoint).then((items) => {
-      items
-        .filter(
-          (item) =>
-            item.id === 'outbox' || item.id === 'sent' || item.id === 'failed'
-        )
-        .forEach((item) => {
-          if (this.folders[item.id]) {
-            this.folders[item.id].current = item.count;
-          } else {
-            this.folders[item.id] = {
-              start: item.count,
-              current: item.count
-            };
-          }
-        });
-
-      if (this.firstFetch) {
-        this.lastFetch = new Date();
-      } else {
-        this.firstFetch = new Date();
-      }
-      this.fetches++;
-
-      this.scheduleRefresh(Math.min(this.fetches * 5000, 60000));
-
-      const outbox = this.folders['outbox'];
-
-      this.backlogSize = outbox.current;
-      if (outbox.current > 1) {
-        this.estimateCompletion();
-      }
-    });
-  }
-
-  private estimateCompletion() {
-    if (this.lastFetch) {
-      const time =
-        (this.lastFetch.getTime() - this.firstFetch.getTime()) / 1000;
-      const sent = this.folders['sent'];
-      const failed = this.folders['failed'];
-
-      const totalCompleted = sent.current + failed.current;
-      const startCount = sent.start + failed.start;
-
-      const sentInWindow = totalCompleted - startCount;
-      this.msgsPerSecond = sentInWindow / time;
-
-      const remaining = this.folders['outbox'].current;
-      const secondsRemaining = remaining / this.msgsPerSecond;
-
-      this.estimatedCompletionDate = new Date(
-        new Date().getTime() + secondsRemaining * 1000
-      );
-    }
-  }
-
-  private scheduleRefresh(time: number) {
-    setTimeout(() => {
-      this.fetchFolders();
-    }, time);
-  }
-
-  protected firstUpdated(
-    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    if (changes.has('endpoint') && this.endpoint) {
-      this.fetchFolders();
-    }
-  }
-
-  public hasBacklog() {
-    return this.backlogSize > MIN_BACKLOG;
-  }
-
-  public render() {
-    const roundedRate = Math.round(this.msgsPerSecond);
-    if (this.hasBacklog() && this.estimatedCompletionDate && !this.isMobile()) {
-      return html`<div class="monitor">
-        <temba-alert
-          ><div class="header">Outbox Notice</div>
-          <div class="estimate">
-            If your outbox becomes too full, you won't be able to send new flows
-            or broadcasts. Your channels are currently sending at
-            ${roundedRate.toLocaleString()}
-            message${roundedRate == 1 ? '' : 's'} per second. At that rate, your
-            outbox will clear
-            <temba-date
-              value="${this.estimatedCompletionDate.toISOString()}"
-              display="duration"
-            ></temba-date
-            >.
-          </div></temba-alert
-        >
-      </div>`;
-    } else {
-      return null;
-    }
-  }
-}