Page

Object

Pattern

Typescript

Edition

class HomePageObject {

  private readonly tableBodyRows: HTMLElement[];
  private readonly addNewTodoButton: HTMLElement;

  constructor() {
    this.tableBodyRows = screen.getAllByRole('row').slice(1); // Removes the table header row
    this.addNewTodoButton = screen.getByRole('button', {name: 'Add new TODO'});
    this.verifyExistenceOfElements();
  }

  public countTodos(count: number) {
    expect(this.tableBodyRows.length).toBe(count);
    return this;
  }

  public clickOnAddNewTodo() {
    fireEvent.click(this.addNewTodoButton);
    return new AddPageObject();
  }

  public clickEditButtonAtRowNumber(rowNumber: number) {
    const editButton = this.editButtonAtRowNumber(rowNumber);
    if (!editButton) {
      fail('Could not find the edit button at row number: ' + rowNumber);
    }
    fireEvent.click(editButton);
    return new EditPageObject();
  }

  private verifyExistenceOfElements() {
    if (!this.tableBodyRows) {
      fail('The todo-table has not been initialized');
    }
    if (!this.addNewTodoButton) {
      fail('The add new todo button has not been initialized');
    }
  }
};

class AddPageObject {

private readonly descriptionField: HTMLElement;
private readonly cancelButton: HTMLElement;
private readonly saveButton: HTMLElement;

  constructor() {
    this.descriptionField = screen.getByRole('textbox', {name: 'Description'});
    this.cancelButton = screen.getByRole('button', {name: 'Cancel'});
    this.saveButton = screen.getByRole('button', {name: 'Save'});
    this.verifyExistenceOfElements();
  }

  public fillDescriptionField(description: string) {
    fireEvent.change(this.descriptionField, {target: {value: description}});
    return this;
  }

  public clickCancelButton() {
    fireEvent.click(this.cancelButton);
    return new HomePageObject();
  }

  public clickSaveButton() {
    fireEvent.click(this.saveButton);
    return new HomePageObject();
  }

  private verifyExistenceOfElements() {
    if (!this.descriptionField) {
      fail('The description field has not been initialized');
    }
    if (!this.cancelButton) {
      fail('The cancel button has not been initialized');
    }
    if (!this.saveButton) {
      fail('The save button has not been initialized');
    }
  }
}