Testcafe-first-tests.js

import { Selector } from "testcafe";

import { TodoPo } from "./po/todo.po";

// #1: page under test is http://todomvc.com/examples/vanillajs/
fixture("Test TodoMVC App").page("http://todomvc.com/examples/vanillajs/");

// #2
test("Create todo", async t => {
  const todoList = Selector("ul.todo-list");
  const todoItems = todoList.find("li");
  const testTodo = "Hello Testcafe";

  await t
    .typeText("input.new-todo", testTodo)
    .pressKey("enter")
    .expect(todoItems.count)
    .eql(1)
    .expect(todoItems.nth(0).find("label").innerText)
    .eql(testTodo);
});

// #3
test("Edit todo", async t => {
  const todoList = Selector("ul.todo-list");
  const todoItems = todoList.find("li");
  const testTodo = "Hello Testcafe";

  // create a todo item
  await t
    .typeText("input.new-todo", testTodo)
    .pressKey("enter")
    .expect(todoItems.count)
    .eql(1)
    .expect(todoItems.nth(0).find("label").innerText)
    .eql(testTodo);

  const newText = "My new to-do";

  // edit the created todo item
  await t
    .doubleClick(todoItems.nth(0))
    .pressKey(
      "backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace backspace"
    )
    .typeText(todoItems.nth(0).find("input.edit"), newText)
    .pressKey("enter");

  await t.expect(todoItems.nth(0).find("label").innerText).eql(newText);
});

// #4
test("Delete todo", async t => {
  // create 2 todo items
  const todoList = Selector("ul.todo-list");
  const todoItems = todoList.find("li");
  const testTodos = ["Hello Testcafe", "Learn to use Testcafe"];

  // create a todo item

  await t
    .typeText("input.new-todo", testTodos[0])
    .pressKey("enter")
    .typeText("input.new-todo", testTodos[1])
    .pressKey("enter")
    // delete first todo item
    .hover(todoItems.nth(0))
    .click(todoItems.nth(0).find("button.destroy"))
    .wait(2000)
    // assert 1 item in todo list
    .expect(todoItems.count)
    .eql(1)
    // assert todo text equals second input todo item
    .expect(todoItems.nth(0).find("label").innerText)
    .eql(testTodos[1]);
});

// #5
test("Complete one todo", async t => {
  // create 2 todo items
  const todoList = Selector("ul.todo-list");
  const todoItems = todoList.find("li");
  const testTodos = ["Hello Testcafe", "Learn to use Testcafe"];

  await t
    // create 2 todo items
    .typeText("input.new-todo", testTodos[0])
    .pressKey("enter")
    .typeText("input.new-todo", testTodos[1])
    .pressKey("enter")
    // complete first todo item
    .click(todoItems.nth(0).find("input[type='checkbox']"))
    // assert first todo item has class completed
    .expect(todoItems.nth(0).hasClass("completed"))
    .ok();
});

// #6
test("Show active/completed todos", async t => {
  // create 2 todo items
  const todoList = Selector("ul.todo-list");
  const todoItems = todoList.find("li");
  const testTodos = ["Hello Testcafe", "Learn to use Testcafe"];

  await t
    // create 2 todo items
    .typeText("input.new-todo", testTodos[0])
    .pressKey("enter")
    .typeText("input.new-todo", testTodos[1])
    .pressKey("enter")
    // complete first todo item
    .click(todoItems.nth(0).find("input[type='checkbox']"))
    // when click on show active
    .click('.filters a[href*="active"]')
    .wait(500)
    // assert todo text equals second input todo item
    .expect(todoItems.nth(0).find("label").innerText)
    .eql(testTodos[1])
    // when click on show completed
    .click('.filters a[href*="completed"]')
    // assert todo text equals first input todo item
    .expect(todoItems.nth(0).find("label").innerText)
    .eql(testTodos[0])
    .wait(500);
});

// #7
test.only("Complete all todos", async t => {
  // create 4 todo items
  const todoList = Selector("ul.todo-list");
  const todoItems = todoList.find("li");
  const completedTodoItems = todoList.find("li.completed");
  const testTodos = [
    "Hello Testcafe",
    "Learn to use Testcafe",
    "Read Testcafe docs",
    "Write more tests"
  ];

  await t
    // create 2 todo items
    .typeText("input.new-todo", testTodos[0])
    .pressKey("enter")
    .typeText("input.new-todo", testTodos[1])
    .pressKey("enter")
    .typeText("input.new-todo", testTodos[2])
    .pressKey("enter")
    .typeText("input.new-todo", testTodos[3])
    .pressKey("enter")
    // complete all todo items
    .click(todoItems.nth(0).find("input[type='checkbox']"))
    .click(todoItems.nth(1).find("input[type='checkbox']"))
    .click(todoItems.nth(2).find("input[type='checkbox']"))
    .click(todoItems.nth(3).find("input[type='checkbox']"))
    .wait(300)
    .expect(completedTodoItems.count)
    .eql(4);
  // assert 4 todo items completed
});

// #8
test.skip("Delete all completed todos", async t => {
  // create 4 todo items
  // complete all todo items
  // delete all completed items
  // assert 0 todo items in todo list
});