apprun 4.0.0 → 6.0.0-rc.0

package/tests/app.spec.ts

@@ -1,122 +0,0 @@
-import { App } from '../src/app';
-
-describe('app events', () => {
-
-  it('should be able to register(on) and trigger(run)', () => {
-    const app = new App();
-    let hi_called = false;
-    app.on('hi', () => {
-      hi_called = true;
-    });
-    app.run('hi');
-    expect(hi_called).toBeTruthy();
-  });
-
-  it('should pass parameters to execution', () => {
-    const app = new App();
-    let hi_called = false;
-    app.on('hi', (p1, p2, p3, p4) => {
-      hi_called = true;
-      expect(p1).toBe(1);
-      expect(p2).toBe('xx');
-      expect(p3).toBeNull;
-      expect(p4).toEqual({a:1});
-    });
-    app.run('hi', 1, 'xx', null, {a: 1});
-    expect(hi_called).toBeTruthy();
-  });
-
-  it('should take once option', () => {
-    const app = new App();
-    app.on('hi', (p1, p2, p3, p4) => { }, { once: true });
-    app.run('hi', 1, 'xx', null, { a: 1 });
-    expect(app['_events']['hi']).toBeUndefined();
-  });
-
-  it('should run once', () => {
-    const app = new App();
-    app.once('hi1', (p1, p2, p3, p4) => { });
-    app.run('hi1', 1, 'xx', null, { a: 1 });
-    expect(app['_events']['hi1']).toBeUndefined();
-  });
-
-  it('should allow off', () => {
-    const app = new App();
-    const fn = (a) => {}
-    app.on('hi', fn);
-    app.off('hi', fn);
-    expect(app['_events']['hi']).toBeUndefined();
-  });
-
-  it('should take delay option', (done) => {
-    const app = new App();
-    let i = 0;
-    app.on('hi', () => { i++; }, {delay: 200});
-    app.run('hi');
-    app.run('hi');
-    app.run('hi');
-    expect(i).toBe(0);
-    setTimeout(() => {
-      expect(i).toBe(1);
-      done();
-    }, 250);
-  });
-
-  it('should mix delay and non-delay events', (done) => {
-    const app = new App();
-    let i = 0;
-    let j = 0;
-    app.on('hi', () => { j++; });
-    app.on('hi', () => { i++; }, {delay: 200});
-    app.run('hi');
-    app.run('hi');
-    app.run('hi');
-    expect(i).toBe(0);
-    expect(j).toBe(3);
-    setTimeout(() => {
-      expect(i).toBe(1);
-      done();
-    }, 250);
-  });
-
-  it('should mix delay and once option', (done) => {
-    const app = new App();
-    spyOn(console, 'assert');
-    let i = 0;
-    app.on('hi', () => { i++; }, {one: true, delay: 200});
-    app.run('hi');
-    app.run('hi');
-    app.run('hi');
-    expect(i).toBe(0);
-    setTimeout(() => {
-      expect(i).toBe(1);
-      expect(console.assert).toHaveBeenCalled();
-      done();
-    }, 250);
-  });
-
-  it('should remove only subscription that is once', () => {
-    const app = new App();
-    spyOn(console, 'assert');
-    spyOn(console, 'log');
-    app.on('hi', () => {
-      console.log('hi');
-    });
-    app.on('hi', () => {}, {once: true});
-    app.run('hi');
-    app.run('hi');
-    expect(console.log).toHaveBeenCalledTimes(2);
-    expect(console.assert).toHaveBeenCalled();
-  });
-
-
-  it('should run only once', () => {
-    const app = new App();
-    spyOn(console, 'assert');
-    app.on('hi', (p1, p2, p3, p4) => {}, {once: true});
-    app.run('hi', 1, 'xx', null, {a: 1});
-    app.run('hi', 1, 'xx', null, {a: 1});
-    expect(console.assert).toHaveBeenCalled();
-  });
-
-});

package/tests/application.spec.tsx

@@ -1,23 +0,0 @@
-import app, { Component } from '../src/apprun';
-
-describe('app.start', () => {
-  it('should allow no parameters', () => {
-    app.start()
-  })
-
-  it('should allow empty element', () => {
-    app.start('')
-  })
-
-  it('should allow null element', () => {
-    app.start(null)
-  })
-
-  it('should allow only element, state', () => {
-    app.start('', null)
-  })
-
-  it('should allow null state, view, update', () => {
-    app.start('', null, s=>s)
-  })
-})

package/tests/component.spec.tsx

@@ -1,296 +0,0 @@
-import app, { Component } from '../src/apprun';
-
-app.on('hi', _ => { })
-app.on('debug', _ => { });
-
-class TestComponent extends Component {
-
-  state = 'x';
-  view = (state) => state
-
-  update = {
-    'hi': (state, value) => value,
-    '#hi': (state, value) => value,
-    'hiNull': (state, value) => null,
-    'hiAsync': async (state, value) => {
-      return new Promise(resolve => {
-        resolve(value);
-      })
-    },
-    'hiAsyncNull': async (state, value) => {
-    }
-  }
-  rendered = () => { }
-}
-
-describe('Component', () => {
-
-  let component;
-  beforeEach(() => {
-    component = new TestComponent();
-  });
-
-  it('should allow element to be undefined', () => {
-    spyOn(component, 'view');
-    expect(component.element).toBeUndefined()
-    expect(component.view).not.toHaveBeenCalled();
-  })
-
-  it('should trigger view when mounted with render option', () => {
-    spyOn(component, 'view');
-    component.mount(document.body, { render: true });
-    expect(component.element).toBe(document.body);
-    expect(component.view).toHaveBeenCalled();
-  })
-
-  it('should not trigger view when mounted', () => {
-    spyOn(component, 'view');
-    component.mount(document.body);
-    expect(component.element).toBe(document.body);
-    expect(component.view).not.toHaveBeenCalled();
-  })
-
-  it('should trigger view when started', () => {
-    spyOn(component, 'view');
-    component.start(document.body);
-    expect(component.element).toBe(document.body);
-    expect(component.view).toHaveBeenCalled();
-  })
-
-  it('should not trigger when update returns null or undefined', () => {
-    component.mount(document.body);
-    spyOn(component, 'view');
-    component.run('hi', null);
-    expect(component.view).not.toHaveBeenCalled();
-    component.run('hiNull');
-    expect(component.view).not.toHaveBeenCalled();
-  })
-
-  it('should not trigger view when update returns null or undefined with async', () => {
-    component.mount(document.body);
-    spyOn(component, 'view');
-    component.run('hiAsync', null);
-    expect(component.view).not.toHaveBeenCalledWith(); //Promise
-    expect(component.state).not.toBeNull();
-    component.run('hiAsyncNull');
-    expect(component.view).not.toHaveBeenCalledWith(); //Promise
-    expect(component.state).not.toBeNull();
-  })
-
-  it('should handle local events', () => {
-    component.mount(document.body);
-    spyOn(component, 'view');
-    component.run('hi', '');
-    expect(component.view).toHaveBeenCalled();
-  })
-
-  it('should not handle unknown global events', () => {
-    component.mount(document.body);
-    spyOn(component, 'view');
-    app.run('hi');
-    expect(component.view).not.toHaveBeenCalled();
-  })
-
-  it('should handle global events', () => {
-    component.mount(document.body);
-    spyOn(component, 'view');
-    app.run('#hi', '');
-    expect(component.view).toHaveBeenCalled();
-  })
-
-
-  it('should track history', () => {
-    component.start(document.body, { history: true });
-    expect(component.state).toBe('x');
-    component.run('hi', 'xx');
-    expect(component.state).toBe('xx');
-    component.run('hi', 'xxx');
-    expect(component.state).toBe('xxx');
-    component.run('history-prev');
-    expect(component.state).toBe('xx');
-    component.run('history-next');
-    expect(component.state).toBe('xxx');
-  });
-
-  it('should track history with custom event name', () => {
-    component.start(document.body, { history: { prev: 'prev', next: 'next' } });
-    expect(component.state).toBe('x');
-    component.run('hi', 'xx');
-    expect(component.state).toBe('xx');
-    component.run('hi', 'xxx');
-    expect(component.state).toBe('xxx');
-    component.run('prev');
-    expect(component.state).toBe('xx');
-    component.run('next');
-    expect(component.state).toBe('xxx');
-  });
-
-  it('should track history with global custom event name', () => {
-    spyOn(component, 'view');
-    component.mount(document.body, { render: true, history: { prev: 'prev', next: 'next' }, global_event: true });
-    expect(component.state).toBe('x');
-    app.run('hi', 'xx');
-    expect(component.state).toBe('xx');
-    app.run('hi', 'xxx');
-    expect(component.state).toBe('xxx');
-    app.run('prev');
-    expect(component.state).toBe('xx');
-    app.run('next');
-    expect(component.state).toBe('xxx');
-
-  });
-
-  it('should call rendered function', () => {
-    const spy = jasmine.createSpy('spy');
-    component.rendered = state => spy(state);
-    component.start(document.body);
-    expect(spy).toHaveBeenCalledWith('x');
-    component.run('hi', 'abc');
-    expect(spy).toHaveBeenCalledWith('abc');
-  });
-
-  it('should handle async update', (done) => {
-    const fn = async () => new Promise((resolve, reject) => {
-      window.setTimeout(() => {
-        resolve('xx');
-      }, 10);
-    });
-    const spy = jasmine.createSpy('spy');
-    class Test extends Component {
-      state = -1;
-      view = state => spy(state);
-      update = {
-        method1: async (...args) => {
-          const v = await fn();
-          return v;
-        }
-      }
-    }
-    const t = new Test().start();
-    t.run('method1')
-    window.setTimeout(() => {
-      const callArgs = spy.calls.allArgs();
-      expect(callArgs[0][0]).toBe(-1);
-      expect(callArgs[1][0]).toBe('xx');
-      done()
-    }, 20);
-  });
-
-  it('should support tuple in update', () => {
-    let i = 0;
-    class Test extends Component {
-      state = -1;
-
-      update = {
-        'method1': [_ => i++, { once: true }],
-      }
-    }
-
-    const t = new Test().start();
-    t.run('method1');
-    // t.run('method1');
-    // t.run('method1');
-
-    expect(i).toEqual(1);
-  });
-
-  it('should support async tuple in update', (done) => {
-    let i = 0;
-    const fn = async () => new Promise<string>((resolve) => {
-      window.setTimeout(() => {
-        resolve('xx');
-      }, 10);
-    });
-
-    class Test extends Component {
-      state = -1;
-
-      update = {
-        'method1': [async _ => {
-          const t = await fn();
-          i++
-        },
-        { once: true }],
-      }
-    }
-
-    const t = new Test().start();
-    t.run('method1');
-    // t.run('method1');
-    // t.run('method1');
-
-    window.setTimeout(() => {
-      expect(i).toBe(1);
-      done();
-    }, 20)
-  });
-
-  it('should support update alias', () => {
-    let i = 0;
-    class Test extends Component {
-      state = -1;
-      update = {
-        'method1, m1, m2, #m3': [_ => ++i, {}]
-      }
-    }
-    const t = new Test().start();
-    t.run('method1');
-    t.run('m1');
-    t.run('m2');
-    app.run('#m3');
-
-    expect(i).toBe(4);
-  });
-
-  it('should support call back', () => {
-    let i = 0;
-    class Test extends Component {
-      state = -1;
-      update = {
-        'method1': [_ => ++i, { callback: _ => ++i }]
-      }
-    }
-    const t = new Test().start();
-    t.run('method1');
-    expect(i).toBe(2);
-  });
-
-  it('should support options', () => {
-    class Test extends Component {
-      view = (state) => state
-      update = {
-        'method1': [(state, val) => val, { render: false }]
-      }
-    }
-    const t = new Test();
-    t.start(document.body);
-    spyOn(t, 'view');
-    t.run('method1', 'x');
-    expect(t.view).not.toHaveBeenCalled();
-  })
-
-  it('should support call back, alias and options', () => {
-    let i = 0;
-    class Test extends Component {
-      state = -1;
-      update = {
-        'method1, m1, m2, #m3': [_ => ++i, { callback: _ => ++i }]
-      }
-    }
-    const t = new Test().start();
-    t.run('method1');
-    t.run('m1');
-    t.run('m2');
-    app.run('#m3');
-
-    expect(i).toBe(8);
-  });
-
-  it('should save/attach component to element', () => {
-    component.start(document.body);
-    expect(document.body['_component']).toBe(component);
-  })
-
-});
-
-

package/tests/custom-element.spec.tsx

@@ -1,19 +0,0 @@
-import app, { Component } from '../src/apprun';
-import { customElement } from '../src/web-component';
-
-describe('web-component', () => {
-  it('should convert component to custom element', () => {
-    class C extends Component {
-      state = 50;
-    }
-    // const component = new (customElement(C)); // need TypeScript 2.9?
-
-    // class CE extends customElement(C) { }
-    // const component = new CE();
-    // expect(component.state).toBe(5);
-  })
-
-  it('should have on and run fuction', () => {
-
-  })
-})

package/tests/data-attr.spec.tsx

@@ -1,42 +0,0 @@
-import app from '../src/apprun';
-
-describe('vdom-my', () => {
-  it('should set data attribute', () => {
-    const el = document.createElement('div');
-    const view = () => <div data-a='a'></div>
-    app.render(el, view());
-    const div = el.firstElementChild as HTMLDivElement;
-    expect(div.dataset.a).toBe('a');
-  })
-
-  it('should unset data attribute', () => {
-    const el = document.createElement('div');
-    const view1 = () => <div data-a='b'></div>
-    const view2 = () => <div></div>
-    app.render(el, view1());
-    const div = el.firstElementChild as HTMLDivElement;
-    expect(div.dataset.a).toBe('b');
-    app.render(el, view2());
-    expect(div.dataset.a).toBe('');
-  })
-  it('should attribute - role', () => {
-    const el = document.createElement('div');
-    const view1 = () => <div role='r'></div>
-    const view2 = () => <div></div>
-    app.render(el, view1());
-    const div = el.firstElementChild as HTMLDivElement;
-    expect(div.getAttribute('role')).toBe('r');
-    app.render(el, view2());
-    expect(div.getAttribute('role')).toBe('');
-  })
-  it('should attribute - aria', () => {
-    const el = document.createElement('div');
-    const view1 = () => <div aria-label='al'></div>
-    const view2 = () => <div></div>
-    app.render(el, view1());
-    const div = el.firstElementChild as HTMLDivElement;
-    expect(div.getAttribute('aria-label')).toBe('al');
-    app.render(el, view2());
-    expect(div.getAttribute('aria-label')).toBe('');
-  })
-})

package/tests/decorator.spec.tsx

@@ -1,104 +0,0 @@
-import app, { Component, on, update, event } from '../src/apprun';
-
-describe('Update decorator', () => {
-
-  it('should convert class method to action using @update', () => {
-    class TestComponent extends Component {
-      view = state => state
-
-      @update()
-      f1(state, val) {
-        return val;
-      }
-
-      @event('hi, #hi')
-      f2(state, val) {
-        return val;
-      }
-    }
-
-    const test = new TestComponent().mount();
-    const spy = spyOn(test, 'view')
-    test.run('f1', 'x')
-    expect(spy).toHaveBeenCalledWith('x')
-    // test.run('f2', 'xx')
-    // expect(spy).not.toHaveBeenCalledWith('xx')
-    // local alias
-    test.run('hi', 'xxx')
-    expect(spy).toHaveBeenCalledWith('xxx')
-    // global alias
-    app.run('#hi', 'xxxx')
-    expect(spy).toHaveBeenCalledWith('xxxx')
-  })
-
-
-  it('should convert class property to action using @on', () => {
-    class TestComponent extends Component {
-      view = state => state
-
-      @on()
-      f1 = (state, val) => val
-
-      @on('hi2, #hi2')
-      f2 = (state, val) => val
-    }
-
-    const test = new TestComponent().mount();
-    const spy = spyOn(test, 'view')
-    test.run('f1', 'x')
-    expect(spy).toHaveBeenCalledWith('x')
-    // test.run('f2', 'xx')
-    // expect(spy).not.toHaveBeenCalledWith('xx')
-    // local alias
-    test.run('hi2', 'xxx')
-    expect(spy).toHaveBeenCalledWith('xxx')
-    // global alias
-    app.run('#hi2', 'xxxx')
-    expect(spy).toHaveBeenCalledWith('xxxx')
-
-  })
-
-  it('should support this in @on with =>', done => {
-    class TestComponent extends Component {
-      view = state => state
-
-      @on('test')
-      f1 = (state, val) => {
-        expect(this).not.toBeUndefined();
-        done();
-      }
-    }
-    const test = new TestComponent().mount();
-    test.run('test');
-  })
-
-  it('should support this in @on with function', done => {
-    class TestComponent extends Component {
-      view = state => state
-
-      @on('test')
-      f1 = function (state, val) {
-        expect(this).not.toBeUndefined();
-        done();
-      }
-    }
-    const test = new TestComponent().mount();
-    test.run('test');
-  })
-
-  it('should support this in @update', done => {
-    class TestComponent extends Component {
-      view = state => state
-
-      @update('test')
-      onTest(state, val) {
-        expect(this).not.toBeUndefined();
-        done();
-      }
-    }
-    const test = new TestComponent().mount();
-    test.run('test');
-  })
-
-
-})

package/tests/fragment.spec.tsx

@@ -1,79 +0,0 @@
-import app from '../src/apprun';
-
-describe('vdom-my', () => {
-  it('should convert JSX Fragment to array', () => {
-    const view = () => <>
-      <li><a></a></li>
-      <li><a></a></li>
-    </>;
-    const vdom = view();
-    expect(vdom.length).toBe(2);
-  })
-  it('should support JSX Fragment keyword to array', () => {
-    const view = () => <app.Fragment>
-      <li><a></a></li>
-      <li><a></a></li>
-    </app.Fragment>;
-    const vdom = view();
-    expect(vdom.length).toBe(2);
-  })
-  it('should convert merge JSX Fragment to parents', () => {
-    const view = () => <ul><>
-      <li><a></a></li>
-      <li><a></a></li>
-    </>
-    <li><a></a></li></ul>;
-    const vdom = view();
-    expect(vdom.tag).toBe('ul');
-    expect(vdom.children.length).toBe(3)
-  })
-  it('should support JSX Fragment at root level with mutiple elements', () => {
-    const el = document.createElement('div');
-    const view = () => <>
-      <li><a></a></li>
-      <li><a></a></li>
-    </>
-    const vdom = view();
-    expect(Array.isArray(vdom)).toBeTruthy();
-    app.render(el, vdom);
-    expect(el.childElementCount).toBe(2);
-  })
-  it('should support JSX Fragment at root level with signle element', () => {
-    const el = document.createElement('div');
-    const view = () => <>
-      <li><a></a></li>
-    </>
-    const vdom = view();
-    expect(Array.isArray(vdom)).toBeTruthy();
-    app.render(el, vdom);
-    expect(el.childElementCount).toBe(1);
-    expect(el.innerHTML).toBe('<li><a></a></li>');
-  })
-  it('should remove extra', () => {
-    const el = document.createElement('ul');
-    el.innerHTML='<li>a</li><li>b</li><li>c</li>'
-    const view = () => <><li><a></a></li><li><a></a></li></>
-    const vdom = view();
-    app.render(el, vdom);
-    expect(el.childElementCount).toBe(2);
-    expect(el.innerHTML).toBe('<li><a></a></li><li><a></a></li>');
-  })
-  it('should combine string and tags', () => {
-    const el = document.createElement('div');
-    el.innerHTML = '<h1><h1>';
-    const view = () => <>aaa<div>b</div>{' '}</>
-    const vdom = view();
-    app.render(el, vdom);
-    expect(vdom.length).toBe(3);
-    expect(el.innerHTML).toBe('aaa<div>b</div> ');
-  })
-  it('should combine string and tags', () => {
-    const el = document.createElement('div');
-    el.innerHTML = '<h1><h1>';
-    const view = () => <>{' '} <div>b</div> {' '}</>
-    const vdom = view();
-    app.render(el, vdom);
-    expect(vdom.length).toBe(5);
-    expect(el.innerHTML).toBe('  <div>b</div>  ');
-  })
-})