fix: added components tests to increase coverage to 80%

src/Connect.tsx

@@ -328,25 +328,19 @@ export const Connect: React.FC<ConnectProps> = ({
 
           return (
             <div id="connect-wrapper" style={styles.component}>
-              {state.memberToDelete && (
-                <DeleteMemberSurvey
-                  member={state.memberToDelete}
-                  onCancel={() => {
-                    setState({ ...state, memberToDelete: null })
-                  }}
-                  onDeleteSuccess={(deletedMember) => {
-                    postMessageFunctions.onPostMessage('connect/memberDeleted', {
-                      member_guid: deletedMember.guid,
-                    })
-                    onMemberDeleted(deletedMember.guid)
-
-                    setState((prevState) => {
-                      dispatch(connectActions.stepToDeleteMemberSuccess(deletedMember.guid))
-                      return { ...prevState, memberToDelete: null }
-                    })
-                  }}
-                />
-              )}
+              <DeleteMemberSurvey
+                isOpen={!!state.memberToDelete}
+                member={state.memberToDelete}
+                onClose={() => setState({ ...state, memberToDelete: null })}
+                onMemberDeleted={(memberGuid) => {
+                  postMessageFunctions.onPostMessage('connect/memberDeleted', {
+                    member_guid: memberGuid,
+                  })
+                  onMemberDeleted(memberGuid)
+                  dispatch(connectActions.stepToDeleteMemberSuccess(memberGuid))
+                  setState({ ...state, memberToDelete: null })
+                }}
+              />
 
               <ConnectNavigationHeader
                 connectGoBack={() => dispatch(handleGoBackWithSideEffects())}

src/components/ConnectInstitutionHeader-test.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { describe, it, expect } 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'
+
+describe('ConnectInstitutionHeader', () => {
+  const createPreloadedState = (colorScheme: string) => ({
+    ...initialState,
+    config: {
+      ...initialState.config,
+      color_scheme: colorScheme,
+    },
+  })
+
+  it('renders light backdrop when color scheme is LIGHT', () => {
+    const preloadedState = createPreloadedState(COLOR_SCHEME.LIGHT)
+    render(<ConnectInstitutionHeader />, { preloadedState })
+
+    expect(screen.getByTestId('backdrop-light')).toBeInTheDocument()
+    expect(screen.queryByTestId('backdrop-dark')).not.toBeInTheDocument()
+  })
+
+  it('renders dark backdrop when color scheme is DARK', () => {
+    const preloadedState = createPreloadedState(COLOR_SCHEME.DARK)
+    render(<ConnectInstitutionHeader />, { preloadedState })
+
+    expect(screen.getByTestId('backdrop-dark')).toBeInTheDocument()
+    expect(screen.queryByTestId('backdrop-light')).not.toBeInTheDocument()
+  })
+
+  it('renders HeaderDevice', () => {
+    const preloadedState = createPreloadedState(COLOR_SCHEME.LIGHT)
+    render(<ConnectInstitutionHeader />, { preloadedState })
+
+    expect(screen.getByTestId('device-container')).toBeInTheDocument()
+  })
+
+  it('renders InstitutionLogo when institutionGuid is provided', () => {
+    const preloadedState = createPreloadedState(COLOR_SCHEME.LIGHT)
+    render(<ConnectInstitutionHeader institutionGuid="INS-12345" />, {
+      preloadedState,
+    })
+
+    expect(screen.getByTestId('institution-logo-container')).toBeInTheDocument()
+    expect(screen.queryByTestId('default-institution-icon')).not.toBeInTheDocument()
+  })
+
+  it('renders default institution icon when institutionGuid is not provided', () => {
+    const preloadedState = createPreloadedState(COLOR_SCHEME.LIGHT)
+    render(<ConnectInstitutionHeader />, { preloadedState })
+
+    expect(screen.getByTestId('default-institution-icon')).toBeInTheDocument()
+  })
+})

src/components/ConnectInstitutionHeader.js

@@ -22,16 +22,20 @@ export const ConnectInstitutionHeader = (props) => {
 
   return (
     <div data-test="disclosure-svg-header" style={styles.container}>
-      <div style={styles.backdropImage}>
-        {colorScheme === COLOR_SCHEME.LIGHT ? <HeaderBackdropLight /> : <HeaderBackdropDark />}
-        <div style={styles.device}>
+      <div data-test="backdrop-container" style={styles.backdropImage}>
+        {colorScheme === COLOR_SCHEME.LIGHT ? (
+          <HeaderBackdropLight data-test="backdrop-light" />
+        ) : (
+          <HeaderBackdropDark data-test="backdrop-dark" />
+        )}
+        <div data-test="device-container" style={styles.device}>
           <HeaderDevice />
         </div>
-        <div style={styles.institutionLogo}>
+        <div data-test="institution-logo-container" style={styles.institutionLogo}>
           {props.institutionGuid ? (
             <InstitutionLogo alt="" institutionGuid={props.institutionGuid} size={64} />
           ) : (
-            <HeaderDefaultInstitution />
+            <HeaderDefaultInstitution data-test="default-institution-icon" />
           )}
         </div>
       </div>

src/components/Container-test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render } from 'src/utilities/testingLibrary'
+import { Container } from 'src/components/Container'
+import { STEPS } from 'src/const/Connect'
+import { initialState } from 'src/services/mockedData'
+
+describe('Container', () => {
+  const preloadedState = initialState
+
+  it('renders', () => {
+    const { container } = render(
+      <Container>
+        <div>Content</div>
+      </Container>,
+      { preloadedState },
+    )
+
+    const containerDiv = container.querySelector('[data-test="container"]')
+    expect(containerDiv).toBeInTheDocument()
+    expect(containerDiv).not.toHaveStyle({ maxHeight: '100%' })
+  })
+
+  it('applies maxHeight when step is SEARCH', () => {
+    const { container } = render(
+      <Container step={STEPS.SEARCH}>
+        <div>Content</div>
+      </Container>,
+      { preloadedState },
+    )
+
+    const containerDiv = container.querySelector('[data-test="container"]')
+    expect(containerDiv).toHaveStyle({ maxHeight: '100%' })
+  })
+})

src/components/Container.tsx

@@ -1,17 +1,19 @@
 import React from 'react'
 
 import { useTokens } from '@kyper/tokenprovider'
+import { STEPS } from 'src/const/Connect'
 
 interface ContainerProps {
   children?: React.ReactNode
+  step?: string
 }
 
 /**
  * Our root container to handle our widgets min/max widths, positioning and padding for all views
  */
 export const Container: React.FC<ContainerProps> = (props) => {
   const tokens = useTokens()
-  const styles = getStyles(tokens)
+  const styles = getStyles(tokens, props.step)
 
   return (
     <div data-test="container" style={styles.container}>
@@ -21,11 +23,12 @@ export const Container: React.FC<ContainerProps> = (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',
     },