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/base/src/Component.ts

@@ -1,4 +1,4 @@
-import {Predicate} from '.';
+import {Predicate} from './Predicate';
 
 export interface Adapter<TNode> {
   findNodes(selector: string, ancestor?: TNode): Promise<TNode[]>;

@pageobject/base/src/Test.ts

@@ -1,4 +1,5 @@
-import {Effect, Predicate} from '.';
+import {Effect} from './Component';
+import {Predicate} from './Predicate';
 
 export type ConditionalTestCallback = (thenTest: Test, elseTest: Test) => void;
 export type TestCallback<TContext> = (test: Test, context: TContext) => void;

@pageobject/base/src/Component.test.ts → @pageobject/base/src/tests/Component.test.ts

@@ -1,4 +1,4 @@
-import {Adapter, Component, Effect, Predicate} from '.';
+import {Adapter, Component, Effect, Predicate} from '..';
 
 const {is, isGreaterThan, matches} = Predicate;
 

@pageobject/base/src/Predicate.test.ts → @pageobject/base/src/tests/Predicate.test.ts

@@ -1,4 +1,4 @@
-import {Predicate} from '.';
+import {Predicate} from '..';
 
 interface JestGlobal {
   expect?: typeof expect;

@pageobject/base/src/Test.test.ts → @pageobject/base/src/tests/Test.test.ts

@@ -1,4 +1,4 @@
-import {Effect, Predicate, Test} from '.';
+import {Effect, Predicate, Test} from '..';
 
 const {is} = Predicate;
 

@pageobject/protractor/src/ProtractorAdapter.spec.ts → @pageobject/protractor/src/tests/ProtractorAdapter.spec.ts

@@ -1,6 +1,6 @@
 import {WebAdapterTest} from '@pageobject/web';
 import {browser} from 'protractor';
-import {ProtractorAdapter} from '.';
+import {ProtractorAdapter} from '..';
 
 describe('ProtractorAdapter', () => {
   it('should pass the WebAdapterTest successfully', async () => {

@pageobject/puppeteer/src/PuppeteerAdapter.test.ts → @pageobject/puppeteer/src/tests/PuppeteerAdapter.test.ts

@@ -1,5 +1,5 @@
 import {WebAdapterTest} from '@pageobject/web';
-import {PuppeteerAdapter} from '.';
+import {PuppeteerAdapter} from '..';
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
 

@pageobject/selenium-webdriver/src/SeleniumAdapter.test.ts → @pageobject/selenium-webdriver/src/tests/SeleniumAdapter.test.ts

@@ -1,7 +1,7 @@
 import {WebAdapterTest} from '@pageobject/web';
 import {ChildProcess, spawn} from 'child_process';
 import getPort from 'get-port';
-import {SeleniumAdapter} from '.';
+import {SeleniumAdapter} from '..';
 
 const updateConfig = require('webdriver-manager/selenium/update-config.json');
 

@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"
+}

@pageobject/web/src/JSDOMAdapter.ts

@@ -1,7 +1,7 @@
 import {FromFileOptions, JSDOM} from 'jsdom';
 import {inspect} from 'util';
 import {Script} from 'vm';
-import {Argument, Key, WebAdapter, WebNode} from '.';
+import {Argument, Key, WebAdapter, WebNode} from './WebComponent';
 
 // tslint:disable-next-line no-any
 function serialize(value: any): string {

@pageobject/web/src/WebAdapterTest.ts

@@ -1,6 +1,6 @@
 import {ok, strictEqual} from 'assert';
 import {join} from 'path';
-import {WebAdapter} from '.';
+import {WebAdapter} from './WebComponent';
 
 const fileURL = `file://${join(__dirname, '../fixtures/index.html')}`;
 

@pageobject/web/src/JSDOMAdapter.test.ts → @pageobject/web/src/tests/JSDOMAdapter.test.ts

@@ -1,4 +1,4 @@
-import {JSDOMAdapter, WebAdapterTest} from '.';
+import {JSDOMAdapter, WebAdapterTest} from '..';
 
 describe('JSDOMAdapter', () => {
   it('should pass the WebAdapterTest successfully', async () => {

@pageobject/web/src/WebComponent.test.ts → @pageobject/web/src/tests/WebComponent.test.ts

@@ -1,4 +1,4 @@
-import {Keyboard, Page, WebAdapter, WebComponent, WebNode} from '.';
+import {Keyboard, Page, WebAdapter, WebComponent, WebNode} from '..';
 
 class TestAdapter implements WebAdapter {
   public readonly execute = jest.fn();

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
@@ -12,7 +12,7 @@ clean:
 	rm -rf @pageobject/*/dist
 	rm -rf docs/api/*
 
-@pageobject/%/dist: @pageobject/%/src/*.ts | node_modules node_modules/webdriver-manager/selenium
+@pageobject/%/dist: @pageobject/%/src/*.ts @pageobject/%/src/tests/*.ts | node_modules node_modules/webdriver-manager/selenium
 	$(BIN)/tsc --project @pageobject/$*
 	touch $@
 

docs/api/base/classes/test.html

@@ -1035,7 +1035,7 @@ <h3>default<wbr>Timeout<wbr>InSeconds</h3>
 				<div class="tsd-signature tsd-kind-icon">default<wbr>Timeout<wbr>InSeconds<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L77">Test.ts:77</a></li>
+						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L78">Test.ts:78</a></li>
 					</ul>
 				</aside>
 			</section>
@@ -1052,7 +1052,7 @@ <h3>assert</h3>
 					<li class="tsd-description">
 						<aside class="tsd-sources">
 							<ul>
-								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L85">Test.ts:85</a></li>
+								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L86">Test.ts:86</a></li>
 							</ul>
 						</aside>
 						<h4 class="tsd-type-parameters-title">Type parameters</h4>
@@ -1087,7 +1087,7 @@ <h3>if</h3>
 					<li class="tsd-description">
 						<aside class="tsd-sources">
 							<ul>
-								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L101">Test.ts:101</a></li>
+								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L102">Test.ts:102</a></li>
 							</ul>
 						</aside>
 						<h4 class="tsd-type-parameters-title">Type parameters</h4>
@@ -1125,7 +1125,7 @@ <h3>perform</h3>
 					<li class="tsd-description">
 						<aside class="tsd-sources">
 							<ul>
-								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L120">Test.ts:120</a></li>
+								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L121">Test.ts:121</a></li>
 							</ul>
 						</aside>
 						<h4 class="tsd-parameters-title">Parameters</h4>
@@ -1151,7 +1151,7 @@ <h3><span class="tsd-flag ts-flagStatic">Static</span> run</h3>
 					<li class="tsd-description">
 						<aside class="tsd-sources">
 							<ul>
-								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L65">Test.ts:65</a></li>
+								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L66">Test.ts:66</a></li>
 							</ul>
 						</aside>
 						<h4 class="tsd-type-parameters-title">Type parameters</h4>

docs/api/base/globals.html

@@ -1056,7 +1056,7 @@ <h3>Conditional<wbr>Test<wbr>Callback</h3>
 				<div class="tsd-signature tsd-kind-icon">Conditional<wbr>Test<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">function</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L3">Test.ts:3</a></li>
+						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L4">Test.ts:4</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-type-declaration">
@@ -1115,7 +1115,7 @@ <h3>Test<wbr>Callback</h3>
 				<div class="tsd-signature tsd-kind-icon">Test<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">function</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L4">Test.ts:4</a></li>
+						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L5">Test.ts:5</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-type-declaration">
@@ -1149,7 +1149,7 @@ <h3>Test<wbr>Step</h3>
 				<div class="tsd-signature tsd-kind-icon">Test<wbr>Step<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">function</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L6">Test.ts:6</a></li>
+						<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L7">Test.ts:7</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-type-declaration">
@@ -1181,7 +1181,7 @@ <h3>reliable</h3>
 					<li class="tsd-description">
 						<aside class="tsd-sources">
 							<ul>
-								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L8">Test.ts:8</a></li>
+								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L9">Test.ts:9</a></li>
 							</ul>
 						</aside>
 						<h4 class="tsd-parameters-title">Parameters</h4>
@@ -1210,7 +1210,7 @@ <h3>run<wbr>All</h3>
 					<li class="tsd-description">
 						<aside class="tsd-sources">
 							<ul>
-								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L58">Test.ts:58</a></li>
+								<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Test.ts#L59">Test.ts:59</a></li>
 							</ul>
 						</aside>
 						<h4 class="tsd-parameters-title">Parameters</h4>