@nyaruka/temba-components 0.130.0 → 0.130.2

package/test/temba-checkbox.test.ts

@@ -1,24 +1,26 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import { Checkbox } from '../src/form/Checkbox';
-import { assertScreenshot, getClip } from './utils.test';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+
+const getCheckbox = async (props: any) => {
+  return (await getComponent('temba-checkbox', props)) as Checkbox;
+};
 
 describe('temba-checkbox', () => {
   it('renders default checkbox', async () => {
-    const el: Checkbox = await fixture(html`
-      <temba-checkbox label="My Checkbox"></temba-checkbox>
-    `);
+    const el = await getCheckbox({
+      label: 'My Checkbox'
+    });
 
     expect(el.label).to.equal('My Checkbox');
     await assertScreenshot('checkbox/default', getClip(el));
   });
 
   it('can select by clicking on the label', async () => {
-    const el: Checkbox = await fixture(html`
-      <temba-checkbox
-        label="My Checkbox"
-        animatechange="false"
-      ></temba-checkbox>
-    `);
+    const el: Checkbox = await getCheckbox({
+      label: 'My Checkbox',
+      animatechange: false
+    });
 
     (el.shadowRoot.querySelector('.checkbox-label') as HTMLDivElement).click();
     expect(el.checked).to.equal(true);
@@ -28,9 +30,9 @@ describe('temba-checkbox', () => {
   it('fires change event on click', async () => {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise<void>(async (resolve) => {
-      const checkbox: Checkbox = await fixture(html`
-        <temba-checkbox label="My Checkbox"></temba-checkbox>
-      `);
+      const checkbox = await getCheckbox({
+        label: 'My Checkbox'
+      });
 
       checkbox.addEventListener('change', () => {
         resolve();
@@ -41,17 +43,19 @@ describe('temba-checkbox', () => {
   });
 
   it('checks via click method', async () => {
-    const checkbox: Checkbox = await fixture(html`
-      <temba-checkbox label="My Checkbox"></temba-checkbox>
-    `);
+    const checkbox = await getCheckbox({
+      label: 'My Checkbox'
+    });
     checkbox.click();
     expect(checkbox.checked).to.equal(true);
   });
 
   it('has background hover effect when label is set', async () => {
-    const el: Checkbox = await fixture(html`
-      <temba-checkbox name="My Checkbox" label="My Label"></temba-checkbox>
-    `);
+    const el: Checkbox = await getCheckbox({
+      label: 'My Label',
+      name: 'My Checkbox'
+    });
+
     expect(el.label).to.equal('My Label');
     //the ".wrapper.label" style results in the background hover effect
     const wrapperDivEl = el.shadowRoot.querySelector(
@@ -68,9 +72,10 @@ describe('temba-checkbox', () => {
   //but this is the expected behavior if the label value is still empty,
   //upon rendering the component
   it('has no background hover effect when label is empty', async () => {
-    const el: Checkbox = await fixture(html`
-      <temba-checkbox name="My Checkbox"></temba-checkbox>
-    `);
+    const el: Checkbox = await getCheckbox({
+      name: 'My Checkbox'
+    });
+
     expect(el.label).to.equal(undefined);
     //the ".wrapper.label" style results in the background hover effect
     const wrapperDivEl = el.shadowRoot.querySelector(
@@ -84,9 +89,11 @@ describe('temba-checkbox', () => {
   });
 
   it('has no background hover effect when label is whitespace', async () => {
-    const el: Checkbox = await fixture(html`
-      <temba-checkbox name="My Checkbox" label=" "></temba-checkbox>
-    `);
+    const el: Checkbox = await getCheckbox({
+      name: 'My Checkbox',
+      label: ''
+    });
+
     expect(el.label).to.equal('');
     //the ".wrapper.label" style results in the background hover effect
     const wrapperDivEl = el.shadowRoot.querySelector(
@@ -167,13 +174,10 @@ describe('temba-checkbox', () => {
   });
 
   it('aligns help text with label when both are present', async () => {
-    const el: Checkbox = await fixture(html`
-      <temba-checkbox
-        label="Checkbox with help"
-        help_text="This help text should align with the label text"
-      >
-      </temba-checkbox>
-    `);
+    const el: Checkbox = (await getCheckbox({
+      label: 'Checkbox with help',
+      help_text: 'This help text should align with the label text'
+    })) as unknown as Checkbox;
 
     expect(el.label).to.equal('Checkbox with help');
     expect(el.helpText).to.equal(

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

@@ -73,7 +73,8 @@ describe('temba-contact-chat', () => {
     mockedNow.restore();
   });
 
-  it('show history and show chatbox if contact is active', async () => {
+  // temporarily disabled as it's too flaky in CI
+  xit('show history and show chatbox if contact is active', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();
     const chat: ContactChat = await getContactChat({

package/test/temba-dropdown.test.ts

@@ -289,12 +289,6 @@ describe(TAG, () => {
 
       // Verify position was adjusted for right edge
       expect(dropdown.dropdownStyle).to.have.property('left');
-
-      // Screenshot positioned dropdown
-      await assertScreenshot(
-        'dropdown/right-edge-collision',
-        getDropdownClip(dropdown)
-      );
     } finally {
       // Restore original method
       dropdownDiv.getBoundingClientRect = originalGetBoundingClientRect;
@@ -343,12 +337,6 @@ describe(TAG, () => {
       expect(dropdown.dropdownStyle).to.have.property('top');
       expect(dropdown.arrowStyle).to.have.property('transform');
       expect(dropdown.arrowStyle['transform']).to.include('rotate(180deg)');
-
-      // Screenshot positioned dropdown
-      await assertScreenshot(
-        'dropdown/bottom-edge-collision',
-        getDropdownClip(dropdown)
-      );
     } finally {
       // Restore original method
       dropdownDiv.getBoundingClientRect = originalGetBoundingClientRect;

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

@@ -223,12 +223,19 @@ describe('EditorNode', () => {
         color: '#ff0000'
       };
 
-      const result = (editorNode as any).renderTitle(config);
+      const mockAction: Action = {
+        type: 'send_msg',
+        uuid: 'test-action'
+      };
+
+      const result = (editorNode as any).renderTitle(config, mockAction, 0);
       const container = await fixture(html`<div>${result}</div>`);
 
-      const title = container.querySelector('.title');
+      const title = container.querySelector('.cn-title');
       expect(title).to.exist;
-      expect(title?.textContent?.trim()).to.equal('Test Action');
+
+      const nameElement = title?.querySelector('.name');
+      expect(nameElement?.textContent?.trim()).to.equal('Test Action');
       expect(title?.getAttribute('style')).to.contain('background:#ff0000');
     });
   });
@@ -1046,7 +1053,7 @@ describe('EditorNode', () => {
       expect(actionElement?.classList.contains('removing')).to.be.true;
 
       // Check that title shows "Remove?"
-      const titleElement = container.querySelector('.title .name');
+      const titleElement = container.querySelector('.cn-title .name');
       expect(titleElement?.textContent?.trim()).to.equal('Remove?');
     });
 

package/test/temba-integration-markdown.test.ts

@@ -1,23 +1,22 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import { Checkbox } from '../src/form/Checkbox';
-import { assertScreenshot, getClip } from './utils.test';
+import { expect } from '@open-wc/testing';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+import { TextInput } from '../src/form/TextInput';
 
 describe('FormElement markdown integration', () => {
-  it('renders checkbox with markdown errors', async () => {
-    const checkbox: Checkbox = await fixture(html`
-      <temba-checkbox
-        label="Accept Terms"
-        .errors=${[
-          'Please read the **terms and conditions** at [this link](https://example.com)',
-          'This field *requires* acceptance'
-        ]}
-      ></temba-checkbox>
-    `);
+  it('renders textinput with markdown errors', async () => {
+    const el: TextInput = (await getComponent('temba-textinput', {
+      name: 'my_textinput'
+    })) as TextInput;
 
-    await checkbox.updateComplete;
+    el.errors = [
+      'You must agree to the **terms and conditions** at [this link](https://example.com)',
+      'This field *requires* a value'
+    ];
+
+    await el.updateComplete;
 
     // Check that errors are rendered with markdown directly in checkbox shadow root
-    const errorElements = checkbox.shadowRoot.querySelectorAll('.alert-error');
+    const errorElements = el.shadowRoot.querySelectorAll('.alert-error');
     expect(errorElements.length).to.equal(2);
 
     // First error should have bold text and link
@@ -36,8 +35,8 @@ describe('FormElement markdown integration', () => {
     expect(italicElement.textContent).to.equal('requires');
 
     await assertScreenshot(
-      'integration/checkbox-markdown-errors',
-      getClip(checkbox)
+      'integration/textinput-markdown-errors',
+      getClip(el)
     );
   });
 });

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

@@ -18,7 +18,11 @@ const assertDialogScreenshot = async (
   const dialog = el.shadowRoot
     .querySelector('temba-dialog')
     .shadowRoot.querySelector('.dialog-container') as HTMLElement;
-  await assertScreenshot(screenshotName, getClip(dialog));
+  const clip = getClip(dialog);
+  // Adjust width to show full dialog with proper padding
+  const dialogRect = dialog.getBoundingClientRect();
+  clip.width = dialogRect.width + 20; // 10px padding on each side
+  await assertScreenshot(screenshotName, clip);
 };
 
 describe('temba-node-editor', () => {
@@ -337,48 +341,6 @@ describe('temba-node-editor', () => {
     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}`);
-    }
-  });
-
   it('displays bubble count for group value counts', async () => {
     const action = {
       uuid: 'test-action-uuid',

package/test/temba-run-list.test.ts

@@ -572,7 +572,7 @@ describe('temba-run-list', () => {
       contact: {
         name: 'John Doe',
         urn: 'tel:+1234567890',
-        anon_display: '1234567890'
+        ref: 'E2E6MX'
       },
       modified_on: '2023-12-01T10:30:00.000Z',
       exited_on: '2023-12-01T10:30:00.000Z',
@@ -591,7 +591,7 @@ describe('temba-run-list', () => {
       contact: {
         name: null,
         urn: 'tel:+1234567890',
-        anon_display: '1234567890'
+        ref: 'E2E6MX'
       },
       modified_on: '2023-12-01T10:30:00.000Z',
       exited_on: null,

package/test/utils.test.ts

@@ -110,7 +110,7 @@ const getResponse = (endpoint: string, options = { method: 'GET' }) => {
 before(async () => {
   normalFetch = window.fetch;
   stub(window, 'fetch').callsFake(getResponse);
-  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });
+  await setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
 });
 
 after(() => {
@@ -253,6 +253,7 @@ export const getClip = (ele: HTMLElement) => {
     clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();
   }
 
+  // add some padding
   const padding = 10;
   const width = clip.width + padding * 2;
   const height = clip.height + padding * 2;

package/test-assets/list/runs.json

@@ -9,7 +9,7 @@
         "uuid": "contact-uuid-1",
         "name": "John Doe",
         "urn": "tel:+1234567890",
-        "anon_display": "1234567890"
+        "ref": "E2E6MX"
       },
       "flow": {
         "uuid": "flow-uuid-1",
@@ -23,7 +23,7 @@
       "values": {
         "name": {
           "name": "Name",
-          "key": "name", 
+          "key": "name",
           "value": "John Doe",
           "category": "Text"
         },
@@ -37,12 +37,12 @@
     },
     {
       "id": 2,
-      "uuid": "run-uuid-2", 
+      "uuid": "run-uuid-2",
       "contact": {
         "uuid": "contact-uuid-2",
         "name": "Jane Smith",
         "urn": "tel:+1987654321",
-        "anon_display": "1987654321"
+        "ref": "3MWB69"
       },
       "flow": {
         "uuid": "flow-uuid-1",
@@ -59,10 +59,10 @@
       "id": 3,
       "uuid": "run-uuid-3",
       "contact": {
-        "uuid": "contact-uuid-3", 
+        "uuid": "contact-uuid-3",
         "name": null,
         "urn": "tel:+1122334455",
-        "anon_display": "1122334455"
+        "ref": "Q3GP9G"
       },
       "flow": {
         "uuid": "flow-uuid-1",
@@ -89,7 +89,7 @@
         "uuid": "contact-uuid-4",
         "name": "Active User",
         "urn": "tel:+1555666777",
-        "anon_display": "1555666777"
+        "ref": "U6Y6T5"
       },
       "flow": {
         "uuid": "flow-uuid-1",
@@ -109,7 +109,7 @@
         "uuid": "contact-uuid-5",
         "name": "Pending User",
         "urn": "tel:+1888999000",
-        "anon_display": "1888999000"
+        "ref": "SJPWLU"
       },
       "flow": {
         "uuid": "flow-uuid-1",

package/web-dev-mock.mjs

@@ -440,8 +440,63 @@ export function handleMinioUpload(context) {
   });
 }
 
-// Handle label creation for the labels API
-export function handleLabelCreation(context) {
+// Entity creation configurations
+const ENTITY_CONFIGS = {
+  labels: {
+    filePath: './static/api/labels.json',
+    createEntity: (name) => ({
+      uuid: uuidv4(),
+      name: name.trim(),
+      count: 0
+    }),
+    nameField: 'name',
+    entityType: 'Label'
+  },
+  fields: {
+    filePath: './static/api/fields.json',
+    createEntity: (name) => ({
+      key: name.trim().toLowerCase().replace(/\s+/g, '_'),
+      name: name.trim(),
+      type: 'text',
+      featured: false,
+      priority: 0,
+      usages: {
+        flows: 0,
+        groups: 0,
+        campaign_events: 0
+      },
+      agent_access: 'view',
+      label: name.trim(),
+      value_type: 'text'
+    }),
+    nameField: 'name',
+    uniqueField: 'key', // check uniqueness by key for fields
+    entityType: 'Field'
+  },
+  groups: {
+    filePath: './static/api/groups.json',
+    createEntity: (name) => ({
+      uuid: uuidv4(),
+      name: name.trim(),
+      query: null,
+      status: 'ready',
+      count: 0
+    }),
+    nameField: 'name',
+    entityType: 'Group'
+  }
+};
+
+// Generic entity creation handler for labels, fields, and groups
+export function handleEntityCreation(entityType, context) {
+  const config = ENTITY_CONFIGS[entityType];
+  
+  if (!config) {
+    context.status = 400;
+    context.body = JSON.stringify({ error: `Unsupported entity type: ${entityType}` });
+    return Promise.resolve();
+  }
+
   return new Promise((resolve) => {
     let body = '';
     
@@ -452,67 +507,67 @@ export function handleLabelCreation(context) {
     context.req.on('end', () => {
       try {
         const requestData = JSON.parse(body);
-        const labelName = requestData.name || '';
+        const entityName = requestData[config.nameField] || '';
         
-        if (!labelName.trim()) {
+        if (!entityName.trim()) {
           context.status = 400;
-          context.body = JSON.stringify({ error: 'Label name is required' });
+          context.body = JSON.stringify({ error: `${config.entityType} name is required` });
           resolve();
           return;
         }
         
-        // Read existing labels file
-        const labelsPath = './static/api/labels.json';
-        let labelsData;
+        // Read existing data file
+        let entityData;
         
         try {
-          labelsData = JSON.parse(fs.readFileSync(labelsPath, 'utf-8'));
+          entityData = JSON.parse(fs.readFileSync(config.filePath, 'utf-8'));
         } catch (error) {
           // If file doesn't exist, create basic structure
-          labelsData = {
+          entityData = {
             next: null,
             previous: null,
             results: []
           };
         }
         
-        // Check if label already exists
-        const existingLabel = labelsData.results.find(
-          label => label.name.toLowerCase() === labelName.trim().toLowerCase()
+        // Check if entity already exists
+        const uniqueField = config.uniqueField || config.nameField;
+        const checkValue = uniqueField === 'key' 
+          ? entityName.trim().toLowerCase().replace(/\s+/g, '_')
+          : entityName.trim().toLowerCase();
+          
+        const existingEntity = entityData.results.find(
+          entity => entity[uniqueField].toLowerCase() === checkValue
         );
         
-        if (existingLabel) {
-          // Return existing label
+        if (existingEntity) {
+          // Return existing entity
           context.contentType = 'application/json';
-          context.body = JSON.stringify(existingLabel);
+          context.body = JSON.stringify(existingEntity);
           resolve();
           return;
         }
         
-        // Create new label with UUID
-        const newLabel = {
-          uuid: uuidv4(),
-          name: labelName.trim(),
-          count: 0
-        };
+        // Create new entity
+        const newEntity = config.createEntity(entityName);
         
-        // Add to labels data
-        labelsData.results.push(newLabel);
+        // Add to entity data
+        entityData.results.push(newEntity);
         
         // Write back to file
-        fs.writeFileSync(labelsPath, JSON.stringify(labelsData, null, 2));
+        fs.writeFileSync(config.filePath, JSON.stringify(entityData, null, 2));
         
-        // Return the new label
+        // Return the new entity
         context.contentType = 'application/json';
-        context.body = JSON.stringify(newLabel);
+        context.body = JSON.stringify(newEntity);
         
-        console.log('📝 Label created:', newLabel);
+        console.log(`📝 ${config.entityType} created:`, newEntity);
         
       } catch (error) {
-        console.error('Label creation error:', error);
+        console.error(`${config.entityType} creation error:`, error);
         context.status = 500;
         context.body = JSON.stringify({ 
-          error: 'Label creation failed',
+          error: `${config.entityType} creation failed`,
           details: error.message 
         });
       }
@@ -521,3 +576,4 @@ export function handleLabelCreation(context) {
     });
   });
 }
+