test(e2e, playwright): added e2e test for /todo list command

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

@@ -3,8 +3,8 @@
 
 import type {Page} from '@playwright/test';
 
-import {UserProfile} from '@mattermost/types/users';
 import Client4 from '@mattermost/client/client4';
+import {UserProfile} from '@mattermost/types/users';
 
 export const waitForNewMessages = async (page: Page) => {
     await page.waitForTimeout(1000);
@@ -58,3 +58,9 @@ 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();
+  return lastPost;
+};

e2e/playwright/tests/test.list.ts

@@ -6,4 +6,8 @@ import core from './todo_plugin.spec';
 
 import '../support/init_test';
 
-test.describe(core.connected);
+// Test if plugin is setup correctly
+test.describe("setup", core.setup);
+
+// Test various plugin actions
+test.describe("actions", core.commands);

e2e/playwright/tests/todo_plugin.spec.ts

@@ -8,35 +8,67 @@
 
 import {expect, test} from '@e2e-support/test_fixture';
 import SlashCommandSuggestions from 'support/components/slash_commands';
-import {fillMessage, getTodoBotDMPageURL} from 'support/utils';
+import {fillMessage, getLastPost, getTodoBotDMPageURL, postMessage} from 'support/utils';
+
+test.beforeEach(async ({ page, pw }) => {
+  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'});
+});
 
 export default {
-    connected: () => {
-        test.describe('available commands', () => {
-            test('with just the main command', async ({pages, page, pw}) => {
-
-            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'});
-
-            const c = new pages.ChannelsPage(page);
-            const slash = new SlashCommandSuggestions(page.locator('#suggestionList'));
-
-            // # Run incomplete command to trigger help
-            await fillMessage('/todo', page);
-
-            // * Assert suggestions are visible
-            await expect(slash.container).toBeVisible();
-
-            // * Assert help is visible
-            await expect(slash.getItemTitleNth(0)).toHaveText('todo [command]');
-
-            await expect(slash.getItemDescNth(0)).toHaveText('Available commands: list, add, pop, send, settings, help');
-            });
-        });
-    },
+  setup: () => {
+    test('checking available commands', async ({ page }) => {
+      const slash = new SlashCommandSuggestions(page.locator('#suggestionList'));
+
+      // # Run command to trigger todo
+      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)).toHaveText('Available commands: list, add, pop, send, settings, help');
+    });
+  },
+  commands: () => {
+    test("list action", async ({ pages, page, pw }) => {
+      const c = new pages.ChannelsPage(page);
+      const todoMessage = "Don't forget to be awesome";
+
+      // # Run command to add todo
+      postMessage(`/todo add ${todoMessage}`, page);
+
+      // # Type command to list todo
+      await fillMessage("/todo list ", page);
+      const slash = new SlashCommandSuggestions(
+        page.locator("#suggestionList")
+      );
+      // * Assert suggestions are visible
+      await expect(slash.container).toBeVisible();
+      await expect(slash.getItemTitleNth(1)).toHaveText("in (optional)");
+      await expect(slash.getItemDescNth(1)).toHaveText("Received Todos");
+      await expect(slash.getItemTitleNth(2)).toHaveText("out (optional)");
+      await expect(slash.getItemDescNth(2)).toHaveText("Sent Todos");
+
+      // # Run command to list todo
+      await postMessage('/todo list', page);
+
+      // # Grab the last post
+      const post = await getLastPost(page);
+      const postBody = post.locator(".post-message__text-container");
+
+      // * Assert post body has correct title
+      await expect(postBody).toContainText("Todo List:");
+
+      // * Assert added todo is visible
+      await expect(postBody).toContainText(todoMessage);
+    });
+  },
 };