Fix prop access (#4617) (#4636)

e2e/README.md

@@ -3,7 +3,7 @@
 ### Starting server and client
 
 * open a terminal in `./server`
-* run `docker-compose up`
+* run `docker compose up`
 * open a terminal in `./client`
 * run `npm install` if needed
 * run `npx grunt server`
@@ -85,4 +85,4 @@ await page.locator(s('authoring', 'comments-widget', 'submit')).click();
 
 ### Known issues
 
-* Playwright VSCode extension seems not to respect viewport size that is set in `e2e/client/playwright.config.ts`. An easy workaround is adjusting browser size manually in development. It will work in CI.
+* Playwright VSCode extension seems not to respect viewport size that is set in `e2e/client/playwright.config.ts`. An easy workaround is adjusting browser size manually in development. It will work in CI.

e2e/client/package.json

@@ -20,14 +20,14 @@
   "scripts": {
     "build": "npx @superdesk/build-tools build-root-repo ./",
     "server": "grunt server",
-    "start-client-server": "http-server dist -p 9000 -s &",
-    "stop-client-server": "fuser -k 9000/tcp",
     "playwright": "playwright test --workers 1",
     "playwright-interactive": "playwright test --ui",
     "protractor": "protractor protractor.conf.js",
-    "specs--compile": "find ./specs/ -name '*.js' -type f -delete && tsc -p ./specs",
-    "specs--watch": "find ./specs/ -name '*.js' -type f -delete && tsc -p ./specs -w",
+    "start-client-server": "http-server dist -p 9000 -s &",
+    "stop-client-server": "fuser -k 9000/tcp",
     "start-test-server": "cd ../server && docker-compose build && docker-compose up -d",
-    "stop-test-server": "cd ../server && docker-compose stop"
+    "stop-test-server": "cd ../server && docker-compose stop",
+    "specs--compile": "find ./specs/ -name '*.js' -type f -delete && tsc -p ./specs",
+    "specs--watch": "find ./specs/ -name '*.js' -type f -delete && tsc -p ./specs -w"
   }
 }

e2e/client/playwright/internal-destinations.spec.ts

@@ -0,0 +1,25 @@
+import {test, expect} from '@playwright/test';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test.describe('internal destinations', async () => {
+    test('display and removal of active filters', async ({page}) => {
+        await restoreDatabaseSnapshot();
+
+        await page.goto('/#/settings/internal-destinations');
+        await expect(page.locator(s('list-page--filters-active', 'tag-label'))).toHaveCount(0);
+
+        await page.locator(s('toggle-filters')).click();
+
+        await page.locator(s('list-page--filters-form', 'gform-input--desk'))
+            .getByRole('combobox').click();
+        await page.locator(s('list-page--filters-form', 'gform-input--desk'))
+            .getByRole('combobox').fill('Sports');
+        await page.locator(s('list-page--filters-form', 'gform-input--desk'))
+            .getByRole('button', {name: 'Sports'}).click();
+        await page.locator(s('list-page--filters-form', 'filters-submit')).click();
+        await expect(page.locator(s('list-page--filters-active', 'tag-label'))).toHaveCount(1);
+
+        await page.locator(s('list-page--filters-active', 'tag-label', 'tag-label--remove')).click();
+        await expect(page.locator(s('list-page--filters-active', 'tag-label'))).toHaveCount(0);
+    });
+});

e2e/client/playwright/multiedit.spec.ts

@@ -42,7 +42,7 @@ test.describe('Multiedit', async () => {
 
         await multiedit.save('story 2');
 
-        await page.locator(s('multiedit-subnav')).getByRole('button', {name: 'exit'}).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')),

e2e/client/specs/helpers/utils.ts

@@ -262,7 +262,7 @@ export function screenshot(name) {
         let file = path.join(dir, name + '.png'),
             stream = fs.createWriteStream(file);
 
-        stream.write(new Buffer(png, 'base64'));
+        stream.write(Buffer.from(png, 'base64'));
         stream.end();
     });
 }

e2e/client/specs/internal_destinations_spec.ts

@@ -132,7 +132,7 @@ describe('internal destinations & generic-page-list', () => {
         browser.wait(ECE.textToBePresentInElement(el(['gform-output--name'], null, items.get(2)), 'alpha'));
     });
 
-    it('can filter items', () => {
+    xit('can filter items', () => {
         var items = els(['list-page--items', 'internal-destinations-item']);
 
         browser.wait(ECE.hasElementCount(items, 3));
@@ -154,29 +154,4 @@ describe('internal destinations & generic-page-list', () => {
         expect(el(['gform-output--name'], null, items.get(0)).getText()).toBe('alpha');
         expect(el(['gform-output--name'], null, items.get(1)).getText()).toBe('charlie');
     });
-
-    it('can display and remove active filters', () => {
-        var items = els(['list-page--items', 'internal-destinations-item']);
-
-        browser.wait(ECE.hasElementCount(items, 3));
-        expect(els(['list-page--filters-active', 'tag-label']).count()).toBe(0);
-
-        el(['toggle-filters']).click();
-
-        el(['list-page--filters-form', 'gform-input--desk']).click();
-        el(['list-page--filters-form', 'gform-input--desk'], by.buttonText('Sports Desk')).click();
-        el(['list-page--filters-form', 'filters-submit']).click();
-
-        browser.wait(ECE.hasElementCount(items, 2), 1000);
-        expect(els(['list-page--filters-active', 'tag-label']).count()).toBe(1);
-
-        var activeFilter = els(['list-page--filters-active', 'tag-label']).get(0);
-
-        browser.wait(EC.textToBePresentInElement(activeFilter, 'Desk: Sports Desk'), 1000);
-
-        el(['tag-label--remove'], null, activeFilter).click();
-
-        browser.wait(ECE.hasElementCount(items, 3), 1000);
-        expect(els(['list-page--filters-active', 'tag-label']).count()).toBe(0);
-    });
 });

scripts/core/get-superdesk-api-implementation.tsx

@@ -219,9 +219,9 @@ export const formatDate = (
     options?: {timezoneId?: string; longFormat?:boolean},
 ): string => {
     const momentDate = moment.isMoment(date) === true ? date as moment.Moment : moment(date);
-    const dateFormat = options.longFormat === true ? appConfig.longDateFormat : appConfig.view.dateformat;
+    const dateFormat = options?.longFormat === true ? appConfig.longDateFormat : appConfig.view.dateformat;
 
-    if (options.timezoneId != null) {
+    if (options?.timezoneId != null) {
         return momentDate
             .tz(options.timezoneId)
             .format(dateFormat);