Merge pull request #189 from nordeck/nic/feat/PB-3407-Expanded-view-w…

…ill-be-shown-in-meeting-room Expanded view will be shown in meeting room
nordeck · Jul 14, 2023 · f5f8ba4 · f5f8ba4
2 parents 9aaeb5e + f0c8f72
commit f5f8ba4
Show file tree

Hide file tree

Showing 15 changed files with 283 additions and 123 deletions.
diff --git a/.changeset/stale-cycles-sort.md b/.changeset/stale-cycles-sort.md
@@ -0,0 +1,5 @@
+---
+'@nordeck/matrix-meetings-widget': minor
+---
+
+Add the expended meeting view to the cockpit widget
diff --git a/e2e/src/meetingRoom.spec.ts b/e2e/src/meetingRoom.spec.ts
@@ -64,14 +64,15 @@ test.describe('Meeting Room', () => {
     );
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:30 AM'
-    );
-    await expect(meetingCard.meetingTitleText).toHaveText('My Meeting');
-    await expect(meetingCard.meetingDescriptionText).toHaveText(
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+    await expect(meetingDetails.meetingDescriptionText).toHaveText(
       'My Description'
     );
+    await expect(meetingDetails.meetingTitleText).toHaveText('My Meeting');
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 3, 2040, 10:30 – 11:30 AM'
+    );
   });
 
   test('should edit the meeting title from within the meeting', async ({
@@ -80,14 +81,13 @@ test.describe('Meeting Room', () => {
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.titleTextbox.fill('New Meeting');
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
-    await expect(meetingCard.meetingTitleText).toHaveText('New Meeting');
+    await expect(meetingDetails.meetingTitleText).toHaveText('New Meeting');
     await expect(aliceElementWebPage.roomNameText).toHaveText('New Meeting');
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(/Title: New Meeting/)
@@ -101,13 +101,13 @@ test.describe('Meeting Room', () => {
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.addParticipant(charlie.displayName);
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
     await aliceElementWebPage.waitForUserMembership(charlie.username, 'invite');
   });
 
@@ -116,13 +116,12 @@ test.describe('Meeting Room', () => {
     aliceCockpitWidgetPage,
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.removeLastWidget();
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
     await aliceElementWebPage
       .locateChatMessageInRoom('Video conference ended by Bot')
       .waitFor();
@@ -141,13 +140,13 @@ test.describe('Meeting Room', () => {
     aliceCockpitWidgetPage,
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.addWidget('Video Conference (optional)');
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
     await expect
       .poll(async () => {
         return await aliceElementWebPage.getWidgets();
@@ -181,10 +180,10 @@ test.describe('Meeting Room', () => {
     await aliceElementWebPage.sendMessage('I am Alice');
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
     const meetingCard = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
     let aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
     await aliceEditMeetingWidgetPage.toggleChatPermission();
     await aliceEditMeetingWidgetPage.submit();
-    await aliceElementWebPage.approveWidgetIdentity();
     await aliceElementWebPage.sendMessage('I am still here');
     await expect(bobElementWebPage.noChatPermissionText).toBeVisible();
     aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
@@ -213,8 +212,10 @@ test.describe('Meeting Room', () => {
       .joinMeeting();
     await bobElementWebPage.acceptRoomInvitation();
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await meetingCard.deleteMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    await meetingDetails.deleteMeeting();
 
     await expect(aliceElementWebPage.locateTombstone()).toBeVisible();
     await expect(bobElementWebPage.locateTombstone()).toBeVisible();
@@ -236,6 +237,8 @@ test.describe('Meeting Room', () => {
     aliceCockpitWidgetPage,
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await aliceCockpitWidgetPage.backToParentRoom();
     await aliceElementWebPage.approveWidgetCapabilities();
 

diff --git a/e2e/src/openXchange.spec.ts b/e2e/src/openXchange.spec.ts
@@ -52,23 +52,22 @@ test.describe('OpenXchange', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await expect(meetingCard.meetingTitleText).toHaveText('My Meeting');
-    await expect(meetingCard.meetingDescriptionText).toHaveText(
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    await expect(meetingDetails.meetingTitleText).toHaveText('My Meeting');
+    await expect(meetingDetails.meetingDescriptionText).toHaveText(
       'My Description'
     );
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM'
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 3, 2040, 10:30 – 11:00 AM'
     );
 
-    const menu = await meetingCard.openMoreSettingsMenu();
-    await aliceElementWebPage.approveWidgetIdentity();
-
-    await expect(menu.editInOpenXchangeMenuItem).toHaveAttribute(
+    await expect(meetingDetails.editInOpenXchangeMenuItem).toHaveAttribute(
       'href',
       'https://webmail-hostname/appsuite/#app=io.ox/calendar&id=meeting-id&folder=cal://0/471'
     );
-    await expect(menu.deleteInOpenXchangeMenuItem).toHaveAttribute(
+    await expect(meetingDetails.deleteInOpenXchangeMenuItem).toHaveAttribute(
       'href',
       'https://webmail-hostname/appsuite/#app=io.ox/calendar&id=meeting-id&folder=cal://0/471'
     );
@@ -105,9 +104,10 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText('Every day for 5 times');
   });
 
   test('should update meeting via OX', async ({
@@ -131,9 +131,9 @@ test.describe('OpenXchange', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM'
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 3, 2040, 10:30 – 11:00 AM'
     );
 
     await meetingsBotApi.updateMeeting({
@@ -145,14 +145,16 @@ test.describe('OpenXchange', () => {
       openIdToken: await aliceElementWebPage.getOpenIdToken(),
     });
 
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
         /10\/04\/2040 10:30 AM CEST to 10\/04\/2040 11:00 AM CEST/
       )
     ).toBeVisible();
 
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 4, 2040, 10:30 AM – 11:00 AM'
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 4, 2040, 10:30 – 11:00 AM'
     );
   });
 
@@ -221,9 +223,11 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText(' Every day for 5 times');
 
     await meetingsBotApi.updateMeeting({
       roomId,
@@ -236,7 +240,9 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('Oct 3, 2040, 10:30 AM – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+
+    await aliceElementWebPage.approveWidgetIdentity();
 
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
@@ -273,9 +279,11 @@ test.describe('OpenXchange', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('Oct 3, 2040, 10:30 AM – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
 
     await meetingsBotApi.updateMeeting({
       roomId,
@@ -289,9 +297,11 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText('Every day for 5 times');
 
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(

diff --git a/e2e/src/pages/MeetingDetailsPage.ts b/e2e/src/pages/MeetingDetailsPage.ts
diff --git a/e2e/src/pages/cockpitWidgetPage.ts b/e2e/src/pages/cockpitWidgetPage.ts
@@ -15,7 +15,7 @@
  */
 
 import { FrameLocator, Locator, Page } from '@playwright/test';
-import { MeetingCardPage } from './meetingCardPage';
+import { MeetingDetailsPage } from './meetingDetailsPage';
 
 export class CockpitWidgetPage {
   public readonly backToParentRoomButton: Locator;
@@ -33,11 +33,11 @@ export class CockpitWidgetPage {
     await this.backToParentRoomButton.click();
   }
 
-  getMeeting(): MeetingCardPage {
-    return new MeetingCardPage(
+  getMeeting(): MeetingDetailsPage {
+    return new MeetingDetailsPage(
       this.page,
       this.widget,
-      this.widget.getByRole('heading').locator('..').locator('..').locator('..')
+      this.widget.getByRole('region', { name: 'Meeting details' })
     );
   }
 }
diff --git a/e2e/src/pages/index.ts b/e2e/src/pages/index.ts
@@ -19,6 +19,7 @@ export { CockpitWidgetPage } from './cockpitWidgetPage';
 export { ElementWebPage } from './elementWebPage';
 export type { OpenIdToken } from './elementWebPage';
 export { JitsiWidgetPage } from './jitsiWidgetPage';
+export { MeetingDetailsPage } from './meetingDetailsPage';
 export { MeetingsBotApi } from './meetingsBotApi';
 export { MeetingsWidgetPage } from './meetingsWidgetPage';
 export { ScheduleBreakoutSessionsWidgetPage } from './scheduleBreakoutSessionsWidgetPage';