From 0caae40542478a7f57712484ba36aa9674f2e7da Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 13 Mar 2025 21:59:05 +0200 Subject: [PATCH 1/9] when add database called from the database list - open the oauth social dialog --- src/extension.ts | 3 +++ src/utils/handleMessage.ts | 2 +- src/webviews/src/constants/vscode/vscode.ts | 1 + src/webviews/src/index.tsx | 7 +++++++ src/webviews/src/interfaces/vscode/api.ts | 4 +++- 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index 4df929aa..da048bc1 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -88,6 +88,9 @@ export async function activate(context: vscode.ExtensionContext) { viewId: ViewId.AddDatabase, handleMessage: (message) => handleMessage(message), message: args, + }).postMessage({ + action: 'OpenOAuthSsoDialog', + data: { source: args?.source, ssoFlow: args?.ssoFlow }, }) }), diff --git a/src/utils/handleMessage.ts b/src/utils/handleMessage.ts index 7969f4a4..c6328275 100644 --- a/src/utils/handleMessage.ts +++ b/src/utils/handleMessage.ts @@ -43,7 +43,7 @@ export const handleMessage = async (message: any = {}) => { await setUIStorageField('ssoFlow', message.data?.ssoFlow) } - vscode.commands.executeCommand('RedisForVSCode.addDatabase') + vscode.commands.executeCommand('RedisForVSCode.addDatabase', message.data) break case 'CloseAddDatabase': console.debug('RedisForVSCode.addDatabaseClose, ', message.data) diff --git a/src/webviews/src/constants/vscode/vscode.ts b/src/webviews/src/constants/vscode/vscode.ts index e22e18d5..f9480793 100644 --- a/src/webviews/src/constants/vscode/vscode.ts +++ b/src/webviews/src/constants/vscode/vscode.ts @@ -32,6 +32,7 @@ export enum VscodeMessageAction { OAuthCallback = 'OAuthCallback', RefreshDatabases = 'RefreshDatabases', OpenExternalUrl = 'OpenExternalUrl', + OpenOAuthSsoDialog = 'OpenOAuthSsoDialog', } export enum VscodeStateItem { diff --git a/src/webviews/src/index.tsx b/src/webviews/src/index.tsx index be3c2789..8335e5ff 100644 --- a/src/webviews/src/index.tsx +++ b/src/webviews/src/index.tsx @@ -7,6 +7,7 @@ import { fetchEditedDatabase, fetchCerts, useDatabasesStore, + useOAuthStore, } from 'uiSrc/store' import { Config } from 'uiSrc/modules' import { AppRoutes } from 'uiSrc/Routes' @@ -88,6 +89,12 @@ document.addEventListener('DOMContentLoaded', () => { case VscodeMessageAction.OAuthCallback: processOauthCallback(message.data as CloudAuthResponse) break + case VscodeMessageAction.OpenOAuthSsoDialog: + if (message.data && message.data.source) { + useOAuthStore.getState().setSSOFlow(message.data.ssoFlow) + useOAuthStore.getState().setSocialDialogState(message.data.source) + } + break default: break } diff --git a/src/webviews/src/interfaces/vscode/api.ts b/src/webviews/src/interfaces/vscode/api.ts index 3a173759..2033ab56 100644 --- a/src/webviews/src/interfaces/vscode/api.ts +++ b/src/webviews/src/interfaces/vscode/api.ts @@ -1,4 +1,4 @@ -import { AllKeyTypes, KeyTypes, OAuthSocialAction, OAuthStrategy, SelectedKeyActionType, VscodeMessageAction } from 'uiSrc/constants' +import { AllKeyTypes, KeyTypes, OAuthSocialAction, OAuthSocialSource, OAuthStrategy, SelectedKeyActionType, VscodeMessageAction } from 'uiSrc/constants' import { Database } from 'uiSrc/store' import { AppInfoStore, GetAppSettingsResponse } from 'uiSrc/store/hooks/use-app-info-store/interface' import { CloudAuthResponse } from 'uiSrc/modules/oauth/interfaces' @@ -63,9 +63,11 @@ export interface DatabaseAction { action: VscodeMessageAction.RefreshDatabases | VscodeMessageAction.CloseAddDatabase | VscodeMessageAction.OpenAddDatabase + | VscodeMessageAction.OpenOAuthSsoDialog data?: { database?: Database ssoFlow?: OAuthSocialAction + source?: OAuthSocialSource } } export interface CliAction { From a1744e05c975bfc72596b34e3e431d6f1f6e7dbe Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 13 Mar 2025 22:00:13 +0200 Subject: [PATCH 2/9] close the panel when job has succesfully finished: todo: when not succesfully finished? when one of the modals closed with X button? --- .../oauth-create-free-db/OAuthCreateFreeDb.tsx | 1 + .../src/modules/oauth/oauth-jobs/OAuthJobs.tsx | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.tsx b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.tsx index 86961091..8dff2ba9 100644 --- a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.tsx +++ b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.tsx @@ -32,6 +32,7 @@ const OAuthCreateFreeDb = ({ source, compressed }: Props) => { action: VscodeMessageAction.OpenAddDatabase, data: { ssoFlow: OAuthSocialAction.Create, + source, }, }) diff --git a/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx b/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx index c4d80780..1d8c8280 100644 --- a/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx +++ b/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx @@ -2,7 +2,7 @@ import { useEffect } from 'react' import { get } from 'lodash' import { useShallow } from 'zustand/react/shallow' -import { CloudJobStatus, CloudJobName, ApiStatusCode, StorageItem, CustomErrorCodes, CloudJobStep, VscodeMessageAction } from 'uiSrc/constants' +import { CloudJobStatus, CloudJobName, ApiStatusCode, StorageItem, CustomErrorCodes, CloudJobStep, VscodeMessageAction, OAuthSocialSource } from 'uiSrc/constants' import { parseCustomError, TelemetryEvent, sendEventTelemetry, getApiErrorMessage } from 'uiSrc/utils' import { showInfinityToast, removeInfinityToast, showErrorInfinityToast } from 'uiSrc/utils/notifications/toasts' import { localStorageService, vscodeApi } from 'uiSrc/services' @@ -21,6 +21,7 @@ const OAuthJobs = () => { setSSOFlow, setJob, setSocialDialogState, + source, } = useOAuthStore(useShallow((state) => ({ status: state.job?.status, jobName: state.job?.name, @@ -31,6 +32,7 @@ const OAuthJobs = () => { setSSOFlow: state.setSSOFlow, setJob: state.setJob, setSocialDialogState: state.setSocialDialogState, + source: state.source, }))) const onConnect = () => { @@ -39,6 +41,14 @@ const OAuthJobs = () => { }) } + const closeAddDatabasePanel = () => { + setTimeout(() => { + vscodeApi.postMessage({ + action: VscodeMessageAction.CloseAddDatabase, + }) + }, 2000) + } + useEffect(() => { switch (status) { case CloudJobStatus.Running: @@ -60,6 +70,9 @@ const OAuthJobs = () => { localStorageService.remove(StorageItem.OAuthJobId) vscodeApi.postMessage({ action: VscodeMessageAction.RefreshDatabases }) + if (source === OAuthSocialSource.DatabasesList) { + closeAddDatabasePanel() + } break case CloudJobStatus.Failed: From 75dc2cf6d98ce9cc54c9b8a0e7da0f387d1afeb8 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 14 Mar 2025 09:42:35 +0200 Subject: [PATCH 3/9] close modal on success create db X button clicked --- .../src/modules/oauth/oauth-jobs/OAuthJobs.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx b/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx index 1d8c8280..85f35e3f 100644 --- a/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx +++ b/src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx @@ -42,11 +42,11 @@ const OAuthJobs = () => { } const closeAddDatabasePanel = () => { - setTimeout(() => { + if (source === OAuthSocialSource.DatabasesList) { vscodeApi.postMessage({ action: VscodeMessageAction.CloseAddDatabase, }) - }, 2000) + } } useEffect(() => { @@ -59,7 +59,10 @@ const OAuthJobs = () => { case CloudJobStatus.Finished: - showInfinityToast(INFINITE_MESSAGES.SUCCESS_CREATE_DB(jobName, onConnect)?.Inner) + showInfinityToast(INFINITE_MESSAGES.SUCCESS_CREATE_DB( + jobName, onConnect)?.Inner, + { onClose: closeAddDatabasePanel }, + ) setJob({ id: '', @@ -70,9 +73,6 @@ const OAuthJobs = () => { localStorageService.remove(StorageItem.OAuthJobId) vscodeApi.postMessage({ action: VscodeMessageAction.RefreshDatabases }) - if (source === OAuthSocialSource.DatabasesList) { - closeAddDatabasePanel() - } break case CloudJobStatus.Failed: From 819557a892d1fc6a4ac1737bf985aed92245af0d Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Mon, 17 Mar 2025 16:33:27 +0200 Subject: [PATCH 4/9] move the check for sso dialog open indication in extensions.ts and post message only if both ssoFlow and source are set --- src/extension.ts | 12 ++++++++---- src/webviews/src/index.tsx | 6 ++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index da048bc1..d1cc5c5c 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -81,17 +81,21 @@ export async function activate(context: vscode.ExtensionContext) { }), vscode.commands.registerCommand('RedisForVSCode.addDatabase', (args) => { - WebviewPanel.getInstance({ + const panel = WebviewPanel.getInstance({ context, route: 'main/add_database', title: vscode.l10n.t('Redis for VS Code - Add Database connection'), viewId: ViewId.AddDatabase, handleMessage: (message) => handleMessage(message), message: args, - }).postMessage({ - action: 'OpenOAuthSsoDialog', - data: { source: args?.source, ssoFlow: args?.ssoFlow }, }) + + if (args?.ssoFlow && args?.source) { + panel.postMessage({ + action: 'OpenOAuthSsoDialog', + data: { source: args?.source, ssoFlow: args?.ssoFlow }, + }) + } }), vscode.commands.registerCommand('RedisForVSCode.openSettings', (args) => { diff --git a/src/webviews/src/index.tsx b/src/webviews/src/index.tsx index 8335e5ff..69d0132f 100644 --- a/src/webviews/src/index.tsx +++ b/src/webviews/src/index.tsx @@ -90,10 +90,8 @@ document.addEventListener('DOMContentLoaded', () => { processOauthCallback(message.data as CloudAuthResponse) break case VscodeMessageAction.OpenOAuthSsoDialog: - if (message.data && message.data.source) { - useOAuthStore.getState().setSSOFlow(message.data.ssoFlow) - useOAuthStore.getState().setSocialDialogState(message.data.source) - } + useOAuthStore.getState().setSSOFlow(message.data?.ssoFlow) + useOAuthStore.getState().setSocialDialogState(message.data?.source || null) break default: break From e489714b5a041d40d5672e4b10e3c48a7be26325 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Mon, 17 Mar 2025 16:45:02 +0200 Subject: [PATCH 5/9] add unit test for opening the Add Database page and the social modal on compressed button create clicked --- .../OAuthCreateFreeDb.spec.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx index 5d60204d..326cfcda 100644 --- a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx +++ b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx @@ -1,12 +1,14 @@ import React from 'react' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/utils' import * as utils from 'uiSrc/utils' -import { OAuthSocialSource } from 'uiSrc/constants' +import { OAuthSocialAction, OAuthSocialSource, VscodeMessageAction } from 'uiSrc/constants' import { initialOAuthState, useOAuthStore } from 'uiSrc/store' +import { vscodeApi } from 'uiSrc/services' import { cleanup, fireEvent, render } from 'testSrc/helpers' import OAuthCreateFreeDb from './OAuthCreateFreeDb' vi.spyOn(utils, 'sendEventTelemetry') +vi.spyOn(vscodeApi, 'postMessage') beforeEach(() => { useOAuthStore.setState({ @@ -35,4 +37,21 @@ describe('OAuthConnectFreeDb', () => { }, }) }) + + it('should open page and oauth sso modal compressed button is clicked', () => { + const { queryByTestId } = render() + + const compressedCreateBtn = queryByTestId('create-free-db-btn') + expect(compressedCreateBtn).toBeInTheDocument() + + fireEvent.click(compressedCreateBtn as HTMLButtonElement) + + expect(vscodeApi.postMessage).toBeCalledWith({ + action: VscodeMessageAction.OpenAddDatabase, + data: { + ssoFlow: OAuthSocialAction.Create, + source: OAuthSocialSource.DatabasesList, + }, + }) + }) }) From bd48ea3ba792b52dc7e5c6d01d22131e718d74cd Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Mon, 17 Mar 2025 17:56:28 +0200 Subject: [PATCH 6/9] add another check for ssoFlow and source before changing the state --- src/webviews/src/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/webviews/src/index.tsx b/src/webviews/src/index.tsx index 69d0132f..80d65a18 100644 --- a/src/webviews/src/index.tsx +++ b/src/webviews/src/index.tsx @@ -90,8 +90,12 @@ document.addEventListener('DOMContentLoaded', () => { processOauthCallback(message.data as CloudAuthResponse) break case VscodeMessageAction.OpenOAuthSsoDialog: - useOAuthStore.getState().setSSOFlow(message.data?.ssoFlow) - useOAuthStore.getState().setSocialDialogState(message.data?.source || null) + const { source, ssoFlow } = message.data ?? {} + if (ssoFlow && source) { + const state = useOAuthStore.getState() + state.setSSOFlow(ssoFlow) + state.setSocialDialogState(source) + } break default: break From 0bad76d8bac3fa44cc07f91f6fa60c0df7f8e5ca Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Tue, 18 Mar 2025 10:17:46 +0200 Subject: [PATCH 7/9] remove the check, as the params are checked in the OpenOAuthSsoDialog action anyway --- src/extension.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index d1cc5c5c..da048bc1 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -81,21 +81,17 @@ export async function activate(context: vscode.ExtensionContext) { }), vscode.commands.registerCommand('RedisForVSCode.addDatabase', (args) => { - const panel = WebviewPanel.getInstance({ + WebviewPanel.getInstance({ context, route: 'main/add_database', title: vscode.l10n.t('Redis for VS Code - Add Database connection'), viewId: ViewId.AddDatabase, handleMessage: (message) => handleMessage(message), message: args, + }).postMessage({ + action: 'OpenOAuthSsoDialog', + data: { source: args?.source, ssoFlow: args?.ssoFlow }, }) - - if (args?.ssoFlow && args?.source) { - panel.postMessage({ - action: 'OpenOAuthSsoDialog', - data: { source: args?.source, ssoFlow: args?.ssoFlow }, - }) - } }), vscode.commands.registerCommand('RedisForVSCode.openSettings', (args) => { From 1ec013fb5ead798411aa855d9a93fe5f2767b5d8 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Tue, 18 Mar 2025 11:32:13 +0200 Subject: [PATCH 8/9] add one more test case for the non compressed case; ehnahce / update existing ones --- .../OAuthCreateFreeDb.spec.tsx | 37 ++++++++++++++++--- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx index 326cfcda..85916ee4 100644 --- a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx +++ b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx @@ -4,7 +4,7 @@ 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 } from 'testSrc/helpers' +import { cleanup, fireEvent, render, waitFor } from 'testSrc/helpers' import OAuthCreateFreeDb from './OAuthCreateFreeDb' vi.spyOn(utils, 'sendEventTelemetry') @@ -13,7 +13,8 @@ vi.spyOn(vscodeApi, 'postMessage') beforeEach(() => { useOAuthStore.setState({ ...initialOAuthState, - source: 'source', + source: null, + ssoFlow: undefined, }) cleanup() vi.resetAllMocks() @@ -21,24 +22,24 @@ beforeEach(() => { describe('OAuthConnectFreeDb', () => { it('should render if there is a free cloud db', () => { - const { queryByTestId } = render() + const { queryByTestId } = render() expect(queryByTestId('create-free-db-btn')).toBeInTheDocument() }) it('should send telemetry after click on connect btn', async () => { - const { queryByTestId } = render() + const { queryByTestId } = render() fireEvent.click(queryByTestId('create-free-db-btn') as HTMLButtonElement) expect(sendEventTelemetry).toBeCalledWith({ event: TelemetryEvent.CLOUD_FREE_DATABASE_CLICKED, eventData: { - source: OAuthSocialSource.ListOfDatabases, + source: OAuthSocialSource.DatabasesList, }, }) }) - it('should open page and oauth sso modal compressed button is clicked', () => { + it('should open add database page and oauth sso modal when compressed button is clicked', () => { const { queryByTestId } = render() const compressedCreateBtn = queryByTestId('create-free-db-btn') @@ -53,5 +54,29 @@ describe('OAuthConnectFreeDb', () => { source: OAuthSocialSource.DatabasesList, }, }) + + 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() + }) + }) + + it('should open auth sso modal when non compressed button is clicked', () => { + const { queryByTestId } = render() + + 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()) }) }) From 6acefbf788c12ac063d8092626e48d1c7a64c7d8 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Tue, 18 Mar 2025 17:36:11 +0200 Subject: [PATCH 9/9] 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 --- .../OAuthCreateFreeDb.spec.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx b/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx index 85916ee4..7cc35dba 100644 --- a/src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx +++ b/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() 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() + render() 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() + render() + + 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() + // component is initialized in the document, but the state is not updated yet to show the dialog + render() + 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() }) })