migrate(e2e): subscribers from Protractor to Playwright

Agent-Logs-Url: https://github.com/superdesk/superdesk-client-core/sessions/d3f35282-bf9b-42d6-bdbd-8360c01fcd7d

Co-authored-by: eos87 <124766+eos87@users.noreply.github.com>

e2e/MIGRATION_REPORT.md

@@ -5,15 +5,16 @@
 
 ## Totals
 - Original non-Playwright specs: 30
-- Migrated: 2
+- Migrated: 3
 - Blocked: 0 (see below)
 - Obsolete: 0 (see below)
 - Flaky: 0 (see below)
 - Redundant: 0 (see below)
 
 ## Migrated specs
 - Protractor `e2e/client/specs/workspace_spec.ts` -> `e2e/client/playwright/workspace.spec.ts` [65a6ef935] — Given the authenticated user is on the dashboard, when they use the workspace hotkeys, then the app switches to monitoring, spiked, personal, search, and back to dashboard.
-- Protractor `e2e/client/specs/vocabularies_spec.ts` -> `e2e/client/playwright/vocabularies.spec.ts` [pending] — Given the vocabularies settings page is open, when the user edits the Categories vocabulary name and cancels, then the original vocabulary data is restored.
+- Protractor `e2e/client/specs/vocabularies_spec.ts` -> `e2e/client/playwright/vocabularies.spec.ts` [4b719937a] — Given the vocabularies settings page is open, when the user edits the Categories vocabulary name and cancels, then the original vocabulary data is restored.
+- Protractor `e2e/client/specs/subscribers_spec.ts` -> `e2e/client/playwright/subscribers.spec.ts` [pending] — Given the publish settings page is open, when the user inspects and edits the default subscriber from the snapshot, then the list shows that subscriber and the save button only enables after changing the target type and destination format.
 
 ## Blocked
 - None yet.
@@ -28,7 +29,7 @@
 - None yet.
 
 ## Product source changes
-- None yet.
+- `scripts/apps/publish/views/subscribers.html` — `data-test-id` added to subscriber list rows — for `e2e/client/playwright/subscribers.spec.ts`
 
 ## Frameworks removed
 - None yet.

e2e/client/playwright/subscribers.spec.ts

@@ -0,0 +1,33 @@
+import {test, expect} from '@playwright/test';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test.describe('subscribers', () => {
+    const subscriberName = 'Subscriber 1';
+
+    test.beforeEach(async ({page}) => {
+        await restoreDatabaseSnapshot();
+        await page.goto('/#/settings/publish');
+    });
+
+    test('lists the default subscriber', async ({page}) => {
+        await expect(page.locator(s('subscriber-item'))).toHaveCount(1);
+        await expect(page.locator(s(`subscriber-item=${subscriberName}`))).toBeVisible();
+    });
+
+    test('save button is disabled until subscriber type changes', async ({page}) => {
+        const subscriberItem = page.locator(s(`subscriber-item=${subscriberName}`));
+
+        await subscriberItem.click();
+        await subscriberItem.locator(s('edit-subscriber-button')).click();
+
+        const saveButton = page.getByRole('button', {name: 'Save'});
+
+        await expect(saveButton).toBeDisabled();
+
+        await page.locator('#subType').selectOption('string:wire');
+        await page.locator('#destination-format').selectOption('nitf');
+
+        await expect(saveButton).toBeEnabled();
+        await page.getByRole('button', {name: 'Cancel'}).click();
+    });
+});

scripts/apps/publish/views/subscribers.html

@@ -29,7 +29,12 @@
 
     <div class="sd-page__content">
         <ul class="sd-list-item-group sd-list-item-group--space-between-items" style="max-width: 1000px;">
-            <li ng-repeat="subscriber in subscribers | subscribersBy:search as filtered_subscribers track by subscriber._id" class="sd-list-item sd-shadow--z1">
+            <li
+                ng-repeat="subscriber in subscribers | subscribersBy:search as filtered_subscribers track by subscriber._id"
+                class="sd-list-item sd-shadow--z1"
+                data-test-id="subscriber-item"
+                data-test-value="{{ subscriber.name }}"
+            >
                 <div class="sd-list-item__border"></div>
                 <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
                     <div class="sd-list-item__row">