@nyaruka/temba-components 0.123.0 → 0.124.1

package/test/temba-webchat-lightbox-fix.test.ts

@@ -0,0 +1,57 @@
+import { expect } from '@open-wc/testing';
+import { WebChat } from '../src/webchat/WebChat';
+import { getComponent } from './utils.test';
+
+const getWebChat = async (attrs: any = {}) => {
+  const webChat = (await getComponent(
+    'temba-webchat',
+    attrs,
+    '',
+    400,
+    600
+  )) as WebChat;
+  return webChat;
+};
+
+describe('WebChat Lightbox Fix', () => {
+  afterEach(() => {
+    // Clean up any lightbox elements after each test
+    const lightboxes = document.querySelectorAll('temba-lightbox');
+    lightboxes.forEach((lightbox) => lightbox.remove());
+  });
+
+  it('should only create one lightbox element even with multiple WebChat instances', async () => {
+    // Create first WebChat instance
+    await getWebChat({
+      channel: 'test-channel-1'
+    });
+
+    // Verify lightbox was created
+    let lightboxes = document.querySelectorAll('temba-lightbox');
+    expect(lightboxes.length).to.equal(1);
+
+    // Create second WebChat instance
+    await getWebChat({
+      channel: 'test-channel-2'
+    });
+
+    // Verify still only one lightbox exists
+    lightboxes = document.querySelectorAll('temba-lightbox');
+    expect(lightboxes.length).to.equal(1);
+  });
+
+  it('should not create lightbox if one already exists', async () => {
+    // Manually create a lightbox first
+    const existingLightbox = document.createElement('temba-lightbox');
+    document.body.appendChild(existingLightbox);
+
+    // Create WebChat instance
+    await getWebChat({
+      channel: 'test-channel'
+    });
+
+    // Verify still only one lightbox exists
+    const lightboxes = document.querySelectorAll('temba-lightbox');
+    expect(lightboxes.length).to.equal(1);
+  });
+});

package/test/utils.test.ts

@@ -11,6 +11,10 @@ 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 { Attachment } from '../src/interfaces';
+import { Compose } from '../src/compose/Compose';
 
 export interface CodeMock {
   endpoint: RegExp;
@@ -279,3 +283,87 @@ 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();
+
+  // reduce wait time for options to become visible
+  await waitFor(25);
+  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(25); // Reduced from 50 to give minimum time for options to render
+
+  await clickOption(clock, select, idx);
+};
+
+// valid = attachments that are uploaded sent to the server when the user clicks send
+export const getValidAttachments = (numFiles = 2): Attachment[] => {
+  const attachments = [];
+  let index = 1;
+  while (index <= numFiles) {
+    const s = 's' + index;
+    const attachment = {
+      uuid: s,
+      content_type: 'image/png',
+      type: 'image/png',
+      filename: 'name_' + s,
+      url: 'url_' + s,
+      size: 1024,
+      error: null
+    } as Attachment;
+    attachments.push(attachment);
+    index++;
+  }
+  return attachments;
+};
+
+export const updateComponent = async (
+  compose: Compose,
+  text?: string,
+  attachments?: Attachment[]
+): Promise<void> => {
+  compose.initialText = text ? text : '';
+  compose.currentAttachments = attachments ? attachments : [];
+  await compose.updateComplete;
+};
+export const getValidText = () => {
+  return 'sà-wàd-dee!';
+};

package/web-test-runner.config.mjs

@@ -150,8 +150,9 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
         const testFile = await getPath(TEST, filename);
         const truthFile = await getPath(TRUTH, filename);
 
+        // Only wait for network idle if explicitly requested
         if (wait) {
-          await page.waitForNetworkIdle();
+          await page.waitForNetworkIdle({ idleTime: 100, timeout: 1000 });
         }
 
         if (!(await fileExists(truthFile))) {
@@ -302,9 +303,10 @@ export default {
   files: '**/test/**/*.test.ts',
   nodeResolve: true,
   setupFiles: ['./test-setup.js'],
+  concurrency: 4,
   testFramework: {
     config: {
-      timeout: '10000',
+      timeout: '5000',
     },
   },
 

package/.storybook/main.js

@@ -1,14 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.{js,md,mdx}'],
-  addons: [
-    'storybook-prebuilt/addon-knobs/register.js',
-    'storybook-prebuilt/addon-docs/register.js',
-    'storybook-prebuilt/addon-viewport/register.js'
-  ],
-  esDevServer: {
-    // custom es-dev-server options
-    nodeResolve: true,
-    watch: true,
-    open: true
-  }
-};

package/.storybook/preview-head.html

@@ -1 +0,0 @@
-<link type="text/css" rel="stylesheet" href="https://textit.com/sitestatic/css/temba-components.css"/>

package/.storybook/preview.js

@@ -1,17 +0,0 @@
-import { addParameters, setCustomElements } from '@open-wc/demoing-storybook';
-
-addParameters({
-  docs: {
-    iframeHeight: '200px'
-  }
-});
-
-async function run() {
-  const customElements = await (
-    await fetch(new URL('../custom-elements.json', import.meta.url))
-  ).json();
-
-  setCustomElements(customElements);
-}
-
-run();

package/demo/agents.html

@@ -1,147 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <link
-    href="/sitestatic/css/temba-components.css"
-    rel="stylesheet"
-    type="text/css"
-  />
-
-  <link
-    href="/sitestatic/css/tailwind.css"
-    rel="stylesheet"
-    type="text/css"
-  />
-
-  <link
-    href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
-    rel="stylesheet"
-  />
-
-  <style>
-    html {
-        --color-text-dark: #555 !important;
-      }
-      
-      temba-select[name='ticket-filter'] {
-        margin-bottom: 0.5em;
-        margin-top: -0.4em;
-      }
-
-      .ticket-list {
-        flex-basis: 300px; 
-        flex-grow: 0; 
-        flex-shrink: 0;
-        transition: all 200ms ease-in;
-      }
-
-      @media only screen and (max-width: 1024px) {
-        .ticket-list {
-          flex-basis: 200px; 
-        }
-      }
-
-      @media only screen and (max-width: 768px) {
-        .ticket-list {
-          flex-basis: 125px; 
-        }
-      }
-
-  </style>
-  <script type="module">
-    import '../out-tsc/temba-modules.js';
-  </script>
-
-  <script language="javascript">
-  
-    function handleContactChange(event) {
-      const ticket = event.target.value;
-      const chat = document.querySelector("temba-contact-chat");
-      chat.ticket = ticket;
-    }
-    
-    function handleContactHistoryUpdate(event) {
-      // tell our list to refresh since we know things happened
-      const tickets = document.querySelector("temba-tickets");
-      tickets.refresh();
-    }
-
-    function handleTicketsRefreshed(event) {
-      // tell our chat to refresh since we know things are new in our list
-      const chat = document.querySelector("temba-contact-chat");
-      chat.refresh();
-    }
-
-    function handleFilterChanged(event) {
-      const tickets = document.querySelector("temba-tickets");
-      const chat = document.querySelector("temba-contact-chat");
-
-      // if we have auto selecting, don't clear the chat
-      if (!tickets.nextSelection) {
-        chat.ticket = null;
-      }
-
-      const filter = event.target.values[0].value;
-      if (filter === "O") {
-        tickets.endpoint = "/contact/tickets/?_format=json&folder=open"
-      } else {
-        tickets.endpoint = "/contact/tickets/?_format=json&folder=closed"
-      }
-    }
-
-    function handleTicketChanged(event) {
-      const ticket = event.detail.ticket;
-      const focus = event.detail.focus;
-
-      const filter = document.querySelector('temba-select[name="ticket-filter"]');
-      const tickets = document.querySelector("temba-tickets");
-
-      if (focus) {
-        tickets.setNextSelection(ticket.uuid);
-        filter.setSelection(ticket.status);
-      } else {
-        // no focus, just refresh
-        tickets.refresh();
-      }
-    }
-
-</script>
- 
-
-</head>
-<body>
-
-  <temba-store
-    completions="/mr/docs/en-us/completion.json"
-    functions="/mr/docs/en-us/functions.json"
-    fields="/api/v2/fields.json"
-    globals="/api/v2/globals.json"
-    groups="/api/v2/groups.json"
-  ></temba-store>
-
-  <div class="flex-col">
-    <div class="flex" style="height:100vh">
-  
-      <div class="ticket-list m-4 mr-2 flex flex-col">
-
-          <temba-select name="ticket-filter" onchange="handleFilterChanged(event)">
-            <temba-option name="Open" value="O" icon="inbox"></temba-option>
-            <temba-option name="Closed" value="C" icon="check"></temba-option>
-          </temba-select>
-
-
-        <div class="flex flex-grow">
-          <temba-tickets endpoint="/contact/tickets/?_format=json&folder=open" @temba-refreshed="handleTicketsRefreshed(event)" onchange="handleContactChange(event)"></temba-tickets>
-        </div>
-
-      </div>
-  
-      <div class="flex-grow flex-col h-full py-4 pb-4 pr-4">
-        <temba-contact-chat @temba-refreshed="handleContactHistoryUpdate(event)" @temba-content-changed="handleTicketChanged(event)"></temba-contact-chat>
-      </div>
-    
-    </div>
-  </div>
-</body>
-</html>