sdc_client 0.57.11 → 0.57.14

package/test/controller.test.js

@@ -9,49 +9,9 @@ import * as sdc_view from '../src/simpleDomControl/sdc_view.js';
 const app = sdc.app;
 
 import $ from 'jquery';
+import {TestCtr, TestCtrA} from "./utils.js";
 window.$ = $;
 
-const TestControllerInfo = {
-    name: 'TestCtr',
-    tag: 'test-ctr'
-};
-
-class TestCtr extends sdc.AbstractSDC {
-    constructor() {
-        super();
-        this.contentUrl = TestControllerInfo.name; //<test-ctr>
-        this.events.unshift({});
-        this.val = 0;
-        this.contentReload = true;
-    }
-
-    sayA() {
-        return 'A'
-    }
-
-    onInit() {}
-}
-
-class TestCtrA extends sdc.AbstractSDC {
-    constructor() {
-        super();
-        this.contentUrl = 'TestCtrA'; //<test-ctr-a>
-        this.events.unshift({});
-        this.val = 1;
-        this.val_2 = 2;
-    }
-
-    sayA() {
-        return 'B'
-    }
-
-    sayB() {
-        return 'B'
-    }
-
-    onInit() {}
-}
-
 describe('Controller', () => {
     let ajaxSpy;
     beforeEach(() => {

package/test/dist.test.js

@@ -3,7 +3,7 @@
  */
 
 
-import {app, AbstractSDC, setEvent, on, allOff, trigger} from '../dist/index.js';
+import {app, AbstractSDC, setEvent, on, allOff, trigger} from '../src/index.js';
 import * as sdc_view from '../src/simpleDomControl/sdc_view.js';
 
 

package/test/utils.js

@@ -0,0 +1,89 @@
+import {AbstractSDC} from "../src/index.js";
+
+
+export const TestControllerInfo = {
+    name: 'TestCtr',
+    tag: 'test-ctr'
+};
+
+export class TestCtr extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = TestControllerInfo.name; //<test-ctr>
+        this.events.unshift({});
+        this.val = 0;
+        this.contentReload = true;
+    }
+
+    sayA() {
+        return 'A'
+    }
+
+    onInit() {
+    }
+}
+
+export class TestCtrA extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = 'TestCtrA'; //<test-ctr-a>
+        this.events.unshift({});
+        this.val = 1;
+        this.val_2 = 2;
+    }
+
+    sayA() {
+        return 'B'
+    }
+
+    sayB() {
+        return 'B'
+    }
+
+    onInit() {
+    }
+}
+
+export class TestList extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = 'TestCtrA'; //<test-ctr-a>
+        this.events.unshift({});
+        this.number = 0;
+    }
+
+    onInit(number = 10) {
+        this.number = number;
+    }
+
+    onLoad(html) {
+        $(html).append('<div><this.listview></this.listview></div>');
+        return super.onLoad(html);
+    }
+
+    listview() {
+        const listItems = [];
+        for (let i = 0; i < this.number; i++) {
+            listItems.push(`<test-item data-idx="${i}"></test-item>`);
+        }
+
+        return `<div>${listItems.join('\n')}</div>`;
+    }
+}
+
+export class TestItem extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = 'TestCtrA'; //<test-item>
+        this.events.unshift({});
+    }
+
+    onInit(idx) {
+        this.idx = idx;
+    }
+
+    onLoad(html) {
+        $(html).append(`<input name="i_${this.idx}" />`);
+        return super.onLoad(html);
+    }
+}

package/test/view.test.js

@@ -0,0 +1,158 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {TestItem, TestList} from "./utils.js";
+import {reconcile} from "../src/simpleDomControl/sdc_view.js";
+import {app} from "../src/index.js";
+import $ from "jquery";
+
+window.$ = $;
+
+describe('Test reconcile', () => {
+
+    beforeAll(() => {
+        app.updateJquery();
+    });
+
+    test('Load Content', async () => {
+        const a = '<div>' +
+            '<h1>Test</h1>' +
+            '<ul>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" /></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+
+        const b = '<div class="class.1">' +
+            '<p>UPS</p>' +
+            '<p>UPS</p>' +
+            '<h1>Test 1</h1>' +
+            '<ul>' +
+            '<li>A</li>' +
+            '<li>A1 <input name="TEST" type="text"/></li>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" type="text"/></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        const input_a = $a.find('[name=TEST]')[0]
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+        expect($a[0].className).toBe('class.1');
+        expect(input_a).toBe($a.find('[name=TEST]')[0]);
+
+    });
+
+    test('Load Content 2', async () => {
+        const a = '<div>' +
+            '<p>UPS</p>' +
+            '<p>UPS</p>' +
+            '<h1>Test</h1>' +
+            '<ul>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" /></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+
+        const b = '<div class="class.1">' +
+            '<h1>Test 1</h1>' +
+            '<ul>' +
+            '<li>A</li>' +
+            '<li>A1 <input name="TEST" type="text"/></li>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" type="text"/></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        const input_a = $a.find('[name=TEST]')[0]
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+        expect($a[0].className).toBe('class.1');
+        expect(input_a).toBe($a.find('[name=TEST]')[0]);
+
+    });
+
+    test('Load content 3', () => {
+        const a = '<div>' +
+            '<div><p>A1</p><p>B1</p></div>' +
+            '<div><p>A2</p><p>B2</p></div>' +
+            '</div>';
+
+        const b = '<div>' +
+            '<div><p>A2</p><p>B3</p></div>' +
+            '<div><p>A2</p><p>B4</p></div>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+
+    });
+
+
+    test('Load Content Split', async () => {
+        const a = '<div>' +
+            '<ul>' +
+            '<li>X<input name="TEST" /></li>' +
+            '</ul>' +
+            '</div>';
+
+        const b = '<div class="class.1">' +
+            '<ul>' +
+            '<li>A1 <input name="TEST" type="text"/></li>' +
+            '<li>X</li>' +
+            '</ul>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        const input_a = $a.find('[name=TEST]')[0]
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+        expect($a[0].className).toBe('class.1');
+        expect(input_a).toBe($a.find('[name=TEST]')[0]);
+
+    });
+});
+
+describe('Controller reconcile', () => {
+    let ajaxSpy;
+    beforeEach(async () => {
+        ajaxSpy = jest.spyOn($, 'ajax');
+        ajaxSpy.mockImplementation(() => {
+            return Promise.resolve('<div></div>');
+        });
+        app.register(TestList);
+        app.register(TestItem);
+        const $body = $('body');
+        const $ctr_div = $(document.createElement('test-list'));
+        $body.append($ctr_div);
+        await app.init_sdc();
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        $('body').safeEmpty();
+    });
+
+    test('Load Content Split', async () => {
+        const oldList = $('body').find('input').toArray();
+        const controller = app.getController($('body').children());
+        controller.number = 5;
+        await controller.refresh();
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        const newList = $('body').find('input').toArray();
+        expect(newList.length).toBe(5);
+        newList.forEach((x, i) => {
+            expect(x).toBe(oldList[i]);
+        });
+
+
+    });
+});