@nyaruka/temba-components 0.43.8 → 0.45.0

package/test/temba-compose.test.ts

@@ -23,11 +23,26 @@ export const updateComponent = async (
   attachments?: Attachment[],
   errorAttachments?: Attachment[]
 ): Promise<void> => {
-  compose.currentChat = text ? text : '';
-  compose.values = attachments ? attachments : [];
-  compose.errorValues = errorAttachments ? errorAttachments : [];
+  compose.currentText = text ? text : '';
+  compose.currentAttachments = attachments ? attachments : [];
+  compose.failedAttachments = errorAttachments ? errorAttachments : [];
   await compose.updateComplete;
 };
+
+const getInitialValue = (text?: string, attachments?: Attachment[]): any => {
+  const composeValue = {
+    text: text ? text : '',
+    attachments: attachments ? attachments : [],
+  };
+  return composeValue;
+};
+const getComposeValue = (value: any): string => {
+  return JSON.stringify(value);
+};
+const getComposeValues = (value: any): any[] => {
+  return [value];
+};
+
 export const getSuccessText = () => {
   return 'sà-wàd-dee!';
 };
@@ -152,6 +167,25 @@ describe('temba-compose chatbox', () => {
     );
   });
 
+  it('chatbox counter and send button deserialize and serialize', async () => {
+    const initialValue = getInitialValue();
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      chatbox: true,
+      counter: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal('');
+    expect(compose.currentAttachments).to.deep.equal([]);
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('chatbox with text', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
@@ -162,6 +196,25 @@ describe('temba-compose chatbox', () => {
     await assertScreenshot('compose/chatbox-with-text', getClip(compose));
   });
 
+  it('chatbox with text deserialize and serialize', async () => {
+    const initialValue = getInitialValue(getSuccessText());
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      chatbox: true,
+      counter: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal(getSuccessText());
+    expect(compose.currentAttachments).to.deep.equal([]);
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('chatbox with text and spaces', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
@@ -258,6 +311,24 @@ describe('temba-compose attachments', () => {
     );
   });
 
+  it('attachments and send button deserialize and serialize', async () => {
+    const initialValue = getInitialValue();
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      attachments: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal('');
+    expect(compose.currentAttachments).to.deep.equal([]);
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('attachments with success uploaded files', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
@@ -270,6 +341,24 @@ describe('temba-compose attachments', () => {
     );
   });
 
+  it('attachments with success uploaded files deserialize and serialize', async () => {
+    const initialValue = getInitialValue(null, getSuccessFiles());
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      attachments: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal('');
+    expect(compose.currentAttachments).to.deep.equal(getSuccessFiles());
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('attachments with failure uploaded files', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
@@ -375,6 +464,26 @@ describe('temba-compose chatbox and attachments', () => {
       getClip(compose)
     );
   });
+
+  it('chatbox and attachments counter and send button deserialize and serialize', async () => {
+    const initialValue = getInitialValue();
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      chatbox: true,
+      attachments: true,
+      counter: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal('');
+    expect(compose.currentAttachments).to.deep.equal([]);
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
 });
 
 describe('temba-compose chatbox with text and attachments no files', () => {
@@ -385,13 +494,33 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       counter: true,
       button: true,
     });
-    compose.currentChat = 'sà-wàd-dee!';
+    updateComponent(compose, getSuccessText());
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-no-files',
       getClip(compose)
     );
   });
 
+  it('chatbox with text, attachments no files deserialize and serialize', async () => {
+    const initialValue = getInitialValue(getSuccessText());
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      chatbox: true,
+      attachments: true,
+      counter: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal(getSuccessText());
+    expect(compose.currentAttachments).to.deep.equal([]);
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('chatbox with text, attachments no files, and click send', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
@@ -399,7 +528,7 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       counter: true,
       button: true,
     });
-    compose.currentChat = 'sà-wàd-dee!';
+    updateComponent(compose, getSuccessText());
     const send = compose.shadowRoot.querySelector(
       'temba-button#send-button'
     ) as Button;
@@ -443,6 +572,25 @@ describe('temba-compose chatbox no text and attachments with files', () => {
     );
   });
 
+  it('chatbox no text, attachments with success uploaded files deserialize and serialize', async () => {
+    const initialValue = getInitialValue(null, getSuccessFiles());
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      chatbox: true,
+      attachments: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal('');
+    expect(compose.currentAttachments).to.deep.equal(getSuccessFiles());
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('chatbox no text, attachments with failure uploaded files', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
@@ -518,6 +666,25 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     );
   });
 
+  it('chatbox with text, attachments with success uploaded files deserialize and serialize', async () => {
+    const initialValue = getInitialValue(getSuccessText(), getSuccessFiles());
+    const composeValue = getComposeValue(initialValue);
+    const composeValues = getComposeValues(initialValue);
+
+    const compose: Compose = await getCompose({
+      chatbox: true,
+      attachments: true,
+      button: true,
+      value: composeValue,
+    });
+    // deserialize
+    expect(compose.currentText).to.equal(getSuccessText());
+    expect(compose.currentAttachments).to.deep.equal(getSuccessFiles());
+    // serialize
+    expect(compose.value).to.equal(composeValue);
+    expect(compose.values).to.deep.equal(composeValues);
+  });
+
   it('chatbox with text, attachments with failure uploaded files', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,

package/test/temba-store.test.ts

@@ -4,7 +4,7 @@ import './utils.test';
 
 const createStore = async (def: string): Promise<Store> => {
   const store = (await fixture(def)) as Store;
-  await store.httpComplete;
+  await store.initialHttpComplete;
   return store;
 };
 

package/test/utils.test.ts

@@ -231,8 +231,8 @@ export const loadStore = async () => {
       fields='/test-assets/store/fields.json'
     />`
   );
-  await store.httpComplete;
-  await store.httpComplete;
+  await store.initialHttpComplete;
+  await store.initialHttpComplete;
 
   return store;
 };