Browserify (#100)

* feat(examples): add browserify example

* chore(ci): add jit-browserify e2e tests to circle.yml

* fix(jit-browserify): build before serve so the e2e tests can run

.circleci/config.yml

@@ -128,7 +128,7 @@ jobs:
       - store_artifacts:
           path: ./packages/plugin-svg/coverage
 
-  e2e_tests:
+  e2e_tests_jit_parcel:
     <<: *defaults
     steps:
       - checkout
@@ -153,6 +153,32 @@ jobs:
             cd ./packages/examples/jit-parcel
             npm run e2e
 
+  e2e_tests_jit_browserify:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: Install jit-browserify
+          command: |
+            cd ./packages/examples/jit-browserify
+            npm ci
+            npm run build
+      - run:
+          name: Serve jit-browserify in the background
+          background: true
+          command: |
+            cd ./packages/examples/jit-browserify
+            npm run start
+      - run:
+          name: Run the e2e tests
+          command: |
+            cd ./packages/examples/jit-browserify
+            npm run e2e
+
 workflows:
     version: 2
     default_workflow:
@@ -164,7 +190,10 @@ workflows:
             - unit_tests:
                 requires:
                     - install
-            - e2e_tests:
+            - e2e_tests_jit_parcel:
+                requires:
+                    - build
+            - e2e_tests_jit_browserify:
                 requires:
                     - build
 

packages/examples/jit-browserify/.gitignore

@@ -0,0 +1,3 @@
+dist
+.cache
+debug.log

packages/examples/jit-browserify/app.ts

@@ -0,0 +1,120 @@
+import { ArrayObserver, customElement } from '@aurelia/runtime';
+
+let id = 0;
+class Todo {
+  public done: boolean = false;
+  public id: number = id++;
+  constructor(public description: string, public app: App) {}
+}
+
+type ObservedTodos = Todo[] & { $observer: ArrayObserver };
+
+@customElement({
+  name: 'app',
+  templateOrNode: `
+  <template>
+    <div class="ui form">
+      <div class="fields">
+        <div class="five wide field">
+          <label>Description</label>
+          <input id="description" type="text" value.two-way="description">
+        </div>
+        <div class="two wide field">
+          <label>Count</label>
+          <input id="count" type="number" value.two-way="count">
+        </div>
+        <div class="two wide field">
+          <label>Log collection changes</label>
+          <input id="log" type="checkbox" checked.two-way="log">
+        </div>
+      </div>
+      <button id="addTodo" class="ui button" click.trigger="addTodo()">Add Todo</button>
+      <button id="clearTodos" class="ui button" click.trigger="clearTodos()">Clear Todos</button>
+      <button id="toggleTodos" class="ui button" click.trigger="toggleTodos()">Toggle Todos</button>
+    </div>
+    <div id="descriptionText">\${description}</div>
+    <div class="ui divided list todos">
+      <div repeat.for="todo of todos">
+        <div class="item todo">
+          <div id.bind="\`todo-\${todo.id}\`" class="content">
+            #\${todo.id} - \${todo.app.description} - \${todo.description}
+            <input id.bind="\`todo-\${todo.id}-done\`" type="checkbox" checked.two-way="todo.done">
+            \${todo.done ? 'Done' : ''}
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  `,
+  build: {
+    required: true,
+    compiler: 'default'
+  },
+  instructions: [],
+  surrogates: [],
+  dependencies: []
+})
+export class App {
+  public log: boolean = false;
+  public count: number = 1;
+  public description: string = 'Hello World';
+  public todos: ObservedTodos = <any>[];
+
+  public addTodo(): void {
+    for (let i = 0; i < this.count; ++i) {
+      this.todos.push(new Todo(this.description, this));
+    }
+  }
+
+  public clearTodos(): void {
+    this.todos.splice(0, this.todos.length);
+  }
+
+  public toggleTodos(): void {
+    for (const todo of this.todos) {
+      todo.done = !todo.done;
+    }
+  }
+
+  public bound(): void {
+    Promise.resolve().then(() => {
+      this.todos.$observer.subscribe(this);
+      this.todos.$observer.subscribeBatched(this);
+    });
+    console.log('app bound');
+  }
+
+  public handleChange(origin: string, args?: IArguments): void {
+    if (this.log) {
+      console.log('handleChange', origin, args);
+    }
+  }
+
+  public handleBatchedChange(indexMap: Array<number>): void {
+    if (this.log) {
+      console.log('handleBatchedChange', indexMap);
+    }
+  }
+
+  public attaching(): void {
+    console.log('app attaching');
+  }
+
+  public attached(): void {
+    console.log('app attached');
+  }
+
+  public detaching(): void {
+    console.log('app detaching');
+  }
+
+  public detached(): void {
+    console.log('app detached');
+  }
+
+  public unbound(): void {
+    console.log('app unbound');
+    this.todos.$observer.unsubscribe(this);
+    this.todos.$observer.unsubscribeBatched(this);
+  }
+}

packages/examples/jit-browserify/e2e/common/browser.ts

@@ -0,0 +1,23 @@
+// tslint:disable:typedef
+// tslint:disable:function-name
+// tslint:disable:no-import-side-effect
+import 'chromedriver';
+import { Builder, By, until } from 'selenium-webdriver';
+
+export async function waitForElement(selector: string, timeout: number) {
+  await browser.wait(until.elementLocated(By.css(selector)), timeout);
+  return browser.findElement(By.css(selector));
+}
+
+export async function waitForElements(selector: string, timeout: number) {
+  await browser.wait(until.elementLocated(By.css(selector)), timeout);
+  return browser.findElements(By.css(selector));
+}
+
+export async function loadUrl(url: string) {
+  console.log(`     * (re-)loading ${url}`);
+  await browser.navigate().to(url);
+  await browser.wait(browser.executeScript('return window.au && window.au.isStarted'));
+}
+
+export const browser = new Builder().forBrowser('chrome').build();

packages/examples/jit-browserify/e2e/page-objects/app.constants.ts

@@ -0,0 +1,18 @@
+// tslint:disable:typedef
+export class AppConstants {
+  public static get cssSelectors() {
+    return {
+      descriptionInput: '#description',
+      countInput: '#count',
+      logInput: '#log',
+      addTodoButton: '#addTodo',
+      clearTodosButton: '#clearTodos',
+      toggleTodosButton: '#toggleTodos',
+      descriptionText: '#descriptionText',
+      todoElements: '.todo',
+      todoContentElements: '.todo .content',
+      todoElement: (id: number) => `#todo-${id}`,
+      todoDoneCheckbox: (id: number) => `#todo-${id}-done`
+    };
+  }
+}

packages/examples/jit-browserify/e2e/page-objects/app.page.ts

@@ -0,0 +1,108 @@
+// tslint:disable:typedef
+// tslint:disable:function-name
+import { By } from 'selenium-webdriver';
+import { browser, waitForElement, waitForElements } from '../common/browser';
+import { AppConstants } from './app.constants';
+
+const { cssSelectors } = AppConstants;
+
+function log(msg: string) {
+  console.log(`     * ${msg}`);
+}
+
+export class AppPage {
+  public static get descriptionInput() {
+    return browser.findElement(By.css(cssSelectors.descriptionInput));
+  }
+
+  public static async setDescriptionInputValue(value: string) {
+    log(`set description input value to ${value}`);
+    await this.descriptionInput.clear();
+    await this.descriptionInput.sendKeys(value);
+  }
+
+  public static async getDescriptionInputValue() {
+    return this.descriptionInput.getAttribute('value');
+  }
+
+  public static get countInput() {
+    return browser.findElement(By.css(cssSelectors.countInput));
+  }
+
+  public static async setCountInputValue(value: number) {
+    log(`set count value to ${value}`);
+    await this.countInput.clear();
+    await this.countInput.sendKeys(value);
+  }
+
+  public static async getCountInputValue() {
+    return parseInt((await this.countInput.getAttribute('value')), 10);
+  }
+
+  public static get logInput() {
+    return browser.findElement(By.css(cssSelectors.logInput));
+  }
+
+  public static async setLogInputValue(value: boolean) {
+    await this.logInput.click();
+  }
+
+  public static async getLogInputValue() {
+    return (await this.descriptionInput.getAttribute('checked')) === 'true';
+  }
+
+  public static get addTodoButton() {
+    return browser.findElement(By.css(cssSelectors.addTodoButton));
+  }
+
+  public static async addTodo() {
+    log(`click Add todo`);
+    await this.addTodoButton.click();
+  }
+
+  public static get clearTodosButton() {
+    return browser.findElement(By.css(cssSelectors.clearTodosButton));
+  }
+
+  public static async clearTodos() {
+    log(`click Clear todos`);
+    await this.clearTodosButton.click();
+  }
+
+  public static get toggleTodosButton() {
+    log(`click Toggle todos`);
+    return browser.findElement(By.css(cssSelectors.toggleTodosButton));
+  }
+
+  public static async toggleTodos() {
+    log(`toggle todos`);
+    await this.toggleTodosButton.click();
+  }
+
+  public static get descriptionInterpolation() {
+    return browser.findElement(By.css(cssSelectors.descriptionText));
+  }
+
+  public static async getDescriptionInterpolationText() {
+    return this.descriptionInterpolation.getText();
+  }
+  public static async getTodosCount() {
+    const results = await browser.findElements(By.css(AppConstants.cssSelectors.todoElements));
+    return results.length;
+  }
+
+  public static async getTodos() {
+    return browser.findElements(By.css(AppConstants.cssSelectors.todoElements));
+  }
+
+  public static async getTodoElement(id: number, timeout: number = 10) {
+    return waitForElement(cssSelectors.todoElement(id), timeout);
+  }
+
+  public static async clickTodoDoneCheckbox(id: number, timeout: number = 10) {
+    log(`click Todo done checkbox`);
+    const element = await waitForElement(cssSelectors.todoDoneCheckbox(id), timeout);
+    await element.click();
+  }
+
+}