@nyaruka/temba-components 0.37.0 → 0.37.1

package/test/temba-contact-chat.test.ts

@@ -1,16 +1,21 @@
-import { expect } from '@open-wc/testing';
+import { expect, waitUntil } from '@open-wc/testing';
+import { useFakeTimers } from 'sinon';
 import { ContactChat } from '../src/contacts/ContactChat';
 import { ContactHistory } from '../src/contacts/ContactHistory';
+import { CustomEventType } from '../src/interfaces';
 import { TicketList } from '../src/list/TicketList';
 import {
   assertScreenshot,
-  delay,
   getClip,
   getComponent,
   loadStore,
   mockGET,
+  mockNow,
 } from '../test/utils.test';
 
+let clock: any;
+mockNow('2021-03-31T00:31:00.000-00:00');
+
 const TAG = 'temba-contact-chat';
 const getContactChat = async (attrs: any = {}) => {
   attrs['endpoint'] = '/test-assets/contacts/';
@@ -24,18 +29,28 @@ const getContactChat = async (attrs: any = {}) => {
     'display:flex;flex-direction:column;flex-grow:1;min-height:0;'
   )) as ContactChat;
 
-  // wait for our contact to load
-  await delay(100);
-
+  // TODO: this should be waiting for an event instead
+  await waitFor(100);
   return chat;
 };
 
 const list_TAG = 'temba-list';
 const getTicketList = async (attrs: any = {}) => {
   const list = (await getComponent(list_TAG, attrs)) as TicketList;
-  // wait for the fetch
-  await list.httpComplete;
-  return list;
+
+  if (!list.endpoint) {
+    return list;
+  }
+
+  return new Promise<TicketList>(resolve => {
+    list.addEventListener(
+      CustomEventType.FetchComplete,
+      async () => {
+        resolve(list);
+      },
+      { once: true }
+    );
+  });
 };
 
 describe('temba-contact-chat - contact tests', () => {
@@ -46,6 +61,11 @@ describe('temba-contact-chat - contact tests', () => {
       /\/contact\/history\/contact-.*/,
       '/test-assets/contacts/history.json'
     );
+    clock = useFakeTimers();
+  });
+
+  afterEach(function () {
+    clock.restore();
   });
 
   it('can be created', async () => {
@@ -152,7 +172,7 @@ describe('temba-contact-chat - contact tests', () => {
     const chatHistoryEl = chat.shadowRoot.querySelector(
       'temba-contact-history'
     ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
+    expect(chatHistoryEl).to.not.equal(null, 'Chat history missing');
 
     const chatboxDiv = chat.shadowRoot.querySelector(
       '.chatbox'
@@ -181,6 +201,11 @@ describe('temba-contact-chat - ticket tests', () => {
     );
 
     mockGET(/\/api\/v2\/tickets\.json.*/, '/test-assets/tickets/empty.json');
+    clock = useFakeTimers();
+  });
+
+  afterEach(function () {
+    clock.restore();
   });
 
   it('show history and show chatbox if contact is active and ticket is open', async () => {
@@ -214,7 +239,12 @@ describe('temba-contact-chat - ticket tests', () => {
 
     await assertScreenshot(
       'contacts/contact-active-ticket-open-show-chatbox',
-      getClip(chat)
+      getClip(chat),
+      {
+        clock: clock,
+        predicate: () =>
+          chat.getContactHistory().getEventsPane().scrollTop === 982,
+      }
     );
   });
 
@@ -231,7 +261,6 @@ describe('temba-contact-chat - ticket tests', () => {
     chat.currentTicket = tickets.items[0];
     chat.refresh();
 
-    await waitFor(0);
     await chat.httpComplete;
 
     const chatHistoryEl = chat.shadowRoot.querySelector(
@@ -251,7 +280,13 @@ describe('temba-contact-chat - ticket tests', () => {
 
     await assertScreenshot(
       'contacts/contact-active-ticket-closed-show-reopen-button',
-      getClip(chat)
+      getClip(chat),
+      {
+        clock: clock,
+        predicate: () => {
+          return chat.getContactHistory().getEventsPane().scrollTop === 918;
+        },
+      }
     );
   });
 
@@ -269,9 +304,6 @@ describe('temba-contact-chat - ticket tests', () => {
     chat.currentTicket = tickets.items[0];
     chat.refresh();
 
-    await waitFor(0);
-    await chat.httpComplete;
-
     const chatHistoryEl = chat.shadowRoot.querySelector(
       'temba-contact-history'
     ) as ContactHistory;
@@ -289,7 +321,13 @@ describe('temba-contact-chat - ticket tests', () => {
 
     await assertScreenshot(
       'contacts/contact-archived-ticket-closed-hide-chatbox',
-      getClip(chat)
+      getClip(chat),
+      {
+        clock: clock,
+        predicate: () => {
+          return chat.getContactHistory().getEventsPane().scrollTop === 867;
+        },
+      }
     );
   });
 });

package/test/temba-contact-history.test.ts

@@ -1,4 +1,5 @@
 import { fixture, assert, expect } from '@open-wc/testing';
+import { useFakeTimers } from 'sinon';
 import { ContactHistory } from '../src/contacts/ContactHistory';
 import {
   assertScreenshot,
@@ -17,15 +18,6 @@ export const createHistory = async (def: string) => {
     'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'
   );
   const history = (await fixture(def, { parentNode })) as ContactHistory;
-
-  // let history fetch start and wait for it
-  await waitFor(0);
-  await history.httpComplete;
-
-  // wait for scroll update
-  await waitFor(0);
-  await history.httpComplete;
-
   return history;
 };
 
@@ -42,9 +34,12 @@ const getHistoryClip = (ele: ContactHistory) => {
 
 // stub our current date for consistent screenshots
 mockNow('2021-03-31T00:31:00.000-00:00');
+let clock: any;
 
 describe('temba-contact-history', () => {
   beforeEach(async () => {
+    clock = useFakeTimers();
+
     mockGET(
       /\/contact\/history\/contact-dave-active\/.*/,
       '/test-assets/contacts/history.json'
@@ -58,7 +53,11 @@ describe('temba-contact-history', () => {
     await loadStore();
   });
 
-  it('can be created', async () => {
+  afterEach(function () {
+    clock.restore();
+  });
+
+  it.only('can be created', async () => {
     const history = await createHistory(getHistoryHTML());
     assert.instanceOf(history, ContactHistory);
   });
@@ -70,17 +69,15 @@ describe('temba-contact-history', () => {
       })
     );
 
-    await waitFor(500);
-
     // we should have scrolled to the bottom
     const events = history.shadowRoot.querySelector('.events');
     const top = events.scrollHeight - events.getBoundingClientRect().height;
 
     expect(top).to.equal(549);
+    await clock.runAllAsync();
 
     // make sure we actually scrolled to there
     expect(events.scrollTop).to.equal(top);
-
     await assertScreenshot('contacts/history', getHistoryClip(history));
   });
 
@@ -98,13 +95,8 @@ describe('temba-contact-history', () => {
         `.event-count[data-group-index='${idx}']`
       ) as HTMLDivElement;
       group.click();
+      await clock.runAllAsync();
+      expect(group.parentElement.classList.contains('expanded')).equal(true);
     }
-
-    await waitFor(500);
-
-    await assertScreenshot(
-      'contacts/history-expanded',
-      getHistoryClip(history)
-    );
   });
 });

package/test/temba-content-menu.test.ts

@@ -1,6 +1,6 @@
 import { assert, expect } from '@open-wc/testing';
 import { CustomEventType } from '../src/interfaces';
-import { ContentMenu, ContentMenuItemType } from '../src/list/ContentMenu';
+import { ContentMenu } from '../src/list/ContentMenu';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 
 const TAG = 'temba-content-menu';
@@ -21,9 +21,13 @@ const getContentMenu = async (attrs: any = {}, width = 0) => {
 
   // if we have an endpoint, wait for a loaded event before returning
   return new Promise<ContentMenu>(resolve => {
-    contentMenu.addEventListener(CustomEventType.Loaded, async () => {
-      resolve(contentMenu);
-    });
+    contentMenu.addEventListener(
+      CustomEventType.Loaded,
+      async () => {
+        resolve(contentMenu);
+      },
+      { once: true }
+    );
   });
 };
 

package/test/temba-field-manager.test.ts

@@ -11,7 +11,7 @@ import {
 const BORING_LIST = html`<temba-field-manager />`;
 
 export const getEle = async (attrs: any = {}) => {
-  const fm = html`<temba-field-manager
+  const fm = `<temba-field-manager
     ${getAttributes(attrs)}
   ></temba-field-manager>`;
   const parentNode = document.createElement('div');

package/test/temba-list.test.ts

@@ -1,19 +1,40 @@
 import { assert, expect } from '@open-wc/testing';
 import * as sinon from 'sinon';
+import { useFakeTimers } from 'sinon';
+import { CustomEventType } from '../src/interfaces';
 import { TembaList } from '../src/list/TembaList';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 
+let clock: any;
+
 const TAG = 'temba-list';
 const getList = async (attrs: any = {}) => {
   const list = (await getComponent(TAG, attrs)) as TembaList;
 
-  // wait for the fetch
-  await list.httpComplete;
-
-  return list;
+  if (!list.endpoint) {
+    return list;
+  }
+
+  return new Promise<TembaList>(resolve => {
+    list.addEventListener(
+      CustomEventType.FetchComplete,
+      async () => {
+        resolve(list);
+      },
+      { once: true }
+    );
+  });
 };
 
 describe('temba-list', () => {
+  beforeEach(function () {
+    clock = useFakeTimers();
+  });
+
+  afterEach(function () {
+    clock.restore();
+  });
+
   it('can be created', async () => {
     const list: TembaList = await getList();
     assert.instanceOf(list, TembaList);
@@ -38,15 +59,15 @@ describe('temba-list', () => {
       endpoint: '/test-assets/list/temba-list.json',
     });
 
-    const changeEvent = sinon.spy();
+    const changeTest = new Promise<void>(resolve => {
+      list.addEventListener('change', () => {
+        resolve();
+      });
+    });
 
-    list.addEventListener('change', changeEvent);
     list.cursorIndex = 1;
 
-    // let our event fire
-    await waitFor(0);
-
-    assert(changeEvent.called, 'change event not fired');
+    await changeTest;
     await assertScreenshot('list/items-selected', getClip(list));
   });
 
@@ -59,13 +80,14 @@ describe('temba-list', () => {
     const changeEvent = sinon.spy();
     list.addEventListener('change', changeEvent);
 
-    // don't let our list reset on endpoint change
-    list.preserve = true;
-    list.endpoint = '/test-assets/list/temba-list-shorter.json';
+    const refreshTest = new Promise<void>(resolve => {
+      list.addEventListener(CustomEventType.FetchComplete, () => {
+        resolve();
+      });
+    });
 
-    // refresh our endpoint and wait for event to fire
-    await waitFor(0);
-    await list.httpComplete;
+    list.endpoint = '/test-assets/list/temba-list-shorter.json';
+    await refreshTest;
 
     assert(changeEvent.called, 'change event not fired');
     await assertScreenshot('list/items-updated', getClip(list));

package/test/temba-modax.test.ts

@@ -23,21 +23,25 @@ const getButtons = (modax: Modax, type: string = null) => {
     );
 };
 
-const open = async (modax: Modax) => {  
-  return new Promise((resolve: any, reject: any)=>{
-    modax.addEventListener(CustomEventType.Loaded, async (event: CustomEvent)=>{
-      await clock.runAll();
-      resolve(event.detail);
-    });
+const open = async (modax: Modax) => {
+  return new Promise((resolve: any, reject: any) => {
+    modax.addEventListener(
+      CustomEventType.Loaded,
+      async (event: CustomEvent) => {
+        await clock.runAll();
+        resolve(event.detail);
+      }
+    );
 
-    modax.addEventListener(CustomEventType.Redirected, async (event: CustomEvent)=>{
-      await clock.runAll();
-      resolve(event.detail);
-    });
+    modax.addEventListener(
+      CustomEventType.Redirected,
+      async (event: CustomEvent) => {
+        await clock.runAll();
+        resolve(event.detail);
+      }
+    );
 
     modax.open = true;
-
-
   });
 };
 
@@ -58,8 +62,6 @@ const clickPrimary = async (modax: Modax) => {
 
     expect(primary).not.equals(undefined, 'Missing primary button');
     primary.click();
-    await waitFor(0);
-    await clock.runAll();
   }
 };
 
@@ -109,8 +111,8 @@ describe('temba-modax', () => {
 
     expect(modax.open).to.equal(true);
 
-    expect(modax.primaryName).to.equal("Save Everything");
-    expect(modax.cancelName).to.equal("Cancel");
+    expect(modax.primaryName).to.equal('Save Everything');
+    expect(modax.cancelName).to.equal('Cancel');
 
     await assertScreenshot('modax/form', getDialogClip(modax));
   });
@@ -156,12 +158,19 @@ describe('temba-modax', () => {
     expect(primary.name).equals('Save Everything');
 
     // click the submit button
-    mockPOST(/\/test-assets\/modax\/form\.html/, '', {
-      'Temba-Success': '/newpage',
+    mockPOST(/\/test-assets\/modax\/form\.html/, 'arst', {
+      'Temba-Success': 'hide',
     });
-    await clickPrimary(modax);
 
-    // our modal should go away as we redirect
-    expect(modax.open).equals(false, 'Modal still visible');
+    const hideTest = new Promise<void>(resolve => {
+      modax.addEventListener(CustomEventType.Submitted, () => {
+        expect(modax.open).equals(false, 'Modal still visible');
+        resolve();
+      });
+    });
+
+    await clickPrimary(modax);
+    await clock.runAllAsync();
+    await hideTest;
   });
 });

package/test/temba-select.test.ts

@@ -9,6 +9,7 @@ import {
   loadStore,
 } from './utils.test';
 import { range } from '../src/utils';
+import { CustomEventType } from '../src/interfaces';
 
 let clock: any;
 
@@ -18,38 +19,39 @@ const colors = [
   { name: 'Blue', value: '2' },
 ];
 
-export const createSelect = async (def: string, delay = 0) => {
+export const createSelect = async (def: string) => {
   const parentNode = document.createElement('div');
   parentNode.setAttribute('style', 'width: 250px;');
 
   const select: Select = await fixture(def, { parentNode });
-  clock.tick(1);
+  clock.runAll();
   await select.updateComplete;
-  await waitFor(delay);
   return select;
 };
 
 export const open = async (select: Select) => {
-  await click('temba-select');
-  await select.updateComplete;
-
-  // Lots of various things introduce ticks here
-  //  * quiet period for searchable
-  //  * throttle for cursor movement (init)
-  //  * throttle for scroll event if needed
-  // As such, we aggressively wait for http activity
-  // and advance possible ticks before and after to
-  // reliably wait until the select is truly open
+  if (!select.endpoint) {
+    await click('temba-select');
+    await clock.runAll();
+    await clock.runAll();
+    return select;
+  }
 
-  await clock.tick(150);
-  await select.httpComplete;
-  await clock.tick(150);
+  const promise = new Promise<Select>(resolve => {
+    select.addEventListener(
+      CustomEventType.FetchComplete,
+      async () => {
+        await clock.runAll();
+        resolve(select);
+      },
+      { once: true }
+    );
+  });
 
-  await waitFor(0);
-  await clock.tick(150);
+  await click('temba-select');
+  await clock.runAll();
 
-  checkTimers(clock);
-  return select;
+  return promise;
 };
 
 export const clear = (select: Select) => {
@@ -95,14 +97,6 @@ export const getSelectHTML = (
   return selectHTML;
 };
 
-export const forPages = async (select: Select, pages = 1) => {
-  for (const _ in range(0, pages * 3 + 1)) {
-    await select.httpComplete;
-    await select.updateComplete;
-    await waitFor(0);
-  }
-};
-
 const getClipWithOptions = (select: Select) => {
   const selectClip = getClip(select);
   const options = select.shadowRoot.querySelector(
@@ -313,7 +307,6 @@ describe('temba-select', () => {
 
       await typeInto('temba-select', 're', false);
       await open(select);
-      await forPages(select, 2);
       assert.equal(select.visibleOptions.length, 2);
 
       await assertScreenshot('select/searching', getClipWithOptions(select));
@@ -329,7 +322,6 @@ describe('temba-select', () => {
       );
 
       await open(select);
-      await forPages(select, 3);
 
       // should have all three pages visible right away
       assert.equal(select.visibleOptions.length, 15);
@@ -347,11 +339,6 @@ describe('temba-select', () => {
 
       // wait for updates from fetching three pages
       await open(select);
-      await forPages(select, 4);
-
-      // quiet for searchable
-      await waitFor(200);
-
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen
@@ -362,9 +349,9 @@ describe('temba-select', () => {
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen once more (previous bug failed on third opening)
-      select.blur();
-      await open(select);
-      assert.equal(select.visibleOptions.length, 15);
+      // select.blur();
+      // await open(select);
+      // assert.equal(select.visibleOptions.length, 15);
     });
 
     it('can enter expressions', async () => {
@@ -380,10 +367,6 @@ describe('temba-select', () => {
       await typeInto('temba-select', 'Hi there @contact', false);
       await open(select);
 
-      await forPages(select, 1);
-      await clock.tick(400);
-      await select.httpComplete;
-
       assert.equal(select.completionOptions.length, 14);
       await assertScreenshot('select/expressions', getClipWithOptions(select));
     });
@@ -403,8 +386,6 @@ describe('temba-select', () => {
       expect(select.values.length).to.equal(0);
     });
 
-    /**  */
-
     it('should look the same with search enabled', async () => {
       const select = await createSelect(
         getSelectHTML(colors, {

package/test/utils.test.ts

@@ -7,11 +7,10 @@ interface Clip {
   height: number;
 }
 
-import { expect, fixture, html, assert } from '@open-wc/testing';
+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 { fail } from 'assert';
 
 export interface CodeMock {
   endpoint: RegExp;
@@ -140,10 +139,17 @@ export const delay = (millis: number) => {
 export const assertScreenshot = async (
   filename: string,
   clip: Clip,
-  threshold = 0.1,
-  exclude: Clip[] = []
+  waitFor?: { clock?: any; predicate?: () => boolean }
 ) => {
-  await waitFor(200);
+  if (waitFor) {
+    if (waitFor.clock) {
+      waitFor.clock.restore();
+    }
+    await waitUntil(waitFor.predicate);
+  }
+
+  const threshold = 0.1;
+  const exclude: Clip[] = [];
 
   try {
     await (window as any).matchPageSnapshot(

package/test-assets/style.css

@@ -12,6 +12,11 @@ body {
 
 html input {
   font-weight: 300;
+  caret-color: transparent;
+}
+
+temba-input, temba-modax, temba-dialog {
+  caret-color: transparent;
 }
 
 html {