@nyaruka/temba-components 0.129.3 → 0.129.5

package/test/temba-node-editor.test.ts

@@ -0,0 +1,353 @@
+import '../temba-modules';
+import { html, fixture, expect } from '@open-wc/testing';
+import { assertScreenshot, getClip } from './utils.test';
+
+// Define interface for NodeEditor component
+interface NodeEditorElement extends HTMLElement {
+  action?: any;
+  node?: any;
+  nodeUI?: any;
+  isOpen?: boolean;
+  updateComplete: Promise<boolean>;
+}
+
+const assertDialogScreenshot = async (
+  el: NodeEditorElement,
+  screenshotName: string
+) => {
+  const dialog = el.shadowRoot
+    .querySelector('temba-dialog')
+    .shadowRoot.querySelector('.dialog-container') as HTMLElement;
+  await assertScreenshot(screenshotName, getClip(dialog));
+};
+
+describe('temba-node-editor', () => {
+  it('can be created', async () => {
+    const el = (await fixture(html`
+      <temba-node-editor .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    expect(el).to.exist;
+    expect(el.tagName).to.equal('TEMBA-NODE-EDITOR');
+  });
+
+  it('renders send_msg action', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world',
+      quick_replies: []
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.action).to.equal(action);
+  });
+
+  it('renders set_run_result action', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'set_run_result',
+      name: 'result_name',
+      value: 'result_value'
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.action).to.equal(action);
+  });
+
+  it('renders set_contact_field action', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'set_contact_field',
+      field: { key: 'age', name: 'Age' },
+      value: '25'
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.action).to.equal(action);
+  });
+
+  it('renders add_contact_groups action', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'add_contact_groups',
+      groups: [{ uuid: 'group-1', name: 'Test Group' }]
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.action).to.equal(action);
+  });
+
+  it('renders enter_flow action', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'enter_flow',
+      flow: { uuid: 'flow-1', name: 'Sub Flow' }
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.action).to.equal(action);
+  });
+
+  it('renders node with router configuration', async () => {
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      exits: [{ uuid: 'exit-1', name: 'Default' }],
+      router: {
+        type: 'switch',
+        result_name: 'result',
+        categories: [{ uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' }]
+      }
+    };
+
+    const nodeUI = {
+      type: 'split_by_expression',
+      position: { left: 100, top: 100 }
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.node).to.equal(node);
+    expect(el.nodeUI).to.equal(nodeUI);
+
+    await assertDialogScreenshot(el, 'editor/router');
+  });
+
+  it('renders node with wait configuration', async () => {
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      exits: [{ uuid: 'exit-1', name: 'Default' }],
+      wait: {
+        type: 'msg'
+      }
+    };
+
+    const nodeUI = {
+      type: 'wait_for_response',
+      position: { left: 100, top: 100 }
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.node).to.equal(node);
+    expect(el.nodeUI).to.equal(nodeUI);
+
+    await assertDialogScreenshot(el, 'editor/wait');
+  });
+
+  it('handles different button actions', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world',
+      quick_replies: []
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    let saveEventFired = false;
+    let cancelEventFired = false;
+
+    el.addEventListener('temba-action-saved', () => {
+      saveEventFired = true;
+    });
+
+    el.addEventListener('temba-node-edit-cancelled', () => {
+      cancelEventFired = true;
+    });
+
+    // Get the dialog element inside the node editor
+    const dialog = el.shadowRoot!.querySelector('temba-dialog');
+    expect(dialog).to.not.be.null;
+
+    // Test Save button by dispatching event on the dialog
+    const saveEvent = new CustomEvent('temba-button-clicked', {
+      detail: { button: { name: 'Save' } },
+      bubbles: true
+    });
+    dialog!.dispatchEvent(saveEvent);
+    expect(saveEventFired).to.equal(true);
+
+    // Reset for cancel test
+    saveEventFired = false;
+
+    // Test Cancel button
+    const cancelEvent = new CustomEvent('temba-button-clicked', {
+      detail: { button: { name: 'Cancel' } },
+      bubbles: true
+    });
+    dialog!.dispatchEvent(cancelEvent);
+    expect(cancelEventFired).to.equal(true);
+  });
+
+  it('handles property updates', async () => {
+    const el = (await fixture(html`
+      <temba-node-editor .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    // Test action property update
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world',
+      quick_replies: []
+    };
+
+    el.action = action;
+    await el.updateComplete;
+    expect(el.action).to.equal(action);
+
+    // Test node property update
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      exits: []
+    };
+
+    el.node = node;
+    await el.updateComplete;
+    expect(el.node).to.equal(node);
+
+    // Test nodeUI property update
+    const nodeUI = {
+      type: 'execute_actions',
+      position: { left: 100, top: 100 }
+    };
+
+    el.nodeUI = nodeUI;
+    await el.updateComplete;
+    expect(el.nodeUI).to.equal(nodeUI);
+  });
+
+  it('handles form submission events', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world',
+      quick_replies: []
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Since the form submission handling is complex and involves internal components,
+    // we'll just verify the component renders without errors and has the expected structure
+    const shadowRoot = el.shadowRoot;
+    expect(shadowRoot).to.not.be.null;
+
+    // Verify dialog is present
+    const dialog = shadowRoot!.querySelector('temba-dialog');
+    expect(dialog).to.not.be.null;
+  });
+
+  it('handles form validation', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world',
+      quick_replies: []
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Test that the component renders form elements
+    const shadowRoot = el.shadowRoot;
+    expect(shadowRoot).to.not.be.null;
+  });
+
+  it('renders different action types correctly', async () => {
+    const actionTypes = [
+      {
+        type: 'send_msg',
+        data: { text: 'Message', quick_replies: [] }
+      },
+      {
+        type: 'set_run_result',
+        data: { name: 'result', value: 'value' }
+      },
+      {
+        type: 'set_contact_name',
+        data: { name: 'John Doe' }
+      },
+      {
+        type: 'set_contact_language',
+        data: { language: 'eng' }
+      }
+    ];
+
+    for (const actionType of actionTypes) {
+      const action = {
+        uuid: `test-${actionType.type}`,
+        type: actionType.type,
+        ...actionType.data
+      };
+
+      const el = (await fixture(html`
+        <temba-node-editor
+          .action=${action}
+          .isOpen=${true}
+        ></temba-node-editor>
+      `)) as NodeEditorElement;
+
+      await el.updateComplete;
+      expect(el.shadowRoot).to.not.be.null;
+      expect(el.action.type).to.equal(actionType.type);
+
+      await assertDialogScreenshot(el, `editor/${actionType.type}`);
+    }
+  });
+});

package/test/temba-select.test.ts

@@ -573,6 +573,133 @@ describe('temba-select', () => {
     });
   });
 
+  describe('emails functionality', () => {
+    it('only allows valid email addresses as options', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML([], {
+          placeholder: 'Enter email addresses',
+          searchable: true,
+          emails: true
+        })
+      );
+
+      // Try typing an invalid email - should not show as option
+      await typeInto('temba-select', 'invalid-email', false, false);
+      await clock.runAll();
+      await select.updateComplete;
+
+      let visibleOptions = select.shadowRoot.querySelectorAll(
+        '.option:not(.header)'
+      );
+      expect(visibleOptions.length).to.equal(0);
+
+      // Clear input
+      select.input = '';
+      await select.updateComplete;
+
+      // Try typing a valid email - should show as option
+      await typeInto('temba-select', 'test@example.com', false, false);
+      await clock.runAll();
+      await select.updateComplete;
+      await openSelect(clock, select);
+
+      const optionsComponent = select.shadowRoot.querySelector(
+        'temba-options'
+      ) as any;
+      visibleOptions = optionsComponent.shadowRoot.querySelectorAll(
+        '.option:not(.header)'
+      );
+      expect(visibleOptions.length).to.equal(1);
+      expect(visibleOptions[0].textContent).to.contain('test@example.com');
+    });
+
+    it('behaves as multi-select when emails is true', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML([], {
+          placeholder: 'Enter email addresses',
+          searchable: true,
+          emails: true
+        })
+      );
+
+      // Add first email
+      await typeInto('temba-select', 'first@example.com', false, false);
+      await clock.runAll();
+      await select.updateComplete;
+
+      // Click on the first option to select it using the standard helper
+      await openAndClick(clock, select, 0);
+
+      expect(select.values.length).to.equal(1);
+      expect(select.values[0].value).to.equal('first@example.com');
+
+      // Add second email
+      await typeInto('temba-select', 'second@example.com', false, false);
+      await clock.runAll();
+      await select.updateComplete;
+
+      // Click on the second option to select it using the standard helper
+      await openAndClick(clock, select, 0);
+
+      // Should have both emails selected (multi-select behavior)
+      expect(select.values.length).to.equal(2);
+      expect(select.values[0].value).to.equal('first@example.com');
+      expect(select.values[1].value).to.equal('second@example.com');
+    });
+
+    it('validates email format correctly', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML([], {
+          placeholder: 'Enter email addresses',
+          searchable: true,
+          emails: true
+        })
+      );
+
+      // Test various email formats
+      const testCases = [
+        { email: 'valid@example.com', shouldBeValid: true },
+        { email: 'user.name+tag@example.co.uk', shouldBeValid: true },
+        { email: 'invalid-email', shouldBeValid: false },
+        { email: '@example.com', shouldBeValid: false },
+        { email: 'user@', shouldBeValid: false },
+        { email: 'user name@example.com', shouldBeValid: false }, // space not allowed
+        { email: 'user@example', shouldBeValid: false } // no domain extension
+      ];
+
+      for (const testCase of testCases) {
+        select.input = '';
+        await select.updateComplete;
+
+        await typeInto('temba-select', testCase.email, false, false);
+        await clock.runAll();
+        await select.updateComplete;
+        await openSelect(clock, select);
+
+        const optionsComponent = select.shadowRoot.querySelector(
+          'temba-options'
+        ) as any;
+        const visibleOptions = optionsComponent.shadowRoot.querySelectorAll(
+          '.option:not(.header)'
+        );
+        if (testCase.shouldBeValid) {
+          expect(
+            visibleOptions.length,
+            `${testCase.email} should be valid`
+          ).to.equal(1);
+        } else {
+          expect(
+            visibleOptions.length,
+            `${testCase.email} should be invalid`
+          ).to.equal(0);
+        }
+      }
+    });
+  });
+
   describe('static options', () => {
     it('accepts an initial value', async () => {
       const select = await createSelect(
@@ -591,6 +718,113 @@ describe('temba-select', () => {
         getClip(select)
       );
     });
+
+    it('fires change event when static option sets initial value', async () => {
+      const changeEvent = sinon.spy();
+
+      // Create a basic select element with manual HTML
+      const parentNode = document.createElement('div');
+      parentNode.innerHTML = `<temba-select name="test">
+        <temba-option name="Red" value="0"></temba-option>
+        <temba-option name="Green" value="1" selected></temba-option>
+        <temba-option name="Blue" value="2"></temba-option>
+      </temba-select>`;
+
+      const select = parentNode.querySelector(
+        'temba-select'
+      ) as Select<SelectOption>;
+      document.body.appendChild(parentNode);
+
+      // Add event listener before triggering initialization
+      select.addEventListener('change', changeEvent);
+
+      // Manually trigger slot change to process the selected attribute
+      select.handleSlotChange();
+      clock.runAll();
+      await select.updateComplete;
+
+      // The change event should have been fired when the initial value was set
+      assert(
+        changeEvent.called,
+        'change event should fire when static option sets initial value'
+      );
+      expect(select.values[0].name).to.equal('Green');
+
+      document.body.removeChild(parentNode);
+    });
+
+    it('fires change event when static option sets initial value via value attribute', async () => {
+      const changeEvent = sinon.spy();
+
+      // Create a basic select element with value attribute
+      const parentNode = document.createElement('div');
+      parentNode.innerHTML = `<temba-select name="test" value="1">
+        <temba-option name="Red" value="0"></temba-option>
+        <temba-option name="Green" value="1"></temba-option>
+        <temba-option name="Blue" value="2"></temba-option>
+      </temba-select>`;
+
+      const select = parentNode.querySelector(
+        'temba-select'
+      ) as Select<SelectOption>;
+      document.body.appendChild(parentNode);
+
+      // Add event listener before triggering initialization
+      select.addEventListener('change', changeEvent);
+
+      // First process the static options
+      select.handleSlotChange();
+      // Then check for selected option based on value attribute
+      select.setSelectedValue(select.getAttribute('value'));
+
+      clock.runAll();
+      await select.updateComplete;
+
+      // The change event should have been fired when the initial value was set
+      assert(
+        changeEvent.called,
+        'change event should fire when value attribute sets initial value'
+      );
+      expect(select.values[0].name).to.equal('Green');
+
+      document.body.removeChild(parentNode);
+    });
+
+    it('creates proper form inputs for static options', async () => {
+      // Create a form with a select that has static options
+      const form = document.createElement('form');
+      form.innerHTML = `<temba-select name="color" value="1">
+        <temba-option name="Red" value="0"></temba-option>
+        <temba-option name="Green" value="1"></temba-option>
+        <temba-option name="Blue" value="2"></temba-option>
+      </temba-select>`;
+
+      document.body.appendChild(form);
+      const select = form.querySelector('temba-select') as Select<SelectOption>;
+
+      // Wait for component to be ready
+      await select.updateComplete;
+
+      // Process the static options and set initial value
+      select.handleSlotChange();
+      select.setSelectedValue(select.getAttribute('value'));
+
+      clock.runAll();
+      await select.updateComplete;
+
+      // Check that the select has the correct value
+      expect(select.values[0].name).to.equal('Green');
+      expect(select.values[0].value).to.equal('1');
+
+      // For single-mode selects, check the value property
+      expect(select.value).to.equal('1');
+
+      // Test FormData - it should include the select's value
+      const formData = new FormData(form);
+      expect(formData.get('color')).to.equal('1');
+
+      document.body.removeChild(form);
+    });
   });
 
   describe('endpoints', () => {