add test

Author: andreaskienle

src/spaces/onboarding/pages/SignInPage/SignInPage.cy.tsx

@@ -0,0 +1,49 @@
+import { SignInPage } from './SignInPage.tsx';
+import { useAuthOnboarding } from '../../auth/AuthContextOnboarding.tsx';
+import { useLink } from '../../../../lib/shared/useLink.ts'; // if useLink relies on router
+
+describe('SignInPage', () => {
+  let logInCalled = false;
+  const fakeUseAuthOnboarding = (() => ({
+    login: () => {
+      logInCalled = true;
+    },
+  })) as typeof useAuthOnboarding;
+
+  beforeEach(() => {
+    logInCalled = false;
+  });
+
+  it('renders the SignInPage', () => {
+    cy.mount(<SignInPage useAuthOnboarding={fakeUseAuthOnboarding} />);
+
+    cy.get('ui5-title').should('exist');
+  });
+
+  it('calls the login function when the user clicks the "Sign In" button', () => {
+    cy.mount(<SignInPage useAuthOnboarding={fakeUseAuthOnboarding} />);
+
+    cy.wrap(null).then(() => {
+      expect(logInCalled).to.equal(false);
+    });
+
+    cy.get('ui5-button').eq(0).should('contain', 'Sign In').click();
+
+    cy.wrap(null).then(() => {
+      expect(logInCalled).to.equal(true);
+    });
+  });
+
+  it('contains a link to the documentation', () => {
+    const fakeUseLink = (() => ({
+      documentationHomepage: 'https://link-to-documentation.com',
+    })) as typeof useLink;
+
+    cy.mount(<SignInPage useAuthOnboarding={fakeUseAuthOnboarding} useLink={fakeUseLink} />);
+
+    cy.get('a')
+      .should('have.attr', 'target', '_blank')
+      .and('have.attr', 'rel', 'noreferrer')
+      .and('have.attr', 'href', 'https://link-to-documentation.com');
+  });
+});

src/spaces/onboarding/pages/SignInPage/SignInPage.tsx

@@ -5,17 +5,21 @@ import * as Sentry from '@sentry/react';
 import { Button, Card, FlexBox, Text, Title } from '@ui5/webcomponents-react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 
-import { useAuthOnboarding } from '../../auth/AuthContextOnboarding';
-import { useLink } from '../../../../lib/shared/useLink';
+import { useAuthOnboarding as _useAuthOnboarding } from '../../auth/AuthContextOnboarding';
+import { useLink as _useLink } from '../../../../lib/shared/useLink';
 import { useTheme } from '../../../../hooks/useTheme';
 
 import LogoLight from '../../../../assets/images/co-logo-orchestrating.png';
 import LogoDark from '../../../../assets/images/co-logo-orchestrating-dark.png';
 
 import styles from './SignInPage.module.css';
 
-export function SignInPage() {
-  const auth = useAuthOnboarding();
+export interface SignInPageProps {
+  useAuthOnboarding?: typeof _useAuthOnboarding;
+  useLink?: typeof _useLink;
+}
+export function SignInPage({ useAuthOnboarding = _useAuthOnboarding, useLink = _useLink }: SignInPageProps) {
+  const { login } = useAuthOnboarding();
   const { documentationHomepage } = useLink();
   const { t } = useTranslation();
   const { isDarkTheme } = useTheme();
@@ -41,7 +45,7 @@ export function SignInPage() {
             <img className={styles.logo} src={isDarkTheme ? LogoDark : LogoLight} alt="" />
 
             <FlexBox direction="Column" alignItems="Center" gap="1em">
-              <Button design={ButtonDesign.Emphasized} onClick={() => void auth.login()}>
+              <Button design={ButtonDesign.Emphasized} onClick={() => void login()}>
                 {t('SignInPage.signInButton')}
               </Button>
             </FlexBox>