@nyaruka/temba-components 0.127.0 → 0.129.0

package/test/temba-select.test.ts

@@ -5,12 +5,12 @@ import { Options } from '../src/options/Options';
 import { Select, SelectOption } from '../src/select/Select';
 import {
   assertScreenshot,
-  delay,
   getClip,
   getOptions,
   loadStore,
   openAndClick,
-  openSelect
+  openSelect,
+  waitForSelectPagination
 } from './utils.test';
 
 const colors = [
@@ -649,7 +649,6 @@ describe('temba-select', () => {
       // assert.equal(select.visibleOptions.length, 2);
     });
 
-    // this test is flaky on CI, skip it for now
     xit('pages through cursor results', async () => {
       const select = await createSelect(
         clock,
@@ -662,27 +661,15 @@ describe('temba-select', () => {
 
       await openSelect(clock, select);
 
-      // Wait for pagination to complete - keep checking until fetching is false
-      // and we have the expected number of results (15 = 3 pages * 5 items)
-      let attempts = 0;
-      const maxAttempts = 10;
-      while (select.fetching || select.visibleOptions.length < 15) {
-        if (attempts >= maxAttempts) {
-          throw new Error(
-            `Pagination did not complete after ${maxAttempts} attempts. fetching: ${select.fetching}, visibleOptions: ${select.visibleOptions.length}`
-          );
-        }
-        await select.updateComplete;
-        clock.runAll();
-        attempts++;
-        await delay(100);
-      }
+      // Wait for pagination to complete using our improved helper
+      // Use more attempts for this test since pagination can be slow in CI
+      await waitForSelectPagination(select, clock, 15, 50);
 
       // should have all three pages visible right away
       assert.equal(select.visibleOptions.length, 15);
     });
 
-    xit('shows cached results', async () => {
+    it('shows cached results', async () => {
       const select = await createSelect(
         clock,
         getSelectHTML([], {
@@ -695,13 +682,18 @@ describe('temba-select', () => {
 
       // wait for updates from fetching three pages
       await openSelect(clock, select);
+      await waitForSelectPagination(select, clock, 15, 50);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen
       select.blur();
       await clock.tick(250);
+      // Ensure the select is properly closed before reopening
+      await select.updateComplete;
 
       await openSelect(clock, select);
+      // Cached results should be available immediately, but give some time for rendering
+      await waitForSelectPagination(select, clock, 15, 30);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen once more (previous bug failed on third opening)

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/test/utils.test.ts

@@ -180,6 +180,26 @@ export const delay = (millis: number) => {
   });
 };
 
+// Enhanced wait utility for more robust testing
+export const waitForCondition = async (
+  predicate: () => boolean,
+  maxAttempts: number = 20,
+  delayMs: number = 50
+): Promise<void> => {
+  let attempts = 0;
+  while (!predicate() && attempts < maxAttempts) {
+    await delay(delayMs);
+    attempts++;
+  }
+  if (!predicate()) {
+    throw new Error(
+      `Condition not met after ${maxAttempts} attempts (${
+        maxAttempts * delayMs
+      }ms)`
+    );
+  }
+};
+
 export const assertScreenshot = async (
   filename: string,
   clip: Clip,
@@ -294,6 +314,31 @@ export const clickOption = async (
   index: number
 ) => {
   const options = getOptions(select);
+  if (!options) {
+    throw new Error('No options element found');
+  }
+
+  // Wait for the specific option to be available, but only if it's not already there
+  const existingOption = options.shadowRoot?.querySelector(
+    `[data-option-index="${index}"]`
+  );
+  if (!existingOption) {
+    try {
+      await waitForCondition(
+        () => {
+          const option = options.shadowRoot?.querySelector(
+            `[data-option-index="${index}"]`
+          );
+          return !!option;
+        },
+        10,
+        25
+      );
+    } catch (e) {
+      throw new Error(`Option at index ${index} not found after waiting`);
+    }
+  }
+
   const option = options.shadowRoot.querySelector(
     `[data-option-index="${index}"]`
   ) as HTMLDivElement;
@@ -318,6 +363,27 @@ export const openSelect = async (clock: any, select: Select<SelectOption>) => {
   // reduce wait time for options to become visible
   await waitFor(25);
   clock.runAll();
+
+  // For non-endpoint selects, options might be immediately available
+  // For endpoint selects, we need to wait for them to load
+  const hasEndpoint = select.getAttribute('endpoint');
+  if (hasEndpoint) {
+    try {
+      // Wait for options to be properly rendered and visible (but only for endpoint selects)
+      await waitForCondition(
+        () => {
+          const options = select.shadowRoot.querySelector(
+            'temba-options[visible]'
+          );
+          return options && options.isConnected;
+        },
+        10,
+        25
+      );
+    } catch (e) {
+      // If condition fails, continue - some tests might not need options to be visible immediately
+    }
+  }
 };
 
 export const openAndClick = async (
@@ -367,3 +433,35 @@ export const updateComponent = async (
 export const getValidText = () => {
   return 'sà-wàd-dee!';
 };
+
+// Helper for waiting for select pagination to complete
+export const waitForSelectPagination = async (
+  select: Select<SelectOption>,
+  clock: any,
+  expectedCount: number,
+  maxAttempts: number = 30
+): Promise<void> => {
+  let attempts = 0;
+  while (attempts < maxAttempts) {
+    // Ensure we're not still fetching
+    if (!select.fetching && select.visibleOptions.length >= expectedCount) {
+      return;
+    }
+
+    await select.updateComplete;
+    clock.runAll();
+
+    // Give more time between attempts for slow CI environments
+    await delay(75);
+
+    attempts++;
+  }
+
+  throw new Error(
+    `Pagination did not complete after ${maxAttempts} attempts (${
+      maxAttempts * 75
+    }ms). ` +
+      `Expected ${expectedCount} options, got ${select.visibleOptions.length}. ` +
+      `Fetching: ${select.fetching}`
+  );
+};

package/web-dev-server.config.mjs

@@ -15,30 +15,38 @@ export default {
     {
       name: 'flow-files',
       serve(context) {
-        if (context.request.method === 'POST') {
-          let body = '';
-          context.req.on('data', chunk => {
-            body += chunk.toString();
-          });
-
-          context.req.on('end', () => {
+        if (context.request.method === 'POST' && context.path.startsWith('/flow/revisions/')) {
+          return new Promise((resolve) => {
+            let body = '';
             const parts = context.path.split('/');
             const uuid = parts[3];
-
-            // read in the body
-            context.contentType = 'application/json';
-            if (body) {
-              fs.writeFileSync(
-                path.resolve(`./demo/data/flows/${uuid}.json`), JSON.stringify({ definition: JSON.parse(body) }, null, 2)
-              );
-
-              context.body = {
-                status: 'success',
-                message: `Flow ${uuid} saved successfully.`,
-              };
-            } else {
-              console.log(`No body received for flow ${uuid}.`);
-            }
+            context.req.on('data', chunk => {
+              body += chunk.toString();
+            });
+            context.req.on('end', () => {
+              context.contentType = 'application/json';
+              if (body) {
+                fs.writeFileSync(
+                  path.resolve(`./demo/data/flows/${uuid}.json`),
+                  JSON.stringify({ definition: JSON.parse(body) }, null, 2)
+                );
+                console.log(`Flow ${uuid} saved successfully.`);
+                context.body = {
+                  status: 'success',
+                  message: `Flow ${uuid} saved successfully.`,
+                  definition: JSON.parse(body),
+                };
+                context.status = 200;
+              } else {
+                console.log(`No body received for flow ${uuid}.`);
+                context.body = {
+                  status: 'error',
+                  message: `No body received for flow ${uuid}.`,
+                };
+                context.status = 400;
+              }
+              resolve();
+            });
           });
         }
 

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>