Angular Unit Test

componentName.spec.ts

import { TransactionCategoryService } from '../../../shared-services/services/transaction-category.service';
import { BudgetsUpdaterComponent } from './budgets-updater.component';
import { MatDialogRef } from '@angular/material';
import { InstitutionService } from '../../../shared-services/services/institution.service';
import { FinancialAccountService } from '../../../shared-services/services/financial-account.service';
import { ChangeDetectorRef } from '@angular/core';
import { BudgetService } from '../../../shared-services/services/budget.service';
import { Budget } from '../../../models/budgets/budget.model';
import { of } from 'rxjs';
import { TransactionSubcategory } from '../../../models/transactions/transaction-subcategory.model';
import { TransactionUserDefinedSubcategory } from '../../../models/transactions/transaction-user-defined-subcategory.model';

fdescribe('BudgetUpdaterComponent', () => {

    let dialogRef: MatDialogRef<BudgetsUpdaterComponent>;
    let transactionCategoryService: any;
    let institutionService: any;
    let financialAccountService: any;
    let changeDetectorRef: ChangeDetectorRef;
    let budgetService: any;
    let component: BudgetsUpdaterComponent;
    let budget: Budget;

    dialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
    transactionCategoryService = jasmine.createSpyObj('TransactionCategoryService', ['getTransactionCategories']);
    institutionService = jasmine.createSpyObj('InstitutionService', ['getUserInstitutionByKey']);
    financialAccountService = jasmine.createSpyObj('FinancialAccountService', ['getAllAccounts']);
    changeDetectorRef = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
    budgetService = jasmine.createSpyObj('BudgetService', ['updateBudget', 'deleteBudget']);

    beforeEach(() => {
        component = new BudgetsUpdaterComponent(dialogRef, transactionCategoryService, institutionService,
            financialAccountService, changeDetectorRef, budgetService, {});
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('expects updateBudgets service to have been called', () => {
        budget = new Budget({ budgetKey: '1234' });
        budgetService.updateBudget.and.returnValue(of(budget));

        component.updateBudget(budget);

        expect(dialogRef.close).toHaveBeenCalledWith(true);
        expect(budgetService.updateBudget).toHaveBeenCalledWith(budget, [], []);
    });

    it('should update the budget with the correct subcategories', () => {
        budget = new Budget({ budgetKey: '1234' });
        budgetService.updateBudget.and.returnValue(of(budget));
        const subCategory = new TransactionSubcategory({ transactionSubcategoryKey: '2134' });
        component.selectedSubCategories = [subCategory];
        const userDefinedSubCategory = new TransactionUserDefinedSubcategory({ transactionUserDefinedSubcategoryKey: '4321' });
        component.selectedUserDefinedSubCategories = [userDefinedSubCategory];

        component.updateBudget(budget);

        expect(dialogRef.close).toHaveBeenCalledWith(true);
        expect(budgetService.updateBudget).toHaveBeenCalledWith(budget, [subCategory], [userDefinedSubCategory]);
    });

    it('expects getUserInstitutionByKey to have been called', () => {
        const institutionKey = 1;

        component.getUserInstitution(institutionKey);

        expect(institutionService.getUserInstitutionByKey).toHaveBeenCalledWith(institutionKey);
    });

    it('expects deleteBudgets service to have been called', () => {
        budget = new Budget({ budgetKey: '1234' });
        budgetService.deleteBudget.and.returnValue(of(null));

        component.deleteBudget(budget);

        expect(dialogRef.close).toHaveBeenCalledWith(true);
        expect(budgetService.deleteBudget).toHaveBeenCalledWith(budget.budgetKey);
    });
});