@nyaruka/temba-components 0.137.0 → 0.138.4

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

@@ -0,0 +1,134 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { Editor } from '../src/flow/Editor';
+import { stub, restore, SinonStub } from 'sinon';
+
+customElements.define('temba-flow-editor-revisions', Editor);
+
+describe('Editor Revisions', () => {
+  let element: Editor;
+  let fetchStub: SinonStub;
+
+  beforeEach(async () => {
+    restore();
+    fetchStub = stub(window, 'fetch');
+    // Initialize without 'flow' attribute to prevent firstUpdated from calling getStore().getState()
+    element = await fixture(
+      html`<temba-flow-editor-revisions></temba-flow-editor-revisions>`
+    );
+    element.flow = 'test-flow';
+  });
+
+  afterEach(() => {
+    restore();
+  });
+
+  it('should exclude the most recent revision from the list', async () => {
+    const mockRevisions = [
+      {
+        id: 3,
+        created_on: '2023-01-03',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      },
+      {
+        id: 2,
+        created_on: '2023-01-02',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      },
+      {
+        id: 1,
+        created_on: '2023-01-01',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      }
+    ];
+
+    // Mock the fetch response for the revisions list
+    const mockResponse = new Response(
+      JSON.stringify({ results: mockRevisions }),
+      {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' }
+      }
+    );
+
+    fetchStub.resolves(mockResponse);
+
+    // Call fetchRevisions (private)
+    // Note: fetchRevisions calls fetchResults -> fetchResultsPage -> fetch
+    await (element as any).fetchRevisions();
+
+    const revisions = (element as any).revisions;
+    expect(revisions.length).to.equal(2);
+    expect(revisions[0].id).to.equal(2);
+    expect(revisions[1].id).to.equal(1);
+  });
+
+  it('should handle empty revisions list', async () => {
+    const mockResponse = new Response(JSON.stringify({ results: [] }), {
+      status: 200
+    });
+    fetchStub.resolves(mockResponse);
+
+    await (element as any).fetchRevisions();
+    const revisions = (element as any).revisions;
+    expect(revisions.length).to.equal(0);
+  });
+
+  it('should handle single revision in list', async () => {
+    const mockRevisions = [
+      {
+        id: 1,
+        created_on: '2023-01-01',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      }
+    ];
+    const mockResponse = new Response(
+      JSON.stringify({ results: mockRevisions }),
+      { status: 200 }
+    );
+    fetchStub.resolves(mockResponse);
+
+    await (element as any).fetchRevisions();
+    const revisions = (element as any).revisions;
+    expect(revisions.length).to.equal(0);
+  });
+
+  it('should have purple color for revisions tab and blue for selected item', async () => {
+    // Force revisions window to show
+    (element as any).revisionsWindowHidden = false;
+    (element as any).localizationWindowHidden = true;
+
+    // Mock revisions so we can see list items
+    const mockRevisions = [
+      {
+        id: 2,
+        created_on: '2023-01-02',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      },
+      {
+        id: 1,
+        created_on: '2023-01-01',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      }
+    ];
+    (element as any).revisions = mockRevisions;
+    (element as any).viewingRevision = mockRevisions[0]; // Select the first one
+
+    await element.requestUpdate();
+
+    // Check tab color
+    const tab = element.querySelector('#revisions-tab');
+    expect(tab).to.exist;
+    expect(tab.getAttribute('color')).to.equal('rgb(142, 94, 167)');
+
+    // Check selected item styles
+    const selectedItem = element.querySelector(
+      '.revision-item.selected'
+    ) as HTMLElement;
+    expect(selectedItem).to.exist;
+
+    // We need to check inline styles because they are set in the template
+    const style = selectedItem.getAttribute('style');
+    expect(style).to.contain('#f0f6ff'); // Blue background
+    expect(style).to.contain('#a4cafe'); // Blue border
+  });
+});

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

@@ -653,11 +653,14 @@ describe('Editor', () => {
 
       await editor.updateComplete;
 
-      // node-2 should be first (top: 100 < top: 200)
-      const flowNodes = editor.querySelectorAll('temba-flow-node');
-      expect(flowNodes[0].getAttribute('uuid')).to.equal('node-2');
-      expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
-      expect(flowNodes[1].classList.contains('flow-start')).to.be.false;
+      // node-2 is at top (top: 100 < top: 200) so it should be flow-start
+      const node1 = editor.querySelector('temba-flow-node[uuid="node-1"]');
+      const node2 = editor.querySelector('temba-flow-node[uuid="node-2"]');
+
+      expect(node2).to.exist;
+      expect(node1).to.exist;
+      expect(node2.classList.contains('flow-start')).to.be.true;
+      expect(node1.classList.contains('flow-start')).to.be.false;
 
       // move node-1 to the top
       zustand.getState().updateCanvasPositions({
@@ -720,7 +723,7 @@ describe('Editor', () => {
 
       await editor.updateComplete;
 
-      let flowNodes = editor.querySelectorAll('temba-flow-node');
+      const flowNodes = editor.querySelectorAll('temba-flow-node');
       expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
 
       // add a new node at the top
@@ -741,10 +744,13 @@ describe('Editor', () => {
       await editor.updateComplete;
 
       // new node should now be the flow-start
-      flowNodes = editor.querySelectorAll('temba-flow-node');
-      expect(flowNodes[0].getAttribute('uuid')).to.equal('node-2');
-      expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
-      expect(flowNodes[1].classList.contains('flow-start')).to.be.false;
+      const node1 = editor.querySelector('temba-flow-node[uuid="node-1"]');
+      const node2 = editor.querySelector('temba-flow-node[uuid="node-2"]');
+
+      expect(node2).to.exist;
+      expect(node1).to.exist;
+      expect(node2.classList.contains('flow-start')).to.be.true;
+      expect(node1.classList.contains('flow-start')).to.be.false;
     });
 
     it('should handle flow-start when first node is removed', async () => {

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

@@ -29,7 +29,14 @@ describe('Plumber - Connection Management', () => {
       removeClass: stub(),
       batch: stub().callsFake((fn: any) => fn()),
       addEndpoint: stub().returns({}),
+      revalidate: stub(),
       connect: stub(),
+      getEndpoints: stub().returns([
+        { elementId: 'test-from', addClass: stub() }
+      ]),
+      select: stub().returns({
+        deleteAll: stub()
+      }),
       selectEndpoints: stub().returns({
         deleteAll: stub()
       }),
@@ -131,7 +138,6 @@ describe('Plumber - Connection Management', () => {
       expect(result).to.be.true;
       expect((plumber as any).jsPlumb.deleteConnection).to.have.been
         .calledTwice;
-      expect((plumber as any).jsPlumb.removeAllEndpoints).to.have.been.called;
     });
 
     it('returns false when no connections exist', () => {

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

@@ -31,6 +31,12 @@ describe('Plumber', () => {
       batch: stub().callsFake((fn) => fn()),
       addEndpoint: stub().returns({}),
       connect: stub(),
+      getEndpoints: stub().returns([
+        { elementId: 'test-from', addClass: stub() }
+      ]),
+      select: stub().returns({
+        deleteAll: stub()
+      }),
       selectEndpoints: stub().returns({
         deleteAll: stub()
       }),

package/test/temba-select.test.ts

@@ -855,6 +855,7 @@ describe('temba-select', () => {
         })
       );
 
+      await openSelect(clock, select);
       await typeInto('temba-select', 're', false);
       await openSelect(clock, select);
       assert.equal(select.visibleOptions.length, 2);