@@ -21,11 +23,12 @@ export const Container: React.FC = (props) => {
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getStyles = (tokens: any) => {
+const getStyles = (tokens: any, step?: string) => {
return {
container: {
backgroundColor: tokens.BackgroundColor.Container,
minHeight: '100%',
+ maxHeight: step === STEPS.SEARCH ? '100%' : undefined,
display: 'flex',
justifyContent: 'center',
},
diff --git a/src/components/__tests__/ConnectInstitutionHeader-test.tsx b/src/components/__tests__/ConnectInstitutionHeader-test.tsx
new file mode 100644
index 0000000000..75a9603496
--- /dev/null
+++ b/src/components/__tests__/ConnectInstitutionHeader-test.tsx
@@ -0,0 +1,131 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { ConnectInstitutionHeader } from 'src/components/ConnectInstitutionHeader'
+import { COLOR_SCHEME } from 'src/const/Connect'
+import { initialState } from 'src/services/mockedData'
+
+// Mock SVG imports
+vi.mock('src/images/header/HeaderDevice.svg', () => ({
+ default: () => ,
+}))
+vi.mock('src/images/header/HeaderDefaultInstitution.svg', () => ({
+ default: () => ,
+}))
+vi.mock('src/images/header/HeaderBackdropDark.svg', () => ({
+ default: () => ,
+}))
+vi.mock('src/images/header/HeaderBackdropLight.svg', () => ({
+ default: () => ,
+}))
+
+// Mock InstitutionLogo component
+vi.mock('@kyper/institutionlogo', () => ({
+ InstitutionLogo: ({ institutionGuid, size }: { institutionGuid: string; size: number }) => (
+
+ ),
+}))
+
+describe('ConnectInstitutionHeader', () => {
+ const createPreloadedState = (colorScheme: string) => ({
+ ...initialState,
+ config: {
+ ...initialState.config,
+ color_scheme: colorScheme,
+ },
+ })
+
+ describe('rendering', () => {
+ it('renders the header container with correct data-test attribute', () => {
+ const preloadedState = createPreloadedState(COLOR_SCHEME.LIGHT)
+ const { container } = render(
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ })
+
+ it('renders children content', () => {
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(screen.getByTestId('child-content')).toBeInTheDocument()
+ expect(screen.getByText('Test Content')).toBeInTheDocument()
+ })
+
+ it('renders multiple children', () => {
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(screen.getByTestId('child-1')).toBeInTheDocument()
+ expect(screen.getByTestId('child-2')).toBeInTheDocument()
+ expect(screen.getByTestId('child-3')).toBeInTheDocument()
+ })
+
+ it('renders without children', () => {
+ const { container } = render({null} , { preloadedState })
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ })
+ })
+
+ describe('step prop', () => {
+ it('renders without step prop', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ // Without step prop, maxHeight should be null
+ expect(containerDiv).not.toHaveStyle({ maxHeight: '100%' })
+ })
+
+ it('renders with SEARCH step and applies maxHeight', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ // When step is SEARCH, maxHeight should be '100%'
+ expect(containerDiv).toHaveStyle({ maxHeight: '100%' })
+ })
+
+ it('renders with non-SEARCH step without maxHeight constraint', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ // When step is not SEARCH, maxHeight should not be '100%'
+ expect(containerDiv).not.toHaveStyle({ maxHeight: '100%' })
+ })
+
+ it('renders correctly with ENTER_CREDENTIALS step', () => {
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(screen.getByTestId('credentials-content')).toBeInTheDocument()
+ })
+
+ it('renders correctly with MFA step', () => {
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(screen.getByTestId('mfa-content')).toBeInTheDocument()
+ })
+ })
+
+ describe('styling', () => {
+ it('applies consistent container styles', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toHaveStyle({
+ minHeight: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ })
+ })
+
+ it('has a content wrapper with proper constraints', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ const contentWrapper = containerDiv?.firstChild as HTMLElement
+
+ expect(contentWrapper).toBeInTheDocument()
+ expect(contentWrapper).toHaveStyle({
+ maxWidth: '400px',
+ minWidth: '270px',
+ width: '100%',
+ })
+ })
+
+ it('applies background color from tokens', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ // Background color should be set (actual value comes from tokens)
+ expect(containerDiv).toHaveStyle({ backgroundColor: expect.any(String) })
+ })
+ })
+
+ describe('integration', () => {
+ it('renders complete structure with SEARCH step', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ expect(containerDiv).toHaveStyle({ maxHeight: '100%' })
+ expect(screen.getByTestId('search-content')).toBeInTheDocument()
+ expect(screen.getByText('Search for institution')).toBeInTheDocument()
+ })
+
+ it('renders complete structure with CONNECTED step', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ expect(screen.getByTestId('success-message')).toBeInTheDocument()
+ expect(screen.getByText('Successfully connected!')).toBeInTheDocument()
+ })
+
+ it('renders nested component structure', () => {
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(screen.getByTestId('outer')).toBeInTheDocument()
+ expect(screen.getByTestId('inner')).toBeInTheDocument()
+ expect(screen.getByText('Title')).toBeInTheDocument()
+ expect(screen.getByText('Nested Content')).toBeInTheDocument()
+ })
+
+ it('maintains structure with form elements', () => {
+ render(
+
+
+ ,
+ { preloadedState },
+ )
+
+ expect(screen.getByTestId('test-form')).toBeInTheDocument()
+ expect(screen.getByTestId('test-input')).toBeInTheDocument()
+ expect(screen.getByTestId('test-button')).toBeInTheDocument()
+ })
+
+ it('wraps components consistently regardless of content type', () => {
+ const { container } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ const containerDiv = container.querySelector('[data-test="container"]')
+ expect(containerDiv).toBeInTheDocument()
+ expect(screen.getByText('Text')).toBeInTheDocument()
+ expect(screen.getByAltText('test')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'Click' })).toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/components/__tests__/DeleteMemberSurvey-test.tsx b/src/components/__tests__/DeleteMemberSurvey-test.tsx
new file mode 100644
index 0000000000..f511f67130
--- /dev/null
+++ b/src/components/__tests__/DeleteMemberSurvey-test.tsx
@@ -0,0 +1,353 @@
+import React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from 'src/utilities/testingLibrary'
+import { DeleteMemberSurvey } from 'src/components/DeleteMemberSurvey'
+import { initialState, CONNECTED_MEMBER, NON_CONNECTED_MEMBER } from 'src/services/mockedData'
+import userEvent from '@testing-library/user-event'
+
+describe('DeleteMemberSurvey', () => {
+ const preloadedState = initialState
+
+ const mockOnCancel = vi.fn()
+ const mockOnDeleteSuccess = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('rendering', () => {
+ it('renders the disconnect institution dialog', () => {
+ const { container } = render(
+
+ ,
+ {
+ apiValue: mockApi,
+ preloadedState: state,
+ },
+ ),
+ mockApi,
+ }
+}
+
+describe('
+ ,
+ {
+ apiValue: mockApi,
+ preloadedState: state,
+ },
+ ),
+ mockApi,
+ }
+}
+
+describe('
+ let scrollToTopSpy: ReturnType
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ goToUrlLinkSpy = vi.spyOn(globalUtils, 'goToUrlLink').mockImplementation(() => {})
+ scrollToTopSpy = vi.spyOn(scrollToTopUtils, 'scrollToTop').mockImplementation(() => {})
+ })
+
+ afterEach(() => {
+ goToUrlLinkSpy.mockRestore()
+ scrollToTopSpy.mockRestore()
+ })
+
+ describe('Content Display', () => {
+ it('renders the disclosure title', () => {
+ render(
-
-
-
- {__(
- "We've connected to your financial institution, but couldn't find eligible checking or savings accounts for money movement; however, other account information may still have been shared.",
- )}
-
-
- {__('Please try linking a checking or savings account.')}
-
-
-
- )
-}
-
-const getStyles = (tokens) => {
- return {
- headerText: {
- fontWeight: tokens.FontWeight.Bold,
- },
- headerContianer: {
- display: 'flex',
- alignItems: 'center',
- },
- icon: {
- marginLeft: tokens.Spacing.Small,
- },
- paragraphOne: {
- fontWeight: tokens.FontWeight.Regular,
- fontSize: tokens.FontSize.Small,
- marginTop: tokens.Spacing.XSmall,
- },
- paragraphTwo: {
- fontWeight: tokens.FontWeight.Regular,
- fontSize: tokens.FontSize.Small,
- marginTop: tokens.Spacing.Medium,
- },
- tryAgainButton: {
- background: tokens.BackgroundColor.ButtonPrimary,
- color: tokens.Color.NeutralWhite,
- marginTop: tokens.Spacing.XLarge,
- borderRadius: tokens.BorderRadius.Medium,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- padding: '12px 16px',
- gap: '10px',
- height: '44px',
- width: '100%',
- },
- }
-}
-
-NoEligibleAccounts.propTypes = {}
-
-export default NoEligibleAccounts
diff --git a/src/views/loginError/__tests__/ImpededMemberError-test.tsx b/src/views/loginError/__tests__/ImpededMemberError-test.tsx
new file mode 100644
index 0000000000..cf4753dae9
--- /dev/null
+++ b/src/views/loginError/__tests__/ImpededMemberError-test.tsx
@@ -0,0 +1,184 @@
+import React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { ImpededMemberError } from '../ImpededMemberError'
+import { institutionData } from 'src/services/mockedData'
+import * as globalUtils from 'src/utilities/global'
+import * as institutionUtils from 'src/utilities/Institution'
+
+describe('
+ let getInstitutionLoginUrlSpy: ReturnType
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ goToUrlLinkSpy = vi.spyOn(globalUtils, 'goToUrlLink').mockImplementation(() => {})
+ getInstitutionLoginUrlSpy = vi
+ .spyOn(institutionUtils, 'getInstitutionLoginUrl')
+ .mockReturnValue('https://testbank.com/login')
+ })
+
+ afterEach(() => {
+ goToUrlLinkSpy.mockRestore()
+ getInstitutionLoginUrlSpy.mockRestore()
+ })
+
+ describe('Content Display', () => {
+ it('renders the title', () => {
+ render(
+ let getInstitutionLoginUrlSpy: ReturnType
+ let portalRoot: HTMLDivElement
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ goToUrlLinkSpy = vi.spyOn(globalUtils, 'goToUrlLink').mockImplementation(() => {})
+ getInstitutionLoginUrlSpy = vi
+ .spyOn(institutionUtils, 'getInstitutionLoginUrl')
+ .mockReturnValue('https://testbank.com/login')
+
+ portalRoot = document.createElement('div')
+ portalRoot.setAttribute('id', 'connect-wrapper')
+ document.body.appendChild(portalRoot)
+ })
+
+ afterEach(() => {
+ goToUrlLinkSpy.mockRestore()
+ getInstitutionLoginUrlSpy.mockRestore()
+ document.body.removeChild(portalRoot)
+ })
+
+ describe('Content Display', () => {
+ it('renders the LeavingNoticeFlat component', () => {
+ render(((props, ref) => (
+
+ {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+ ,
+ {
+ preloadedState: state,
+ },
+ )
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockDispatch.mockClear()
+ })
+
+ describe('Content Display', () => {
+ it('renders ManualAccountMenu by default', () => {
+ renderWithContext()
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ expect(screen.queryByTestId('manual-account-form')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('manual-account-success-header')).not.toBeInTheDocument()
+ })
+
+ it('pre-selects account type when only one is available', () => {
+ const singleTypeProps = {
+ ...defaultProps,
+ availableAccountTypes: [AccountTypes.CHECKING],
+ }
+
+ renderWithContext(singleTypeProps)
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ expect(screen.getByTestId('Checking-button')).toBeInTheDocument()
+ })
+
+ it('passes available account types to menu', () => {
+ renderWithContext()
+
+ expect(screen.getByTestId('Checking-button')).toBeInTheDocument()
+ expect(screen.getByTestId('Savings-button')).toBeInTheDocument()
+ })
+ })
+
+ describe('Account Type Selection', () => {
+ it('transitions from menu to form when account type is selected', async () => {
+ const { user } = renderWithContext()
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+
+ await user.click(screen.getByTestId('Checking-button'))
+
+ expect(screen.getByTestId('manual-account-form')).toBeInTheDocument()
+ expect(screen.queryByTestId('manual-account-menu-container')).not.toBeInTheDocument()
+ expect(screen.getByTestId('account-type')).toHaveTextContent(AccountTypes.CHECKING.toString())
+ })
+
+ it('can select different account types', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Savings-button'))
+
+ expect(screen.getByTestId('account-type')).toHaveTextContent(AccountTypes.SAVINGS.toString())
+ })
+ })
+
+ describe('Form Navigation', () => {
+ it('returns to menu when go back is clicked from form', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Checking-button'))
+
+ expect(screen.getByTestId('manual-account-form')).toBeInTheDocument()
+
+ await user.click(screen.getByText('Go Back'))
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ expect(screen.queryByTestId('manual-account-form')).not.toBeInTheDocument()
+ })
+
+ it('clears account type when returning to menu', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Checking-button'))
+ await user.click(screen.getByText('Go Back'))
+ await user.click(screen.getByTestId('Savings-button'))
+
+ expect(screen.getByTestId('account-type')).toHaveTextContent(AccountTypes.SAVINGS.toString())
+ })
+ })
+
+ describe('Success Flow', () => {
+ it('shows success view when form is submitted successfully', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Checking-button'))
+ await user.click(screen.getByText('Success'))
+
+ expect(screen.getByTestId('manual-account-success-header')).toBeInTheDocument()
+ expect(screen.queryByTestId('manual-account-form')).not.toBeInTheDocument()
+ })
+
+ it('passes account type to success view', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Savings-button'))
+ await user.click(screen.getByText('Success'))
+
+ expect(screen.getByTestId('manual-account-success-header')).toHaveTextContent('Savings added')
+ })
+
+ it('passes onManualAccountAdded callback to success view', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Checking-button'))
+ await user.click(screen.getByText('Success'))
+
+ expect(screen.getByTestId('manual-account-success-header')).toBeInTheDocument()
+ })
+
+ it('dispatches GO_BACK_MANUAL_ACCOUNT when done is clicked', async () => {
+ const { user } = renderWithContext()
+
+ await user.click(screen.getByTestId('Checking-button'))
+ await user.click(screen.getByText('Success'))
+ await user.click(screen.getByTestId('manual-success-done-button'))
+
+ expect(mockDispatch).toHaveBeenCalledWith({
+ type: ActionTypes.GO_BACK_MANUAL_ACCOUNT,
+ payload: { connect_widget_url: 'https://test.com' },
+ })
+ })
+ })
+
+ describe('Post Messages', () => {
+ it('posts BACK_TO_SEARCH when navigating back from menu', async () => {
+ const ref = React.createRef<{ handleBackButton: () => void }>()
+
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ await waitFor(() => {
+ ref.current?.handleBackButton()
+ })
+
+ await waitFor(() => {
+ expect(mockPostMessage.onPostMessage).toHaveBeenCalledWith(POST_MESSAGES.BACK_TO_SEARCH)
+ })
+ })
+
+ it('dispatches GO_BACK_MANUAL_ACCOUNT when navigating back from menu', async () => {
+ const ref = React.createRef<{ handleBackButton: () => void }>()
+
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ await waitFor(() => {
+ ref.current?.handleBackButton()
+ })
+
+ await waitFor(() => {
+ expect(mockDispatch).toHaveBeenCalledWith({
+ type: ActionTypes.GO_BACK_MANUAL_ACCOUNT,
+ payload: { connect_widget_url: 'https://test.com' },
+ })
+ })
+ })
+ })
+
+ describe('useImperativeHandle', () => {
+ it('exposes handleBackButton and showBackButton methods', () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null
+ }>()
+
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(ref.current).toHaveProperty('handleBackButton')
+ expect(ref.current).toHaveProperty('showBackButton')
+ expect(typeof ref.current?.handleBackButton).toBe('function')
+ expect(typeof ref.current?.showBackButton).toBe('function')
+ })
+
+ it('showBackButton returns truthy value when on menu', () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null
+ }>()
+
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ expect(ref.current?.showBackButton()).toBeTruthy()
+ })
+
+ it('showBackButton returns truthy value when on form', async () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null
+ }>()
+
+ const { user } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ await user.click(screen.getByTestId('Checking-button'))
+
+ expect(ref.current?.showBackButton()).toBeTruthy()
+ })
+
+ it('showBackButton returns false when on success', async () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null | false
+ }>()
+
+ const { user } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ await user.click(screen.getByTestId('Checking-button'))
+ await user.click(screen.getByText('Success'))
+
+ expect(ref.current?.showBackButton()).toBe(false)
+ })
+
+ it('handleBackButton fades out and returns to menu from form', async () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null
+ }>()
+ const fadeOutSpy = vi.spyOn(animationUtils, 'fadeOut')
+
+ const { user } = render(
+
+ ,
+ { preloadedState },
+ )
+
+ await user.click(screen.getByTestId('Checking-button'))
+
+ expect(screen.getByTestId('manual-account-form')).toBeInTheDocument()
+
+ await waitFor(() => {
+ ref.current?.handleBackButton()
+ })
+
+ expect(fadeOutSpy).toHaveBeenCalledWith(expect.anything(), 'up', 300)
+
+ await waitFor(() => {
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ expect(screen.queryByTestId('manual-account-form')).not.toBeInTheDocument()
+ })
+ })
+
+ it('handleBackButton from menu posts message and dispatches action', async () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null
+ }>()
+ const fadeOutSpy = vi.spyOn(animationUtils, 'fadeOut')
+
+ render(
+
+ ,
+ { preloadedState },
+ )
+
+ await waitFor(() => {
+ ref.current?.handleBackButton()
+ })
+
+ expect(fadeOutSpy).toHaveBeenCalledWith(expect.anything(), 'up', 300)
+
+ await waitFor(() => {
+ expect(mockPostMessage.onPostMessage).toHaveBeenCalledWith(POST_MESSAGES.BACK_TO_SEARCH)
+ expect(mockDispatch).toHaveBeenCalledWith({
+ type: ActionTypes.GO_BACK_MANUAL_ACCOUNT,
+ payload: { connect_widget_url: 'https://test.com' },
+ })
+ })
+ })
+ })
+
+ describe('Day Picker State', () => {
+ it('passes showDayPicker state to form', async () => {
+ const { user } = renderWithContext()
+
+ // First select an account type to show the form
+ await user.click(screen.getByTestId('Checking-button'))
+
+ expect(screen.getByTestId('show-day-picker')).toHaveTextContent('false')
+ })
+
+ it('showBackButton returns false when day picker is shown', () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => HTMLElement | null
+ }>()
+
+ render(
+
+ ,
+ { preloadedState },
+ )
+ })
+ })
+
+ describe('Integration', () => {
+ it('handles complete flow from menu to success', async () => {
+ const { user } = renderWithContext()
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+
+ await user.click(screen.getByTestId('Checking-button'))
+ expect(screen.getByTestId('manual-account-form')).toBeInTheDocument()
+
+ await user.click(screen.getByText('Success'))
+ expect(screen.getByTestId('manual-account-success-header')).toBeInTheDocument()
+
+ await user.click(screen.getByTestId('manual-success-done-button'))
+ expect(mockDispatch).toHaveBeenCalledWith({
+ type: ActionTypes.GO_BACK_MANUAL_ACCOUNT,
+ payload: { connect_widget_url: 'https://test.com' },
+ })
+ })
+
+ it('renders menu with correct account types list', () => {
+ renderWithContext()
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ expect(screen.getByTestId('Checking-button')).toBeInTheDocument()
+ expect(screen.getByTestId('Savings-button')).toBeInTheDocument()
+ })
+
+ it('handles single account type scenario correctly', () => {
+ const singleTypeProps = {
+ ...defaultProps,
+ availableAccountTypes: [AccountTypes.SAVINGS],
+ }
+
+ renderWithContext(singleTypeProps)
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('handles empty availableAccountTypes array', () => {
+ const emptyProps = {
+ ...defaultProps,
+ availableAccountTypes: [],
+ }
+
+ renderWithContext(emptyProps)
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ })
+
+ it('handles undefined availableAccountTypes', () => {
+ const undefinedProps = {
+ availableAccountTypes: undefined as unknown as number[],
+ onManualAccountAdded: vi.fn(),
+ }
+
+ renderWithContext(undefinedProps)
+
+ expect(screen.getByTestId('manual-account-menu-container')).toBeInTheDocument()
+ })
+
+ it('calls onManualAccountAdded when provided', async () => {
+ const onManualAccountAdded = vi.fn()
+ const propsWithCallback = {
+ ...defaultProps,
+ onManualAccountAdded,
+ }
+
+ const { user } = renderWithContext(propsWithCallback)
+
+ await user.click(screen.getByTestId('Checking-button'))
+ await user.click(screen.getByText('Success'))
+
+ expect(screen.getByTestId('manual-account-success-header')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/views/mfa/__tests__/MFAStep-test.tsx b/src/views/mfa/__tests__/MFAStep-test.tsx
index 605d2dd52b..c9dc7a5ec2 100644
--- a/src/views/mfa/__tests__/MFAStep-test.tsx
+++ b/src/views/mfa/__tests__/MFAStep-test.tsx
@@ -1,16 +1,12 @@
import React from 'react'
+import { beforeEach, vi } from 'vitest'
import MFAStep from 'src/views/mfa/MFAStep'
-import { AnalyticEvents } from 'src/const/Analytics'
+import { AnalyticEvents, defaultEventMetadata } from 'src/const/Analytics'
import { render, screen } from 'src/utilities/testingLibrary'
-const mockSendAnalyticsEvent = vi.fn()
-
-vi.mock('src/hooks/useAnalyticsEvent', () => {
- return { default: () => mockSendAnalyticsEvent }
-})
-
describe('MFAStep', () => {
+ let onAnalyticsEvent: ReturnType
const onGoBack = vi.fn()
const defaultProps = {
enableSupportRequests: true,
@@ -19,14 +15,24 @@ describe('MFAStep', () => {
ref: React.createRef(),
}
+ beforeEach(() => {
+ vi.clearAllMocks()
+ onAnalyticsEvent = vi.fn()
+ })
+
it('can navigate to Support when Support is enabled', async () => {
- const { user } = render(
Test Content
+ Test Content
+ First Child
+ Second Child
+ Third Child
+ Content
+ Search Content
+ Connected Content
+ Enter Credentials
+ MFA Content
+ Content
+ Content
+ Content
+ Search for institution
+ Successfully connected!
+
+
+ Title
+
+
+ Nested Content
+
+ Text
+ 
+
+
+
+
+
+
,
+ { preloadedState: stateWithPopup },
+ )
+
+ await user.click(screen.getByTestId('disclosure-privacy-policy-link'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('leaving-notice-flat-header')).toBeInTheDocument()
+ })
+
+ expect(goToUrlLinkSpy).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Continue Button', () => {
+ it('dispatches ACCEPT_DISCLOSURE action when Continue is clicked', async () => {
+ const { user } = render(
+
,
+ { preloadedState: stateWithPopup },
+ )
+
+ await user.click(screen.getByTestId('disclosure-privacy-policy-link'))
+
+ await waitFor(() => {
+ expect(ref.current?.showBackButton()).toBe(true)
+ })
+ })
+
+ it('handleBackButton hides privacy policy', async () => {
+ const ref = React.createRef<{
+ handleBackButton: () => void
+ showBackButton: () => boolean
+ }>()
+ const stateWithPopup = {
+ ...preloadedState,
+ profiles: {
+ ...preloadedState.profiles,
+ clientProfile: {
+ ...preloadedState.profiles.clientProfile,
+ show_external_link_popup: true,
+ },
+ },
+ }
+
+ const { user } = render(
+
+
,
+ { preloadedState: stateWithPopup },
+ )
+
+ await user.click(screen.getByTestId('disclosure-privacy-policy-link'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('leaving-notice-flat-header')).toBeInTheDocument()
+ })
+
+ await waitFor(() => {
+ ref.current?.handleBackButton()
+ })
+
+ await waitFor(() => {
+ expect(screen.queryByTestId('leaving-notice-flat-header')).not.toBeInTheDocument()
+ expect(screen.getByTestId('disclosure-title')).toBeInTheDocument()
+ })
+ })
+ })
+
+ describe('Integration', () => {
+ it('renders all main sections together', () => {
+ render(
-
- {__('Accounts not eligible for transfers')}
-
-
-
-
-
-
-
+
+
+
+ ))
+ MockManualAccountForm.displayName = 'ManualAccountForm'
+ return { ManualAccountForm: MockManualAccountForm }
+})
+
+interface ManualAccountConnectProps {
+ availableAccountTypes?: number[]
+ onManualAccountAdded?: () => void
+}
+
+describe('{props.accountType}
+ {props.showDayPicker ? 'true' : 'false'}
+