docs(todomvc): add todomvc example project

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 coverage/
 dist/
+error-screenshot.png
 lerna-debug.log
 node_modules/
 npm-debug.log

@pageobject/todomvc/README.md

@@ -0,0 +1,9 @@
+# @pageobject/todomvc
+
+> TODO.
+
+---
+
+Copyright (c) 2017-present, Clemens Akens. Released under the terms of the [MIT License][internal-license].
+
+[internal-license]: https://github.com/clebert/pageobject/blob/master/LICENSE

@pageobject/todomvc/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@pageobject/todomvc",
+  "private": true,
+  "dependencies": {
+    "@pageobject/base": "^9.1.0",
+    "@pageobject/puppeteer": "^9.1.0",
+    "@pageobject/web": "^9.1.0"
+  }
+}

@pageobject/todomvc/src/Label.ts

@@ -0,0 +1,5 @@
+import {WebComponent} from '@pageobject/web';
+
+export class Label extends WebComponent {
+  public readonly selector: string = 'label';
+}

@pageobject/todomvc/src/NewTodoInput.ts

@@ -0,0 +1,5 @@
+import {WebComponent} from '@pageobject/web';
+
+export class NewTodoInput extends WebComponent {
+  public readonly selector: string = '.new-todo';
+}

@pageobject/todomvc/src/Todo.ts

@@ -0,0 +1,10 @@
+import {WebComponent} from '@pageobject/web';
+import {Label} from './Label';
+import {Toggle} from './Toggle';
+
+export class Todo extends WebComponent {
+  public readonly selector: string = 'li';
+
+  public readonly label = new Label(this.adapter, this);
+  public readonly toggle = new Toggle(this.adapter, this);
+}

@pageobject/todomvc/src/TodoList.ts

@@ -0,0 +1,8 @@
+import {WebComponent} from '@pageobject/web';
+import {Todo} from './Todo';
+
+export class TodoList extends WebComponent {
+  public readonly selector: string = '.todo-list';
+
+  public readonly todos = new Todo(this.adapter, this);
+}

@pageobject/todomvc/src/TodoMVC.ts

@@ -0,0 +1,38 @@
+import {Test, TestCallback} from '@pageobject/base';
+import {PuppeteerAdapter} from '@pageobject/puppeteer';
+import {WebComponent} from '@pageobject/web';
+import {NewTodoInput} from './NewTodoInput';
+import {TodoList} from './TodoList';
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 60 * 1000;
+
+const args =
+  process.env.CI === 'true'
+    ? ['--disable-dev-shm-usage', '--disable-setuid-sandbox', '--no-sandbox']
+    : [];
+
+export class TodoMVC extends WebComponent {
+  public static jest(name: string, callback: TestCallback<TodoMVC>): void {
+    test(name, async () => {
+      const adapter = await PuppeteerAdapter.create(
+        {args},
+        {waitUntil: 'domcontentloaded'}
+      );
+
+      try {
+        await Test.run(new TodoMVC(adapter), 10, callback);
+      } catch (e) {
+        await adapter.page.screenshot({path: 'error-screenshot.png'});
+
+        throw e;
+      } finally {
+        await adapter.quit();
+      }
+    });
+  }
+
+  public readonly selector: string = '.todoapp';
+
+  public readonly newTodoInput = new NewTodoInput(this.adapter, this);
+  public readonly todoList = new TodoList(this.adapter, this);
+}

@pageobject/todomvc/src/Toggle.ts

@@ -0,0 +1,13 @@
+import {Effect} from '@pageobject/base';
+import {WebComponent} from '@pageobject/web';
+
+export class Toggle extends WebComponent {
+  public readonly selector: string = '.toggle';
+
+  public isChecked(): Effect<boolean> {
+    return async () =>
+      (await this.findUniqueNode()).execute(
+        (element: HTMLInputElement) => element.checked
+      );
+  }
+}

@pageobject/todomvc/src/tests/completing-a-todo.test.ts

@@ -0,0 +1,20 @@
+import {Predicate} from '@pageobject/base';
+import {TodoMVC} from '../TodoMVC';
+
+const {is} = Predicate;
+
+TodoMVC.jest('Completing a todo', (test, app) => {
+  test.perform(app.page.goto('http://todomvc.com/examples/react/#/'), 30);
+
+  test
+    .assert(app.newTodoInput.hasFocus(), is(true))
+    .perform(app.keyboard.type('My todo'))
+    .perform(app.keyboard.press('Enter'));
+
+  const todo = app.todoList.todos.first();
+
+  test
+    .assert(todo.toggle.isChecked(), is(false))
+    .perform(todo.toggle.click())
+    .assert(todo.toggle.isChecked(), is(true));
+});

@pageobject/todomvc/src/tests/creating-todos.test.ts

@@ -0,0 +1,20 @@
+import {Predicate} from '@pageobject/base';
+import {TodoMVC} from '../TodoMVC';
+
+const {is} = Predicate;
+
+TodoMVC.jest('Creating todos', (test, app) => {
+  test.perform(app.page.goto('http://todomvc.com/examples/react/#/'), 30);
+
+  test
+    .assert(app.newTodoInput.hasFocus(), is(true))
+    .perform(app.keyboard.type('My first todo'))
+    .perform(app.keyboard.press('Enter'))
+
+    .assert(app.newTodoInput.hasFocus(), is(true))
+    .perform(app.keyboard.type('My second todo'))
+    .perform(app.keyboard.press('Enter'))
+
+    .assert(app.todoList.todos.first().label.getText(), is('My first todo'))
+    .assert(app.todoList.todos.last().label.getText(), is('My second todo'));
+});

@pageobject/todomvc/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts", "types/**/*.d.ts"]
+}

@pageobject/todomvc/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}

Makefile

@@ -1,5 +1,5 @@
 BIN := "$(shell yarn bin)"
-PKGS := base web protractor puppeteer selenium-webdriver
+PKGS := base web protractor puppeteer selenium-webdriver todomvc
 
 .PHONY: docs
 docs: $(addprefix docs/api/,$(PKGS)) docs/index.md