update e2e tests (#124)

e2e/playwright/package.json

@@ -12,7 +12,8 @@
         "prettier": "prettier . --check",
         "prettier:fix": "prettier --write .",
         "check": "npm run tsc && npm run lint && npm run prettier",
-        "codegen": "cross-env npx playwright codegen $PW_BASE_URL"
+        "codegen": "cross-env npx playwright codegen $PW_BASE_URL",
+        "playwright-ui": "npm run playwright-ui --prefix ../../../mattermost/e2e-tests/playwright -- --config=../../../mattermost-plugin-legal-hold/e2e/playwright/playwright.config.ts"
     },
     "devDependencies": {
         "@types/node": "22.6.1",

e2e/playwright/pages/legal_hold_plugin.ts

@@ -1,80 +1,119 @@
-import {type Locator, type Page} from '@playwright/test';
+import {expect, type Locator, type Page} from '@playwright/test';
 
 export class LegalHoldPluginPage {
     readonly page: Page;
 
-    readonly legalHoldPlugin: Locator;
+    readonly createModal: CreateModal;
+    readonly releaseModal: ReleaseModal;
 
     readonly createNewButton: Locator;
-    readonly createModal: Locator;
 
-    readonly nameField: Locator;
-    readonly legalHoldName: Locator;
-    readonly usernameField: Locator;
-    readonly usernameDropdown: Locator;
-    readonly startDate: Locator;
+    constructor(page: Page) {
+        this.page = page;
 
-    readonly legalHoldButton: Locator;
+        // create new button
+        this.createNewButton = page.getByTestId('createNewLegalHoldOnTop');
 
-    readonly verifyName: Locator;
-    readonly verifyUsers: Locator;
-    readonly verifyStartDate: Locator;
-    readonly verifyEndDate: Locator;
+        // create modal
+        this.createModal = new CreateModal(page.getByRole('dialog', {name: 'Create a new legal hold'}));
 
-    readonly verifyHoldOnPage: Locator;
-    readonly releaseButton: Locator;
-    readonly modalReleaseButton: Locator;
+        // release modal
+        this.releaseModal = new ReleaseModal(page.getByRole('dialog', {name: 'Release Legal Hold'}));
+    }
 
-    readonly updateHold: Locator;
+    async selectUsername(username: string) {
+        await this.createModal.usernameInput.fill(username);
+        await this.page.getByRole('option', {name: username}).click();
+    }
 
-    constructor(page: Page) {
-        this.page = page;
+    getLegalHold(name: string): Locator {
+        return this.page.getByText(name);
+    }
 
-        // legal hold option on system console
-        this.legalHoldPlugin = page.getByRole('link', {name: 'Legal Hold Plugin'});
+    async getLegalHoldId(name: string) {
+        const legalHold = await this.getLegalHold(name);
+        return await legalHold.getAttribute('data-legalholdid');
+    }
 
-        // create new button
-        this.createNewButton = page.getByText('create new').first();
-
-        // legal hold modal fields
-        this.createModal = page.getByText('Create a new legal hold');
-        this.nameField = page.getByPlaceholder('Name');
-        this.legalHoldName = page.getByPlaceholder('New Legal Hold...');
-        this.usernameField = page.locator('.css-19bb58m input:first-of-type');
-        this.usernameDropdown = page.locator('#react-select-2-input');
-        this.startDate = page.getByPlaceholder('Starting from');
-
-        // create button
-        this.legalHoldButton = page.getByRole('button', {name: 'Create legal hold'});
-
-        // check plugin name is present
-        this.verifyName = page.getByText('Sample Legal Hold').first();
-        this.verifyUsers = page.getByText('1 users').first();
-        this.verifyStartDate = page.getByText('Date').first();
-        this.verifyEndDate = page.getByText('Never').first();
-
-        // click release button on page
-        this.verifyHoldOnPage = page.getByText('New Hold').first();
-        this.releaseButton = page.getByRole('link', {name: 'Release'});
-
-        // confirm release on modal
-        this.modalReleaseButton = page.getByRole('button', {name: 'Release'});
-
-        //update hold icon
-        this.updateHold = page.locator('div:nth-child(10) > a').first();
+    async getStartDate(name: string) {
+        const id = await this.getLegalHoldId(name);
+        return this.page.getByTestId(`start-date-${id}`);
     }
 
-    async enterLegalHoldName(name: string) {
-        await this.legalHoldName.fill(name);
+    async getEndDate(name: string) {
+        const id = await this.getLegalHoldId(name);
+        return this.page.getByTestId(`end-date-${id}`);
     }
 
-    async selectUsername(username: string) {
-        await this.usernameDropdown.fill(username);
-        await this.page.getByRole('option', {name: username}).click();
+    async getUsers(name: string) {
+        const id = await this.getLegalHoldId(name);
+        return this.page.getByTestId(`users-${id}`);
+    }
+
+    getUpdateButton(name: string): Locator {
+        return this.page.getByLabel(`${name} update button`);
+    }
+
+    getShowSecretButton(name: string): Locator {
+        return this.page.getByLabel(`${name} show secret button`);
+    }
+
+    getDownloadButton(name: string): Locator {
+        return this.page.getByLabel(`${name} download button`);
+    }
+
+    getReleaseButton(name: string): Locator {
+        return this.page.getByRole('button', {name: `${name} release button`});
+    }
+}
+
+class CreateModal {
+    readonly container: Locator;
+
+    readonly nameInput: Locator;
+    readonly usernamePlaceholder: Locator;
+    readonly usernameInput: Locator;
+    readonly includePublicChannelsCheckbox: Locator;
+    readonly startingFromInput: Locator;
+    readonly endingAtInput: Locator;
+    readonly cancelButton: Locator;
+    readonly createButton: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.nameInput = container.getByPlaceholder('Name');
+        this.usernamePlaceholder = container.locator('.css-19bb58m input:first-of-type');
+        this.usernameInput = container.locator('#react-select-2-input');
+        this.includePublicChannelsCheckbox = container.getByRole('checkbox', {name: 'Include public channels'});
+        this.startingFromInput = container.getByPlaceholder('Starting from');
+        this.endingAtInput = container.getByPlaceholder('Ending at');
+        this.cancelButton = container.getByRole('button', {name: 'Cancel'});
+        this.createButton = container.getByRole('button', {name: 'Create legal hold'});
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+}
+
+class ReleaseModal {
+    readonly container: Locator;
+
+    readonly body: Locator;
+    readonly cancelButton: Locator;
+    readonly releaseButton: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.body = container.locator('.modal-body');
+        this.cancelButton = container.getByRole('button', {name: 'Cancel'});
+        this.releaseButton = container.getByRole('button', {name: 'Release'});
     }
 
-    releaseHold(legalHoldName: string): Locator {
-        return this.page.locator(`div:has-text("${legalHoldName}")`).getByRole('link', {name: 'Release'}).first();
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
     }
 }
 

e2e/playwright/playwright.config.ts

@@ -12,5 +12,6 @@ testConfig.outputDir = __dirname + '/test-results';
 
 const projects = testConfig.projects?.map((p) => ({...p, dependencies: ['setup']})) || [];
 testConfig.projects = [{name: 'setup', testMatch: /test\.setup\.ts/} as PlaywrightTestConfig].concat(projects);
+testConfig.use = {...testConfig.use, timezoneId: Intl.DateTimeFormat().resolvedOptions().timeZone};
 
 export default testConfig;

e2e/playwright/support/legal_hold.ts

@@ -0,0 +1,44 @@
+import {expect} from '@e2e-support/test_fixture';
+
+import PluginPage from '../pages/legal_hold_plugin';
+
+export async function createLegalHold(
+    pluginPage: PluginPage,
+    name: string,
+    usernames: string[],
+    startDate: string,
+    includePublicChannels = false,
+    endDate = '',
+) {
+    // Click create new button and check that modal is displayed
+    await pluginPage.createNewButton.click();
+    await pluginPage.createModal.toBeVisible();
+
+    // Enter name
+    await pluginPage.createModal.nameInput.fill(name);
+
+    // Select users
+    for (const username of usernames) {
+        await pluginPage.createModal.usernameInput.fill(username);
+        await pluginPage.selectUsername(username);
+    }
+
+    // Enter start and end date
+    await pluginPage.createModal.startingFromInput.fill(startDate);
+
+    if (endDate) {
+        await pluginPage.createModal.endingAtInput.fill(endDate);
+    }
+
+    // Set wether to include public channels
+    if (includePublicChannels) {
+        await pluginPage.createModal.includePublicChannelsCheckbox.check();
+    } else {
+        await pluginPage.createModal.includePublicChannelsCheckbox.uncheck();
+    }
+
+    // Click create and check that modal is not visible
+    await expect(pluginPage.createModal.createButton).toBeEnabled();
+    await pluginPage.createModal.createButton.click();
+    await pluginPage.createModal.container.waitFor({state: 'hidden'});
+}