when compressed button - add check for the data in the vscodeApi action; for the normal button - check the dialog content inside the document when clicked

Author: dantovska

src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx

@@ -4,8 +4,9 @@ import * as utils from 'uiSrc/utils'
 import { OAuthSocialAction, OAuthSocialSource, VscodeMessageAction } from 'uiSrc/constants'
 import { initialOAuthState, useOAuthStore } from 'uiSrc/store'
 import { vscodeApi } from 'uiSrc/services'
-import { cleanup, fireEvent, render, waitFor } from 'testSrc/helpers'
+import { cleanup, fireEvent, render, screen } from 'testSrc/helpers'
 import OAuthCreateFreeDb from './OAuthCreateFreeDb'
+import OAuthSsoDialog from '../oauth-sso-dialog'
 
 vi.spyOn(utils, 'sendEventTelemetry')
 vi.spyOn(vscodeApi, 'postMessage')
@@ -20,7 +21,7 @@ beforeEach(() => {
   vi.resetAllMocks()
 })
 
-describe('OAuthConnectFreeDb', () => {
+describe('OAuthCreateFreeDb', () => {
   it('should render if there is a free cloud db', () => {
     const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.AddDbForm}/>)
     expect(queryByTestId('create-free-db-btn')).toBeInTheDocument()
@@ -39,8 +40,9 @@ describe('OAuthConnectFreeDb', () => {
     })
   })
 
-  it('should open add database page and oauth sso modal when compressed button is clicked', () => {
+  it('should set the propper state variables when action is triggered with with valid ssoFlow and source', () => {
     const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.DatabasesList} compressed={true}/>)
+    render(<OAuthSsoDialog />)
 
     const compressedCreateBtn = queryByTestId('create-free-db-btn')
     expect(compressedCreateBtn).toBeInTheDocument()
@@ -54,29 +56,38 @@ describe('OAuthConnectFreeDb', () => {
         source: OAuthSocialSource.DatabasesList,
       },
     })
+  })
+
+  it('should set the propper state variables when action is triggered with source null', () => {
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={null} compressed={true}/>)
+    render(<OAuthSsoDialog />)
+
+    const compressedCreateBtn = queryByTestId('create-free-db-btn')
+    expect(compressedCreateBtn).toBeInTheDocument()
+
+    fireEvent.click(compressedCreateBtn as HTMLButtonElement)
 
-    const state = useOAuthStore.getState()
-    const socialDialog = queryByTestId('social-oauth-dialog')
-    waitFor(() => {
-      expect(state.ssoFlow).toEqual(OAuthSocialAction.Create)
-      expect(state.isOpenSocialDialog).toEqual(true)
-      expect(socialDialog).toBeInTheDocument()
+    expect(vscodeApi.postMessage).toBeCalledWith({
+      action: VscodeMessageAction.OpenAddDatabase,
+      data: {
+        ssoFlow: OAuthSocialAction.Create,
+        source: null,
+      },
     })
   })
 
-  it('should open auth sso modal when non compressed button is clicked', () => {
+  it('should open auth sso dialog when non compressed button is clicked', () => {
     const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.DatabasesList} compressed={false}/>)
 
+    // component is initialized in the document, but the state is not updated yet to show the dialog
+    render(<OAuthSsoDialog />)
+    expect(screen.queryByTestId('social-oauth-dialog')).not.toBeInTheDocument()
+
     const regularCreateBtn = queryByTestId('create-free-db-btn')
     expect(regularCreateBtn).toBeInTheDocument()
 
     fireEvent.click(regularCreateBtn as HTMLButtonElement)
 
-    const state = useOAuthStore.getState()
-    expect(state.ssoFlow).toEqual(OAuthSocialAction.Create)
-    expect(state.isOpenSocialDialog).toEqual(true)
-
-    const socialDialog = queryByTestId('social-oauth-dialog')
-    waitFor(() => expect(socialDialog).toBeInTheDocument())
+    expect(screen.queryByTestId('social-oauth-dialog')).toBeInTheDocument()
   })
 })