Cypress Page Objects TypeScript

todo.spec.ts

type JQueryElement = Cypress.Chainable<JQuery<HTMLElement>>;

interface TodoItemRow {
  name(): JQueryElement;
  delete(): JQueryElement;
  checkbox(): JQueryElement;
  isComplete(fn: (isComplete: boolean) => void): void;
  hasClass(name: string, fn: (hasClass: boolean) => void): void;
}

class TodoTable {
  static itemRow(tr: () => JQueryElement): TodoItemRow {
    return {
      name: () => tr().find("label"),
      delete: () => tr().find("button.destroy"),
      checkbox: () => tr().find("input.toggle"),
      isComplete(fn: (isComplete: boolean) => void): void {
        this.hasClass("completed", fn);
      },
      hasClass(name: string, fn: (hasClass: boolean) => void): void {
        tr().then(($tr) => {
          fn($tr.hasClass(name));
        });
      }
    };
  }

  static todoLis() {
    return cy.get(`ul.todo-list > li`);
  }

  static items(): Cypress.Chainable<TodoItemRow[]> {
    return this.todoLis().then(($lis) => {
      return $lis.toArray().map(($el) => {
        return this.itemRow(() => cy.wrap($el))
      });
    });
  }

  static itemRowsFn(fn: (rows: TodoItemRow[]) => void) {
    this.items().then((mappedElements) => {
      fn(mappedElements);
    });
  }

  static itemRows() { 
    return this.items();
  }

  static rowWithData(data: string, func: (row: TodoItemRow) => void): void {
    this.todoLis().contains(data).closest("li").then(($li) => {
      if ($li.length > 1) {
        throw new Error(`rowWithData can only return 1 row but found ${$li.length} consider using itemRowsFn for multiple rows`);
      }
      func(this.itemRow(() => cy.wrap($li)));
    });
  }

  static rowAtIndex(idx: number, func: (row: TodoItemRow) => void): void {
    func(this.itemRow(() => this.todoLis().eq(idx)));
  }
}


class Page {
  static title() {
    return cy.get("header h1");
  }

  static table() {
    return TodoTable;
  }
}

describe("Page Objects TypeScript", () => {
  it("table rows", () => {
    cy.visit("https://example.cypress.io/todo");

    Page.title().should("have.text", "todos");
    Page.table().itemRowsFn((rows) => {
      expect(rows.length).to.equal(2);
      rows[0].name().should("have.text", "Pay electric bill");
      rows[0].isComplete((isComplete) => expect(isComplete).to.be.false);
      rows[0].checkbox().click();

      rows[0].isComplete((isComplete) => expect(isComplete).to.be.true);

      rows[0].hasClass("completed", (b) => expect(b, "should not have completed class").to.be.true);
    });

    Page.table().rowWithData("Walk", (row) => {
      row.name().should("have.text", "Walk the dog");
    });

    Page.table().rowAtIndex(1, (row) => {
      row.name().should("have.text", "Walk the dog");
      row.isComplete((b) => expect(b).to.be.false);
      row.hasClass("done", (b) => expect(b, "should not have done class").to.be.false);
      row.hasClass("completed", (b) => expect(b, "should not have completed class").to.be.false);
    });

    Page.table().itemRowsFn((rows) => {
      console.log(rows.length);
    });
  });
});