chore: add todomvc example (#1523)

Author: mxschmitt

.github/workflows/ci.yml

@@ -193,3 +193,22 @@ jobs:
         run: conda install conda-build conda-verify
       - name: Build
         run: conda build .
+
+  test_examples:
+    name: Examples
+    runs-on: ubuntu-22.04
+    defaults:
+      run:
+        working-directory: examples/todomvc/
+    steps:
+    - uses: actions/checkout@v3
+    - name: Set up Python
+      uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+    - name: Install dependencies & browsers
+      run: |
+        pip install -r requirements.txt
+        python -m playwright install --with-deps chromium
+    - name: Common Tests
+      run: pytest

.pre-commit-config.yaml

@@ -23,6 +23,7 @@ repos:
     hooks:
       - id: mypy
         additional_dependencies: [types-pyOpenSSL==21.0.3]
+        exclude: examples/
   - repo: https://github.com/pycqa/flake8
     rev: 5.0.4
     hooks:

examples/todomvc/requirements.txt

@@ -0,0 +1 @@
+pytest-playwright==0.3.0

examples/todomvc/tests/__init__.py

@@ -0,0 +1,38 @@
+from typing import Generator
+
+import pytest
+
+from playwright.sync_api import Page, expect
+
+from .utils import TODO_ITEMS, create_default_todos
+
+
+@pytest.fixture(autouse=True)
+def run_around_tests(page: Page) -> Generator[None, None, None]:
+    # setup before a test
+    page.goto("https://demo.playwright.dev/todomvc")
+    create_default_todos(page)
+    # run the actual test
+    yield
+    # run any cleanup code
+
+
+def test_should_display_the_correct_text(page: Page) -> None:
+    page.locator(".todo-list li .toggle").first.check()
+    expect(page.locator(".clear-completed")).to_have_text("Clear completed")
+
+
+def test_should_clear_completed_items_when_clicked(page: Page) -> None:
+    todo_items = page.locator(".todo-list li")
+    todo_items.nth(1).locator(".toggle").check()
+    page.locator(".clear-completed").click()
+    expect(todo_items).to_have_count(2)
+    expect(todo_items).to_have_text([TODO_ITEMS[0], TODO_ITEMS[2]])
+
+
+def test_should_be_hidden_when_there_are_no_items_that_are_completed(
+    page: Page,
+) -> None:
+    page.locator(".todo-list li .toggle").first.check()
+    page.locator(".clear-completed").click()
+    expect(page.locator(".clear-completed")).to_be_hidden()

examples/todomvc/tests/test_clear_completed_button.py

@@ -0,0 +1,28 @@
+from typing import Generator
+
+import pytest
+
+from playwright.sync_api import Page, expect
+
+from .utils import TODO_ITEMS, assert_number_of_todos_in_local_storage
+
+
+@pytest.fixture(autouse=True)
+def run_around_tests(page: Page) -> Generator[None, None, None]:
+    # setup before a test
+    page.goto("https://demo.playwright.dev/todomvc")
+    # run the actual test
+    yield
+    # run any cleanup code
+
+
+def test_should_display_the_current_number_of_todo_items(page: Page) -> None:
+    page.locator(".new-todo").fill(TODO_ITEMS[0])
+    page.locator(".new-todo").press("Enter")
+    expect(page.locator(".todo-count")).to_contain_text("1")
+
+    page.locator(".new-todo").fill(TODO_ITEMS[1])
+    page.locator(".new-todo").press("Enter")
+    expect(page.locator(".todo-count")).to_contain_text("2")
+
+    assert_number_of_todos_in_local_storage(page, 2)

examples/todomvc/tests/test_counter.py

@@ -0,0 +1,84 @@
+from typing import Generator
+
+import pytest
+
+from playwright.sync_api import Page, expect
+
+from .utils import (
+    TODO_ITEMS,
+    assert_number_of_todos_in_local_storage,
+    check_todos_in_local_storage,
+    create_default_todos,
+)
+
+
+@pytest.fixture(autouse=True)
+def run_around_tests(page: Page) -> Generator[None, None, None]:
+    # setup before a test
+    page.goto("https://demo.playwright.dev/todomvc")
+    create_default_todos(page)
+    assert_number_of_todos_in_local_storage(page, 3)
+    # run the actual test
+    yield
+    # run any cleanup code
+
+
+def test_should_hide_other_controls_when_editing(page: Page) -> None:
+    todo_item = page.locator(".todo-list li").nth(1)
+    todo_item.dblclick()
+    expect(todo_item.locator(".toggle")).not_to_be_visible()
+    expect(todo_item.locator("label")).not_to_be_visible()
+    assert_number_of_todos_in_local_storage(page, 3)
+
+
+def test_should_save_edits_on_blur(page: Page) -> None:
+    todo_items = page.locator(".todo-list li")
+    todo_items.nth(1).dblclick()
+    todo_items.nth(1).locator(".edit").fill("buy some sausages")
+    todo_items.nth(1).locator(".edit").dispatch_event("blur")
+
+    expect(todo_items).to_have_text(
+        [
+            TODO_ITEMS[0],
+            "buy some sausages",
+            TODO_ITEMS[2],
+        ]
+    )
+    check_todos_in_local_storage(page, "buy some sausages")
+
+
+def test_should_trim_entered_text(page: Page) -> None:
+    todo_items = page.locator(".todo-list li")
+    todo_items.nth(1).dblclick()
+    todo_items.nth(1).locator(".edit").fill("    buy some sausages    ")
+    todo_items.nth(1).locator(".edit").press("Enter")
+
+    expect(todo_items).to_have_text(
+        [
+            TODO_ITEMS[0],
+            "buy some sausages",
+            TODO_ITEMS[2],
+        ]
+    )
+    check_todos_in_local_storage(page, "buy some sausages")
+
+
+def test_should_remove_the_item_if_an_empty_text_string_was_entered(page: Page) -> None:
+    todo_items = page.locator(".todo-list li")
+    todo_items.nth(1).dblclick()
+    todo_items.nth(1).locator(".edit").fill("")
+    todo_items.nth(1).locator(".edit").press("Enter")
+
+    expect(todo_items).to_have_text(
+        [
+            TODO_ITEMS[0],
+            TODO_ITEMS[2],
+        ]
+    )
+
+
+def test_should_cancel_edits_on_escape(page: Page) -> None:
+    todo_items = page.locator(".todo-list li")
+    todo_items.nth(1).dblclick()
+    todo_items.nth(1).locator(".edit").press("Escape")
+    expect(todo_items).to_have_text(TODO_ITEMS)

examples/todomvc/tests/test_editing.py

@@ -0,0 +1,76 @@
+from typing import Generator
+
+import pytest
+
+from playwright.sync_api import Page, expect
+
+from .utils import (
+    TODO_ITEMS,
+    check_number_of_completed_todos_in_local_storage,
+    check_todos_in_local_storage,
+    create_default_todos,
+)
+
+
+@pytest.fixture(autouse=True)
+def run_around_tests(page: Page) -> Generator[None, None, None]:
+    # setup before a test
+    page.goto("https://demo.playwright.dev/todomvc")
+    # run the actual test
+    yield
+    # run any cleanup code
+
+
+def test_should_allow_me_to_mark_items_as_completed(page: Page) -> None:
+    # Create two items.
+    for item in TODO_ITEMS[:2]:
+        page.locator(".new-todo").fill(item)
+        page.locator(".new-todo").press("Enter")
+
+    # Check first item.
+    firstTodo = page.locator(".todo-list li").nth(0)
+    firstTodo.locator(".toggle").check()
+    expect(firstTodo).to_have_class("completed")
+
+    # Check second item.
+    secondTodo = page.locator(".todo-list li").nth(1)
+    expect(secondTodo).not_to_have_class("completed")
+    secondTodo.locator(".toggle").check()
+
+    # Assert completed class.
+    expect(firstTodo).to_have_class("completed")
+    expect(secondTodo).to_have_class("completed")
+
+
+def test_should_allow_me_to_un_mark_items_as_completed(page: Page) -> None:
+    # Create two items.
+    for item in TODO_ITEMS[:2]:
+        page.locator(".new-todo").fill(item)
+        page.locator(".new-todo").press("Enter")
+
+    firstTodo = page.locator(".todo-list li").nth(0)
+    secondTodo = page.locator(".todo-list li").nth(1)
+    firstTodo.locator(".toggle").check()
+    expect(firstTodo).to_have_class("completed")
+    expect(secondTodo).not_to_have_class("completed")
+    check_number_of_completed_todos_in_local_storage(page, 1)
+
+    firstTodo.locator(".toggle").uncheck()
+    expect(firstTodo).not_to_have_class("completed")
+    expect(secondTodo).not_to_have_class("completed")
+    check_number_of_completed_todos_in_local_storage(page, 0)
+
+
+def test_should_allow_me_to_edit_an_item(page: Page) -> None:
+    create_default_todos(page)
+
+    todo_items = page.locator(".todo-list li")
+    secondTodo = todo_items.nth(1)
+    secondTodo.dblclick()
+    expect(secondTodo.locator(".edit")).to_have_value(TODO_ITEMS[1])
+    secondTodo.locator(".edit").fill("buy some sausages")
+    secondTodo.locator(".edit").press("Enter")
+
+    # Explicitly assert the new text value.
+    expect(todo_items).to_have_text([TODO_ITEMS[0], "buy some sausages", TODO_ITEMS[2]])
+    check_todos_in_local_storage(page, "buy some sausages")

examples/todomvc/tests/test_item.py

@@ -0,0 +1,71 @@
+from typing import Generator
+
+import pytest
+
+from playwright.sync_api import Page, expect
+
+from .utils import (
+    assert_number_of_todos_in_local_storage,
+    check_number_of_completed_todos_in_local_storage,
+    create_default_todos,
+)
+
+
+@pytest.fixture(autouse=True)
+def run_around_tests(page: Page) -> Generator[None, None, None]:
+    # setup before a test
+    page.goto("https://demo.playwright.dev/todomvc")
+    # run the actual test
+    yield
+    # run any cleanup code
+
+
+def test_should_allow_me_to_mark_all_items_as_completed(page: Page) -> None:
+    create_default_todos(page)
+    assert_number_of_todos_in_local_storage(page, 3)
+    # Complete all todos.
+    page.locator(".toggle-all").check()
+
+    # Ensure all todos have 'completed' class.
+    expect(page.locator(".todo-list li")).to_have_class(
+        ["completed", "completed", "completed"]
+    )
+    check_number_of_completed_todos_in_local_storage(page, 3)
+    assert_number_of_todos_in_local_storage(page, 3)
+
+
+def test_should_allow_me_to_clear_the_complete_state_of_all_items(page: Page) -> None:
+    create_default_todos(page)
+    assert_number_of_todos_in_local_storage(page, 3)
+    # Check and then immediately uncheck.
+    page.locator(".toggle-all").check()
+    page.locator(".toggle-all").uncheck()
+
+    # Should be no completed classes.
+    expect(page.locator(".todo-list li")).to_have_class(["", "", ""])
+    assert_number_of_todos_in_local_storage(page, 3)
+
+
+def test_complete_all_checkbox_should_update_state_when_items_are_completed_or_cleared(
+    page: Page,
+) -> None:
+    create_default_todos(page)
+    assert_number_of_todos_in_local_storage(page, 3)
+    toggleAll = page.locator(".toggle-all")
+    toggleAll.check()
+    expect(toggleAll).to_be_checked()
+    check_number_of_completed_todos_in_local_storage(page, 3)
+
+    # Uncheck first todo.
+    firstTodo = page.locator(".todo-list li").nth(0)
+    firstTodo.locator(".toggle").uncheck()
+
+    # Reuse toggleAll locator and make sure its not checked.
+    expect(toggleAll).not_to_be_checked()
+
+    firstTodo.locator(".toggle").check()
+    check_number_of_completed_todos_in_local_storage(page, 3)
+
+    # Assert the toggle all is checked again.
+    expect(toggleAll).to_be_checked()
+    assert_number_of_todos_in_local_storage(page, 3)