mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style(test): format example Playwright tests to project's

pull/205/head
Nick Oliver 2 years ago
parent
3c9088beb5
commit
51215ec94f
2 changed files with 244 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 388
      tests-examples/demo-todo-app.spec.ts
  2. 32
      tests/example.spec.ts

388
tests-examples/demo-todo-app.spec.ts
View File

@ -1,75 +1,77 @@
import { test, expect, type Page } from '@playwright/test'; import { type Page, expect, test } from "@playwright/test";
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await page.goto('https://demo.playwright.dev/todomvc'); await page.goto("https://demo.playwright.dev/todomvc");
}); });
const TODO_ITEMS = [ const TODO_ITEMS = [
'buy some cheese', "buy some cheese",
'feed the cat', "feed the cat",
'book a doctors appointment' "book a doctors appointment",
]; ];
test.describe('New Todo', () => { test.describe("New Todo", () => {
test('should allow me to add todo items', async ({ page }) => { test("should allow me to add todo items", async ({ page }) => {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
// Create 1st todo. // Create 1st todo.
await newTodo.fill(TODO_ITEMS[0]); await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter'); await newTodo.press("Enter");
// Make sure the list only has one todo item. // Make sure the list only has one todo item.
await expect(page.getByTestId('todo-title')).toHaveText([ await expect(page.getByTestId("todo-title")).toHaveText([TODO_ITEMS[0]]);
TODO_ITEMS[0]
]);
// Create 2nd todo. // Create 2nd todo.
await newTodo.fill(TODO_ITEMS[1]); await newTodo.fill(TODO_ITEMS[1]);
await newTodo.press('Enter'); await newTodo.press("Enter");
// Make sure the list now has two todo items. // Make sure the list now has two todo items.
await expect(page.getByTestId('todo-title')).toHaveText([ await expect(page.getByTestId("todo-title")).toHaveText([
TODO_ITEMS[0], TODO_ITEMS[0],
TODO_ITEMS[1] TODO_ITEMS[1],
]); ]);
await checkNumberOfTodosInLocalStorage(page, 2); await checkNumberOfTodosInLocalStorage(page, 2);
}); });
test('should clear text input field when an item is added', async ({ page }) => { test("should clear text input field when an item is added", async ({
page,
}) => {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
// Create one todo item. // Create one todo item.
await newTodo.fill(TODO_ITEMS[0]); await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter'); await newTodo.press("Enter");
// Check that input is empty. // Check that input is empty.
await expect(newTodo).toBeEmpty(); await expect(newTodo).toBeEmpty();
await checkNumberOfTodosInLocalStorage(page, 1); await checkNumberOfTodosInLocalStorage(page, 1);
}); });
test('should append new items to the bottom of the list', async ({ page }) => { test("should append new items to the bottom of the list", async ({
page,
}) => {
// Create 3 items. // Create 3 items.
await createDefaultTodos(page); await createDefaultTodos(page);
// create a todo count locator // create a todo count locator
const todoCount = page.getByTestId('todo-count') const todoCount = page.getByTestId("todo-count");
// Check test using different methods. // Check test using different methods.
await expect(page.getByText('3 items left')).toBeVisible(); await expect(page.getByText("3 items left")).toBeVisible();
await expect(todoCount).toHaveText('3 items left'); await expect(todoCount).toHaveText("3 items left");
await expect(todoCount).toContainText('3'); await expect(todoCount).toContainText("3");
await expect(todoCount).toHaveText(/3/); await expect(todoCount).toHaveText(/3/);
// Check all items in one call. // Check all items in one call.
await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS); await expect(page.getByTestId("todo-title")).toHaveText(TODO_ITEMS);
await checkNumberOfTodosInLocalStorage(page, 3); await checkNumberOfTodosInLocalStorage(page, 3);
}); });
}); });
test.describe('Mark all as completed', () => { test.describe("Mark all as completed", () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await createDefaultTodos(page); await createDefaultTodos(page);
await checkNumberOfTodosInLocalStorage(page, 3); await checkNumberOfTodosInLocalStorage(page, 3);
@ -79,39 +81,47 @@ test.describe('Mark all as completed', () => {
await checkNumberOfTodosInLocalStorage(page, 3); await checkNumberOfTodosInLocalStorage(page, 3);
}); });
test('should allow me to mark all items as completed', async ({ page }) => { test("should allow me to mark all items as completed", async ({ page }) => {
// Complete all todos. // Complete all todos.
await page.getByLabel('Mark all as complete').check(); await page.getByLabel("Mark all as complete").check();
// Ensure all todos have 'completed' class. // Ensure all todos have 'completed' class.
await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']); await expect(page.getByTestId("todo-item")).toHaveClass([
"completed",
"completed",
"completed",
]);
await checkNumberOfCompletedTodosInLocalStorage(page, 3); await checkNumberOfCompletedTodosInLocalStorage(page, 3);
}); });
test('should allow me to clear the complete state of all items', async ({ page }) => { test("should allow me to clear the complete state of all items", async ({
const toggleAll = page.getByLabel('Mark all as complete'); page,
}) => {
const toggleAll = page.getByLabel("Mark all as complete");
// Check and then immediately uncheck. // Check and then immediately uncheck.
await toggleAll.check(); await toggleAll.check();
await toggleAll.uncheck(); await toggleAll.uncheck();
// Should be no completed classes. // Should be no completed classes.
await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']); await expect(page.getByTestId("todo-item")).toHaveClass(["", "", ""]);
}); });
test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => { test("complete all checkbox should update state when items are completed / cleared", async ({
const toggleAll = page.getByLabel('Mark all as complete'); page,
}) => {
const toggleAll = page.getByLabel("Mark all as complete");
await toggleAll.check(); await toggleAll.check();
await expect(toggleAll).toBeChecked(); await expect(toggleAll).toBeChecked();
await checkNumberOfCompletedTodosInLocalStorage(page, 3); await checkNumberOfCompletedTodosInLocalStorage(page, 3);
// Uncheck first todo. // Uncheck first todo.
const firstTodo = page.getByTestId('todo-item').nth(0); const firstTodo = page.getByTestId("todo-item").nth(0);
await firstTodo.getByRole('checkbox').uncheck(); await firstTodo.getByRole("checkbox").uncheck();
// Reuse toggleAll locator and make sure its not checked. // Reuse toggleAll locator and make sure its not checked.
await expect(toggleAll).not.toBeChecked(); await expect(toggleAll).not.toBeChecked();
await firstTodo.getByRole('checkbox').check(); await firstTodo.getByRole("checkbox").check();
await checkNumberOfCompletedTodosInLocalStorage(page, 3); await checkNumberOfCompletedTodosInLocalStorage(page, 3);
// Assert the toggle all is checked again. // Assert the toggle all is checked again.
@ -119,205 +129,236 @@ test.describe('Mark all as completed', () => {
}); });
}); });
test.describe('Item', () => { test.describe("Item", () => {
test("should allow me to mark items as complete", async ({ page }) => {
test('should allow me to mark items as complete', async ({ page }) => {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
// Create two items. // Create two items.
for (const item of TODO_ITEMS.slice(0, 2)) { for (const item of TODO_ITEMS.slice(0, 2)) {
await newTodo.fill(item); await newTodo.fill(item);
await newTodo.press('Enter'); await newTodo.press("Enter");
} }
// Check first item. // Check first item.
const firstTodo = page.getByTestId('todo-item').nth(0); const firstTodo = page.getByTestId("todo-item").nth(0);
await firstTodo.getByRole('checkbox').check(); await firstTodo.getByRole("checkbox").check();
await expect(firstTodo).toHaveClass('completed'); await expect(firstTodo).toHaveClass("completed");
// Check second item. // Check second item.
const secondTodo = page.getByTestId('todo-item').nth(1); const secondTodo = page.getByTestId("todo-item").nth(1);
await expect(secondTodo).not.toHaveClass('completed'); await expect(secondTodo).not.toHaveClass("completed");
await secondTodo.getByRole('checkbox').check(); await secondTodo.getByRole("checkbox").check();
// Assert completed class. // Assert completed class.
await expect(firstTodo).toHaveClass('completed'); await expect(firstTodo).toHaveClass("completed");
await expect(secondTodo).toHaveClass('completed'); await expect(secondTodo).toHaveClass("completed");
}); });
test('should allow me to un-mark items as complete', async ({ page }) => { test("should allow me to un-mark items as complete", async ({ page }) => {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
// Create two items. // Create two items.
for (const item of TODO_ITEMS.slice(0, 2)) { for (const item of TODO_ITEMS.slice(0, 2)) {
await newTodo.fill(item); await newTodo.fill(item);
await newTodo.press('Enter'); await newTodo.press("Enter");
} }
const firstTodo = page.getByTestId('todo-item').nth(0); const firstTodo = page.getByTestId("todo-item").nth(0);
const secondTodo = page.getByTestId('todo-item').nth(1); const secondTodo = page.getByTestId("todo-item").nth(1);
const firstTodoCheckbox = firstTodo.getByRole('checkbox'); const firstTodoCheckbox = firstTodo.getByRole("checkbox");
await firstTodoCheckbox.check(); await firstTodoCheckbox.check();
await expect(firstTodo).toHaveClass('completed'); await expect(firstTodo).toHaveClass("completed");
await expect(secondTodo).not.toHaveClass('completed'); await expect(secondTodo).not.toHaveClass("completed");
await checkNumberOfCompletedTodosInLocalStorage(page, 1); await checkNumberOfCompletedTodosInLocalStorage(page, 1);
await firstTodoCheckbox.uncheck(); await firstTodoCheckbox.uncheck();
await expect(firstTodo).not.toHaveClass('completed'); await expect(firstTodo).not.toHaveClass("completed");
await expect(secondTodo).not.toHaveClass('completed'); await expect(secondTodo).not.toHaveClass("completed");
await checkNumberOfCompletedTodosInLocalStorage(page, 0); await checkNumberOfCompletedTodosInLocalStorage(page, 0);
}); });
test('should allow me to edit an item', async ({ page }) => { test("should allow me to edit an item", async ({ page }) => {
await createDefaultTodos(page); await createDefaultTodos(page);
const todoItems = page.getByTestId('todo-item'); const todoItems = page.getByTestId("todo-item");
const secondTodo = todoItems.nth(1); const secondTodo = todoItems.nth(1);
await secondTodo.dblclick(); await secondTodo.dblclick();
await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]); await expect(secondTodo.getByRole("textbox", { name: "Edit" })).toHaveValue(
await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); TODO_ITEMS[1],
await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter'); );
await secondTodo
.getByRole("textbox", { name: "Edit" })
.fill("buy some sausages");
await secondTodo.getByRole("textbox", { name: "Edit" }).press("Enter");
// Explicitly assert the new text value. // Explicitly assert the new text value.
await expect(todoItems).toHaveText([ await expect(todoItems).toHaveText([
TODO_ITEMS[0], TODO_ITEMS[0],
'buy some sausages', "buy some sausages",
TODO_ITEMS[2] TODO_ITEMS[2],
]); ]);
await checkTodosInLocalStorage(page, 'buy some sausages'); await checkTodosInLocalStorage(page, "buy some sausages");
}); });
}); });
test.describe('Editing', () => { test.describe("Editing", () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await createDefaultTodos(page); await createDefaultTodos(page);
await checkNumberOfTodosInLocalStorage(page, 3); await checkNumberOfTodosInLocalStorage(page, 3);
}); });
test('should hide other controls when editing', async ({ page }) => { test("should hide other controls when editing", async ({ page }) => {
const todoItem = page.getByTestId('todo-item').nth(1); const todoItem = page.getByTestId("todo-item").nth(1);
await todoItem.dblclick(); await todoItem.dblclick();
await expect(todoItem.getByRole('checkbox')).not.toBeVisible(); await expect(todoItem.getByRole("checkbox")).not.toBeVisible();
await expect(todoItem.locator('label', { await expect(
hasText: TODO_ITEMS[1], todoItem.locator("label", {
})).not.toBeVisible(); hasText: TODO_ITEMS[1],
}),
).not.toBeVisible();
await checkNumberOfTodosInLocalStorage(page, 3); await checkNumberOfTodosInLocalStorage(page, 3);
}); });
test('should save edits on blur', async ({ page }) => { test("should save edits on blur", async ({ page }) => {
const todoItems = page.getByTestId('todo-item'); const todoItems = page.getByTestId("todo-item");
await todoItems.nth(1).dblclick(); await todoItems.nth(1).dblclick();
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); await todoItems
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur'); .nth(1)
.getByRole("textbox", { name: "Edit" })
.fill("buy some sausages");
await todoItems
.nth(1)
.getByRole("textbox", { name: "Edit" })
.dispatchEvent("blur");
await expect(todoItems).toHaveText([ await expect(todoItems).toHaveText([
TODO_ITEMS[0], TODO_ITEMS[0],
'buy some sausages', "buy some sausages",
TODO_ITEMS[2], TODO_ITEMS[2],
]); ]);
await checkTodosInLocalStorage(page, 'buy some sausages'); await checkTodosInLocalStorage(page, "buy some sausages");
}); });
test('should trim entered text', async ({ page }) => { test("should trim entered text", async ({ page }) => {
const todoItems = page.getByTestId('todo-item'); const todoItems = page.getByTestId("todo-item");
await todoItems.nth(1).dblclick(); await todoItems.nth(1).dblclick();
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages '); await todoItems
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); .nth(1)
.getByRole("textbox", { name: "Edit" })
.fill(" buy some sausages ");
await todoItems
.nth(1)
.getByRole("textbox", { name: "Edit" })
.press("Enter");
await expect(todoItems).toHaveText([ await expect(todoItems).toHaveText([
TODO_ITEMS[0], TODO_ITEMS[0],
'buy some sausages', "buy some sausages",
TODO_ITEMS[2], TODO_ITEMS[2],
]); ]);
await checkTodosInLocalStorage(page, 'buy some sausages'); await checkTodosInLocalStorage(page, "buy some sausages");
}); });
test('should remove the item if an empty text string was entered', async ({ page }) => { test("should remove the item if an empty text string was entered", async ({
const todoItems = page.getByTestId('todo-item'); page,
}) => {
const todoItems = page.getByTestId("todo-item");
await todoItems.nth(1).dblclick(); await todoItems.nth(1).dblclick();
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(''); await todoItems.nth(1).getByRole("textbox", { name: "Edit" }).fill("");
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); await todoItems
.nth(1)
.getByRole("textbox", { name: "Edit" })
.press("Enter");
await expect(todoItems).toHaveText([ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
TODO_ITEMS[0],
TODO_ITEMS[2],
]);
}); });
test('should cancel edits on escape', async ({ page }) => { test("should cancel edits on escape", async ({ page }) => {
const todoItems = page.getByTestId('todo-item'); const todoItems = page.getByTestId("todo-item");
await todoItems.nth(1).dblclick(); await todoItems.nth(1).dblclick();
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); await todoItems
await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape'); .nth(1)
.getByRole("textbox", { name: "Edit" })
.fill("buy some sausages");
await todoItems
.nth(1)
.getByRole("textbox", { name: "Edit" })
.press("Escape");
await expect(todoItems).toHaveText(TODO_ITEMS); await expect(todoItems).toHaveText(TODO_ITEMS);
}); });
}); });
test.describe('Counter', () => { test.describe("Counter", () => {
test('should display the current number of todo items', async ({ page }) => { test("should display the current number of todo items", async ({ page }) => {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
// create a todo count locator // create a todo count locator
const todoCount = page.getByTestId('todo-count') const todoCount = page.getByTestId("todo-count");
await newTodo.fill(TODO_ITEMS[0]); await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter'); await newTodo.press("Enter");
await expect(todoCount).toContainText('1'); await expect(todoCount).toContainText("1");
await newTodo.fill(TODO_ITEMS[1]); await newTodo.fill(TODO_ITEMS[1]);
await newTodo.press('Enter'); await newTodo.press("Enter");
await expect(todoCount).toContainText('2'); await expect(todoCount).toContainText("2");
await checkNumberOfTodosInLocalStorage(page, 2); await checkNumberOfTodosInLocalStorage(page, 2);
}); });
}); });
test.describe('Clear completed button', () => { test.describe("Clear completed button", () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await createDefaultTodos(page); await createDefaultTodos(page);
}); });
test('should display the correct text', async ({ page }) => { test("should display the correct text", async ({ page }) => {
await page.locator('.todo-list li .toggle').first().check(); await page.locator(".todo-list li .toggle").first().check();
await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible(); await expect(
page.getByRole("button", { name: "Clear completed" }),
).toBeVisible();
}); });
test('should remove completed items when clicked', async ({ page }) => { test("should remove completed items when clicked", async ({ page }) => {
const todoItems = page.getByTestId('todo-item'); const todoItems = page.getByTestId("todo-item");
await todoItems.nth(1).getByRole('checkbox').check(); await todoItems.nth(1).getByRole("checkbox").check();
await page.getByRole('button', { name: 'Clear completed' }).click(); await page.getByRole("button", { name: "Clear completed" }).click();
await expect(todoItems).toHaveCount(2); await expect(todoItems).toHaveCount(2);
await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
}); });
test('should be hidden when there are no items that are completed', async ({ page }) => { test("should be hidden when there are no items that are completed", async ({
await page.locator('.todo-list li .toggle').first().check(); page,
await page.getByRole('button', { name: 'Clear completed' }).click(); }) => {
await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden(); await page.locator(".todo-list li .toggle").first().check();
await page.getByRole("button", { name: "Clear completed" }).click();
await expect(
page.getByRole("button", { name: "Clear completed" }),
).toBeHidden();
}); });
}); });
test.describe('Persistence', () => { test.describe("Persistence", () => {
test('should persist its data', async ({ page }) => { test("should persist its data", async ({ page }) => {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
for (const item of TODO_ITEMS.slice(0, 2)) { for (const item of TODO_ITEMS.slice(0, 2)) {
await newTodo.fill(item); await newTodo.fill(item);
await newTodo.press('Enter'); await newTodo.press("Enter");
} }
const todoItems = page.getByTestId('todo-item'); const todoItems = page.getByTestId("todo-item");
const firstTodoCheck = todoItems.nth(0).getByRole('checkbox'); const firstTodoCheck = todoItems.nth(0).getByRole("checkbox");
await firstTodoCheck.check(); await firstTodoCheck.check();
await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
await expect(firstTodoCheck).toBeChecked(); await expect(firstTodoCheck).toBeChecked();
await expect(todoItems).toHaveClass(['completed', '']); await expect(todoItems).toHaveClass(["completed", ""]);
// Ensure there is 1 completed item. // Ensure there is 1 completed item.
await checkNumberOfCompletedTodosInLocalStorage(page, 1); await checkNumberOfCompletedTodosInLocalStorage(page, 1);
@ -326,11 +367,11 @@ test.describe('Persistence', () => {
await page.reload(); await page.reload();
await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
await expect(firstTodoCheck).toBeChecked(); await expect(firstTodoCheck).toBeChecked();
await expect(todoItems).toHaveClass(['completed', '']); await expect(todoItems).toHaveClass(["completed", ""]);
}); });
}); });
test.describe('Routing', () => { test.describe("Routing", () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await createDefaultTodos(page); await createDefaultTodos(page);
// make sure the app had a chance to save updated todos in storage // make sure the app had a chance to save updated todos in storage
@ -339,33 +380,33 @@ test.describe('Routing', () => {
await checkTodosInLocalStorage(page, TODO_ITEMS[0]); await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
}); });
test('should allow me to display active items', async ({ page }) => { test("should allow me to display active items", async ({ page }) => {
const todoItem = page.getByTestId('todo-item'); const todoItem = page.getByTestId("todo-item");
await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
await checkNumberOfCompletedTodosInLocalStorage(page, 1); await checkNumberOfCompletedTodosInLocalStorage(page, 1);
await page.getByRole('link', { name: 'Active' }).click(); await page.getByRole("link", { name: "Active" }).click();
await expect(todoItem).toHaveCount(2); await expect(todoItem).toHaveCount(2);
await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
}); });
test('should respect the back button', async ({ page }) => { test("should respect the back button", async ({ page }) => {
const todoItem = page.getByTestId('todo-item'); const todoItem = page.getByTestId("todo-item");
await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
await checkNumberOfCompletedTodosInLocalStorage(page, 1); await checkNumberOfCompletedTodosInLocalStorage(page, 1);
await test.step('Showing all items', async () => { await test.step("Showing all items", async () => {
await page.getByRole('link', { name: 'All' }).click(); await page.getByRole("link", { name: "All" }).click();
await expect(todoItem).toHaveCount(3); await expect(todoItem).toHaveCount(3);
}); });
await test.step('Showing active items', async () => { await test.step("Showing active items", async () => {
await page.getByRole('link', { name: 'Active' }).click(); await page.getByRole("link", { name: "Active" }).click();
}); });
await test.step('Showing completed items', async () => { await test.step("Showing completed items", async () => {
await page.getByRole('link', { name: 'Completed' }).click(); await page.getByRole("link", { name: "Completed" }).click();
}); });
await expect(todoItem).toHaveCount(1); await expect(todoItem).toHaveCount(1);
@ -375,63 +416,74 @@ test.describe('Routing', () => {
await expect(todoItem).toHaveCount(3); await expect(todoItem).toHaveCount(3);
}); });
test('should allow me to display completed items', async ({ page }) => { test("should allow me to display completed items", async ({ page }) => {
await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
await checkNumberOfCompletedTodosInLocalStorage(page, 1); await checkNumberOfCompletedTodosInLocalStorage(page, 1);
await page.getByRole('link', { name: 'Completed' }).click(); await page.getByRole("link", { name: "Completed" }).click();
await expect(page.getByTestId('todo-item')).toHaveCount(1); await expect(page.getByTestId("todo-item")).toHaveCount(1);
}); });
test('should allow me to display all items', async ({ page }) => { test("should allow me to display all items", async ({ page }) => {
await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
await checkNumberOfCompletedTodosInLocalStorage(page, 1); await checkNumberOfCompletedTodosInLocalStorage(page, 1);
await page.getByRole('link', { name: 'Active' }).click(); await page.getByRole("link", { name: "Active" }).click();
await page.getByRole('link', { name: 'Completed' }).click(); await page.getByRole("link", { name: "Completed" }).click();
await page.getByRole('link', { name: 'All' }).click(); await page.getByRole("link", { name: "All" }).click();
await expect(page.getByTestId('todo-item')).toHaveCount(3); await expect(page.getByTestId("todo-item")).toHaveCount(3);
}); });
test('should highlight the currently applied filter', async ({ page }) => { test("should highlight the currently applied filter", async ({ page }) => {
await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected'); await expect(page.getByRole("link", { name: "All" })).toHaveClass(
"selected",
);
//create locators for active and completed links //create locators for active and completed links
const activeLink = page.getByRole('link', { name: 'Active' }); const activeLink = page.getByRole("link", { name: "Active" });
const completedLink = page.getByRole('link', { name: 'Completed' }); const completedLink = page.getByRole("link", { name: "Completed" });
await activeLink.click(); await activeLink.click();
// Page change - active items. // Page change - active items.
await expect(activeLink).toHaveClass('selected'); await expect(activeLink).toHaveClass("selected");
await completedLink.click(); await completedLink.click();
// Page change - completed items. // Page change - completed items.
await expect(completedLink).toHaveClass('selected'); await expect(completedLink).toHaveClass("selected");
}); });
}); });
async function createDefaultTodos(page: Page) { async function createDefaultTodos(page: Page) {
// create a new todo locator // create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?'); const newTodo = page.getByPlaceholder("What needs to be done?");
for (const item of TODO_ITEMS) { for (const item of TODO_ITEMS) {
await newTodo.fill(item); await newTodo.fill(item);
await newTodo.press('Enter'); await newTodo.press("Enter");
} }
} }
async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) { async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
return await page.waitForFunction(e => { return await page.waitForFunction((e) => {
return JSON.parse(localStorage['react-todos']).length === e; return JSON.parse(localStorage["react-todos"]).length === e;
}, expected); }, expected);
} }
async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) { async function checkNumberOfCompletedTodosInLocalStorage(
return await page.waitForFunction(e => { page: Page,
return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e; expected: number,
) {
return await page.waitForFunction((e) => {
return (
JSON.parse(localStorage["react-todos"]).filter(
(todo: any) => todo.completed,
).length === e
);
}, expected); }, expected);
} }
async function checkTodosInLocalStorage(page: Page, title: string) { async function checkTodosInLocalStorage(page: Page, title: string) {
return await page.waitForFunction(t => { return await page.waitForFunction((t) => {
return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t); return JSON.parse(localStorage["react-todos"])
.map((todo: any) => todo.title)
.includes(t);
}, title); }, title);
} }

32
tests/example.spec.ts
View File

@ -5,33 +5,49 @@ test("Basic page load", async ({ page }) => {
await expect(page).toHaveTitle("Meshtastic Web"); await expect(page).toHaveTitle("Meshtastic Web");
}); });
test("Prompts adding a new connection as the call to action when there are no devices", async ({page}) => { test("Prompts adding a new connection as the call to action when there are no devices", async ({
page,
}) => {
await page.goto("/"); await page.goto("/");
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
await expect(page.getByRole("heading", { name: "No Devices" })).toBeVisible(); await expect(page.getByRole("heading", { name: "No Devices" })).toBeVisible();
await expect(page.getByRole("button", { name: "New Connection" })).toBeVisible(); await expect(
page.getByRole("button", { name: "New Connection" }),
).toBeVisible();
}); });
test("Shows the protocols as the first step of adding a device", async ({page}) => { test("Shows the protocols as the first step of adding a device", async ({
page,
}) => {
await page.goto("/"); await page.goto("/");
await page.getByRole("button", { name: "New Connection" }).click(); await page.getByRole("button", { name: "New Connection" }).click();
await expect(page.getByRole("heading", { name: "Connect New Device" })).toBeVisible(); await expect(
page.getByRole("heading", { name: "Connect New Device" }),
).toBeVisible();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
test("Requests the IP address or hostname as input when connecting over HTTP", async ({page}) => { test("Requests the IP address or hostname as input when connecting over HTTP", async ({
page,
}) => {
await page.goto("/"); await page.goto("/");
await page.getByRole("button", { name: "New Connection" }).click(); await page.getByRole("button", { name: "New Connection" }).click();
await page.getByRole("tab", { name: "HTTP" }).click(); await page.getByRole("tab", { name: "HTTP" }).click();
await expect(page.getByRole('dialog')).toHaveScreenshot('connect-over-http.png'); await expect(page.getByRole("dialog")).toHaveScreenshot(
"connect-over-http.png",
);
}); });
test("New Device button for the brower's dialog UI is presented when connecting over serial", async ({page}) => { test("New Device button for the brower's dialog UI is presented when connecting over serial", async ({
page,
}) => {
await page.goto("/"); await page.goto("/");
await page.getByRole("button", { name: "New Connection" }).click(); await page.getByRole("button", { name: "New Connection" }).click();
await page.getByRole("tab", { name: "Serial" }).click(); await page.getByRole("tab", { name: "Serial" }).click();
await expect(page.getByRole("button", { name: "New Device" })).toBeVisible(); await expect(page.getByRole("button", { name: "New Device" })).toBeVisible();
await expect(page.getByRole('dialog')).toHaveScreenshot('connect-over-serial.png'); await expect(page.getByRole("dialog")).toHaveScreenshot(
"connect-over-serial.png",
);
}); });

Write Preview
Loading…
Cancel
Save