[AAE-10252] Storybook Update existing Stories to adhere to conventions (#7780)

* [AAE-10252] Storybook Update existing Stories to adhere to conventions

* Added expaned controls globally

* About Module, Comments Module

* Icon Module, Language Menu Module

* Social Module

* Naming of single stories

* process-services-cloud Modules

* Added descriptions and categories for actions

* Fixed and cleaned error-content stories

* Updated playwright tests to navigate properly

* Template Module

* Toolbar Module

* fixed Like component controls

* content projection showcase

e2e-playwright/page-object/index.ts

@@ -7,4 +7,4 @@
  */
 
 export * from './components';
-export * from './stories/base.storie';
+export * from './stories/base.stories';

e2e-playwright/page-object/stories/base.storie.ts

@@ -1,30 +0,0 @@
-/*
- * 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 { timeouts } from '../../utils/timeouts';
-import { ComponentTitles } from '../../models/component-titles.model';
-import { PlaywrightBase } from '../playwright-base';
-
-interface NavigateParameters { componentName: string; story: string };
-
-export class BaseStories extends PlaywrightBase {
-    private rootComponentTitle: string;
-
-    constructor(page: Page, rootComponentTitle: ComponentTitles) {
-        super(page);
-        this.rootComponentTitle = rootComponentTitle;
-    }
-
-    async navigateTo({ componentName, story }: NavigateParameters): Promise<void> {
-        await this.page.goto(`/iframe.html?id=${this.rootComponentTitle}-components-${componentName}--${story}`, {
-            waitUntil: 'networkidle',
-            timeout: timeouts.large
-        });
-    }
-}

e2e-playwright/page-object/stories/base.stories.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { timeouts } from '../../utils/timeouts';
+import { ComponentTitles } from '../../models/component-titles.model';
+import { PlaywrightBase } from '../playwright-base';
+
+interface NavigationParameters {
+    moduleNames: string[];
+    componentName: string;
+    story: string;
+};
+
+export class BaseStories extends PlaywrightBase {
+    private libraryName: string;
+
+    constructor(page: Page, libraryName: ComponentTitles) {
+        super(page);
+        this.libraryName = libraryName;
+    }
+
+    private buildStoryId({ moduleNames, componentName, story }: NavigationParameters): string{
+        const moduleNamesConcatenated = moduleNames.reduce((module, submodule) => module + '-' + submodule);
+        return this.libraryName + '-' + moduleNamesConcatenated + '-' + componentName + '--' + story;
+    }
+
+    async navigateTo(navigationParameters: NavigationParameters): Promise<void> {
+        await this.page.goto(`/iframe.html?args=&viewMode=story&id=${this.buildStoryId(navigationParameters)}`, {
+            waitUntil: 'networkidle',
+            timeout: timeouts.large
+        });
+    }
+}

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

@@ -17,7 +17,7 @@ test.describe('Groups component stories tests', () => {
             Meat Chicken  cancel
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'group', story: 'valid-preselected-groups' });
+        await processServicesCloud.navigateTo({moduleNames:['group-cloud'], componentName: 'group-cloud', story: 'valid-preselected-groups' });
 
         await expect(groupComponent.groupNaming).toContainText(expectedUsersName);
     });
@@ -28,7 +28,7 @@ test.describe('Groups component stories tests', () => {
             Meat Chicken
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'group', story: 'mandatory-preselected-groups' });
+        await processServicesCloud.navigateTo({moduleNames:['group-cloud'], componentName: 'group-cloud', story: 'mandatory-preselected-groups' });
         await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName);
 
         await groupComponent.getUserLocator('Meat Chicken').hover();
@@ -39,7 +39,7 @@ test.describe('Groups component stories tests', () => {
         const expectedWarningMessage = 'No group found with the name Invalid Group';
         const expectedWarningIcon = 'error_outline';
 
-        await processServicesCloud.navigateTo({ componentName: 'group', story: 'invalid-preselected-groups' });
+        await processServicesCloud.navigateTo({moduleNames:['group-cloud'], componentName: 'group-cloud', story: 'invalid-preselected-groups' });
 
         await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
     });

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

@@ -18,7 +18,7 @@ test.describe('People component stories tests', () => {
             Kielbasa Sausage  cancel
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'valid-preselected-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'valid-preselected-users' });
 
         await expect(peopleComponent.usersNaming).toContainText(expectedUsersName);
     });
@@ -29,7 +29,7 @@ test.describe('People component stories tests', () => {
             Shepherds Pie  cancel
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'mandatory-preselected-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'mandatory-preselected-users' });
         await peopleComponent.getUserLocator('Kielbasa Sausage').hover();
 
         await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName);
@@ -40,7 +40,7 @@ test.describe('People component stories tests', () => {
         const expectedWarningMessage = 'No user found with the username Invalid User';
         const expectedWarningIcon = 'error_outline';
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'invalid-preselected-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'invalid-preselected-users' });
 
         await expect(peopleComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
     });
@@ -51,7 +51,7 @@ test.describe('People component stories tests', () => {
             yorkshire
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'excluded-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'excluded-users' });
         await peopleComponent.usersInput.type('user');
 
         await expect(peopleComponent.listbox.allOptions).not.toContainText(expectedExcludedUsers);
@@ -60,7 +60,7 @@ test.describe('People component stories tests', () => {
     test('No Users', async ({ processServicesCloud, peopleComponent }) => {
         const expectedInformation = 'No user found with the username user';
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'no-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'no-users' });
         await peopleComponent.usersInput.type('user');
 
         await expect(peopleComponent.listbox.oneOption).toContainText(expectedInformation);