wrap the create cloud component inside sidebar when rendering

Author: dantovska

redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx

@@ -9,6 +9,7 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { sendEventTelemetry } from 'uiSrc/telemetry'
 import { HELP_LINKS } from 'uiSrc/pages/home/constants'
 import * as appFeaturesSlice from 'uiSrc/slices/app/features'
+import { SideBar } from 'uiSrc/components/base/layout/sidebar'
 import CreateCloud from './CreateCloud'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -37,15 +38,17 @@ beforeEach(() => {
   store.clearActions()
 })
 
+const sideBarWithCreateCloud = <SideBar isExpanded={false}><CreateCloud /></SideBar>
+
 describe('CreateCloud', () => {
   it('should render', () => {
-    expect(render(<CreateCloud />)).toBeTruthy()
+    expect(render(sideBarWithCreateCloud)).toBeTruthy()
   })
 
   it('should call proper actions on click cloud button', () => {
-    const { container } = render(<CreateCloud />)
+    const { container } = render(sideBarWithCreateCloud)
     const createCloudLink = container.querySelector(
-      '[data-test-subj="create-cloud-nav-link"]',
+      '[data-testid="create-cloud-sidebar-item"]',
     )
 
     fireEvent.click(createCloudLink as Element)
@@ -69,9 +72,9 @@ describe('CreateCloud', () => {
         flag: true,
       },
     })
-    const { container } = render(<CreateCloud />)
+    const { container } = render(sideBarWithCreateCloud)
     const createCloudLink = container.querySelector(
-      '[data-test-subj="create-cloud-nav-link"]',
+      '[data-testid="create-cloud-sidebar-item"]',
     )
 
     fireEvent.click(createCloudLink as Element)
@@ -86,7 +89,10 @@ describe('CreateCloud', () => {
 
   it('should not render if cloud ads feature flag is disabled', () => {
     mockFeatureFlags(false)
-    const { container } = render(<CreateCloud />)
-    expect(container).toBeEmptyDOMElement()
+    const { container } = render(sideBarWithCreateCloud)
+    const createCloudLink = container.querySelector(
+      '[data-testid="create-cloud-db-link"]',
+    )
+    expect(createCloudLink).not.toBeInTheDocument()
   })
 })

redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx

@@ -34,6 +34,7 @@ const CreateCloud = () => {
               campaign: 'navigation_menu',
             })}
             style={{ marginInline: 'auto', backgroundColor: 'transparent' }}
+            data-testid="create-cloud-db-link"
           >
             <SideBarItem
               tooltipProps={{
@@ -47,8 +48,8 @@ const CreateCloud = () => {
                   action: OAuthSocialAction.Create,
                 })
               }}
-              data-test-subj="create-cloud-nav-link"
               style={{ marginInline: 'auto' }}
+              data-testid="create-cloud-sidebar-item"
             >
               <SideBarItemIcon
                 width="20px"