feat(test): add playwright configuration and e2e tests (#6)

- add tests for status, chats, chat detail, and account pages
- add postinstall script
- add console.log error test

Author: Jarosław Żołnowski

.gitignore

@@ -28,3 +28,7 @@ npm-debug.log*
 /node_modules
 /platforms
 /plugins
+
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -42,6 +42,10 @@ now.
 
 `npm run start:ios`
 
+### Start e2e tests on Desktop Chrome
+
+`npm run e2e`
+
 ## Questions?
 
 Check out our [GitHub Discussions](https://github.com/xlts-dev/angularjs-ionic-v1/discussions) section to

e2e/pages/account-page.js

@@ -0,0 +1,11 @@
+export class AccountPage {
+  page;
+  header;
+  enableFriends;
+
+  constructor(page) {
+    this.page = page;
+    this.header = page.locator('ion-nav-bar').getByText('Account');
+    this.enableFriends = page.getByRole('checkbox');
+  }
+}

e2e/pages/chat-detail-page.js

@@ -0,0 +1,17 @@
+export class ChatDetailPage {
+  page;
+  header;
+  image;
+  description
+
+  constructor(page) {
+    this.page = page;
+    this.header = page.locator('ion-nav-bar').getByText('Ben Sparrow');
+    this.image = page.getByRole('img').first();
+    this.description = page.getByRole('paragraph').first();
+  }
+
+  async clickOnBackButton() {
+    await this.page.getByRole('button').click();
+  }
+}

e2e/pages/chats-page.js

@@ -0,0 +1,15 @@
+export class ChatsPage {
+  page;
+  header;
+  links;
+
+  constructor(page) {
+    this.page = page;
+    this.header = page.locator('ion-nav-bar').getByText('Chats');
+    this.links = page.getByRole('link')
+  }
+
+  async clickOnUser() {
+    await this.links.first().click();
+  }
+}

e2e/pages/dashboard-page.js

@@ -0,0 +1,17 @@
+export class DashboardPage {
+  page;
+  header;
+
+  constructor(page) {
+    this.page = page;
+    this.header = page.getByText('Dashboard');
+  }
+
+  async clickOnIonicMarketLink() {
+    await this.page.getByTestId('ionic-market-link').click();
+  }
+
+  async clickOnIonicForumLink() {
+    await this.page.getByTestId('ionic-forum-link').click();
+  }
+}

e2e/pages/tabs-page.js

@@ -0,0 +1,19 @@
+export class TabsPage {
+  page;
+
+  constructor(page) {
+    this.page = page;
+  }
+
+  async clickOnStatusTab() {
+    await this.page.locator('a').filter({hasText: 'Status'}).click();
+  }
+
+  async clickOnChatsTab() {
+    await this.page.locator('a').filter({hasText: 'Chats'}).click();
+  }
+
+  async clickOnAccountTab() {
+    await this.page.locator('a').filter({hasText: 'Account'}).click();
+  }
+}

e2e/tests/account.e2e.js

@@ -0,0 +1,39 @@
+import {expect, test} from '@playwright/test';
+import {AccountPage} from '../pages/account-page';
+import {TabsPage} from '../pages/tabs-page';
+import {PageErrorCollector} from '../utils/page-error-collector';
+
+test.describe('account', () => {
+  let pageErrorCollector;
+
+  test.beforeEach(async ({page}) => {
+    pageErrorCollector = new PageErrorCollector(page)
+    pageErrorCollector.listenForConsoleAndPageErrors(page);
+
+    await page.goto('');
+    const tabsPage = new TabsPage(page);
+    await tabsPage.clickOnAccountTab();
+  });
+
+  test.afterEach(async ({ page }) => {
+    expect(pageErrorCollector.errorLogs).toStrictEqual([]);
+  });
+
+  test('TopNav', async ({page}) => {
+    const accountPage = new AccountPage(page);
+
+    await expect(accountPage.header).toHaveText('Account');
+  });
+
+  test('Enable Friends checkbox', async ({page}) => {
+    const accountPage = new AccountPage(page);
+    accountPage.enableFriends.check();
+    await expect(accountPage.enableFriends.isChecked()).toBeTruthy();
+
+    await accountPage.enableFriends.click();
+    await expect(accountPage.enableFriends).toHaveAttribute('aria-checked', 'false');
+
+    await accountPage.enableFriends.click();
+    await expect(accountPage.enableFriends).toHaveAttribute('aria-checked', 'true');
+  });
+})

e2e/tests/chat-details.e2e.js

@@ -0,0 +1,39 @@
+import {expect, test} from '@playwright/test';
+import {ChatDetailPage} from '../pages/chat-detail-page';
+import {ChatsPage} from '../pages/chats-page';
+import {TabsPage} from '../pages/tabs-page';
+import {PageErrorCollector} from '../utils/page-error-collector';
+
+test.describe('chat detail', () => {
+  let pageErrorCollector;
+
+  test.beforeEach(async ({page}) => {
+    pageErrorCollector = new PageErrorCollector(page)
+    pageErrorCollector.listenForConsoleAndPageErrors(page);
+
+    await page.goto('');
+    const tabsPage = new TabsPage(page);
+    await tabsPage.clickOnChatsTab();
+    const chatsPage = new ChatsPage(page);
+    await chatsPage.clickOnUser();
+  });
+
+  test.afterEach(async ({ page }) => {
+    expect(pageErrorCollector.errorLogs).toStrictEqual([]);
+  });
+
+  test('details', async ({page}) => {
+    const chatDetail = new ChatDetailPage(page);
+
+    await expect(chatDetail.header).toHaveText('Ben Sparrow');
+    await expect(chatDetail.image).toHaveAttribute('src', 'img/ben.png');
+    await expect(chatDetail.description).toHaveText('You on your way?');
+  });
+
+  test('back to chats', async ({page}) => {
+    const chatDetail = new ChatDetailPage(page);
+
+    await chatDetail.clickOnBackButton();
+    await expect(page.url()).toContain('tab/chats');
+  });
+})

e2e/tests/chats.e2e.js

@@ -0,0 +1,27 @@
+import {expect, test} from '@playwright/test';
+import {ChatsPage} from '../pages/chats-page';
+import {TabsPage} from '../pages/tabs-page';
+import {PageErrorCollector} from '../utils/page-error-collector';
+
+test.describe('chats', () => {
+  let pageErrorCollector;
+
+  test.beforeEach(async ({page}) => {
+    pageErrorCollector = new PageErrorCollector(page)
+    pageErrorCollector.listenForConsoleAndPageErrors(page);
+
+    await page.goto('');
+    const tabsPage = new TabsPage(page);
+    await tabsPage.clickOnChatsTab();
+  });
+
+  test.afterEach(async ({ page }) => {
+    expect(pageErrorCollector.errorLogs).toStrictEqual([]);
+  });
+
+  test('topnav', async ({page}) => {
+    const chatsPage = new ChatsPage(page);
+
+    await expect(chatsPage.header).toHaveText('Chats');
+  });
+})