test(e2e, playwright): added playwright e2e tests for /todo add, list and help commands

e2e/playwright/package.json

@@ -2,6 +2,7 @@
     "name": "plugin-e2e-tests",
     "scripts": {
         "test": "PW_SLOMO=200 npm run test --prefix ../../../mattermost/e2e-tests/playwright -- --project=chrome --config='../../../mattermost-plugin-todo/e2e/playwright/playwright.config.ts'",
+        "test-ui": "PW_SLOMO=200 npm run test --prefix ../../../mattermost/e2e-tests/playwright -- --project=chrome --config='../../../mattermost-plugin-todo/e2e/playwright/playwright.config.ts' --ui",
         "test-ci": "PW_HEADLESS=true npm test",
         "test-slomo": "npm run test-slomo --prefix ../../../mattermost/e2e-tests/playwright -- --project=chrome --config='../../../mattermost-plugin-todo/e2e/playwright/playwright.config.ts",
         "debug": "npm test -- --debug",

e2e/playwright/support/utils.ts

@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import type {Page} from '@playwright/test';
-
 import {UserProfile} from '@mattermost/types/users';
 import Client4 from '@mattermost/client/client4';
 
@@ -14,13 +13,14 @@ export const waitForNewMessages = async (page: Page) => {
     // await page.locator('#postListContent').getByTestId('NotificationSeparator').getByText('New Messages').waitFor();
 };
 
-export const getTodoBotDMPageURL = async (client: Client4, teamName: string, userId: string) => {
-    let team = teamName;
-    if (team === '') {
-        const teams = await client.getTeamsForUser(userId);
-        team = teams[0].name;
-    }
-    return `${team}/messages/@todo`;
+export const getTeamName = async (client: Client4, userId: string) => {
+    const teams = await client.getTeamsForUser(userId);
+    const team = teams[0].name;
+    return team;
+};
+
+export const getBotDMPageURL = async (teamName: string, botUsername: string) => {
+    return `${teamName}/messages/${botUsername}`;
 };
 
 export const fillTextField = async (name: string, value: string, page: Page) => {
@@ -32,7 +32,7 @@ export const submitDialog = async (page: Page) => {
 };
 
 export const fillMessage = async (message: string, page: Page) => {
-    await fillTextField('post_textbox', message, page )
+    await fillTextField('post_textbox', message, page)
 };
 
 export const postMessage = async (message: string, page: Page) => {
@@ -58,3 +58,10 @@ export const getSlackAttachmentLocatorId = (postId: string) => {
 export const getPostMessageLocatorId = (postId: string) => {
     return `#post_${postId} .post-message`;
 };
+
+export const getLastPost = async (page: Page) => {
+    const lastPost = page.getByTestId("postView").last();
+    await lastPost.waitFor();
+    const postBody = lastPost.locator('.post-message__text-container');
+    return postBody;
+};

e2e/playwright/tests/test.list.ts

@@ -1,8 +1,19 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import core from './todo_plugin.spec';
+import {test} from "@e2e-support/test_fixture";
+import commands from "./todo_plugin.spec";
 
-import '../support/init_test';
+import "../support/init_test";
 
-core.connected();
+// Test if plugin shows the correct suggestions for command autocomplete
+test.describe("command autocomplete", commands.autocomplete);
+
+// Test `/todo add` commands
+test.describe("commands/add", commands.add);
+
+// Test `/todo list` commands
+test.describe("commands/list", commands.list);
+
+// Test `/todo help` commands
+test.describe("commands/help", commands.help);

e2e/playwright/tests/todo_plugin.spec.ts

@@ -6,35 +6,114 @@
 // - [*] indicates an assertion (e.g. * Check the title)
 // ***************************************************************
 
-import {expect, test} from '@e2e-support/test_fixture';
-import SlashCommandSuggestions from 'support/components/slash_commands';
-import {fillMessage, getTodoBotDMPageURL} from 'support/utils';
+import {expect, test} from "@e2e-support/test_fixture";
+import SlashCommandSuggestions from "support/components/slash_commands";
+import {
+    fillMessage,
+    getBotDMPageURL,
+    getLastPost,
+    getTeamName,
+    postMessage,
+} from "support/utils";
+
+const botUserName = "todo";
+let teamName = "";
+
+test.beforeAll(async ({ pw }) => {
+  const { adminClient, adminUser } = await pw.getAdminClient();
+  if (adminUser === null) {
+    throw new Error("can not get adminUser");
+  }
+  if (teamName === "") {
+    teamName = await getTeamName(adminClient, adminUser.id);
+  }
+});
+
+test.beforeEach(async ({ page }) => {
+  const dmURL = await getBotDMPageURL(teamName, botUserName);
+  await page.goto(dmURL, { waitUntil: "load" });
+});
 
 export default {
-    connected: () => {
-        test.describe('available commands', () => {
-            test('with just the main command', async ({page, pw}) => {
+  autocomplete: () => {
+    test('/todo', async ({ page }) => {
+      const slash = new SlashCommandSuggestions(
+        page.locator("#suggestionList")
+      );
+
+      // # Type command to show suggestions
+      await fillMessage('/todo', page);
+
+      // * Assert suggestions are visible
+      await expect(slash.container).toBeVisible();
+
+      // * Assert todo [command] is visible
+      await expect(slash.getItemTitleNth(0)).toHaveText("todo [command]");
+
+      await expect(slash.getItemDescNth(0)).toContainText(
+        "Available commands:"
+      );
+    });
+  },
+
+  help: () => {
+    test('/todo help', async ({ page }) => {
+      // # Run command to trigger help
+    await postMessage('/todo help', page);
+
+    // # Get ephemeral post response from todo help command
+    const lastPost = await getLastPost(page);
+
+    // * Assert "help" is in the post body
+    await expect(lastPost).toContainText("help");
+
+    // * Assert if length of content shown is greater than 10 lines
+    const postBody = await lastPost.textContent();
+    const postBodyLines = postBody ? postBody.split('\n') : [];
+    expect(postBodyLines.length).toBeGreaterThanOrEqual(10);
+    });
+  },
+
+  add: () => {
+    test("/todo add <message>", async ({ page }) => {
+      const todoMessage = "Don't forget to be awesome";
+
+      // # Run command to add todo
+      await postMessage(`/todo add ${todoMessage}`, page);
+
+      // # Get ephemeral post response from todo add command
+      const post = await getLastPost(page);
+
+      await expect(post).toBeVisible();
+
+      await expect(post).toContainText("Added Todo. Todo List:");
+      await expect(post).toContainText(todoMessage);
+
+      // * Assert added todo is visible
+      await expect(post).toContainText(todoMessage);
+    });
+  },
+
+  list: () => {
+    test("/todo list", async ({ page }) => {
+      const todoMessage = "Don't forget to be awesome";
 
-            const {adminClient, adminUser} = await pw.getAdminClient();
-            if (adminUser === null) {
-                throw new Error('can not get adminUser');
-            }
-            const dmURL = await getTodoBotDMPageURL(adminClient, '', adminUser.id);
-            await page.goto(dmURL, {waitUntil: 'load'});
+      // # Run command to add todo
+      await postMessage(`/todo add ${todoMessage}`, page);
 
-            const slash = new SlashCommandSuggestions(page.locator('#suggestionList'));
+      // # Type command to list todo
+      await postMessage('/todo list', page);
 
-            // # Run incomplete command to trigger help
-            await fillMessage('/todo', page);
+      // # Get ephemeral post response from todo list command
+      const post = await getLastPost(page);
 
-            // * Assert suggestions are visible
-            await expect(slash.container).toBeVisible();
+      await expect(post).toBeVisible();
 
-            // * Assert help is visible
-            await expect(slash.getItemTitleNth(0)).toHaveText('todo [command]');
+      await expect(post).toContainText("Todo List:");
+      await expect(post).toContainText(todoMessage);
 
-            await expect(slash.getItemDescNth(0)).toHaveText('Available commands: list, add, pop, send, settings, help');
-            });
-        });
-    },
+      // * Assert added todo is visible
+      await expect(post).toContainText(todoMessage);
+    });
+  },
 };