@nyaruka/temba-components 0.140.0 → 0.141.1

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

@@ -2,6 +2,8 @@ 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';
+import { TEMBA_COMPONENTS_VERSION } from '../src/version';
 
 // Register the component
 customElements.define('temba-flow-editor', Editor);
@@ -122,6 +124,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 +864,226 @@ 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('adds temba-components version under _ui.editor when saving', 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();
+
+      const payload = mockPostJSON.firstCall.args[1];
+      expect(payload._ui.editor).to.equal(TEMBA_COMPONENTS_VERSION);
+    });
+
+    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-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()) {

package/web-dev-server.config.mjs

@@ -11,6 +11,9 @@ import { generateFlowInfo, handleMinioUpload, handleEntityCreation } from './web
 const DEV_DATA_DIR = '/tmp/temba-dev-data';
 const DEV_FLOWS_DIR = path.join(DEV_DATA_DIR, 'flows');
 const DEV_API_DIR = path.join(DEV_DATA_DIR, 'api');
+const TEMBA_COMPONENTS_VERSION = JSON.parse(
+  fs.readFileSync(path.resolve('./package.json'), 'utf-8')
+).version;
 
 // Setup development data directories and copy defaults if needed
 function setupDevData() {
@@ -226,6 +229,7 @@ export default {
     replacePlugin({
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('development'),
+      '__TEMBA_COMPONENTS_VERSION__': JSON.stringify(TEMBA_COMPONENTS_VERSION),
       'process.env.MINIO_ENDPOINT': JSON.stringify('http://minio:9000'),
       'process.env.MINIO_PUBLIC_ENDPOINT': JSON.stringify('http://localhost:9000'),
       'process.env.MINIO_ACCESS_KEY': JSON.stringify('root'),
@@ -500,4 +504,4 @@ export default {
       }
     }
   ],
-};
+};

package/web-test-runner.config.mjs

@@ -15,6 +15,9 @@ import replace from '@rollup/plugin-replace';
 import { fromRollup } from '@web/dev-server-rollup';
 
 const replacePlugin = fromRollup(replace);
+const TEMBA_COMPONENTS_VERSION = JSON.parse(
+  fs.readFileSync(path.resolve('./package.json'), 'utf-8')
+).version;
 
 const SCREENSHOTS = 'screenshots';
 const DIFF = 'diff';
@@ -320,6 +323,7 @@ export default {
     replacePlugin({
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('test'),
+      '__TEMBA_COMPONENTS_VERSION__': JSON.stringify(TEMBA_COMPONENTS_VERSION),
     }),
     {
       name: 'api-mock-server',
@@ -451,4 +455,3 @@ export default {
     }),
   ],
 };
-