RI-7275 Create e2e tests for "Create Index" flow on "Vector Search" page

redisinsight/ui/src/pages/vector-search/create-index/steps/AddDataStep.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
 import { AddDataStep } from './AddDataStep'
-import { selectedBikesIndexFields } from './config'
+import { selectedBikesIndexFields } from './data'
 import {
   SearchIndexType,
   SampleDataType,

redisinsight/ui/src/pages/vector-search/create-index/steps/AddDataStep.tsx

@@ -10,13 +10,8 @@ import {
   SmallSelectionBox,
   StyledBoxSelectionGroup,
 } from './styles'
-import {
-  indexDataContent,
-  indexType,
-  sampleDatasetOptions,
-  selectedBikesIndexFields,
-  selectedMoviesIndexFields,
-} from './config'
+import { indexDataContent, indexType, sampleDatasetOptions } from './config'
+import { selectedBikesIndexFields, selectedMoviesIndexFields } from './data'
 import {
   IStepComponent,
   PresetDataType,

redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.spec.tsx

@@ -3,14 +3,14 @@ import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { CreateIndexStep } from './CreateIndexStep'
-import { bikesIndexFieldsBoxes, selectedBikesIndexFields } from './config'
 import {
   SearchIndexType,
   SampleDataType,
   SampleDataContent,
   PresetDataType,
   StepComponentProps,
 } from '../types'
+import { bikesIndexFieldsBoxes, selectedBikesIndexFields } from './data'
 
 // Mock the telemetry module, so we don't send actual telemetry data during tests
 jest.mock('uiSrc/telemetry', () => ({

redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx

@@ -15,7 +15,7 @@ import { TextInput } from 'uiSrc/components/base/inputs'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { PlayFilledIcon } from 'uiSrc/components/base/icons'
-import { bikesIndexFieldsBoxes, moviesIndexFieldsBoxes } from './config'
+import { bikesIndexFieldsBoxes, moviesIndexFieldsBoxes } from './data'
 import { CreateIndexStepScreenWrapper, SearchInputWrapper } from './styles'
 import { PreviewCommandDrawer } from './PreviewCommandDrawer'
 import { IStepComponent, SampleDataContent, StepComponentProps } from '../types'

redisinsight/ui/src/pages/vector-search/create-index/steps/config.tsx

@@ -1,18 +1,16 @@
 import React from 'react'
-import { FieldTypes } from 'uiSrc/pages/browser/components/create-redisearch-index/constants'
-import { VectorSearchBox } from 'uiSrc/components/new-index/create-index-step/field-box/types'
 import { BoxSelectionOption } from 'uiSrc/components/new-index/selection-box/SelectionBox'
 import {
   BikeIcon,
   PopcornIcon,
   VectorSearchIcon,
   WandIcon,
 } from 'uiSrc/components/base/icons'
-
-import { SearchIndexType, SampleDataType, SampleDataContent } from '../types'
 import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 import { Row } from 'uiSrc/components/base/layout/flex'
 
+import { SearchIndexType, SampleDataType, SampleDataContent } from '../types'
+
 // ** Add data step */
 
 export const indexType: BoxSelectionOption<SearchIndexType>[] = [
@@ -63,103 +61,3 @@ export const indexDataContent: BoxSelectionOption<SampleDataContent>[] = [
     icon: PopcornIcon,
   },
 ]
-
-// ** Create index step */
-
-export const bikesIndexFieldsBoxes: VectorSearchBox[] = [
-  {
-    value: 'model',
-    label: 'model',
-    text: 'Product model',
-    tag: FieldTypes.TEXT,
-    disabled: true,
-  },
-  {
-    value: 'brand',
-    label: 'brand',
-    text: 'Product brand',
-    tag: FieldTypes.TEXT,
-    disabled: true,
-  },
-  {
-    value: 'price',
-    label: 'price',
-    text: 'Product price',
-    tag: FieldTypes.NUMERIC,
-    disabled: true,
-  },
-  {
-    value: 'type',
-    label: 'type',
-    text: 'Product type',
-    tag: FieldTypes.TAG,
-    disabled: true,
-  },
-  {
-    value: 'material',
-    label: 'material',
-    text: 'Product material',
-    tag: FieldTypes.TAG,
-    disabled: true,
-  },
-  {
-    value: 'weight',
-    label: 'weight',
-    text: 'Product weight',
-    tag: FieldTypes.NUMERIC,
-    disabled: true,
-  },
-  {
-    value: 'description_embeddings',
-    label: 'description_embeddings',
-    text: 'Product embedding vector',
-    tag: FieldTypes.VECTOR,
-    disabled: true,
-  },
-]
-
-export const moviesIndexFieldsBoxes: VectorSearchBox[] = [
-  {
-    value: 'title',
-    label: 'title',
-    text: 'Movie title',
-    tag: FieldTypes.TEXT,
-    disabled: true,
-  },
-  {
-    value: 'genres',
-    label: 'genres',
-    text: 'Movie genre',
-    tag: FieldTypes.TAG,
-    disabled: true,
-  },
-  {
-    value: 'plot',
-    label: 'plot',
-    text: 'Movie plot',
-    tag: FieldTypes.TEXT,
-    disabled: true,
-  },
-  {
-    value: 'year',
-    label: 'year',
-    text: 'Movie year',
-    tag: FieldTypes.NUMERIC,
-    disabled: true,
-  },
-  {
-    value: 'embedding',
-    label: 'embedding',
-    text: 'Movie embedding vector',
-    tag: FieldTypes.VECTOR,
-    disabled: true,
-  },
-]
-
-export const selectedBikesIndexFields = bikesIndexFieldsBoxes.map(
-  (field) => field.value,
-)
-
-export const selectedMoviesIndexFields = moviesIndexFieldsBoxes.map(
-  (field) => field.value,
-)

redisinsight/ui/src/pages/vector-search/create-index/steps/data.ts

@@ -0,0 +1,100 @@
+import { FieldTypes } from 'uiSrc/pages/browser/components/create-redisearch-index/constants'
+import { VectorSearchBox } from 'uiSrc/components/new-index/create-index-step/field-box/types'
+
+export const bikesIndexFieldsBoxes: VectorSearchBox[] = [
+  {
+    value: 'model',
+    label: 'model',
+    text: 'Product model',
+    tag: FieldTypes.TEXT,
+    disabled: true,
+  },
+  {
+    value: 'brand',
+    label: 'brand',
+    text: 'Product brand',
+    tag: FieldTypes.TEXT,
+    disabled: true,
+  },
+  {
+    value: 'price',
+    label: 'price',
+    text: 'Product price',
+    tag: FieldTypes.NUMERIC,
+    disabled: true,
+  },
+  {
+    value: 'type',
+    label: 'type',
+    text: 'Product type',
+    tag: FieldTypes.TAG,
+    disabled: true,
+  },
+  {
+    value: 'material',
+    label: 'material',
+    text: 'Product material',
+    tag: FieldTypes.TAG,
+    disabled: true,
+  },
+  {
+    value: 'weight',
+    label: 'weight',
+    text: 'Product weight',
+    tag: FieldTypes.NUMERIC,
+    disabled: true,
+  },
+  {
+    value: 'description_embeddings',
+    label: 'description_embeddings',
+    text: 'Product embedding vector',
+    tag: FieldTypes.VECTOR,
+    disabled: true,
+  },
+]
+
+export const selectedBikesIndexFields = bikesIndexFieldsBoxes.map(
+  (field) => field.value,
+)
+
+export const moviesIndexFieldsBoxes: VectorSearchBox[] = [
+  {
+    value: 'title',
+    label: 'title',
+    text: 'Movie title',
+    tag: FieldTypes.TEXT,
+    disabled: true,
+  },
+  {
+    value: 'genres',
+    label: 'genres',
+    text: 'Movie genre',
+    tag: FieldTypes.TAG,
+    disabled: true,
+  },
+  {
+    value: 'plot',
+    label: 'plot',
+    text: 'Movie plot',
+    tag: FieldTypes.TEXT,
+    disabled: true,
+  },
+  {
+    value: 'year',
+    label: 'year',
+    text: 'Movie year',
+    tag: FieldTypes.NUMERIC,
+    disabled: true,
+  },
+  {
+    value: 'embedding',
+    label: 'embedding',
+    text: 'Movie embedding vector',
+    tag: FieldTypes.VECTOR,
+    disabled: true,
+  },
+]
+
+export const selectedMoviesIndexFields = moviesIndexFieldsBoxes.map(
+  (field) => field.value,
+)

redisinsight/ui/src/pages/vector-search/create-index/steps/index.ts

@@ -3,4 +3,5 @@ import { AddDataStep } from './AddDataStep'
 import { CreateIndexStep } from './CreateIndexStep'
 
 export * from './config'
+export * from './data'
 export const stepContents = [SelectDatabaseStep, AddDataStep, CreateIndexStep]

tests/playwright/package.json

@@ -39,7 +39,14 @@
     "dotenv": "^16.4.7",
     "dotenv-cli": "^8.0.0",
     "fs-extra": "^11.3.0",
+    "module-alias": "^2.2.3",
     "node-color-log": "^12.0.1",
     "sqlite3": "^5.1.7"
+  },
+  "_moduleAliases": {
+    "@redislabsdev/redis-ui-icons": "../../node_modules/@redis-ui/icons",
+    "@redislabsdev/redis-ui-styles": "../../node_modules/@redis-ui/styles",
+    "@redislabsdev/redis-ui-components": "../../node_modules/@redis-ui/components",
+    "@redislabsdev/redis-ui-table": "../../node_modules/@redis-ui/table"
   }
 }

tests/playwright/pageObjects/components/common/toast.ts

@@ -3,6 +3,8 @@ import { BasePage } from '../../base-page'
 import { ToastSelectors } from '../../../selectors'
 
 export class Toast extends BasePage {
+    // Deprecated - use new toast selectors below
+    // TODO: Remove deprecated selectors and usages after migrating all toasts
     public readonly toastHeader: Locator
 
     public readonly toastBody: Locator
@@ -17,6 +19,15 @@ export class Toast extends BasePage {
 
     public readonly toastCancelBtn: Locator
 
+    // New toast selectors
+    public readonly toastContainer: Locator
+
+    public readonly toastMessage: Locator
+
+    public readonly toastDescription: Locator
+
+    public readonly toastActionButton: Locator
+
     constructor(page: Page) {
         super(page)
         this.toastHeader = page.locator(ToastSelectors.toastHeader)
@@ -26,13 +37,19 @@ export class Toast extends BasePage {
         this.toastCloseButton = page.locator(ToastSelectors.toastCloseButton)
         this.toastSubmitBtn = page.getByTestId(ToastSelectors.toastSubmitBtn)
         this.toastCancelBtn = page.getByTestId(ToastSelectors.toastCancelBtn)
+
+        // New toast selectors
+        this.toastContainer = page.locator(ToastSelectors.toastContainer)
+        this.toastMessage = page.locator(ToastSelectors.toastMessage)
+        this.toastDescription = page.locator(ToastSelectors.toastDescription)
+        this.toastActionButton = page.locator(ToastSelectors.toastActionButton)
     }
 
     async isCloseButtonVisible(): Promise<boolean> {
         return this.isVisible(ToastSelectors.toastCloseButton)
     }
 
     async closeToast(): Promise<void> {
-        await this.toastCloseButton.click()
+        await this.toastActionButton.click()
     }
 }