Multiedit e2e tests

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();
+    });
+});

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();

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();
+    }
+}

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