From 8e04663e95d891fc69ff424b394478574afbbdc9 Mon Sep 17 00:00:00 2001
From: Nikola Stojanovic <68916411+dzonidoo@users.noreply.github.com>
Date: Thu, 1 Aug 2024 15:42:41 +0200
Subject: [PATCH] Multiedit e2e tests (#4464)

---
 e2e/client/playwright/multiedit.spec.ts       | 84 +++++++++++++++++++
 .../page-object-models/monitoring.ts          |  9 ++
 .../page-object-models/multiedit.ts           | 19 +++++
 .../authoring/multiedit/views/multiedit.html  |  4 +-
 .../multiedit/views/sd-multiedit-article.html |  2 +-
 .../apps/search/views/multi-action-bar.html   |  2 +-
 6 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 e2e/client/playwright/multiedit.spec.ts
 create mode 100644 e2e/client/playwright/page-object-models/multiedit.ts

diff --git a/e2e/client/playwright/multiedit.spec.ts b/e2e/client/playwright/multiedit.spec.ts
new file mode 100644
index 0000000000..9b492310dd
--- /dev/null
+++ b/e2e/client/playwright/multiedit.spec.ts
@@ -0,0 +1,84 @@
+import {test, expect} from '@playwright/test';
+import {Monitoring} from './page-object-models/monitoring';
+import {Authoring} from './page-object-models/authoring';
+import {MultiEdit} from './page-object-models/multiedit';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test.describe('Multiedit', async () => {
+    test('editing articles in multi-edit mode', async ({page}) => {
+        const monitoring = new Monitoring(page);
+        const multiedit = new MultiEdit(page);
+
+        await restoreDatabaseSnapshot();
+        await page.goto('/#/workspace/monitoring');
+        await monitoring.selectDeskOrWorkspace('Sports');
+
+        await monitoring.executeBulkAction('Multi-edit', ['test sports story', 'story 2']);
+
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=test sports story', 'field--headline'))
+            .getByRole('textbox')
+            .clear();
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=test sports story', 'field--headline'))
+            .getByRole('textbox')
+            .fill('test sports story 1.1');
+
+        await multiedit.save('test sports story');
+
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=story 2', 'field--headline'))
+            .getByRole('textbox')
+            .clear();
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=story 2', 'field--headline'))
+            .getByRole('textbox')
+            .fill('story 2.1');
+
+        await multiedit.save('story 2');
+
+        await page.locator(s('multiedit-subnav')).getByRole('button', {name: 'exit'}).click();
+
+        await monitoring.executeActionOnMonitoringItem(
+            page.locator(s('article-item=test sports story 1.1')),
+            'Edit',
+        );
+        await expect(
+            page.locator(s('authoring', 'field--headline')).getByRole('textbox'),
+        ).toHaveText('test sports story 1.1');
+
+        await monitoring.executeActionOnMonitoringItem(
+            page.locator(s('article-item=story 2.1')),
+            'Edit',
+        );
+        await expect(
+            page.locator(s('authoring', 'field--headline')).getByRole('textbox'),
+        ).toHaveText('story 2.1');
+    });
+
+    test('removing an article from multi-edit view', async ({page}) => {
+        const monitoring = new Monitoring(page);
+        const authoring = new Authoring(page);
+
+        await restoreDatabaseSnapshot();
+        await page.goto('/#/workspace/monitoring');
+
+        await monitoring.selectDeskOrWorkspace('Sports');
+
+        await monitoring.executeActionOnMonitoringItem(
+            page.locator(s('article-item=test sports story')),
+            'Edit',
+        );
+        await authoring.executeActionInEditor(
+            'Multiedit',
+            'OK',
+        );
+
+        await page.locator(s('multiedit-screen', 'multiedit-article=test sports story')).hover();
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=test sports story'))
+            .getByRole('button', {name: 'remove item'})
+            .click();
+        await expect(page.locator(s('multiedit-screen', 'multiedit-article=test sports story'))).not.toBeVisible();
+    });
+});
diff --git a/e2e/client/playwright/page-object-models/monitoring.ts b/e2e/client/playwright/page-object-models/monitoring.ts
index 0c2b17e7b1..6b5c32596b 100644
--- a/e2e/client/playwright/page-object-models/monitoring.ts
+++ b/e2e/client/playwright/page-object-models/monitoring.ts
@@ -38,6 +38,15 @@ export class Monitoring {
             .click();
     }
 
+    async executeBulkAction(action: string, articleNames: Array<string>): Promise<void> {
+        for (const selectedArticle of articleNames) {
+            await this.page.locator(s(`article-item=${selectedArticle}`, 'item-type-and-multi-select')).hover();
+            await this.page.locator(s(`article-item=${selectedArticle}`, 'multi-select-checkbox')).check();
+        }
+
+        await this.page.locator(s('multi-action-bar', 'multi-actions-inline', action)).click();
+    }
+
     async createArticleFromTemplate(template: string, options?: {slugline?:string, body_html?: string}): Promise<void> {
         await this.page.locator(s('content-create')).click();
         await this.page.locator(s('content-create-dropdown')).getByRole('button', {name: 'More Templates...'}).click();
diff --git a/e2e/client/playwright/page-object-models/multiedit.ts b/e2e/client/playwright/page-object-models/multiedit.ts
new file mode 100644
index 0000000000..15b7d16cff
--- /dev/null
+++ b/e2e/client/playwright/page-object-models/multiedit.ts
@@ -0,0 +1,19 @@
+import {Page} from '@playwright/test';
+import {s} from '../utils';
+
+export class MultiEdit {
+    private page: Page;
+
+    constructor(page: Page) {
+        this.page = page;
+    }
+
+    async save(article: string): Promise<void> {
+        await this.page.locator(s('multiedit-screen', `multiedit-article=${article}`)).hover();
+
+        await this.page
+            .locator(s('multiedit-screen', `multiedit-article=${article}`))
+            .getByRole('button', {name: 'save'})
+            .click();
+    }
+}
diff --git a/scripts/apps/authoring/multiedit/views/multiedit.html b/scripts/apps/authoring/multiedit/views/multiedit.html
index 76a67630e8..a74fdd83ac 100644
--- a/scripts/apps/authoring/multiedit/views/multiedit.html
+++ b/scripts/apps/authoring/multiedit/views/multiedit.html
@@ -1,8 +1,8 @@
-<div class="subnav subnav--top">
+<div class="subnav subnav--top" data-test-id="multiedit-subnav">
     <h2 class="page-nav-title" translate>Multiedit</h2>
     <button class="btn btn--hollow sd-margin-end--1" ng-click="closeMulti()" translate>Exit</button>
 </div>
-<div class="multiedit-screen main-section">
+<div class="multiedit-screen main-section" data-test-id="multiedit-screen">
     <div class="boards-list">
         <div ng-repeat="board in boards"
             class="board"
diff --git a/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html b/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html
index 9579fee651..4791bd3ce5 100644
--- a/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html
+++ b/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html
@@ -1,4 +1,4 @@
-<article class="main-article" tabindex="0" ng-class="{locked: isLocked}">
+<article class="main-article" tabindex="0" ng-class="{locked: isLocked}" data-test-id="multiedit-article" data-test-value="{{item.slugline}}">
     <div class="main-article__form">
         <div class="main-article__editbar">
             <button class="btn btn--hollow main-article__editbar-button"
diff --git a/scripts/apps/search/views/multi-action-bar.html b/scripts/apps/search/views/multi-action-bar.html
index 2ed1eee885..a61de446d6 100644
--- a/scripts/apps/search/views/multi-action-bar.html
+++ b/scripts/apps/search/views/multi-action-bar.html
@@ -1,4 +1,4 @@
-<div class="multi-action-bar" ng-if="multi.count && display">
+<div class="multi-action-bar" ng-if="multi.count && display" data-test-id="multi-action-bar">
     <button class="btn btn--hollow btn--icon-only btn--icon-only-circle me-1" ng-click="toggleDisplay()"><i class="icon-chevron-up-thin"></i></button>
     <button class="btn" ng-click="multi.reset()">cancel</button>
     <span id="multi-select-count"