feat(chat-e2e): fixed app editor test (#3839)

Author: irinakartun

apps/chat-e2e/src/core/dialFixtures.ts

@@ -5,8 +5,8 @@ import {
   AgentInfo,
   AppEditorContainer,
   AppEditorGeneralForm,
+  AppEditorGeneralInfoAgentPreview,
   AppEditorHeader,
-  AppEditorPreview,
   AppEditorViewForm,
   AttachFilesModal,
   Chat,
@@ -91,6 +91,7 @@ import { Addons } from '@/src/ui/webElements/addons';
 import { AddonsDialog } from '@/src/ui/webElements/addonsDialog';
 import { AgentSettings } from '@/src/ui/webElements/agentSettings';
 import { AppContainer } from '@/src/ui/webElements/appContainer';
+import { AppEditorAppSettingsAgentPreview } from '@/src/ui/webElements/appEditor/appEditorAppSettingsAgentPreview';
 import { Banner } from '@/src/ui/webElements/banner';
 import { Compare } from '@/src/ui/webElements/compare';
 import { ConfirmationDialog } from '@/src/ui/webElements/confirmationDialog';
@@ -170,7 +171,8 @@ const dialTest = test.extend<{
   appEditorHeader: AppEditorHeader;
   appEditorHeaderAssertion: AppEditorHeaderAssertion;
   appEditorGeneralForm: AppEditorGeneralForm;
-  appEditorPreview: AppEditorPreview;
+  appEditorGeneralInfoAgentPreview: AppEditorGeneralInfoAgentPreview;
+  appEditorAppSettingsAgentPreview: AppEditorAppSettingsAgentPreview;
   appEditorViewForm: AppEditorViewForm;
   chatBar: ChatBar;
   navigationPanel: NavigationPanel;
@@ -475,9 +477,15 @@ const dialTest = test.extend<{
     const appEditorGeneralForm = appEditorContainer.getAppEditorGeneralForm();
     await use(appEditorGeneralForm);
   },
-  appEditorPreview: async ({ appEditorContainer }, use) => {
-    const appEditorPreview = appEditorContainer.getAppEditorPreview();
-    await use(appEditorPreview);
+  appEditorGeneralInfoAgentPreview: async ({ appEditorContainer }, use) => {
+    const appEditorGeneralInfoPreview =
+      appEditorContainer.getAppEditorGeneralInfoPreview();
+    await use(appEditorGeneralInfoPreview);
+  },
+  appEditorAppSettingsAgentPreview: async ({ appEditorContainer }, use) => {
+    const appEditorAppSettingsPreview =
+      appEditorContainer.getAppEditorAppSettingsPreview();
+    await use(appEditorAppSettingsPreview);
   },
   appEditorViewForm: async ({ appEditorContainer }, use) => {
     const appEditorViewForm = appEditorContainer.getAppEditorViewForm();

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

@@ -888,7 +888,8 @@ dialTest(
     attachFilesModal,
     appEditorHeader,
     appEditorGeneralForm,
-    appEditorPreview,
+    appEditorGeneralInfoAgentPreview,
+    appEditorAppSettingsAgentPreview,
     customApplicationBuilder,
     applicationApiHelper,
     uploadFromDeviceModal,
@@ -953,18 +954,19 @@ dialTest(
     await dialTest.step(
       'Verify the updated icon is displayed in the preview on the "General info" step',
       async () => {
-        const previewIcon = appEditorPreview.previewIcon;
+        const previewIcon = appEditorGeneralInfoAgentPreview.previewIcon;
         await baseAssertion.assertEntityIcon(previewIcon, expectedNewIconUrl);
       },
     );
 
     await dialTest.step(
-      'Navigate to "App settings" step and verify the updated icon in the preview',
+      'Navigate to "App settings" step and verify the updated icon in the chat preview',
       async () => {
         await appEditorGeneralForm.goNext({ waitForResponses: false });
-        const previewIconAppSettings = appEditorPreview.previewIcon;
+        const previewChatIconAppSettings =
+          appEditorAppSettingsAgentPreview.previewChatIcon;
         await baseAssertion.assertEntityIcon(
-          previewIconAppSettings,
+          previewChatIconAppSettings,
           expectedNewIconUrl,
         );
       },

apps/chat-e2e/src/ui/pages/appEditorPage.ts

@@ -14,7 +14,8 @@ export class AppEditorPage extends BasePage {
   async waitForPageLoaded() {
     const appEditorContainer = this.getAppEditorContainer();
     const applicationGeneralForm = appEditorContainer.getAppEditorGeneralForm();
-    const applicationPreview = appEditorContainer.getAppEditorPreview();
+    const applicationPreview =
+      appEditorContainer.getAppEditorGeneralInfoPreview();
     await this.appEditorContainer
       .getChatLoader()
       .waitForState({ state: 'hidden' });
@@ -26,7 +27,8 @@ export class AppEditorPage extends BasePage {
   async waitForPageLoadedForEdit() {
     const appEditorContainer = this.getAppEditorContainer();
     const applicationViewForm = appEditorContainer.getAppEditorViewForm();
-    const applicationPreview = appEditorContainer.getAppEditorChatMode();
+    const applicationPreview =
+      appEditorContainer.getAppEditorAppSettingsPreview();
     await this.appEditorContainer
       .getChatLoader()
       .waitForState({ state: 'hidden' });

apps/chat-e2e/src/ui/selectors/dialogSelectors.ts

@@ -248,9 +248,8 @@ export const ApplicationEditorHeader = {
   notSelectedStepIcon: '[data-qa="not-selected-step-icon"]',
 };
 
-export const ApplicationPreviewSelector = {
+export const AppEditorGeneralInfoPreviewSelectors = {
   containerGeneralInfo: '[data-qa="app-preview-general-info"]',
-  containerAppSettings: '[data-qa="app-settings-chat-mode"]',
   previewIconContainer: '[data-qa="entity-icon"]',
   previewAgentName: '[data-qa="agent-name"]',
   previewTopicsContainer: '[data-qa="app-topics"]',
@@ -259,6 +258,12 @@ export const ApplicationPreviewSelector = {
   previewAuthorValue: '[data-qa="author"]',
 };
 
+export const AppEditorAppSettingsPreviewSelectors = {
+  container: '[data-qa="app-preview-settings"]',
+  chatPreviewContainer: '[data-qa="app-settings-chat-mode"]',
+  previewIconContainer: '[data-qa="entity-icon"]',
+};
+
 export const AddApplicationGeneralInfoFormSelector = {
   appGeneralFormContainer: '[data-qa="app-general-form"]',
   name: '#name',

apps/chat-e2e/src/ui/webElements/appEditor/appEditorAppSettingsAgentPreview.ts

@@ -0,0 +1,25 @@
+import { Tags } from '@/src/ui/domData';
+import {
+  AppEditorAppSettingsPreviewSelectors,
+  AppEditorGeneralInfoPreviewSelectors,
+} from '@/src/ui/selectors';
+import { BaseElement } from '@/src/ui/webElements';
+import { Locator, Page } from '@playwright/test';
+
+export class AppEditorAppSettingsAgentPreview extends BaseElement {
+  constructor(page: Page, parentLocator: Locator) {
+    super(page, AppEditorAppSettingsPreviewSelectors.container, parentLocator);
+  }
+
+  public appEditorChatMode = this.getChildElementBySelector(
+    AppEditorAppSettingsPreviewSelectors.chatPreviewContainer,
+  );
+
+  public previewChatIconContainer =
+    this.appEditorChatMode.getChildElementBySelector(
+      AppEditorGeneralInfoPreviewSelectors.previewIconContainer,
+    );
+
+  public previewChatIcon =
+    this.previewChatIconContainer.getChildElementBySelector(Tags.img);
+}

apps/chat-e2e/src/ui/webElements/appEditor/appEditorChatMode.ts

@@ -1,17 +1,17 @@
 import { ChatSelectors } from '@/src/ui/selectors';
 import { AppEditorGeneralForm, BaseElement } from '@/src/ui/webElements';
-import { AppEditorChatMode } from '@/src/ui/webElements/appEditor/appEditorChatMode';
+import { AppEditorAppSettingsAgentPreview } from '@/src/ui/webElements/appEditor/appEditorAppSettingsAgentPreview';
+import { AppEditorGeneralInfoAgentPreview } from '@/src/ui/webElements/appEditor/appEditorGeneralInfoAgentPreview';
 import { AppEditorHeader } from '@/src/ui/webElements/appEditor/appEditorHeader';
-import { AppEditorPreview } from '@/src/ui/webElements/appEditor/appEditorPreview';
 import { AppEditorViewForm } from '@/src/ui/webElements/appEditor/appEditorViewForm';
 import { BaseLayoutContainer } from '@/src/ui/webElements/baseLayoutContainer';
 
 export class AppEditorContainer extends BaseLayoutContainer<AppEditorHeader> {
   private appEditorHeader!: AppEditorHeader;
   private appEditorGeneralForm!: AppEditorGeneralForm;
   private appEditorViewForm!: AppEditorViewForm;
-  private appEditorPreview!: AppEditorPreview;
-  private appEditorChatMode!: AppEditorChatMode;
+  private appEditorGeneralInfoPreview!: AppEditorGeneralInfoAgentPreview;
+  private appEditorAppSettingsPreview!: AppEditorAppSettingsAgentPreview;
 
   getHeader(): AppEditorHeader {
     if (!this.header) {
@@ -47,21 +47,24 @@ export class AppEditorContainer extends BaseLayoutContainer<AppEditorHeader> {
     return this.appEditorViewForm;
   }
 
-  getAppEditorPreview(): AppEditorPreview {
-    if (!this.appEditorPreview) {
-      this.appEditorPreview = new AppEditorPreview(this.page, this.rootLocator);
+  getAppEditorGeneralInfoPreview(): AppEditorGeneralInfoAgentPreview {
+    if (!this.appEditorGeneralInfoPreview) {
+      this.appEditorGeneralInfoPreview = new AppEditorGeneralInfoAgentPreview(
+        this.page,
+        this.rootLocator,
+      );
     }
-    return this.appEditorPreview;
+    return this.appEditorGeneralInfoPreview;
   }
 
-  getAppEditorChatMode(): AppEditorChatMode {
-    if (!this.appEditorChatMode) {
-      this.appEditorChatMode = new AppEditorChatMode(
+  getAppEditorAppSettingsPreview(): AppEditorAppSettingsAgentPreview {
+    if (!this.appEditorAppSettingsPreview) {
+      this.appEditorAppSettingsPreview = new AppEditorAppSettingsAgentPreview(
         this.page,
         this.rootLocator,
       );
     }
-    return this.appEditorChatMode;
+    return this.appEditorAppSettingsPreview;
   }
 
   getChatLoader(): BaseElement {

apps/chat-e2e/src/ui/webElements/appEditor/appEditorContainer.ts

@@ -1,41 +1,45 @@
 import { Tags } from '@/src/ui/domData';
-import { ApplicationPreviewSelector } from '@/src/ui/selectors';
+import { AppEditorGeneralInfoPreviewSelectors } from '@/src/ui/selectors';
 import { BaseElement } from '@/src/ui/webElements';
 import { Locator, Page } from '@playwright/test';
 
-export class AppEditorPreview extends BaseElement {
+export class AppEditorGeneralInfoAgentPreview extends BaseElement {
   constructor(page: Page, parentLocator: Locator) {
-    super(page, ApplicationPreviewSelector.containerGeneralInfo, parentLocator);
+    super(
+      page,
+      AppEditorGeneralInfoPreviewSelectors.containerGeneralInfo,
+      parentLocator,
+    );
   }
 
   public previewIconContainer = this.getChildElementBySelector(
-    ApplicationPreviewSelector.previewIconContainer,
+    AppEditorGeneralInfoPreviewSelectors.previewIconContainer,
   );
 
   public previewIcon = this.previewIconContainer.getChildElementBySelector(
     Tags.img,
   );
 
   public previewName = this.getChildElementBySelector(
-    ApplicationPreviewSelector.previewAgentName,
+    AppEditorGeneralInfoPreviewSelectors.previewAgentName,
   );
 
   public previewTopicsContainer = this.getChildElementBySelector(
-    ApplicationPreviewSelector.previewTopicsContainer,
+    AppEditorGeneralInfoPreviewSelectors.previewTopicsContainer,
   );
 
   public previewInformationSection = this.getChildElementBySelector(
-    ApplicationPreviewSelector.previewInformationSection,
+    AppEditorGeneralInfoPreviewSelectors.previewInformationSection,
   );
 
   public previewAuthorContainer =
     this.previewInformationSection.getChildElementBySelector(
-      ApplicationPreviewSelector.previewAuthorContainer,
+      AppEditorGeneralInfoPreviewSelectors.previewAuthorContainer,
     );
 
   public previewAuthorValue =
     this.previewAuthorContainer.getChildElementBySelector(
-      ApplicationPreviewSelector.previewAuthorValue,
+      AppEditorGeneralInfoPreviewSelectors.previewAuthorValue,
     );
 
   public topicElements = this.previewTopicsContainer.getChildElementBySelector(

apps/chat-e2e/src/ui/webElements/appEditor/appEditorPreview.ts renamed to apps/chat-e2e/src/ui/webElements/appEditor/appEditorGeneralInfoAgentPreview.ts

@@ -59,6 +59,7 @@ export * from './messageTemplateModal';
 export * from './appEditor/appEditorContainer';
 export * from './appEditor/appEditorHeader';
 export * from './appEditor/appEditorGeneralForm';
-export * from './appEditor/appEditorPreview';
+export * from './appEditor/appEditorGeneralInfoAgentPreview';
+export * from './appEditor/appEditorAppSettingsAgentPreview';
 export * from './appEditor/appEditorViewForm';
 export * from './notFound';

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

@@ -321,6 +321,7 @@ export const ApplicationSettings: React.FC<Props> = ({
             'w-0 overflow-hidden opacity-0': previewMode === PreviewMode.closed,
           },
         )}
+        data-qa="app-preview-settings"
       >
         <div className="flex max-w-full items-center justify-between p-2">
           <div className="mr-2 flex min-w-0 shrink grow gap-2 text-primary">