Merge pull request #1884 from rodekruis/test.unit-login-form-component

Test.unit login form component

interfaces/IBF-dashboard/eslint.config.js

@@ -9,11 +9,12 @@ const eslintPluginQuery = require('@tanstack/eslint-plugin-query');
 const eslintPluginPerfectionist = require('eslint-plugin-perfectionist');
 const eslintPluginRegexp = require('eslint-plugin-regexp');
 const eslintPluginSimpleSort = require('eslint-plugin-simple-import-sort');
+const eslintPluginJasmine = require('eslint-plugin-jasmine');
 
 module.exports = tseslint.config(
   {
     languageOptions: {
-      globals: globals.browser,
+      globals: { ...globals.browser, ...globals.jasmine },
       parserOptions: {
         project: './tsconfig.json',
       },
@@ -141,6 +142,15 @@ module.exports = tseslint.config(
       'simple-import-sort/exports': 'error',
     },
   },
+  {
+    files: ['**/*.spec.ts'],
+    plugins: { jasmine: eslintPluginJasmine },
+    rules: {
+      ...eslintPluginJasmine.rules.recommended,
+      '@typescript-eslint/unbound-method': 'off',
+      '@typescript-eslint/no-floating-promises': 'off',
+    },
+  },
   {
     files: ['src/app/**/*.html'],
     extends: [

interfaces/IBF-dashboard/package.json

@@ -79,6 +79,7 @@
     "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jasmine": "^4.2.2",
     "eslint-plugin-no-relative-import-paths": "^1.5.5",
     "eslint-plugin-perfectionist": "^4.4.0",
     "eslint-plugin-prettier": "^5.2.1",

interfaces/IBF-dashboard/src/app/components/login-form/login-form.component.spec.ts

@@ -5,16 +5,20 @@ import {
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgForm } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { PopoverController } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuthService } from 'src/app/auth/auth.service';
+import { ForgotPasswordPopoverComponent } from 'src/app/components/forgot-password-popover/forgot-password-popover.component';
 import { LoginFormComponent } from 'src/app/components/login-form/login-form.component';
 
 describe('LoginFormComponent', () => {
   let component: LoginFormComponent;
   let fixture: ComponentFixture<LoginFormComponent>;
+  let authService: AuthService;
+  let popoverController: PopoverController;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -27,18 +31,105 @@ describe('LoginFormComponent', () => {
         TranslateModule.forRoot(),
       ],
       providers: [
-        { provide: AuthService },
+        {
+          provide: AuthService,
+          useValue: {
+            login: jasmine.createSpy('login').and.returnValue({
+              add: jasmine
+                .createSpy('add')
+                .and.callFake((callback: () => void) => {
+                  callback();
+                }),
+            }),
+          },
+        },
+        {
+          provide: PopoverController,
+          useValue: {
+            create: jasmine
+              .createSpy('create')
+              .and.resolveTo({ present: jasmine.createSpy('present') }),
+          },
+        },
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(LoginFormComponent);
     component = fixture.componentInstance;
+    authService = TestBed.inject(AuthService);
+    popoverController = TestBed.inject(PopoverController);
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component.model.email).toBe('');
+    expect(component.model.password).toBe('');
+    expect(component.inputType).toBe('password');
+    expect(component.labelShow).toBe('Show password');
+    expect(component.labelHide).toBe('Hide password');
+  });
+
+  it('should call authService.login on onSubmit', () => {
+    component.model.email = '[email protected]';
+    component.model.password = 'password';
+    component.onSubmit();
+
+    expect(authService.login).toHaveBeenCalledWith(
+      '[email protected]',
+      'password',
+    );
+  });
+
+  it('should reset form on successful login', () => {
+    component.loginForm = {
+      resetForm: jasmine.createSpy('resetForm') as () => void,
+    } as NgForm;
+    component.model.email = '[email protected]';
+    component.model.password = 'password';
+    component.onSubmit();
+
+    expect(component.loginForm.resetForm).toHaveBeenCalledWith();
+  });
+
+  it('should toggle inputType on toggleInputType', () => {
+    component.inputType = 'password';
+    component.toggleInputType();
+
+    expect(component.inputType).toBe('text');
+    component.toggleInputType();
+
+    expect(component.inputType).toBe('password');
+  });
+
+  it('should present popover on presentPopover', async () => {
+    await component.presentPopover();
+    const popoverOptions = {
+      component: ForgotPasswordPopoverComponent,
+      animated: true,
+      cssClass: 'ibf-popover ibf-popover-normal',
+      translucent: true,
+      showBackdrop: true,
+    };
+
+    expect(popoverController.create).toHaveBeenCalledWith(popoverOptions);
+
+    const popover = await popoverController.create(popoverOptions);
+
+    expect(popover.present).toHaveBeenCalledWith();
+  });
+
+  it('should return true if inputType is password', () => {
+    component.inputType = 'password';
+
+    expect(component.isPassword()).toBeTrue();
+  });
+
+  it('should return false if inputType is not password', () => {
+    component.inputType = 'text';
+
+    expect(component.isPassword()).toBeFalse();
   });
 });