Multiedit e2e tests

e2e/client/playwright/multiedit.spec.ts

@@ -0,0 +1,76 @@
+import {test, expect} from '@playwright/test';
+import {Monitoring} from './page-object-models/monitoring';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test.describe('Multiedit', async () => {
+    test('Can edit articles in multiedit', async ({page}) => {
+        const monitoring = new Monitoring(page);
+
+        await restoreDatabaseSnapshot();
+        await page.goto('/#/workspace/monitoring');
+        await monitoring.selectDeskOrWorkspace('Sports');
+
+        await monitoring.executeMultiAction(['test sports story', 'story 2'], 'Multi-edit');
+
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=test sports story', 'field--headline'))
+            .getByRole('textbox')
+            .fill('test sports story 1.1');
+        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: 'save'})
+            .click();
+
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=story 2', 'field--headline'))
+            .getByRole('textbox')
+            .fill('story 2.1');
+        await page.locator(s('multiedit-screen', 'multiedit-article=story 2')).hover();
+        await page
+            .locator(s('multiedit-screen', 'multiedit-article=story 2'))
+            .getByRole('button', {name: 'save'})
+            .click();
+
+        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('Can remove article in multiedit', async ({page}) => {
+        const monitoring = new Monitoring(page);
+
+        await restoreDatabaseSnapshot();
+        await page.goto('/#/workspace/monitoring');
+
+        await monitoring.executeActionOnMonitoringItem(
+            page.locator(s('article-item=test sports story')),
+            'Edit',
+        );
+        await monitoring.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();
+    });
+});

e2e/client/playwright/page-object-models/monitoring.ts

@@ -38,6 +38,29 @@ export class Monitoring {
             .click();
     }
 
+    async executeActionInEditor(...actionPath: Array<string>): Promise<void> {
+        await this.page.locator(s('authoring-topbar', 'actions-button')).click();
+
+        const actionsWithoutLast = actionPath.slice(0, actionPath.length - 1);
+
+        for (const action of actionsWithoutLast) {
+            await this.page.locator(s('actions-list')).getByRole('button', {name: action}).hover();
+        }
+
+        await this.page.locator(s('actions-list'))
+            .getByRole('button', {name: actionPath[actionPath.length - 1]})
+            .click();
+    }
+
+    async executeMultiAction(selectedArticles: Array<string>, action: string): Promise<void> {
+        for (const selectedArticle of selectedArticles) {
+            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();

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"

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"

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="toggle" 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"