Skip to content

Commit f2984b7

Browse files
ArtemHoruzhenkoArtemHoruzhenko
authored
RI-7515: fix tests (#5033)
1 parent eaa0f36 commit f2984b7

File tree

4 files changed

+134
-104
lines changed

4 files changed

+134
-104
lines changed

‎redisinsight/ui/src/components/instance-header/InstanceHeader.spec.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import reactRouterDom from 'react-router-dom'
44
import { instance, mock } from 'ts-mockito'
55
import {
66
cleanup,
7-
userEvent,
7+
act,
88
fireEvent,
99
initialStateDefault,
1010
mockedStore,
@@ -195,7 +195,9 @@ describe('InstanceHeader', () => {
195195
store: mockStore(initialStoreState),
196196
})
197197

198-
await userEvent.click(screen.getByTestId('user-profile-btn'))
198+
await act(async () => {
199+
fireEvent.click(screen.getByTestId('user-profile-btn'))
200+
})
199201
await waitFor(() => {
200202
expect(
201203
screen.queryByTestId('user-profile-popover-content'),
@@ -232,7 +234,9 @@ describe('InstanceHeader', () => {
232234
store: mockStore(initialStoreState),
233235
})
234236

235-
await userEvent.click(screen.getByTestId('user-profile-btn'))
237+
await act(async () => {
238+
fireEvent.click(screen.getByTestId('user-profile-btn'))
239+
})
236240
await waitFor(() => {
237241
expect(
238242
screen.queryByTestId('user-profile-popover-content'),

‎redisinsight/ui/src/components/instance-header/components/user-profile/UserProfile.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ const UserProfile = () => {
1313
[FeatureFlags.cloudAds]: cloudAds,
1414
[FeatureFlags.cloudSso]: cloudSso,
1515
} = useSelector(appFeatureFlagsFeaturesSelector)
16-
return (
17-
<FlexItem style={{ marginLeft: 16 }}>
18-
<CloudUserProfile />
19-
</FlexItem>
20-
)
16+
2117
if (!envDependentFeature?.flag) {
2218
return (
2319
<FlexItem style={{ marginLeft: 16 }}>

‎redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx‎

Lines changed: 125 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import { Link } from 'uiSrc/components/base/link/Link'
2222
import { DownloadIcon, SignoutIcon } from '@redis-ui/icons'
2323
import { Menu } from 'uiSrc/components/base/layout/menu'
2424
import { ProfileIcon } from 'uiSrc/components/base/layout/profile-icon/ProfileIcon'
25+
import Loader from 'uiSrc/components/base/display/loader/Loader'
26+
import { OutsideClickDetector } from 'uiSrc/components/base/utils'
2527

2628
export interface UserProfileBadgeProps {
2729
'data-testid'?: string
@@ -106,115 +108,142 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
106108
const { accounts, currentAccountId, name } = data
107109

108110
return (
109-
<Menu>
110-
<Menu.Trigger withButton onClick={handleToggleProfile}>
111-
<ProfileIcon
112-
size="L"
113-
fullName={name}
114-
role="presentation"
115-
data-testid="user-profile-btn"
116-
style={{ cursor: 'pointer' }}
117-
/>
118-
</Menu.Trigger>
119-
<Menu.Content
120-
data-testid="user-profile-popover-content"
121-
style={{ minWidth: 330 }}
122-
>
123-
<FeatureFlagComponent
124-
name={FeatureFlags.envDependent}
125-
otherwise={
126-
<Menu.Content.Label text="Account" data-testid="profile-title" />
127-
}
128-
>
129-
<Menu.Content.Label
130-
text="Redis Cloud account"
131-
data-testid="profile-title"
132-
/>
133-
</FeatureFlagComponent>
134-
<Menu.Content.Separator />
135-
<div data-testid="user-profile-popover-accounts">
136-
{accounts?.map(({ name, id }) => (
137-
<Menu.Content.Item
111+
<OutsideClickDetector onOutsideClick={() => setIsProfileOpen(false)}>
112+
<div data-testid={dataTestId}>
113+
<Menu open={isProfileOpen}>
114+
<Menu.Trigger
115+
withButton
116+
onClick={handleToggleProfile}
117+
data-testid="user-profile-btn"
118+
>
119+
<ProfileIcon
120+
size="L"
121+
fullName={name}
138122
role="presentation"
139-
key={id}
140-
text={`${name} #${id}`}
141-
selected={id === currentAccountId}
142-
onClick={() => handleClickSelectAccount?.(id)}
143-
data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`}
123+
style={{ cursor: 'pointer' }}
144124
/>
145-
))}
146-
</div>
147-
<Menu.Content.Separator />
148-
<FeatureFlagComponent
149-
name={FeatureFlags.envDependent}
150-
otherwise={
151-
<>
152-
<Menu.Content.Item.Compose>
153-
<Menu.Content.Item.Text>
154-
<Link
155-
external
156-
color="text"
157-
href={riDesktopLink}
158-
data-testid="open-ri-desktop-link"
159-
variant="inline"
160-
>
161-
Open in Redis Insight Desktop version
162-
</Link>
163-
</Menu.Content.Item.Text>
164-
</Menu.Content.Item.Compose>
125+
</Menu.Trigger>
126+
<Menu.Content
127+
data-testid="user-profile-popover-content"
128+
style={{ minWidth: 330 }}
129+
>
130+
<FeatureFlagComponent
131+
name={FeatureFlags.envDependent}
132+
otherwise={
133+
<Menu.Content.Label
134+
text="Account"
135+
data-testid="profile-title"
136+
/>
137+
}
138+
>
139+
<Menu.Content.Label
140+
text="Redis Cloud account"
141+
data-testid="profile-title"
142+
/>
143+
</FeatureFlagComponent>
144+
<Menu.Content.Separator />
145+
<div data-testid="user-profile-popover-accounts">
146+
{accounts?.map(({ name, id }) => (
147+
<Menu.Content.Item.Compose
148+
role="presentation"
149+
key={id}
150+
selected={id === selectingAccountId}
151+
onClick={() => handleClickSelectAccount?.(id)}
152+
data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`}
153+
>
154+
<Menu.Content.Item.Text>
155+
{`${name} #${id}`}
156+
</Menu.Content.Item.Text>
157+
{id === selectingAccountId && (
158+
<Loader
159+
size="m"
160+
data-testid={`user-profile-selecting-account-${id}`}
161+
/>
162+
)}
163+
{id === currentAccountId && (
164+
<Menu.Content.Item.Check
165+
data-testid={`user-profile-selected-account-${id}`}
166+
/>
167+
)}
168+
</Menu.Content.Item.Compose>
169+
))}
170+
</div>
171+
<Menu.Content.Separator />
172+
<FeatureFlagComponent
173+
name={FeatureFlags.envDependent}
174+
otherwise={
175+
<>
176+
<Menu.Content.Item.Compose>
177+
<Menu.Content.Item.Text>
178+
<Link
179+
external
180+
color="text"
181+
href={riDesktopLink}
182+
data-testid="open-ri-desktop-link"
183+
variant="inline"
184+
>
185+
Open in Redis Insight Desktop version
186+
</Link>
187+
</Menu.Content.Item.Text>
188+
</Menu.Content.Item.Compose>
189+
<Menu.Content.Item.Compose>
190+
<Menu.Content.Item.Text>
191+
<Link
192+
external
193+
color="text"
194+
variant="inline"
195+
target="_blank"
196+
href={riConfig.app.smConsoleRedirect}
197+
data-testid="cloud-admin-console-link"
198+
>
199+
Back to Redis Cloud Admin console
200+
</Link>
201+
</Menu.Content.Item.Text>
202+
</Menu.Content.Item.Compose>
203+
</>
204+
}
205+
>
206+
<Menu.Content.Item
207+
role="presentation"
208+
subHead="Import Cloud Databases"
209+
text=""
210+
icon={DownloadIcon}
211+
onSelect={handleClickImport}
212+
data-testid="profile-import-cloud-databases"
213+
/>
165214
<Menu.Content.Item.Compose>
166215
<Menu.Content.Item.Text>
167216
<Link
168217
external
169218
color="text"
170219
variant="inline"
171220
target="_blank"
172-
href={riConfig.app.smConsoleRedirect}
173-
data-testid="cloud-admin-console-link"
221+
href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
222+
campaign: 'cloud_account',
223+
})}
224+
onClick={handleClickCloudAccount}
225+
data-testid="cloud-console-link"
174226
>
175-
Back to Redis Cloud Admin console
227+
Cloud Console:
228+
<span data-testid="account-full-name"> {name}</span>
176229
</Link>
177230
</Menu.Content.Item.Text>
178231
</Menu.Content.Item.Compose>
179-
</>
180-
}
181-
>
182-
<Menu.Content.Item
183-
role="presentation"
184-
subHead="Import Cloud Databases"
185-
icon={DownloadIcon}
186-
onSelect={handleClickImport}
187-
data-testid="profile-import-cloud-databases"
188-
/>
189-
<Menu.Content.Item.Compose>
190-
<Menu.Content.Item.Text>
191-
<Link
192-
external
193-
color="text"
194-
variant="inline"
195-
target="_blank"
196-
href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
197-
campaign: 'cloud_account',
198-
})}
199-
onClick={handleClickCloudAccount}
200-
data-testid="cloud-console-link"
201-
>
202-
Cloud Console: {name}
203-
</Link>
204-
</Menu.Content.Item.Text>
205-
</Menu.Content.Item.Compose>
206-
<Menu.Content.Separator />
207-
<Menu.Content.Item
208-
role="presentation"
209-
subHead="Logout"
210-
icon={SignoutIcon}
211-
onClick={handleClickLogout}
212-
data-testid="profile-logout"
213-
/>
214-
</FeatureFlagComponent>
215-
<Menu.Content.DropdownArrow />
216-
</Menu.Content>
217-
</Menu>
232+
<Menu.Content.Separator />
233+
<Menu.Content.Item
234+
role="presentation"
235+
subHead="Logout"
236+
text=""
237+
icon={SignoutIcon}
238+
onClick={handleClickLogout}
239+
data-testid="profile-logout"
240+
/>
241+
</FeatureFlagComponent>
242+
<Menu.Content.DropdownArrow />
243+
</Menu.Content>
244+
</Menu>
245+
</div>
246+
</OutsideClickDetector>
218247
)
219248
}
220249

‎redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ const OAuthUserProfile = (props: Props) => {
9090
handleClickCloudAccount={handleClickCloudAccount}
9191
handleClickSelectAccount={handleClickSelectAccount}
9292
data-testid="oauth-user-profile-badge"
93+
selectingAccountId={selectingAccountId}
9394
/>
9495
)
9596
}

0 commit comments

Comments
 (0)