Team Shared Mock Setup and Usage Guide

Objective

This document defines the process for creating, maintaining, and importing reusable mock classes or data for unit testing in Angular projects. It specifies a shared location for mocks and how to utilize the @mocks alias.

🏗️ Shared Mock File Location

All shared mocks should reside in the src/app/shared/constants/test/mock.ts file. This centralizes commonly reused mock data and classes.

Folder Structure:

src/
  app/
    shared/
      constants/
        test/
          mock.ts

🧩 Step 1: Create Common Mocks in `mock.ts`

Create reusable mocks in the shared mock.ts file. These mocks should simulate commonly reused dependencies, data, or classes.

Example Structure for `mock.ts`:

// src/app/shared/constants/test/mock.ts

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

// Mock implementation for MatDialogRef
export class MockMatDialogRef {
  close = jasmine.createSpy('close');
}

// Mock data for MAT_DIALOG_DATA
export const mockMatDialogData = {
  key: 'value',
};

// Mock dialog reference
export const mockMatDialogRef = new MockMatDialogRef();

🏆 Key Advantages

Centralized Mocks: All shared mocks are in one location for better maintainability.
Cleaner Test Code: Avoid cumbersome relative paths by using a cleaner alias.
Team Standards: Ensures consistency across all test cases.

🚀 Team Best Practices

Create Mocks in mock.ts:
- All commonly reused mocks should be defined here.
- Examples: Mocks for MatDialogRef, MAT_DIALOG_DATA, HttpClient, or any shared service responses.
Use the @mocks Alias:
- This alias is defined in the tsconfig.json file (already added) and is available across all test files.
- The alias allows cleaner and easier imports like:
  import { MockMatDialogRef, mockMatDialogData } from '@mocks';
Test Your Mocks:
- Ensure they simulate the necessary behavior properly to prevent unexpected test failures.

🧪 How to Use Mocks

Use the mocks in your test cases by importing them via the @mocks alias.

Example Usage in a Spec File:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { MockMatDialogRef, mockMatDialogData } from '@mocks';
import { ConfigurePaymentComponent } from './configure-payment.component';

describe('ConfigurePaymentComponent', () => {
  let component: ConfigurePaymentComponent;
  let fixture: ComponentFixture<ConfigurePaymentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [MatDialogModule],
      declarations: [ConfigurePaymentComponent],
      providers: [
        { provide: MatDialogRef, useValue: MockMatDialogRef },
        { provide: MAT_DIALOG_DATA, useValue: mockMatDialogData }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ConfigurePaymentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

📌 Mock Creation Responsibility

Central Repository: All commonly used mocks must be created and added to the mock.ts file.
Team Ownership: Every team member is responsible for ensuring that mocks remain reusable, minimal, and well-documented.

🚩 Common Scenarios for Mock Usage

Below are examples of where mocks may frequently be needed:

Mocking Dialogs:
- Use MockMatDialogRef and mockMatDialogData.
Mocking HTTP Responses:
- Example: Simulate HttpClient responses by defining mock data directly in mock.ts.
Mocking Router Events:
- Create router mock events for navigation testing.

📝 Final Notes

✅ Checklist Before Running Tests

Ensure the mocks are defined in mock.ts.
Use @mocks alias for imports.
Verify all mocks simulate the expected behavior.

This approach makes mocks reusable, easier to maintain, and aligned with team-wide standards. For further assistance, reach out to the team leads