[AAE-7160] Setup Playwright in ADF - Storybook testing (#7537)

* [AAE-7160] Setup Playwright in ADF - Storybook testing

* New test cases for groups component. Reorganize the files

* Add to package.json scripts - npm run playwright

* Change amount of workers

* Change workesr to 2

e2e-playwright/process-services-cloud/components/group.component.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../../page-object/components/base.component';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components/basic';
+
+export class GroupComponent extends BaseComponent {
+    private static rootElement = 'adf-cloud-group';
+    public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
+    public listbox = new ListboxComponent(this.page);
+
+    public groupNaming = this.getChild('[data-automation-id="adf-cloud-group-chip-list"]');
+    public groupInput = this.getChild('[data-automation-id="adf-group-cloud-search-input"]');
+
+    constructor(page: Page, rootElement = GroupComponent.rootElement) {
+        super(page, rootElement);
+    }
+
+    public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-cloud-group-chip-${userName}"]`);
+
+}

e2e-playwright/process-services-cloud/components/people.component.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../../page-object/components/base.component';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components/basic';
+
+export class PeopleComponent extends BaseComponent {
+    private static rootElement = 'adf-cloud-people';
+    public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
+    public listbox = new ListboxComponent(this.page);
+
+    public usersNaming = this.getChild('[data-automation-id="adf-cloud-people-chip-list"]');
+    public usersInput = this.getChild('[data-automation-id="adf-people-cloud-search-input"]');
+
+    constructor(page: Page, rootElement = PeopleComponent.rootElement) {
+        super(page, rootElement);
+    }
+
+    public getUserLocator = (userName: 'userName1' | 'userName2') => this.getChild(`[data-automation-id="adf-people-cloud-chip-${userName}"]`);
+
+}

e2e-playwright/process-services-cloud/fixtures/page-initialization.ts

@@ -0,0 +1,28 @@
+/* eslint-disable brace-style */
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { test as base } from '@playwright/test';
+import { BaseStories } from '../../page-object';
+import { ComponentTitles } from '../../models/component-titles.model';
+import { PeopleComponent } from '../components/people.component';
+import { GroupComponent } from '../components/group.component';
+
+interface Pages {
+    processServicesCloud: BaseStories;
+    peopleComponent: PeopleComponent;
+    groupComponent: GroupComponent;
+}
+
+export const test = base.extend<Pages>({
+    processServicesCloud: async ({ page }, use) => { await use(new BaseStories(page, ComponentTitles.processServicesCloud)); },
+    peopleComponent: async ({ page }, use) => { await use(new PeopleComponent(page)); },
+    groupComponent: async ({ page }, use) => { await use(new GroupComponent(page)); }
+});
+
+export { expect } from '@playwright/test';

e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { test, expect } from '../fixtures/page-initialization';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('Groups component stories tests', () => {
+    test('Valid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
+        const expectedUsersName = `
+            Mock Group 1  cancel
+            Mock Group 2  cancel
+            Mock Group 3  cancel
+            Mock Group 4  cancel
+            Mock Group 5
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'group', story: 'valid-preselected-groups' });
+
+        await expect(groupComponent.groupNaming).toContainText(expectedUsersName);
+    });
+
+    test('Mandatory Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
+        const expectedUsersName = `
+            Mock Group 1
+            Mock Group 2  cancel
+            Mock Group 3
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'group', story: 'mandatory-preselected-groups' });
+        await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName);
+
+        await groupComponent.getUserLocator('Mock Group 1').hover();
+        await expect(groupComponent.tooltip.content).toContainText('Mandatory');
+    });
+
+    test('Invalid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
+        const expectedWarningMessage = 'warning No group found with the name invalid groups';
+
+        await processServicesCloud.navigateTo({ componentName: 'group', story: 'invalid-preselected-groups' });
+
+        await expect(groupComponent.error.content).toContainText(expectedWarningMessage);
+    });
+
+});

e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { test, expect } from '../fixtures/page-initialization';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('People component stories tests', () => {
+    test('Valid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedUsersName = `
+            first-name-1 last-name-1  cancel
+            first-name-2 last-name-2  cancel
+            first-name-3 last-name-3  cancel
+            first-name-4 last-name-4  cancel
+            first-name-5 last-name-5
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'valid-preselected-users' });
+
+        await expect(peopleComponent.usersNaming).toContainText(expectedUsersName);
+    });
+
+    test('Mandatory Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedUsersName = `
+            first-name-1 last-name-1
+            first-name-2 last-name-2  cancel
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'mandatory-preselected-users' });
+        await peopleComponent.getUserLocator('userName1').hover();
+
+        await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName);
+        await expect(peopleComponent.tooltip.content).toContainText('Mandatory');
+    });
+
+    test('Invalid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedWarningMessage = 'warning No user found with the username invalid user';
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'invalid-preselected-users' });
+
+        await expect(peopleComponent.error.content).toContainText(expectedWarningMessage);
+    });
+
+    test('Excluded Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedExcludedUsers = `
+            mocked-user-id-2
+            mocked-user-id-3
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'excluded-users' });
+        await peopleComponent.usersInput.type('user');
+
+        await expect(peopleComponent.listbox.allOptions).not.toContainText(expectedExcludedUsers);
+    });
+
+    test('No Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedInformation = 'No user found with the username user';
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'no-users' });
+        await peopleComponent.usersInput.type('user');
+
+        await expect(peopleComponent.listbox.oneOption).toContainText(expectedInformation);
+    });
+});