@nyaruka/temba-components 0.86.0 → 0.87.0

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

@@ -2,8 +2,7 @@ import { useFakeTimers } from 'sinon';
 import { Button } from '../src/button/Button';
 import { Compose } from '../src/compose/Compose';
 import { ContactChat } from '../src/contacts/ContactChat';
-import { Attachment, CustomEventType } from '../src/interfaces';
-import { TicketList } from '../src/list/TicketList';
+import { Attachment } from '../src/interfaces';
 import {
   assertScreenshot,
   clearMockPosts,
@@ -12,13 +11,13 @@ import {
   loadStore,
   mockGET,
   mockNow,
-  mockPOST,
+  mockPOST
 } from '../test/utils.test';
 import {
   getInvalidText,
   getValidAttachments,
   getValidText,
-  updateComponent,
+  updateComponent
 } from './temba-compose.test';
 
 let clock: any;
@@ -42,27 +41,8 @@ const getContactChat = async (attrs: any = {}) => {
   return chat;
 };
 
-const list_TAG = 'temba-list';
-const getTicketList = async (attrs: any = {}) => {
-  const list = (await getComponent(list_TAG, attrs)) as TicketList;
-
-  if (!list.endpoint) {
-    return list;
-  }
-
-  return new Promise<TicketList>(resolve => {
-    list.addEventListener(
-      CustomEventType.FetchComplete,
-      async () => {
-        resolve(list);
-      },
-      { once: true }
-    );
-  });
-};
-
 const getResponseSuccessFiles = (attachments: Attachment[]) => {
-  const response_attachments = attachments.map(attachment => {
+  const response_attachments = attachments.map((attachment) => {
     return { content_type: attachment.content_type, url: attachment.url };
   });
   return response_attachments;
@@ -89,7 +69,7 @@ describe('temba-contact-chat - contact tests', () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
 
     await assertScreenshot('contacts/contact-active-default', getClip(chat));
@@ -99,7 +79,7 @@ describe('temba-contact-chat - contact tests', () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
 
     await assertScreenshot(
@@ -112,7 +92,7 @@ describe('temba-contact-chat - contact tests', () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-barack-archived',
+      contact: 'contact-barack-archived'
     });
 
     await assertScreenshot(
@@ -125,7 +105,7 @@ describe('temba-contact-chat - contact tests', () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-michelle-blocked',
+      contact: 'contact-michelle-blocked'
     });
 
     await assertScreenshot(
@@ -138,7 +118,7 @@ describe('temba-contact-chat - contact tests', () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-tim-stopped',
+      contact: 'contact-tim-stopped'
     });
 
     await assertScreenshot(
@@ -166,7 +146,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text no attac
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     const text = getValidText();
@@ -175,7 +155,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text no attac
     const response_body = {
       contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
       text: text,
-      attachments: [],
+      attachments: []
     };
     mockPOST(/api\/v2\/messages\.json/, response_body);
 
@@ -194,14 +174,14 @@ describe('temba-contact-chat - contact tests - handle send tests - text no attac
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     // set the chatbox to a string that is 640+ chars
     await updateComponent(compose, getInvalidText());
 
     const response_body = {
-      text: [responseTextError],
+      text: [responseTextError]
     };
     const response_headers = {};
     const response_status = '400';
@@ -242,7 +222,7 @@ describe('temba-contact-chat - contact tests - handle send tests - attachments n
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     const attachments = getValidAttachments();
@@ -251,7 +231,7 @@ describe('temba-contact-chat - contact tests - handle send tests - attachments n
     const response_body = {
       contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
       text: '',
-      attachments: response_attachments,
+      attachments: response_attachments
     };
     const response_headers = {};
     const response_status = '200';
@@ -276,14 +256,14 @@ describe('temba-contact-chat - contact tests - handle send tests - attachments n
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     // set the attachments to a list that is 10+ items
     await updateComponent(compose, null, getValidAttachments(11));
 
     const response_body = {
-      attachments: [responseAttachmentError],
+      attachments: [responseAttachmentError]
     };
     const response_headers = {};
     const response_status = '400';
@@ -324,7 +304,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     const text = getValidText();
@@ -334,7 +314,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     const response_body = {
       contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
       text: text,
-      attachments: response_attachments,
+      attachments: response_attachments
     };
     mockPOST(/api\/v2\/messages\.json/, response_body);
 
@@ -353,14 +333,14 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     // set the chatbox to a string that is 640+ chars
     await updateComponent(compose, getInvalidText(), getValidAttachments());
 
     const response_body = {
-      text: [responseTextError],
+      text: [responseTextError]
     };
     const response_headers = {};
     const response_status = '400';
@@ -386,14 +366,14 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     // set the attachments to a list that is 10+ items
     await updateComponent(compose, getValidText(), getValidAttachments(11));
 
     const response_body = {
-      attachments: [responseAttachmentError],
+      attachments: [responseAttachmentError]
     };
     const response_headers = {};
     const response_status = '400';
@@ -419,7 +399,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     // set the chatbox to a string that is 640+ chars
@@ -428,7 +408,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
 
     const response_body = {
       text: [responseTextError],
-      attachments: [responseAttachmentError],
+      attachments: [responseAttachmentError]
     };
     const response_headers = {};
     const response_status = '400';
@@ -454,7 +434,7 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
     await updateComponent(compose, getValidText(), getValidAttachments());

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

@@ -1,12 +1,6 @@
 import { assert, waitUntil } from '@open-wc/testing';
 import { ContactDetails } from '../src/contacts/ContactDetails';
-import {
-  assertScreenshot,
-  getClip,
-  getComponent,
-  loadStore,
-  mockGET,
-} from './utils.test';
+import { getComponent, loadStore, mockGET } from './utils.test';
 
 const TAG = 'temba-contact-details';
 const getContactDetails = async (attrs: any = {}) => {
@@ -32,7 +26,7 @@ describe('temba-contact-tickets', () => {
   it('renders default', async () => {
     await loadStore();
     const contactDetails: ContactDetails = await getContactDetails({
-      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
+      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9'
     });
 
     assert.instanceOf(contactDetails, ContactDetails);

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

@@ -1,13 +1,6 @@
 import { assert, expect } from '@open-wc/testing';
 import { ContactFields } from '../src/contacts/ContactFields';
-import {
-  assertScreenshot,
-  delay,
-  getClip,
-  getComponent,
-  loadStore,
-  mockPOST,
-} from './utils.test';
+import { delay, getComponent, loadStore, mockPOST } from './utils.test';
 
 const TAG = 'temba-contact-fields';
 const getFields = async (attrs: any = {}) => {
@@ -26,7 +19,7 @@ describe(TAG, () => {
     await loadStore();
 
     const fields: ContactFields = await getFields({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     assert.instanceOf(fields, ContactFields);
     // await assertScreenshot('contacts/fields', getClip(fields));
@@ -35,11 +28,11 @@ describe(TAG, () => {
   it('handles updated contacts properly', async () => {
     await loadStore();
     const fields: ContactFields = await getFields({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
 
     const data = fields.data;
-    data.groups.forEach(group => {
+    data.groups.forEach((group) => {
       delete group['is_dynamic'];
     });
     mockPOST(/api\/v2\/contacts\.json\?uuid=contact-dave-active/, data);

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

@@ -7,7 +7,7 @@ import {
   getHTML,
   loadStore,
   mockGET,
-  mockNow,
+  mockNow
 } from '../test/utils.test';
 import './utils.test';
 
@@ -69,7 +69,7 @@ describe('temba-contact-history', () => {
   it('renders history', async () => {
     const history = await createHistory(
       getHistoryHTML({
-        uuid: 'contact-dave-active',
+        uuid: 'contact-dave-active'
       })
     );
 
@@ -89,7 +89,7 @@ describe('temba-contact-history', () => {
   it('expands event groups', async () => {
     const history = await createHistory(
       getHistoryHTML({
-        uuid: 'contact-dave-active',
+        uuid: 'contact-dave-active'
       })
     );
 

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

@@ -1,12 +1,6 @@
 import { fixture, assert, expect } from '@open-wc/testing';
 import { ContactSearch } from '../src/contactsearch/ContactSearch';
-import {
-  assertScreenshot,
-  delay,
-  getClip,
-  getHTML,
-  mockPOST,
-} from './utils.test';
+import { assertScreenshot, getClip, getHTML, mockPOST } from './utils.test';
 import { useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
 import { Omnibox } from '../src/omnibox/Omnibox';
@@ -14,7 +8,7 @@ import { Omnibox } from '../src/omnibox/Omnibox';
 let clock: any;
 
 function waitForSearch(search: ContactSearch) {
-  return new Promise<ContactSearch>(resolve => {
+  return new Promise<ContactSearch>((resolve) => {
     search.addEventListener(
       CustomEventType.ContentChanged,
       async () => {
@@ -47,7 +41,7 @@ describe('temba-contact-search', () => {
     const search: ContactSearch = await fixture(
       getHTML('temba-contact-search', {
         advanced: true,
-        endpoint,
+        endpoint
       })
     );
 
@@ -66,7 +60,7 @@ describe('temba-contact-search', () => {
     await waitForSearch(search);
 
     expect(search.errors).to.deep.equal([
-      "'Missing' is not a valid group name",
+      "'Missing' is not a valid group name"
     ]);
 
     await search.updateComplete;
@@ -77,7 +71,7 @@ describe('temba-contact-search', () => {
     const endpoint = '/contact-search-manual';
     const search: ContactSearch = await fixture(
       getHTML('temba-contact-search', {
-        endpoint,
+        endpoint
       })
     );
 
@@ -95,9 +89,9 @@ describe('temba-contact-search', () => {
         total: 1937,
         warnings: [
           'This flow does not specify a Facebook topic. You may still start this flow but Facebook contacts who have not sent an incoming message in the last 24 hours may not receive it.',
-          'This flow does not use message templates. You may still start this flow but WhatsApp contacts who have not sent an incoming message in the last 24 hours may not receive it.',
+          'This flow does not use message templates. You may still start this flow but WhatsApp contacts who have not sent an incoming message in the last 24 hours may not receive it.'
         ],
-        blockers: [],
+        blockers: []
       },
       { 'Temba-Success': 'hide' }
     );

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

@@ -6,7 +6,7 @@ import {
   getComponent,
   loadStore,
   mockGET,
-  mockNow,
+  mockNow
 } from './utils.test';
 
 const TAG = 'temba-contact-tickets';
@@ -35,7 +35,7 @@ describe('temba-contact-tickets', () => {
   it('renders default', async () => {
     const tickets: ContactTickets = await getContactTickets({
       contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
-      agent: 'admin1@nyaruka.com',
+      agent: 'admin1@nyaruka.com'
     });
     assert.instanceOf(tickets, ContactTickets);
     await assertScreenshot('contacts/tickets', getClip(tickets));
@@ -44,7 +44,7 @@ describe('temba-contact-tickets', () => {
   it('shows assignment picker', async () => {
     const tickets: ContactTickets = await getContactTickets({
       contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
-      agent: 'admin1@nyaruka.com',
+      agent: 'admin1@nyaruka.com'
     });
 
     // click on the avatar element

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

@@ -20,7 +20,7 @@ const getContentMenu = async (attrs: any = {}, width = 0) => {
   }
 
   // if we have an endpoint, wait for a loaded event before returning
-  return new Promise<ContentMenu>(resolve => {
+  return new Promise<ContentMenu>((resolve) => {
     contentMenu.addEventListener(
       CustomEventType.Loaded,
       async () => {
@@ -40,7 +40,7 @@ describe('temba-content-menu', () => {
 
   it('with 1+ items and 1+ buttons', async () => {
     const contentMenu: ContentMenu = await getContentMenu({
-      endpoint: '/test-assets/list/content-menu-contact-read.json',
+      endpoint: '/test-assets/list/content-menu-contact-read.json'
     });
 
     expect(contentMenu.items.length).equals(5);
@@ -53,7 +53,7 @@ describe('temba-content-menu', () => {
 
   it('with 1+ items and 0 buttons', async () => {
     const contentMenu: ContentMenu = await getContentMenu({
-      endpoint: '/test-assets/list/content-menu-archived-contacts.json',
+      endpoint: '/test-assets/list/content-menu-archived-contacts.json'
     });
 
     expect(contentMenu.items.length).equals(1);
@@ -66,7 +66,7 @@ describe('temba-content-menu', () => {
 
   it('with 0 items and 1+ buttons', async () => {
     const contentMenu: ContentMenu = await getContentMenu({
-      endpoint: '/test-assets/list/content-menu-new-campaign.json',
+      endpoint: '/test-assets/list/content-menu-new-campaign.json'
     });
 
     expect(contentMenu.items.length).equals(0);
@@ -79,7 +79,7 @@ describe('temba-content-menu', () => {
 
   it('bad endpoint', async () => {
     const contentMenu: ContentMenu = await getContentMenu({
-      endpoint: '/test-assets/list/content-menu-bad-endpoint.json',
+      endpoint: '/test-assets/list/content-menu-bad-endpoint.json'
     });
 
     expect(contentMenu.items.length).equals(0);
@@ -89,7 +89,7 @@ describe('temba-content-menu', () => {
   it('is spa page', async () => {
     const contentMenu: ContentMenu = await getContentMenu({
       endpoint: '/test-assets/list/content-menu-contact-read.json',
-      legacy: 0,
+      legacy: 0
     });
     expect(contentMenu.legacy).equals(0);
   });
@@ -97,7 +97,7 @@ describe('temba-content-menu', () => {
   it('is legacy page', async () => {
     const contentMenu: ContentMenu = await getContentMenu({
       endpoint: '/test-assets/list/content-menu-contact-read.json',
-      legacy: 1,
+      legacy: 1
     });
     expect(contentMenu.legacy).equals(1);
   });

package/test/temba-date.test.ts

@@ -5,7 +5,7 @@ import {
   getClip,
   getComponent,
   loadStore,
-  mockNow,
+  mockNow
 } from './utils.test';
 
 const TAG = 'temba-date';
@@ -35,7 +35,7 @@ describe('temba-date', () => {
   it('renders duration', async () => {
     const date = await getDate({
       value: '1978-11-18T02:22:00.000000-07:00',
-      display: 'duration',
+      display: 'duration'
     });
     const dateString = (
       date.shadowRoot.querySelector('.date') as HTMLSpanElement
@@ -48,7 +48,7 @@ describe('temba-date', () => {
   it('renders datetime', async () => {
     const date = await getDate({
       value: '1978-11-18T02:22:00.000000-07:00',
-      display: 'datetime',
+      display: 'datetime'
     });
     const dateString = (
       date.shadowRoot.querySelector('.date') as HTMLSpanElement

package/test/temba-datepicker.test.ts

@@ -49,7 +49,7 @@ describe('temba-datepicker', () => {
       getPickerHTML({
         value: '2020-01-20T14:00Z',
         timezone: 'America/New_York',
-        time: true,
+        time: true
       })
     );
 

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

@@ -1,16 +1,13 @@
 import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
 import { FieldManager } from '../src/fields/FieldManager';
 import { TextInput } from '../src/textinput/TextInput';
 import {
   assertScreenshot,
   getAttributes,
   getClip,
-  loadStore,
+  loadStore
 } from './utils.test';
 
-const BORING_LIST = html`<temba-field-manager />`;
-
 export const getEle = async (attrs: any = {}) => {
   const fm = `<temba-field-manager
     ${getAttributes(attrs)}

package/test/temba-label.test.ts

@@ -22,7 +22,7 @@ describe('temba-label', () => {
   it('renders shadow', async () => {
     const label: Label = await getLabel('Shadow', {
       icon: 'check',
-      shadow: true,
+      shadow: true
     });
     await assertScreenshot('label/shadow', getClip(label));
   });
@@ -30,7 +30,7 @@ describe('temba-label', () => {
   it('renders primary', async () => {
     const label: Label = await getLabel('Primary', {
       icon: 'check',
-      primary: true,
+      primary: true
     });
     await assertScreenshot('label/primary', getClip(label));
   });
@@ -38,7 +38,7 @@ describe('temba-label', () => {
   it('renders secondary', async () => {
     const label: Label = await getLabel('Secondary', {
       icon: 'check',
-      secondary: true,
+      secondary: true
     });
     await assertScreenshot('label/secondary', getClip(label));
   });
@@ -46,7 +46,7 @@ describe('temba-label', () => {
   it('renders tertiary', async () => {
     const label: Label = await getLabel('Tertiary', {
       icon: 'check',
-      tertiary: true,
+      tertiary: true
     });
     await assertScreenshot('label/tertiary', getClip(label));
   });
@@ -59,7 +59,7 @@ describe('temba-label', () => {
   it('renders danger', async () => {
     const label: Label = await getLabel('Danger', {
       icon: 'check',
-      danger: true,
+      danger: true
     });
     await assertScreenshot('label/danger', getClip(label));
   });
@@ -68,7 +68,7 @@ describe('temba-label', () => {
     const label: Label = await getLabel('Custom Orange', {
       icon: 'check',
       backgroundColor: 'rgb(240, 176, 29)',
-      textColor: '#ffff',
+      textColor: '#ffff'
     });
     await assertScreenshot('label/custom', getClip(label));
   });

package/test/temba-lightbox.test.ts

@@ -19,7 +19,7 @@ describe('temba-lightbox', () => {
       x: 28,
       y: 28,
       width: 1024,
-      height: 768,
+      height: 768
     });
 
     assert.instanceOf(lightbox, Lightbox);
@@ -29,7 +29,7 @@ describe('temba-lightbox', () => {
       x: 28,
       y: 28,
       width: 1024,
-      height: 768,
+      height: 768
     });
   });
 });

package/test/temba-list.test.ts

@@ -15,7 +15,7 @@ const getList = async (attrs: any = {}) => {
     return list;
   }
 
-  return new Promise<TembaList>(resolve => {
+  return new Promise<TembaList>((resolve) => {
     list.addEventListener(
       CustomEventType.FetchComplete,
       async () => {
@@ -48,7 +48,7 @@ describe('temba-list', () => {
 
   it('renders with endpoint', async () => {
     const list: TembaList = await getList({
-      endpoint: '/test-assets/list/temba-list.json',
+      endpoint: '/test-assets/list/temba-list.json'
     });
     expect(list.items.length).to.equal(4);
     await assertScreenshot('list/items', getClip(list));
@@ -56,10 +56,10 @@ describe('temba-list', () => {
 
   it('fires change event on cursor change', async () => {
     const list: TembaList = await getList({
-      endpoint: '/test-assets/list/temba-list.json',
+      endpoint: '/test-assets/list/temba-list.json'
     });
 
-    const changeTest = new Promise<void>(resolve => {
+    const changeTest = new Promise<void>((resolve) => {
       list.addEventListener('change', () => {
         resolve();
       });
@@ -73,14 +73,14 @@ describe('temba-list', () => {
 
   it('fires change when first element changes after fetch', async () => {
     const list: TembaList = await getList({
-      endpoint: '/test-assets/list/temba-list.json',
+      endpoint: '/test-assets/list/temba-list.json'
     });
 
     // spy on change event
     const changeEvent = sinon.spy();
     list.addEventListener('change', changeEvent);
 
-    const refreshTest = new Promise<void>(resolve => {
+    const refreshTest = new Promise<void>((resolve) => {
       list.addEventListener(CustomEventType.FetchComplete, () => {
         resolve();
       });