@nyaruka/temba-components 0.139.0 → 0.141.0

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

@@ -2,6 +2,7 @@ import { html, fixture, expect } from '@open-wc/testing';
 import { Editor } from '../src/flow/Editor';
 import { Plumber } from '../src/flow/Plumber';
 import { stub, restore } from 'sinon';
+import { zustand } from '../src/store/AppState';
 
 // Register the component
 customElements.define('temba-flow-editor', Editor);
@@ -122,6 +123,46 @@ describe('Editor', () => {
     });
   });
 
+  describe('disconnectedCallback', () => {
+    it('clears flow data from the store when editor is removed', async () => {
+      // Set up some flow-specific state
+      zustand.setState({
+        flowDefinition: { nodes: [], _ui: { nodes: {} } } as any,
+        activity: { nodes: {}, segments: {} },
+        simulatorActivity: { nodes: {}, segments: {} },
+        simulatorActive: true,
+        flowInfo: {
+          results: [],
+          dependencies: [],
+          counts: { nodes: 0, languages: 0 },
+          locals: []
+        } as any,
+        dirtyDate: new Date()
+      });
+
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Verify state is populated
+      expect(zustand.getState().flowDefinition).to.not.be.null;
+      expect(zustand.getState().activity).to.not.be.null;
+
+      // Remove the editor from the DOM
+      editor.remove();
+
+      // Verify all flow-specific state has been cleared
+      expect(zustand.getState().flowDefinition).to.be.null;
+      expect(zustand.getState().activity).to.be.null;
+      expect(zustand.getState().simulatorActivity).to.be.null;
+      expect(zustand.getState().simulatorActive).to.be.false;
+      expect(zustand.getState().flowInfo).to.be.null;
+      expect(zustand.getState().dirtyDate).to.be.null;
+    });
+  });
+
   describe('render method', () => {
     it('renders loading when no definition', async () => {
       editor = await fixture(html`
@@ -822,4 +863,203 @@ describe('Editor', () => {
       expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
     });
   });
+
+  describe('save feedback', () => {
+    let mockPostJSON: any;
+    let storeElement: HTMLElement;
+
+    before(() => {
+      // Create a mock temba-store element that getStore() will find
+      // Use the real zustand getState so all store interactions work
+      storeElement = document.createElement('temba-store');
+      (storeElement as any).getState = () => zustand.getState();
+      document.body.appendChild(storeElement);
+    });
+
+    after(() => {
+      storeElement.remove();
+    });
+
+    beforeEach(() => {
+      mockPostJSON = stub();
+      (storeElement as any).postJSON = mockPostJSON;
+    });
+
+    afterEach(() => {
+      // Clean up any dialogs left in the DOM
+      document.querySelectorAll('temba-dialog').forEach((d) => d.remove());
+    });
+
+    it('sets isSaving when dirtyDate changes', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).isSaving = false;
+
+      // Simulate a dirtyDate change via updated()
+      (editor as any).dirtyDate = new Date();
+      const changes = new Map();
+      changes.set('dirtyDate', null);
+      (editor as any).updated(changes);
+
+      expect((editor as any).isSaving).to.be.true;
+    });
+
+    it('renders save indicator with visible class when saving', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).isSaving = true;
+      await editor.updateComplete;
+
+      const indicator = editor.querySelector('.save-indicator');
+      expect(indicator).to.exist;
+      expect(indicator.classList.contains('visible')).to.be.true;
+    });
+
+    it('save indicator is not visible when not saving', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).isSaving = false;
+      await editor.updateComplete;
+
+      const indicator = editor.querySelector('.save-indicator');
+      expect(indicator).to.exist;
+      expect(indicator.classList.contains('visible')).to.be.false;
+    });
+
+    it('clears isSaving after successful save', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      editor.flow = 'test-flow';
+      (editor as any).definition = { nodes: [], _ui: { nodes: {} } };
+
+      mockPostJSON.resolves({
+        status: 200,
+        json: {},
+        body: '{}',
+        headers: new Headers()
+      });
+
+      await (editor as any).saveChanges();
+
+      expect((editor as any).isSaving).to.be.false;
+    });
+
+    it('shows error dialog on non-200 response', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      editor.flow = 'test-flow';
+      (editor as any).definition = { nodes: [], _ui: { nodes: {} } };
+
+      mockPostJSON.resolves({
+        status: 400,
+        json: { detail: 'Invalid flow definition' },
+        body: '{"detail":"Invalid flow definition"}',
+        headers: new Headers()
+      });
+
+      await (editor as any).saveChanges();
+      await editor.updateComplete;
+
+      expect((editor as any).isSaving).to.be.false;
+      const dialog = document.querySelector('temba-dialog');
+      expect(dialog).to.exist;
+      expect(dialog.textContent).to.contain('Invalid flow definition');
+    });
+
+    it('shows error dialog on 500 server error', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      editor.flow = 'test-flow';
+      (editor as any).definition = { nodes: [], _ui: { nodes: {} } };
+
+      mockPostJSON.rejects(new Response(null, { status: 500 }));
+
+      await (editor as any).saveChanges();
+      await editor.updateComplete;
+
+      expect((editor as any).isSaving).to.be.false;
+      const dialog = document.querySelector('temba-dialog');
+      expect(dialog).to.exist;
+      expect(dialog.textContent).to.contain('Server error');
+    });
+
+    it('shows error dialog on network failure', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      editor.flow = 'test-flow';
+      (editor as any).definition = { nodes: [], _ui: { nodes: {} } };
+
+      mockPostJSON.rejects(new Error('Network error'));
+
+      await (editor as any).saveChanges();
+      await editor.updateComplete;
+
+      expect((editor as any).isSaving).to.be.false;
+      const dialog = document.querySelector('temba-dialog');
+      expect(dialog).to.exist;
+      expect(dialog.textContent).to.contain('Unable to reach the server');
+    });
+
+    it('extracts error message from response json fields', () => {
+      editor = new Editor();
+
+      expect(
+        (editor as any).extractErrorMessage({
+          status: 400,
+          json: { detail: 'Bad request' }
+        })
+      ).to.equal('Bad request');
+
+      expect(
+        (editor as any).extractErrorMessage({
+          status: 400,
+          json: { error: 'Something went wrong' }
+        })
+      ).to.equal('Something went wrong');
+
+      expect(
+        (editor as any).extractErrorMessage({
+          status: 400,
+          json: { description: 'Detailed error' }
+        })
+      ).to.equal('Detailed error');
+
+      expect(
+        (editor as any).extractErrorMessage({
+          status: 403,
+          json: {}
+        })
+      ).to.equal('Save failed with status 403.');
+    });
+  });
 });

package/test/temba-flow-plumber.test.ts

@@ -171,4 +171,66 @@ describe('calculateFlowchartPath', () => {
     expect(path).to.include('M 150 0');
     expect(path).to.include('L 50 100'); // ends at target
   });
+
+  it('applies jogYOffset to shift the horizontal jog level', () => {
+    const pathNoOffset = calculateFlowchartPath(
+      50,
+      0,
+      150,
+      200,
+      20,
+      10,
+      5,
+      'top',
+      0
+    );
+    const pathPosOffset = calculateFlowchartPath(
+      50,
+      0,
+      150,
+      200,
+      20,
+      10,
+      5,
+      'top',
+      10
+    );
+    const pathNegOffset = calculateFlowchartPath(
+      50,
+      0,
+      150,
+      200,
+      20,
+      10,
+      5,
+      'top',
+      -10
+    );
+    expect(pathNoOffset).to.not.equal(pathPosOffset);
+    expect(pathNoOffset).to.not.equal(pathNegOffset);
+    expect(pathPosOffset).to.not.equal(pathNegOffset);
+  });
+
+  it('produces same path with jogYOffset=0 as without offset', () => {
+    const pathDefault = calculateFlowchartPath(50, 0, 150, 200);
+    const pathZero = calculateFlowchartPath(
+      50,
+      0,
+      150,
+      200,
+      20,
+      10,
+      5,
+      'top',
+      0
+    );
+    expect(pathDefault).to.equal(pathZero);
+  });
+
+  it('clamps jogYOffset to valid bounds', () => {
+    // Large positive offset should not push jogY past entryY
+    const path = calculateFlowchartPath(50, 0, 150, 50, 20, 10, 5, 'top', 1000);
+    expect(path).to.include('M 50 0');
+    expect(path).to.include('L 150 50'); // should still reach target
+  });
 });

package/test/temba-node-type-selector.test.ts

@@ -163,9 +163,9 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // voice flow should have Say Message and Play Audio
+    // voice flow should have Say Message and Play Recording
     expect(titles).to.include('Say Message');
-    expect(titles).to.include('Play Audio');
+    expect(titles).to.include('Play Recording');
   });
 
   it('filters actions by flow type - message flow should not show voice-only actions', async () => {
@@ -181,9 +181,9 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // message flow should not have Say Message or Play Audio
+    // message flow should not have Say Message or Play Recording
     expect(titles).to.not.include('Say Message');
-    expect(titles).to.not.include('Play Audio');
+    expect(titles).to.not.include('Play Recording');
   });
 
   it('filters splits by flow type - message flow should show wait for response', async () => {
@@ -219,9 +219,9 @@ describe('temba-node-type-selector', () => {
     // voice flow should not have Wait for Response
     expect(titles).to.not.include('Wait for Response');
 
-    // but should have Wait for Digits and Wait for Menu Selection
+    // but should have Wait for Digits and Wait for Menu
     expect(titles).to.include('Wait for Digits');
-    expect(titles).to.include('Wait for Menu Selection');
+    expect(titles).to.include('Wait for Menu');
   });
 
   it('filters by features - AI feature enables AI splits', async () => {

package/test/temba-select.test.ts

@@ -857,7 +857,12 @@ describe('temba-select', () => {
 
       await openSelect(clock, select);
       await typeInto('temba-select', 're', false);
-      await openSelect(clock, select);
+
+      // Ensure Lit has processed the input change and scheduled the debounced fetch
+      await select.updateComplete;
+      clock.runAll();
+      await select.updateComplete;
+
       assert.equal(select.visibleOptions.length, 2);
 
       await assertScreenshot('select/searching', getClipWithOptions(select));

package/test/utils.test.ts

@@ -220,7 +220,9 @@ export const delay = (millis: number) => {
   });
 };
 
-// Enhanced wait utility for more robust testing
+// Enhanced wait utility for more robust testing.
+// Uses the Puppeteer-provided waitFor (real time) instead of delay (which uses
+// window.setTimeout and breaks when sinon fake timers are active).
 export const waitForCondition = async (
   predicate: () => boolean,
   maxAttempts: number = 20,
@@ -228,7 +230,7 @@ export const waitForCondition = async (
 ): Promise<void> => {
   let attempts = 0;
   while (!predicate() && attempts < maxAttempts) {
-    await delay(delayMs);
+    await waitFor(delayMs);
     attempts++;
   }
   if (!predicate()) {