fix(chat): Change nested folders error placement (Issue #2974) (#2992)

apps/chat-e2e/src/tests/conversationWithAttachment.test.ts

@@ -569,6 +569,7 @@ dialTest(
     attachmentDropdownMenu,
     conversations,
     localStorageManager,
+    baseAssertion,
   }) => {
     setTestIds('EPMRTC-3118', 'EPMRTC-3283');
     const randomModelWithImageAttachment = GeneratorUtil.randomArrayElement(
@@ -624,12 +625,13 @@ dialTest(
           FileModalSection.AllFiles,
         );
         await attachFilesModal.attachFilesButton.click();
-        expect
-          .soft(
-            await attachFilesModal.getAttachedFileErrorMessage(),
-            ExpectedMessages.sendMessageButtonEnabled,
-          )
-          .toBe(ExpectedConstants.attachedFileError(Attachment.textName));
+        const error = attachFilesModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
+          ExpectedConstants.attachedFileError(Attachment.textName),
+          ExpectedMessages.sendMessageButtonEnabled,
+        );
       },
     );
   },

apps/chat-e2e/src/tests/errorUploadFromDevice.test.ts

@@ -18,6 +18,7 @@ dialTest(
     fileApiHelper,
     chatBar,
     uploadFromDeviceModal,
+    baseAssertion,
   }) => {
     setTestIds('EPMRTC-1777', 'EPMRTC-1778');
     const expectedErrorTextClassAttribute = 'truncate whitespace-pre-wrap';
@@ -43,35 +44,22 @@ dialTest(
     await dialTest.step(
       'Verify error message is shown, it is red and has valid class attribute value',
       async () => {
-        await expect
-          .soft(
-            uploadFromDeviceModal.getUploadErrorText.getElementLocator(),
-            ExpectedMessages.notAllowedNameErrorShown,
-          )
-          .toBeVisible();
-
-        const uploadErrorText = uploadFromDeviceModal.getUploadErrorText;
-        expect
-          .soft(
-            await uploadErrorText.getElementContent(),
-            ExpectedMessages.errorMessageContentIsValid,
-          )
-          .toBe(
-            ExpectedConstants.duplicatedFilenameError(Attachment.longImageName),
-          );
-
-        const errorTextColor = await uploadErrorText.getComputedStyleProperty(
-          Styles.color,
+        const error = uploadFromDeviceModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
+          ExpectedConstants.duplicatedFilenameError(Attachment.longImageName),
+          ExpectedMessages.errorMessageContentIsValid,
+        );
+        await baseAssertion.assertElementColor(
+          error.errorMessage,
+          Colors.textPrimary,
+        );
+        await baseAssertion.assertElementAttribute(
+          error.errorMessage,
+          Attributes.class,
+          expectedErrorTextClassAttribute,
         );
-        expect
-          .soft(errorTextColor[0], ExpectedMessages.errorTextColorIsValid)
-          .toBe(Colors.textPrimary);
-        await expect
-          .soft(
-            uploadErrorText.getElementLocator(),
-            ExpectedMessages.elementAttributeValueIsValid,
-          )
-          .toHaveAttribute(Attributes.class, expectedErrorTextClassAttribute);
       },
     );
   },
@@ -86,6 +74,7 @@ dialTest(
     attachFilesModal,
     chatBar,
     uploadFromDeviceModal,
+    baseAssertion,
   }) => {
     setTestIds('EPMRTC-1780', 'EPMRTC-1802');
     const restrictedChar = GeneratorUtil.randomArrayElement(
@@ -111,18 +100,13 @@ dialTest(
           restrictedChar,
         );
         await uploadFromDeviceModal.uploadButton.click();
-        await expect
-          .soft(
-            uploadFromDeviceModal.getUploadErrorText.getElementLocator(),
-            ExpectedMessages.notAllowedNameErrorShown,
-          )
-          .toBeVisible();
-        expect
-          .soft(
-            await uploadFromDeviceModal.getUploadErrorText.getElementContent(),
-            ExpectedMessages.errorMessageContentIsValid,
-          )
-          .toBe(ExpectedConstants.notAllowedFilenameError(notAllowedFilename));
+        const error = uploadFromDeviceModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
+          ExpectedConstants.notAllowedFilenameError(notAllowedFilename),
+          ExpectedMessages.errorMessageContentIsValid,
+        );
       },
     );
 
@@ -168,6 +152,7 @@ dialTest(
     chatBar,
     uploadFromDeviceModal,
     fileApiHelper,
+    baseAssertion,
   }) => {
     setTestIds('EPMRTC-3217', 'EPMRTC-3194', 'EPMRTC-1779');
 
@@ -194,14 +179,9 @@ dialTest(
     );
 
     await dialTest.step('Verify 3 error messages are shown', async () => {
-      await expect
-        .soft(
-          uploadFromDeviceModal.getUploadErrorText.getElementLocator(),
-          ExpectedMessages.errorMessageIsShown,
-        )
-        .toBeVisible();
-      const errorText =
-        await uploadFromDeviceModal.getUploadErrorText.getElementContent();
+      const error = uploadFromDeviceModal.getModalError();
+      await baseAssertion.assertElementState(error, 'visible');
+      const errorText = await error.errorMessage.getElementContent();
       expect
         .soft(
           errorText?.replaceAll('\n', ''),
@@ -230,6 +210,7 @@ dialTest(
     attachFilesModal,
     chatBar,
     uploadFromDeviceModal,
+    baseAssertion,
   }) => {
     setTestIds('EPMRTC-3216', 'EPMRTC-3113');
     const dot = '.';
@@ -258,22 +239,15 @@ dialTest(
           dot,
         );
         await uploadFromDeviceModal.uploadButton.click();
-        await expect
-          .soft(
-            uploadFromDeviceModal.getUploadErrorText.getElementLocator(),
-            ExpectedMessages.notAllowedNameErrorShown,
-          )
-          .toBeVisible();
-        expect
-          .soft(
-            await uploadFromDeviceModal.getUploadErrorText.getElementContent(),
-            ExpectedMessages.errorMessageContentIsValid,
-          )
-          .toBe(
-            ExpectedConstants.endDotFilenameError(
-              Attachment.fileWithoutExtension + dot,
-            ),
-          );
+        const error = uploadFromDeviceModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
+          ExpectedConstants.endDotFilenameError(
+            Attachment.fileWithoutExtension + dot,
+          ),
+          ExpectedMessages.errorMessageContentIsValid,
+        );
       },
     );
 

apps/chat-e2e/src/tests/publishConversationToOrganisation.test.ts

@@ -231,7 +231,6 @@ dialAdminTest(
     folderDropdownMenu,
     folderDropdownMenuAssertion,
     selectFoldersAssertion,
-    toastAssertion,
     selectFolderModalAssertion,
     adminOrganizationFolderConversationAssertions,
     adminDialHomePage,
@@ -337,7 +336,10 @@ dialAdminTest(
           await selectFolders.openFolderDropdownMenu(defaultFolderName, i);
           await folderDropdownMenu.selectMenuOption(MenuOptions.addNewFolder);
           if (i === maxNestedLevel - 1) {
-            await toastAssertion.assertToastMessage(
+            const error = selectFolderModal.getModalError();
+            await baseAssertion.assertElementState(error, 'visible');
+            await baseAssertion.assertElementText(
+              error.errorMessage,
               ExpectedConstants.tooManyNestedFolders,
               ExpectedMessages.tooManyNestedFolders,
             );

apps/chat-e2e/src/tests/publishPrompt.test.ts

@@ -470,8 +470,6 @@ dialAdminTest(
     promptBarOrganizationFolderAssertion,
     organizationFolderPrompts,
     folderDropdownMenu,
-    toastAssertion,
-    toast,
     publishingRequestModalAssertion,
     tooltipAssertion,
   }) => {
@@ -529,19 +527,13 @@ dialAdminTest(
         await selectFolders.openFolderDropdownMenu(`${folderNameTemplate} 4`);
         await folderDropdownMenu.selectMenuOption(MenuOptions.addNewFolder);
         // Assertions
-        await toastAssertion.assertToastIsVisible();
-        await toastAssertion.assertToastMessage(
+        const error = selectFolderModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
           ExpectedConstants.tooManyNestedFolders,
           ExpectedMessages.tooManyNestedFolders,
         );
-        // Bug that closing the toast leads to the closing the modal
-        await toast.closeToast();
-        await publishingRequestModal
-          .getChangePublishToPath()
-          .changeButton.click();
-        await selectFolders
-          .getFolderByName(folderNameTemplate)
-          .waitFor({ state: 'visible' });
         for (let i = 1; i < 4; i++) {
           await selectFolders
             .getFolderByName(`${folderNameTemplate} ${i}`)

apps/chat-e2e/src/tests/selectUploadFolder.test.ts

@@ -574,6 +574,7 @@ dialTest(
     uploadFromDeviceModal,
     attachFilesModal,
     selectFolderModal,
+    baseAssertion,
     selectFolders,
   }) => {
     setTestIds('EPMRTC-3017', 'EPMRTC-3246');
@@ -605,18 +606,13 @@ dialTest(
           `${GeneratorUtil.randomString(10)}.`,
           { isHttpMethodTriggered: false },
         );
-        await expect
-          .soft(
-            await selectFolderModal.getErrorContainer(),
-            ExpectedMessages.errorToastIsShown,
-          )
-          .toBeVisible();
-        expect
-          .soft(
-            await selectFolderModal.getErrorMessage(),
-            ExpectedMessages.errorMessageContentIsValid,
-          )
-          .toBe(ExpectedConstants.nameWithDotErrorMessage);
+        const error = selectFolderModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
+          ExpectedConstants.nameWithDotErrorMessage,
+          ExpectedMessages.errorMessageContentIsValid,
+        );
       },
     );
 
@@ -628,12 +624,13 @@ dialTest(
           ExpectedConstants.newFolderWithIndexTitle(1),
           { isHttpMethodTriggered: false },
         );
-        expect
-          .soft(
-            await selectFolderModal.selectFolderErrorText.getElementContent(),
-            ExpectedMessages.errorMessageContentIsValid,
-          )
-          .toBe(ExpectedConstants.notAllowedDuplicatedFolderNameErrorMessage);
+        const error = selectFolderModal.getModalError();
+        await baseAssertion.assertElementState(error, 'visible');
+        await baseAssertion.assertElementText(
+          error.errorMessage,
+          ExpectedConstants.notAllowedDuplicatedFolderNameErrorMessage,
+          ExpectedMessages.errorMessageContentIsValid,
+        );
         await expect
           .soft(
             selectFolders.getFolderByName(

apps/chat-e2e/src/ui/webElements/attachFilesModal.ts

@@ -3,14 +3,14 @@ import { BaseElement } from './baseElement';
 import {
   AttachFilesModalSelectors,
   EntitySelectors,
-  ErrorLabelSelectors,
   IconSelectors,
   MenuSelectors,
   SelectFolderModalSelectors,
 } from '@/src/ui/selectors';
 import { DropdownMenu } from '@/src/ui/webElements/dropdownMenu';
 import { AttachFilesTree, Folders } from '@/src/ui/webElements/entityTree';
 import { FilesModalHeader } from '@/src/ui/webElements/filesModalHeader';
+import { ModalError } from '@/src/ui/webElements/modalError';
 import { Search } from '@/src/ui/webElements/search';
 import { Locator, Page } from '@playwright/test';
 
@@ -32,6 +32,7 @@ export class AttachFilesModal extends BaseElement {
   private sharedWithMeTree!: AttachFilesTree;
   private organizationTree!: AttachFilesTree;
   private search!: Search;
+  public modalError!: ModalError;
 
   getSearchInput(): BaseElement {
     if (!this.search) {
@@ -40,6 +41,13 @@ export class AttachFilesModal extends BaseElement {
     return this.search;
   }
 
+  getModalError(): ModalError {
+    if (!this.modalError) {
+      this.modalError = new ModalError(this.page, this.rootLocator);
+    }
+    return this.modalError;
+  }
+
   getFileDropdownMenu(): DropdownMenu {
     if (!this.fileDropdownMenu) {
       this.fileDropdownMenu = new DropdownMenu(this.page);
@@ -208,10 +216,4 @@ export class AttachFilesModal extends BaseElement {
     await file.locator(MenuSelectors.dotsMenu).click();
     await this.getFileDropdownMenu().waitForState();
   }
-
-  public async getAttachedFileErrorMessage() {
-    return this.getChildElementBySelector(
-      ErrorLabelSelectors.errorText,
-    ).getElementContent();
-  }
 }

apps/chat-e2e/src/ui/webElements/modalError.ts

@@ -0,0 +1,13 @@
+import { ErrorLabelSelectors } from '@/src/ui/selectors';
+import { BaseElement } from '@/src/ui/webElements/baseElement';
+import { Locator, Page } from '@playwright/test';
+
+export class ModalError extends BaseElement {
+  constructor(page: Page, parentLocator?: Locator) {
+    super(page, ErrorLabelSelectors.errorContainer, parentLocator);
+  }
+
+  public errorMessage = this.getChildElementBySelector(
+    ErrorLabelSelectors.errorText,
+  );
+}