@nyaruka/temba-components 0.122.0 → 0.124.0

package/out-tsc/test/temba-flow-render.test.js

@@ -0,0 +1,171 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { renderSendMsg, renderSetContactName, renderSetRunResult, renderCallWebhook, renderAddToGroups } from '../src/flow/render';
+describe('Flow Render Functions', () => {
+    const mockNode = {
+        uuid: 'test-node-uuid',
+        actions: [],
+        exits: []
+    };
+    describe('renderSendMsg', () => {
+        it('renders message text with line breaks', async () => {
+            const action = {
+                type: 'send_msg',
+                uuid: 'action-uuid-1',
+                text: 'Hello world\nThis is a new line',
+                quick_replies: []
+            };
+            const result = renderSendMsg(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.innerHTML).to.contain('Hello world<br>This is a new line');
+        });
+        it('renders quick replies when present', async () => {
+            const action = {
+                type: 'send_msg',
+                uuid: 'action-uuid-2',
+                text: 'Choose an option:',
+                quick_replies: ['Yes', 'No', 'Maybe']
+            };
+            const result = renderSendMsg(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.innerHTML).to.contain('Choose an option:');
+            expect(container.innerHTML).to.contain('quick-replies');
+            expect(container.innerHTML).to.contain('Yes');
+            expect(container.innerHTML).to.contain('No');
+            expect(container.innerHTML).to.contain('Maybe');
+        });
+        it('renders without quick replies when none provided', async () => {
+            const action = {
+                type: 'send_msg',
+                uuid: 'action-uuid-3',
+                text: 'Simple message',
+                quick_replies: []
+            };
+            const result = renderSendMsg(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.innerHTML).to.contain('Simple message');
+            expect(container.innerHTML).to.not.contain('quick-replies');
+        });
+    });
+    describe('renderSetContactName', () => {
+        it('renders contact name setting', async () => {
+            const action = {
+                type: 'set_contact_name',
+                uuid: 'action-uuid-4',
+                name: 'John Doe'
+            };
+            const result = renderSetContactName(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.textContent).to.contain('Set contact name to');
+            expect(container.textContent).to.contain('John Doe');
+            expect(container.querySelector('b')).to.exist;
+        });
+    });
+    describe('renderSetRunResult', () => {
+        it('renders run result setting', async () => {
+            const action = {
+                type: 'set_run_result',
+                uuid: 'action-uuid-5',
+                category: 'success',
+                name: 'favorite_color',
+                value: 'blue'
+            };
+            const result = renderSetRunResult(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.textContent).to.contain('Save blue as');
+            expect(container.textContent).to.contain('favorite_color');
+            expect(container.querySelector('b')).to.exist;
+        });
+    });
+    describe('renderCallWebhook', () => {
+        it('renders webhook URL', async () => {
+            const action = {
+                type: 'call_webhook',
+                uuid: 'action-uuid-6',
+                url: 'https://example.com/webhook'
+            };
+            const result = renderCallWebhook(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.innerHTML).to.contain('https://example.com/webhook');
+            expect(container.querySelector('div')).to.have.style('word-break', 'break-all');
+        });
+    });
+    describe('renderAddToGroups', () => {
+        it('renders groups with icons', async () => {
+            const action = {
+                type: 'add_contact_groups',
+                uuid: 'action-uuid-7',
+                groups: [
+                    {
+                        uuid: 'group1',
+                        name: 'VIP Customers',
+                        status: 'active',
+                        system: false,
+                        query: '',
+                        count: 10
+                    },
+                    {
+                        uuid: 'group2',
+                        name: 'Newsletter Subscribers',
+                        status: 'active',
+                        system: false,
+                        query: '',
+                        count: 25
+                    }
+                ]
+            };
+            const result = renderAddToGroups(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.innerHTML).to.contain('VIP Customers');
+            expect(container.innerHTML).to.contain('Newsletter Subscribers');
+            expect(container.querySelectorAll('temba-icon')).to.have.length(2);
+            const icons = container.querySelectorAll('temba-icon');
+            icons.forEach((icon) => {
+                expect(icon.getAttribute('name')).to.equal('group');
+            });
+        });
+        it('renders empty groups array', async () => {
+            const action = {
+                type: 'add_contact_groups',
+                uuid: 'action-uuid-8',
+                groups: []
+            };
+            const result = renderAddToGroups(mockNode, action);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.querySelectorAll('temba-icon')).to.have.length(0);
+        });
+        it('renders groups without icons when undefined', async () => {
+            // Test the renderNamedObjects function without an icon parameter
+            const action = {
+                type: 'add_contact_groups',
+                uuid: 'action-uuid-9',
+                groups: [
+                    {
+                        uuid: 'group1',
+                        name: 'Test Group',
+                        status: 'active',
+                        system: false,
+                        query: '',
+                        count: 5
+                    }
+                ]
+            };
+            // Create a test version that calls renderNamedObjects without icon
+            // to cover the null case in the render.ts file
+            const namedObjects = action.groups;
+            // Create a test version that calls renderNamedObjects without icon
+            const testRender = (assets) => {
+                return assets.map((asset) => {
+                    return html `<div style="display:flex;items-align:center">
+            ${null /* This should trigger the null branch */}
+            <div>${asset.name}</div>
+          </div>`;
+                });
+            };
+            const result = testRender(namedObjects);
+            const container = await fixture(html `<div>${result}</div>`);
+            expect(container.innerHTML).to.contain('Test Group');
+            expect(container.querySelectorAll('temba-icon')).to.have.length(0);
+        });
+    });
+});
+//# sourceMappingURL=temba-flow-render.test.js.map

package/out-tsc/test/temba-flow-render.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-flow-render.test.js","sourceRoot":"","sources":["../../test/temba-flow-render.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport {\n  renderSendMsg,\n  renderSetContactName,\n  renderSetRunResult,\n  renderCallWebhook,\n  renderAddToGroups\n} from '../src/flow/render';\nimport {\n  Node,\n  SendMsg,\n  SetContactName,\n  SetRunResult,\n  CallWebhook,\n  AddToGroup\n} from '../src/store/flow-definition.d';\n\ndescribe('Flow Render Functions', () => {\n  const mockNode: Node = {\n    uuid: 'test-node-uuid',\n    actions: [],\n    exits: []\n  };\n\n  describe('renderSendMsg', () => {\n    it('renders message text with line breaks', async () => {\n      const action: SendMsg = {\n        type: 'send_msg',\n        uuid: 'action-uuid-1',\n        text: 'Hello world\\nThis is a new line',\n        quick_replies: []\n      };\n\n      const result = renderSendMsg(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.innerHTML).to.contain(\n        'Hello world<br>This is a new line'\n      );\n    });\n\n    it('renders quick replies when present', async () => {\n      const action: SendMsg = {\n        type: 'send_msg',\n        uuid: 'action-uuid-2',\n        text: 'Choose an option:',\n        quick_replies: ['Yes', 'No', 'Maybe']\n      };\n\n      const result = renderSendMsg(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.innerHTML).to.contain('Choose an option:');\n      expect(container.innerHTML).to.contain('quick-replies');\n      expect(container.innerHTML).to.contain('Yes');\n      expect(container.innerHTML).to.contain('No');\n      expect(container.innerHTML).to.contain('Maybe');\n    });\n\n    it('renders without quick replies when none provided', async () => {\n      const action: SendMsg = {\n        type: 'send_msg',\n        uuid: 'action-uuid-3',\n        text: 'Simple message',\n        quick_replies: []\n      };\n\n      const result = renderSendMsg(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.innerHTML).to.contain('Simple message');\n      expect(container.innerHTML).to.not.contain('quick-replies');\n    });\n  });\n\n  describe('renderSetContactName', () => {\n    it('renders contact name setting', async () => {\n      const action: SetContactName = {\n        type: 'set_contact_name',\n        uuid: 'action-uuid-4',\n        name: 'John Doe'\n      };\n\n      const result = renderSetContactName(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.textContent).to.contain('Set contact name to');\n      expect(container.textContent).to.contain('John Doe');\n      expect(container.querySelector('b')).to.exist;\n    });\n  });\n\n  describe('renderSetRunResult', () => {\n    it('renders run result setting', async () => {\n      const action: SetRunResult = {\n        type: 'set_run_result',\n        uuid: 'action-uuid-5',\n        category: 'success',\n        name: 'favorite_color',\n        value: 'blue'\n      };\n\n      const result = renderSetRunResult(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.textContent).to.contain('Save blue as');\n      expect(container.textContent).to.contain('favorite_color');\n      expect(container.querySelector('b')).to.exist;\n    });\n  });\n\n  describe('renderCallWebhook', () => {\n    it('renders webhook URL', async () => {\n      const action: CallWebhook = {\n        type: 'call_webhook',\n        uuid: 'action-uuid-6',\n        url: 'https://example.com/webhook'\n      };\n\n      const result = renderCallWebhook(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.innerHTML).to.contain('https://example.com/webhook');\n      expect(container.querySelector('div')).to.have.style(\n        'word-break',\n        'break-all'\n      );\n    });\n  });\n\n  describe('renderAddToGroups', () => {\n    it('renders groups with icons', async () => {\n      const action: AddToGroup = {\n        type: 'add_contact_groups',\n        uuid: 'action-uuid-7',\n        groups: [\n          {\n            uuid: 'group1',\n            name: 'VIP Customers',\n            status: 'active',\n            system: false,\n            query: '',\n            count: 10\n          },\n          {\n            uuid: 'group2',\n            name: 'Newsletter Subscribers',\n            status: 'active',\n            system: false,\n            query: '',\n            count: 25\n          }\n        ]\n      };\n\n      const result = renderAddToGroups(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.innerHTML).to.contain('VIP Customers');\n      expect(container.innerHTML).to.contain('Newsletter Subscribers');\n      expect(container.querySelectorAll('temba-icon')).to.have.length(2);\n\n      const icons = container.querySelectorAll('temba-icon');\n      icons.forEach((icon) => {\n        expect(icon.getAttribute('name')).to.equal('group');\n      });\n    });\n\n    it('renders empty groups array', async () => {\n      const action: AddToGroup = {\n        type: 'add_contact_groups',\n        uuid: 'action-uuid-8',\n        groups: []\n      };\n\n      const result = renderAddToGroups(mockNode, action);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.querySelectorAll('temba-icon')).to.have.length(0);\n    });\n\n    it('renders groups without icons when undefined', async () => {\n      // Test the renderNamedObjects function without an icon parameter\n      const action: AddToGroup = {\n        type: 'add_contact_groups',\n        uuid: 'action-uuid-9',\n        groups: [\n          {\n            uuid: 'group1',\n            name: 'Test Group',\n            status: 'active',\n            system: false,\n            query: '',\n            count: 5\n          }\n        ]\n      };\n\n      // Create a test version that calls renderNamedObjects without icon\n      // to cover the null case in the render.ts file\n      const namedObjects = action.groups;\n\n      // Create a test version that calls renderNamedObjects without icon\n      const testRender = (assets: any[]) => {\n        return assets.map((asset) => {\n          return html`<div style=\"display:flex;items-align:center\">\n            ${null /* This should trigger the null branch */}\n            <div>${asset.name}</div>\n          </div>`;\n        });\n      };\n\n      const result = testRender(namedObjects);\n      const container = await fixture(html`<div>${result}</div>`);\n\n      expect(container.innerHTML).to.contain('Test Group');\n      expect(container.querySelectorAll('temba-icon')).to.have.length(0);\n    });\n  });\n});\n"]}

package/out-tsc/test/temba-omnibox.test.js

@@ -1,7 +1,6 @@
 import { fixture, assert } from '@open-wc/testing';
 import { Omnibox } from '../src/omnibox/Omnibox';
-import { assertScreenshot, getClip } from './utils.test';
-import { openAndClick } from './temba-select.test';
+import { assertScreenshot, getClip, openAndClick } from './utils.test';
 import { useFakeTimers, spy } from 'sinon';
 export const getHTML = (attrs = { name: 'recipients' }) => {
     const selectHTML = `
@@ -19,7 +18,7 @@ export const getHTML = (attrs = { name: 'recipients' }) => {
 };
 export const createOmnibox = async (clock, attrs = {}) => {
     const parentNode = document.createElement('div');
-    parentNode.setAttribute('style', 'width: 250px;');
+    parentNode.setAttribute('style', 'width: 400px;');
     const omnibox = await fixture(getHTML(attrs), { parentNode });
     clock.runAll();
     await omnibox.updateComplete;

package/out-tsc/test/temba-omnibox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-omnibox.test.js","sourceRoot":"","sources":["../../test/temba-omnibox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { Omnibox } from '../src/omnibox/Omnibox';\nimport { assertScreenshot, getClip } from './utils.test';\nimport { openAndClick } from './temba-select.test';\nimport { useFakeTimers, spy } from 'sinon';\n\nexport const getHTML = (attrs: any = { name: 'recipients' }): string => {\n  const selectHTML = `\n  <temba-omnibox${Object.keys(attrs)\n    .map((name: string) => {\n      // check if it's a string attribute\n      if (typeof attrs[name] === 'string') {\n        return ` ${name}=\"${attrs[name].replace(/\"/g, '&quot;')}\"`;\n      }\n      return ` ${name}=\"${attrs[name]}\"`;\n    })\n    .join(' ')}>\n  </temba-select>`;\n  return selectHTML;\n};\n\nexport const createOmnibox = async (\n  clock: any,\n  attrs: any = {}\n): Promise<Omnibox> => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 250px;');\n\n  const omnibox: Omnibox = await fixture(getHTML(attrs), { parentNode });\n  clock.runAll();\n  await omnibox.updateComplete;\n  return omnibox;\n};\n\ndescribe('temba-omnibox', () => {\n  let clock: any;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('can be created', async () => {\n    const omnibox: Omnibox = await fixture(\n      getHTML({ endpoint: '/test-assets/select/omnibox.json' })\n    );\n    assert.instanceOf(omnibox, Omnibox);\n  });\n\n  it('fires change events on selection', async () => {\n    const omnibox: Omnibox = await createOmnibox(clock, {\n      endpoint: '/test-assets/select/omnibox.json'\n    });\n\n    const changeEvent = spy();\n    omnibox.addEventListener('change', changeEvent);\n\n    await openAndClick(clock, omnibox, 0);\n    assert(changeEvent.called, 'change event not fired');\n\n    await assertScreenshot('omnibox/selected', getClip(omnibox));\n  });\n});\n"]}
+{"version":3,"file":"temba-omnibox.test.js","sourceRoot":"","sources":["../../test/temba-omnibox.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAa,EAAE,IAAI,EAAE,YAAY,EAAE,EAAU,EAAE;IACrE,MAAM,UAAU,GAAG;kBACH,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;SAC/B,GAAG,CAAC,CAAC,IAAY,EAAE,EAAE;QACpB,mCAAmC;QACnC,IAAI,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC;QAC7D,CAAC;QACD,OAAO,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACrC,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC;kBACI,CAAC;IACjB,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAChC,KAAU,EACV,QAAa,EAAE,EACG,EAAE;IACpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAElD,MAAM,OAAO,GAAY,MAAM,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IACvE,KAAK,CAAC,MAAM,EAAE,CAAC;IACf,MAAM,OAAO,CAAC,cAAc,CAAC;IAC7B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,IAAI,KAAU,CAAC;IACf,UAAU,CAAC;QACT,KAAK,GAAG,aAAa,EAAE,CAAC;QACxB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC;QACR,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,OAAO,GAAY,MAAM,OAAO,CACpC,OAAO,CAAC,EAAE,QAAQ,EAAE,kCAAkC,EAAE,CAAC,CAC1D,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,OAAO,GAAY,MAAM,aAAa,CAAC,KAAK,EAAE;YAClD,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC;QAC1B,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAEhD,MAAM,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACtC,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;QAErD,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { Omnibox } from '../src/omnibox/Omnibox';\nimport { assertScreenshot, getClip, openAndClick } from './utils.test';\nimport { useFakeTimers, spy } from 'sinon';\n\nexport const getHTML = (attrs: any = { name: 'recipients' }): string => {\n  const selectHTML = `\n  <temba-omnibox${Object.keys(attrs)\n    .map((name: string) => {\n      // check if it's a string attribute\n      if (typeof attrs[name] === 'string') {\n        return ` ${name}=\"${attrs[name].replace(/\"/g, '&quot;')}\"`;\n      }\n      return ` ${name}=\"${attrs[name]}\"`;\n    })\n    .join(' ')}>\n  </temba-select>`;\n  return selectHTML;\n};\n\nexport const createOmnibox = async (\n  clock: any,\n  attrs: any = {}\n): Promise<Omnibox> => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 400px;');\n\n  const omnibox: Omnibox = await fixture(getHTML(attrs), { parentNode });\n  clock.runAll();\n  await omnibox.updateComplete;\n  return omnibox;\n};\n\ndescribe('temba-omnibox', () => {\n  let clock: any;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('can be created', async () => {\n    const omnibox: Omnibox = await fixture(\n      getHTML({ endpoint: '/test-assets/select/omnibox.json' })\n    );\n    assert.instanceOf(omnibox, Omnibox);\n  });\n\n  it('fires change events on selection', async () => {\n    const omnibox: Omnibox = await createOmnibox(clock, {\n      endpoint: '/test-assets/select/omnibox.json'\n    });\n\n    const changeEvent = spy();\n    omnibox.addEventListener('change', changeEvent);\n\n    await openAndClick(clock, omnibox, 0);\n    assert(changeEvent.called, 'change event not fired');\n\n    await assertScreenshot('omnibox/selected', getClip(omnibox));\n  });\n});\n"]}