@nyaruka/temba-components 0.109.1 → 0.110.0

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

@@ -1,7 +1,7 @@
 import { useFakeTimers } from 'sinon';
 import { Compose } from '../src/compose/Compose';
 import { ContactChat } from '../src/contacts/ContactChat';
-import { Attachment } from '../src/interfaces';
+import { Attachment, CustomEventType } from '../src/interfaces';
 import {
   assertScreenshot,
   clearMockPosts,
@@ -13,12 +13,12 @@ import {
   mockPOST
 } from '../test/utils.test';
 import {
-  getInvalidText,
   getValidAttachments,
   getValidText,
   updateComponent
 } from './temba-compose.test';
-import { Completion } from '../src/completion/Completion';
+
+import { expect, oneEvent } from '@open-wc/testing';
 
 let clock: any;
 mockNow('2021-03-31T00:31:00.000-00:00');
@@ -48,13 +48,12 @@ const getResponseSuccessFiles = (attachments: Attachment[]) => {
   });
   return response_attachments;
 };
-const responseTextError = 'Maximum allowed text is 640 characters.';
-const responseAttachmentError = 'Maximum allowed attachments is 10 files.';
 
-describe('temba-contact-chat - contact tests', () => {
+describe('temba-contact-chat', () => {
   // map requests for contact history to our static files
   // we'll just us the same historylist for everybody for now
   beforeEach(() => {
+    clearMockPosts();
     mockGET(
       /\/contact\/history\/contact-.*/,
       '/test-assets/contacts/history.json'
@@ -66,16 +65,6 @@ describe('temba-contact-chat - contact tests', () => {
     clock.restore();
   });
 
-  it('can be created', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active'
-    });
-
-    await assertScreenshot('contacts/contact-active-default', getClip(chat));
-  });
-
   it('show history and show chatbox if contact is active', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();
@@ -83,10 +72,7 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-dave-active'
     });
 
-    await assertScreenshot(
-      'contacts/contact-active-show-chatbox',
-      getClip(chat)
-    );
+    await assertScreenshot('contacts/chat-for-active-contact', getClip(chat));
   });
 
   it('show history and hide chatbox if contact is archived', async () => {
@@ -96,10 +82,7 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-barack-archived'
     });
 
-    await assertScreenshot(
-      'contacts/contact-archived-hide-chatbox',
-      getClip(chat)
-    );
+    await assertScreenshot('contacts/chat-for-archived-contact', getClip(chat));
   });
 
   it('show history and hide chatbox if contact is blocked', async () => {
@@ -109,10 +92,7 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-michelle-blocked'
     });
 
-    await assertScreenshot(
-      'contacts/contact-blocked-hide-chatbox',
-      getClip(chat)
-    );
+    await assertScreenshot('contacts/chat-for-blocked-contact', getClip(chat));
   });
 
   it('show history and hide chatbox if contact is stopped', async () => {
@@ -122,28 +102,10 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-tim-stopped'
     });
 
-    await assertScreenshot(
-      'contacts/contact-stopped-hide-chatbox',
-      getClip(chat)
-    );
-  });
-});
-
-describe('temba-contact-chat - contact tests - handle send tests - text no attachments', () => {
-  beforeEach(() => {
-    clearMockPosts();
-    mockGET(
-      /\/contact\/history\/contact-.*/,
-      '/test-assets/contacts/history.json'
-    );
-    clock = useFakeTimers();
-  });
-
-  afterEach(function () {
-    clock.restore();
+    await assertScreenshot('contacts/chat-for-stopped-contact', getClip(chat));
   });
 
-  it('with text no attachments - success', async () => {
+  it('sends text without attachments', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
@@ -160,64 +122,14 @@ describe('temba-contact-chat - contact tests - handle send tests - text no attac
     };
     mockPOST(/api\/v2\/messages\.json/, response_body);
 
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    await assertScreenshot(
-      'contacts/compose-text-no-attachments-success',
-      getClip(chat)
-    );
-  });
-
-  it('with text no attachments - failure - more than 640 chars', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      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]
-    };
-    const response_headers = {};
-    const response_status = '400';
-    mockPOST(
-      /api\/v2\/messages\.json/,
-      response_body,
-      response_headers,
-      response_status
-    );
-
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    await assertScreenshot(
-      'contacts/compose-text-no-attachments-failure',
-      getClip(chat)
-    );
-  });
-});
-
-describe('temba-contact-chat - contact tests - handle send tests - attachments no text', () => {
-  beforeEach(() => {
-    clearMockPosts();
-    mockGET(
-      /\/contact\/history\/contact-.*/,
-      '/test-assets/contacts/history.json'
-    );
-    clock = useFakeTimers();
-  });
+    const listener = oneEvent(compose, CustomEventType.Submitted, false);
+    await typeInto('temba-contact-chat:temba-compose', text, true, true);
+    expect(await listener).to.exist;
 
-  afterEach(function () {
-    clock.restore();
+    await assertScreenshot('contacts/chat-sends-text-only', getClip(chat));
   });
 
-  it('with attachments no text - success', async () => {
+  it('sends attachments without text', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
@@ -241,63 +153,17 @@ describe('temba-contact-chat - contact tests - handle send tests - attachments n
       response_status
     );
 
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    await assertScreenshot(
-      'contacts/compose-attachments-no-text-success',
-      getClip(chat)
-    );
-  });
-  it('with attachments no text - failure - more than 10 files', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      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]
-    };
-    const response_headers = {};
-    const response_status = '400';
-    mockPOST(
-      /api\/v2\/messages\.json/,
-      response_body,
-      response_headers,
-      response_status
-    );
-
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    const listener = oneEvent(compose, CustomEventType.Submitted, false);
+    await typeInto('temba-contact-chat:temba-compose', '', false, true);
+    expect(await listener).to.exist;
 
     await assertScreenshot(
-      'contacts/compose-attachments-no-text-failure',
+      'contacts/chat-sends-attachments-only',
       getClip(chat)
     );
   });
-});
-
-describe('temba-contact-chat - contact tests - handle send tests - text and attachments', () => {
-  beforeEach(() => {
-    clearMockPosts();
-    mockGET(
-      /\/contact\/history\/contact-.*/,
-      '/test-assets/contacts/history.json'
-    );
-    clock = useFakeTimers();
-  });
-
-  afterEach(function () {
-    clock.restore();
-  });
 
-  it('with text and attachments - success', async () => {
+  it('sends text with attachments', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
@@ -316,114 +182,17 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     mockPOST(/api\/v2\/messages\.json/, response_body);
 
     // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    await assertScreenshot(
-      'contacts/compose-text-and-attachments-success',
-      getClip(chat)
-    );
-  });
-
-  it('with text and attachments - failure - more than 640 chars', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      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]
-    };
-    const response_headers = {};
-    const response_status = '400';
-    mockPOST(
-      /api\/v2\/messages\.json/,
-      response_body,
-      response_headers,
-      response_status
-    );
-
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    await assertScreenshot(
-      'contacts/compose-text-and-attachments-failure-text',
-      getClip(chat)
-    );
-  });
-
-  it('with text and attachments - failure - more than 10 files', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      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]
-    };
-    const response_headers = {};
-    const response_status = '400';
-    mockPOST(
-      /api\/v2\/messages\.json/,
-      response_body,
-      response_headers,
-      response_status
-    );
-
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    await assertScreenshot(
-      'contacts/compose-text-and-attachments-failure-attachments',
-      getClip(chat)
-    );
-  });
-
-  it('with text and attachments - failure - more than 640 chars and more than 10 files', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      contact: 'contact-dave-active'
-    });
-    const compose = chat.shadowRoot.querySelector('temba-compose') as Compose;
-    // set the chatbox to a string that is 640+ chars
-    // set the attachments to a list that is 10+ items
-    await updateComponent(compose, getInvalidText(), getValidAttachments(11));
-
-    const response_body = {
-      text: [responseTextError],
-      attachments: [responseAttachmentError]
-    };
-    const response_headers = {};
-    const response_status = '400';
-    mockPOST(
-      /api\/v2\/messages\.json/,
-      response_body,
-      response_headers,
-      response_status
-    );
-
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    const listener = oneEvent(compose, CustomEventType.Submitted, false);
+    await typeInto('temba-contact-chat:temba-compose', '', false, true);
+    expect(await listener).to.exist;
 
     await assertScreenshot(
-      'contacts/compose-text-and-attachments-failure-text-and-attachments',
+      'contacts/chat-sends-text-and-attachments',
       getClip(chat)
     );
   });
 
-  it('with text and attachments - failure - generic', async () => {
+  it('shows failure message with retry', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({
@@ -442,13 +211,11 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
       response_status
     );
 
-    // press enter
-    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
-    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    // press
+    const listener = oneEvent(compose, CustomEventType.Submitted, false);
+    await typeInto('temba-contact-chat:temba-compose', '', false, true);
+    expect(await listener).to.exist;
 
-    await assertScreenshot(
-      'contacts/compose-text-and-attachments-failure-generic',
-      getClip(chat)
-    );
+    await assertScreenshot('contacts/chat-failure', getClip(chat));
   });
 });

package/web-test-runner.config.mjs

@@ -333,6 +333,7 @@ export default {
           '--disable-web-security',
           '--force-device-scale-factor=1',
           '--no-sandbox',
+          '--disable-gpu',
         ],
         headless: true,
       },

package/static/svg/work/traced/folder-shield.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.624 2.385 C 1.780 2.768,1.314 3.435,1.107 4.557 C 1.004 5.115,0.960 8.006,0.991 12.207 C 1.040 18.914,1.043 18.965,1.414 19.720 C 1.620 20.137,2.073 20.723,2.421 21.021 C 3.537 21.976,3.774 22.000,12.000 22.000 C 20.226 22.000,20.463 21.976,21.579 21.021 C 21.927 20.723,22.380 20.137,22.586 19.720 C 22.954 18.973,22.960 18.876,22.960 14.000 C 22.960 9.796,22.921 8.955,22.704 8.480 C 22.292 7.578,21.591 6.861,20.727 6.459 C 19.968 6.105,19.734 6.083,16.800 6.080 L 13.680 6.076 12.880 4.529 C 12.219 3.250,11.957 2.905,11.369 2.531 L 10.657 2.080 6.969 2.084 C 3.718 2.087,3.202 2.122,2.624 2.385 M10.393 4.313 C 10.678 4.598,11.360 5.784,11.360 5.994 C 11.360 6.041,9.488 6.080,7.200 6.080 L 3.040 6.080 3.040 5.289 C 3.040 4.038,3.153 4.000,6.916 4.000 C 9.844 4.000,10.103 4.023,10.393 4.313 M20.357 8.603 L 20.880 9.126 20.880 14.000 L 20.880 18.874 20.357 19.397 L 19.834 19.920 12.000 19.920 L 4.166 19.920 3.643 19.397 L 3.120 18.874 3.072 13.430 L 3.024 7.987 11.429 8.033 L 19.834 8.080 20.357 8.603 M11.520 9.557 C 10.582 9.700,8.297 10.623,8.136 10.924 C 8.035 11.113,7.990 11.989,8.024 13.100 C 8.075 14.785,8.121 15.030,8.519 15.707 C 9.036 16.586,10.294 17.730,11.291 18.228 L 12.000 18.582 12.709 18.228 C 13.706 17.730,14.964 16.586,15.481 15.707 C 15.879 15.030,15.925 14.785,15.976 13.100 C 16.010 11.989,15.965 11.113,15.864 10.924 C 15.757 10.726,15.174 10.428,14.288 10.120 C 12.762 9.589,12.140 9.463,11.520 9.557 M13.066 11.789 L 13.920 12.058 13.920 13.334 L 13.920 14.609 13.064 15.464 C 12.594 15.935,12.115 16.320,12.000 16.320 C 11.885 16.320,11.406 15.935,10.936 15.464 L 10.080 14.609 10.080 13.332 L 10.080 12.056 10.840 11.803 C 11.838 11.471,12.053 11.470,13.066 11.789 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/folder-shield.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 7L11.8845 4.76892C11.5634 4.1268 11.4029 3.80573 11.1634 3.57116C10.9516 3.36373 10.6963 3.20597 10.4161 3.10931C10.0992 3 9.74021 3 9.02229 3H5.2C4.0799 3 3.51984 3 3.09202 3.21799C2.71569 3.40973 2.40973 3.71569 2.21799 4.09202C2 4.51984 2 5.0799 2 6.2V7M2 7H17.2C18.8802 7 19.7202 7 20.362 7.32698C20.9265 7.6146 21.3854 8.07354 21.673 8.63803C22 9.27976 22 10.1198 22 11.8V16.2C22 17.8802 22 18.7202 21.673 19.362C21.3854 19.9265 20.9265 20.3854 20.362 20.673C19.7202 21 18.8802 21 17.2 21H6.8C5.11984 21 4.27976 21 3.63803 20.673C3.07354 20.3854 2.6146 19.9265 2.32698 19.362C2 18.7202 2 17.8802 2 16.2V7ZM12 17.5C12 17.5 15 16.0701 15 13.9252V11.4229L12.8124 10.6412C12.2868 10.4529 11.712 10.4529 11.1864 10.6412L9 11.4229V13.9252C9 16.0701 12 17.5 12 17.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>