@nyaruka/temba-components 0.41.7 → 0.42.1

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

@@ -1,17 +1,25 @@
-import { expect, waitUntil } from '@open-wc/testing';
 import { useFakeTimers } from 'sinon';
+import { Button } from '../src/button/Button';
+import { Compose } from '../src/compose/Compose';
 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,
+  clearMockPosts,
   getClip,
   getComponent,
   loadStore,
   mockGET,
   mockNow,
+  mockPOST,
 } from '../test/utils.test';
+import {
+  getFailText,
+  getSuccessFiles,
+  getSuccessText,
+  updateComponent,
+} from './temba-compose.test';
 
 let clock: any;
 mockNow('2021-03-31T00:31:00.000-00:00');
@@ -85,21 +93,6 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-dave-active',
     });
 
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
-
-    const chatboxDivEl = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDivEl).to.not.equal(null);
-
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.equal(null);
-
     await assertScreenshot(
       'contacts/contact-active-show-chatbox',
       getClip(chat)
@@ -113,21 +106,6 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-barack-archived',
     });
 
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
-
-    const chatboxDiv = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDiv).to.equal(null);
-
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.equal(null);
-
     await assertScreenshot(
       'contacts/contact-archived-hide-chatbox',
       getClip(chat)
@@ -141,21 +119,6 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-michelle-blocked',
     });
 
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
-
-    const chatboxDiv = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDiv).to.equal(null);
-
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.equal(null);
-
     await assertScreenshot(
       'contacts/contact-blocked-hide-chatbox',
       getClip(chat)
@@ -169,23 +132,338 @@ describe('temba-contact-chat - contact tests', () => {
       contact: 'contact-tim-stopped',
     });
 
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null, 'Chat history missing');
+    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();
+  });
+
+  it('with text no attachments - success', 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;
+    await updateComponent(compose, getSuccessText());
 
-    const chatboxDiv = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDiv).to.equal(null);
+    const response_body = {
+      contacts: [{ uuid: 'contact-dave-active', name: 'Dave Matthews' }],
+      text: { eng: 'sà-wàd-dee!' },
+      attachments: { eng: [] },
+    };
+    mockPOST(/api\/v2\/broadcasts\.json/, response_body);
 
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.equal(null);
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
 
     await assertScreenshot(
-      'contacts/contact-stopped-hide-chatbox',
+      '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, getFailText());
+
+    const response_body = {
+      text: { eng: ['Ensure this field has no more than 640 characters.'] },
+    };
+    const response_headers = {};
+    const response_status = '400';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    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();
+  });
+
+  afterEach(function () {
+    clock.restore();
+  });
+
+  it('with attachments no text - success', 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;
+    const attachments = getSuccessFiles();
+    await updateComponent(compose, null, attachments);
+    const response_body = {
+      contacts: [{ uuid: 'contact-dave-active', name: 'Dave Matthews' }],
+      text: { eng: '' },
+      attachments: { eng: attachments },
+    };
+    const response_headers = {};
+    const response_status = '200';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    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, getSuccessFiles(11));
+
+    const response_body = {
+      attachments: { eng: ['Ensure this field has no more than 10 elements.'] },
+    };
+    const response_headers = {};
+    const response_status = '400';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    await assertScreenshot(
+      'contacts/compose-attachments-no-text-failure',
+      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 () => {
+    // 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;
+    await updateComponent(compose, getSuccessText(), getSuccessFiles());
+
+    const text = getSuccessText();
+    const attachments = getSuccessFiles();
+    const response_body = {
+      contacts: [{ uuid: 'contact-dave-active', name: 'Dave Matthews' }],
+      text: { eng: text },
+      attachments: { eng: attachments },
+    };
+    mockPOST(/api\/v2\/broadcasts\.json/, response_body);
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    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, getFailText(), getSuccessFiles());
+
+    const response_body = {
+      text: { eng: ['Ensure this field has no more than 640 characters.'] },
+    };
+    const response_headers = {};
+    const response_status = '400';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    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, getSuccessText(), getSuccessFiles(11));
+
+    const response_body = {
+      attachments: { eng: ['Ensure this field has no more than 10 elements.'] },
+    };
+    const response_headers = {};
+    const response_status = '400';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    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, getFailText(), getSuccessFiles(11));
+
+    const response_body = {
+      text: { eng: ['Ensure this field has no more than 640 characters.'] },
+    };
+    const response_headers = {};
+    const response_status = '400';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    await assertScreenshot(
+      'contacts/compose-text-and-attachments-failure-text-and-attachments',
+      getClip(chat)
+    );
+  });
+
+  it('with text and attachments - failure - generic', 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;
+    await updateComponent(compose, getSuccessText(), getSuccessFiles());
+
+    const response_body = {};
+    const response_headers = {};
+    const response_status = '500';
+    mockPOST(
+      /api\/v2\/broadcasts\.json/,
+      response_body,
+      response_headers,
+      response_status
+    );
+
+    const send = compose.shadowRoot.querySelector(
+      'temba-button#send-button'
+    ) as Button;
+    send.click();
+
+    await assertScreenshot(
+      'contacts/compose-text-and-attachments-failure-generic',
       getClip(chat)
     );
   });
@@ -221,29 +499,25 @@ describe('temba-contact-chat - ticket tests', () => {
 
     chat.currentTicket = tickets.items[0];
     chat.refresh();
+    await chat.httpComplete;
 
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
-
-    const chatboxDiv = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDiv).to.not.equal(null);
-
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.equal(null);
-
+    // we want to wait until our scroll is finished before taking our screenshot
+    // once we have two scrollTops that are the same, we'll assume we're ready
+    let lastScroll = 0;
     await assertScreenshot(
       'contacts/contact-active-ticket-open-show-chatbox',
       getClip(chat),
       {
         clock: clock,
-        predicate: () =>
-          chat.getContactHistory().getEventsPane().scrollTop === 982,
+        predicate: () => {
+          const currentScroll = chat
+            .getContactHistory()
+            .getEventsPane().scrollTop;
+          if (currentScroll !== 0 && currentScroll === lastScroll) {
+            return true;
+          }
+          lastScroll = currentScroll;
+        },
       }
     );
   });
@@ -260,31 +534,15 @@ describe('temba-contact-chat - ticket tests', () => {
     });
     chat.currentTicket = tickets.items[0];
     chat.refresh();
-
     await chat.httpComplete;
 
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
-
-    const chatboxDiv = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDiv).to.equal(null);
-
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.not.equal(null);
-
     await assertScreenshot(
       'contacts/contact-active-ticket-closed-show-reopen-button',
       getClip(chat),
       {
         clock: clock,
         predicate: () => {
-          return chat.getContactHistory().getEventsPane().scrollTop === 918;
+          return chat.getContactHistory().getEventsPane().scrollTop === 921;
         },
       }
     );
@@ -303,21 +561,7 @@ describe('temba-contact-chat - ticket tests', () => {
     });
     chat.currentTicket = tickets.items[0];
     chat.refresh();
-
-    const chatHistoryEl = chat.shadowRoot.querySelector(
-      'temba-contact-history'
-    ) as ContactHistory;
-    expect(chatHistoryEl).to.not.equal(null);
-
-    const chatboxDiv = chat.shadowRoot.querySelector(
-      '.chatbox'
-    ) as HTMLDivElement;
-    expect(chatboxDiv).to.equal(null);
-
-    const reopenButton = chat.shadowRoot.querySelector(
-      'temba-button#reopen-button'
-    ) as HTMLDivElement;
-    expect(reopenButton).to.equal(null);
+    await chat.httpComplete;
 
     await assertScreenshot(
       'contacts/contact-archived-ticket-closed-hide-chatbox',
@@ -325,7 +569,7 @@ describe('temba-contact-chat - ticket tests', () => {
       {
         clock: clock,
         predicate: () => {
-          return chat.getContactHistory().getEventsPane().scrollTop === 867;
+          return chat.getContactHistory().getEventsPane().scrollTop === 870;
         },
       }
     );

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

@@ -18,6 +18,10 @@ 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;
+
+  // make sure our initial fetch is made
+  await history.httpComplete;
+
   return history;
 };
 
@@ -57,7 +61,7 @@ describe('temba-contact-history', () => {
     clock.restore();
   });
 
-  it.only('can be created', async () => {
+  it('can be created', async () => {
     const history = await createHistory(getHistoryHTML());
     assert.instanceOf(history, ContactHistory);
   });
@@ -69,13 +73,14 @@ describe('temba-contact-history', () => {
       })
     );
 
-    // we should have scrolled to the bottom
+    // we should have scrolled to the bottom, but the scroll
+    // happens in a window timeout
+    await clock.runAllAsync();
+    await history.updateComplete;
+
     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));

package/test/utils.test.ts

@@ -16,10 +16,11 @@ export interface CodeMock {
   endpoint: RegExp;
   body: string;
   headers: any;
+  status: string;
 }
 
 const gets: CodeMock[] = [];
-const posts: CodeMock[] = [];
+let posts: CodeMock[] = [];
 let normalFetch;
 
 export const showMouse = async () => {
@@ -53,14 +54,14 @@ export const getComponent = async (
     ${height > 0 ? `height:${height}px;` : ``}
     ${style ? style : ``}
   `;
-
   parentNode.setAttribute('style', styleAttribute);
-  return await fixture(spec, { parentNode });
+  const component = await fixture(spec, { parentNode });
+  return component;
 };
 
 const createResponse = mocked => {
   const mockResponse = new window.Response(mocked.body, {
-    status: 200,
+    status: mocked.status,
     headers: {
       'Content-type': 'text/html',
       ...mocked.headers,
@@ -72,7 +73,7 @@ const createResponse = mocked => {
 
 const createJSONResponse = mocked => {
   const mockResponse = new window.Response(JSON.stringify(mocked.body), {
-    status: 200,
+    status: mocked.status,
     headers: {
       'Content-type': 'application/json',
       ...mocked.headers,
@@ -114,12 +115,26 @@ after(() => {
   (window.fetch as any).restore();
 });
 
-export const mockGET = (endpoint: RegExp, body: any, headers: any = {}) => {
-  gets.push({ endpoint, body, headers });
+export const mockGET = (
+  endpoint: RegExp,
+  body: any,
+  headers: any = {},
+  status = '200'
+) => {
+  gets.push({ endpoint, body, headers, status });
+};
+
+export const mockPOST = (
+  endpoint: RegExp,
+  body: any,
+  headers: any = {},
+  status = '200'
+) => {
+  posts.push({ endpoint, body, headers, status });
 };
 
-export const mockPOST = (endpoint: RegExp, body: any, headers: any = {}) => {
-  posts.push({ endpoint, body, headers });
+export const clearMockPosts = () => {
+  posts = [];
 };
 
 export const checkTimers = (clock: any) => {