test(e2e): added test for the vector search onboarding screen

re #RI-7432 #RI-7275

Author: valkirilov

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -296,7 +296,10 @@ const BrowserPage = () => {
     (arePanelsCollapsed && isRightPanelOpen)
 
   return (
-    <div className={`browserPage ${styles.container}`}>
+    <div
+      className={`browserPage ${styles.container}`}
+      data-testid="browser-page"
+    >
       {arePanelsCollapsed && isRightPanelOpen && !isBrowserFullScreen && (
         <EmptyButton
           icon={ArrowLeftIcon}

tests/playwright/pageObjects/browser-page.ts

@@ -9,7 +9,10 @@ import { AddElementInList } from '../helpers/constants'
 
 export class BrowserPage extends BasePage {
     private toast: Toast
+
     // CSS Selectors
+    public readonly browserPage: Locator
+    public readonly browserTab: Locator
     public readonly cssSelectorGrid: Locator
     public readonly cssSelectorRows: Locator
     public readonly cssSelectorKey: Locator
@@ -274,6 +277,8 @@ export class BrowserPage extends BasePage {
         this.toast = new Toast(page)
 
         // CSS Selectors
+        this.browserTab = page.getByRole('tab', { name: 'Browse' })
+        this.browserPage = page.getByTestId('browser-page')
         this.cssSelectorGrid = page.locator('[aria-label="grid"]')
         this.cssSelectorRows = page.locator('[aria-label="row"]')
         this.cssSelectorKey = page.locator('[data-testid^="key-"]')
@@ -626,6 +631,11 @@ export class BrowserPage extends BasePage {
             page.getByTestId(`ttl-${keyName}`)
     }
 
+    async navigateToBrowserPage(): Promise<void> {
+        await this.browserTab.getByRole('paragraph').click()
+        await this.waitForLocatorVisible(this.browserPage)
+    }
+
     async commonAddNewKey(keyName: string, TTL?: string): Promise<void> {
         await this.waitForLocatorNotVisible(this.progressLine)
         await this.waitForLocatorNotVisible(this.loader)

tests/playwright/pageObjects/pages/vector-search/vector-search-page.ts

@@ -21,6 +21,12 @@ export class VectorSearchPage extends BasePage {
     public readonly rqeNotAvailableCard: Locator
     public readonly createRedisCloudDatabaseButton: Locator
 
+    // ONBOARDING
+    public readonly onboardingContainer: Locator
+    public readonly onboardingDismissButton: Locator
+    public readonly onboardingGetStartedButton: Locator
+    public readonly onboardingSkipButton: Locator
+
     // EDITOR
     public readonly editorContainer: Locator
     public readonly editorViewLine: Locator
@@ -80,6 +86,24 @@ export class VectorSearchPage extends BasePage {
                 name: 'Get Started For Free',
             })
 
+        // ONBOARDING
+        this.onboardingContainer = page.getByTestId('vector-search-onboarding')
+        this.onboardingDismissButton = this.onboardingContainer.getByTestId(
+            'vector-search-onboarding--dismiss-button',
+        )
+        this.onboardingGetStartedButton = this.onboardingContainer.getByRole(
+            'button',
+            {
+                name: 'Explore vector search',
+            },
+        )
+        this.onboardingSkipButton = this.onboardingContainer.getByRole(
+            'button',
+            {
+                name: 'Skip for now',
+            },
+        )
+
         // EDITOR
         this.editorContainer = page.getByTestId('vector-search-query-editor')
         this.editorViewLine = this.editorContainer.locator('.view-line')
@@ -145,7 +169,12 @@ export class VectorSearchPage extends BasePage {
         }, forceOnboarding)
 
         await this.searchTab.getByRole('paragraph').click()
-        await this.waitForLocatorVisible(this.vectorSearchPage)
+
+        if (forceOnboarding) {
+            await this.waitForLocatorVisible(this.onboardingContainer)
+        } else {
+            await this.waitForLocatorVisible(this.vectorSearchPage)
+        }
     }
 
     async navigateToCreateIndexPage(): Promise<void> {

tests/playwright/tests/vector-search/onboarding.spec.ts

@@ -0,0 +1,79 @@
+import { VectorSearchPage } from '../../pageObjects/pages/vector-search/vector-search-page'
+import { test, expect } from '../../fixtures/test'
+import {
+    addStandaloneInstanceAndNavigateToIt,
+    navigateToStandaloneInstance,
+} from '../../helpers/utils'
+import { CreateIndexPage } from '../../pageObjects/pages/vector-search/create-index-page'
+import { ossStandaloneV6Config } from '../../helpers/conf'
+import { BrowserPage } from 'tests/playwright/pageObjects'
+
+test.describe('Vector Search - Onboarding', () => {
+    let searchPage: VectorSearchPage
+    let createIndexPage: CreateIndexPage
+    let browserPage: BrowserPage
+    let cleanupInstance: () => Promise<void>
+
+    test.beforeEach(async ({ page, api: { databaseService } }) => {
+        searchPage = new VectorSearchPage(page)
+        createIndexPage = new CreateIndexPage(page)
+        browserPage = new BrowserPage(page)
+
+        cleanupInstance = await addStandaloneInstanceAndNavigateToIt(
+            page,
+            databaseService,
+            ossStandaloneV6Config,
+        )
+
+        await navigateToStandaloneInstance(page, ossStandaloneV6Config)
+        await searchPage.navigateToVectorSearchPage({ forceOnboarding: true })
+    })
+
+    test.afterEach(async () => {
+        await cleanupInstance()
+    })
+
+    test('should open "Create Index" flow when clicking on "Get started" button', async () => {
+        // Verify that commands results are empty
+        await searchPage.waitForLocatorVisible(searchPage.onboardingContainer)
+
+        // Click on "Get started" button
+        await searchPage.onboardingGetStartedButton.click()
+
+        // Verify that "Create index" flow is opened
+        await createIndexPage.verifyCreateIndexPageLoaded()
+    })
+
+    test('should dismiss onboarding when clicking on "Skip for now" button', async () => {
+        // Verify that onboarding screen is visible
+        await searchPage.waitForLocatorVisible(searchPage.onboardingContainer)
+
+        // Click on "Skip for now" button
+        await searchPage.onboardingSkipButton.click()
+
+        // Verify that onboarding screen is not visible
+        await searchPage.waitForLocatorVisible(searchPage.vectorSearchPage)
+    })
+
+    test('should dismiss onboarding when clicking on "X" button', async () => {
+        // Verify that onboarding screen is visible
+        await searchPage.waitForLocatorVisible(searchPage.onboardingContainer)
+
+        // Click on "X" button
+        await searchPage.onboardingDismissButton.click()
+    })
+
+    test('should not open the onboarding screen when it is already dismissed', async () => {
+        // Verify that onboarding screen is visible
+        await searchPage.waitForLocatorVisible(searchPage.onboardingContainer)
+
+        // Go to Browser page
+        await browserPage.navigateToBrowserPage()
+
+        // Navigate back to vector search page
+        await searchPage.navigateToVectorSearchPage()
+
+        // Verify that onboarding screen is not visible anymore
+        await searchPage.waitForLocatorVisible(searchPage.vectorSearchPage)
+    })
+})