[Angular] آزمایش اشیاء مرورگر بومی

Summarize this content to 400 words in Persian Lang

مشکل

تصور کنید در حال ساخت یک برنامه Angular هستید و باید کاربر را به یک سایت خارجی هدایت کنید، مانند وب سایت گروه گرانج آمریکایی Pearl Jam. یک راه معمول برای انجام این کار، دستکاری شی پنجره است. برای مثال، ممکن است تابعی داشته باشید که window.location.href را برای تغییر مسیر کاربر تغییر می‌دهد:

redirectToPearlJam() {
window.location.href = ‘https://pearljam.com’;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حالا چگونه این را تست کنیم؟

تست تابع تغییر مسیر

آزمایش کدی که شی پنجره را دستکاری می کند می تواند مشکل باشد زیرا window یک API جهانی مرورگر است. اما نگران نباشید، راه حل هایی وجود دارد! در اینجا چند نکته برای انجام این کار به روشی ساده وجود دارد.

1. استفاده از Jasmine Spy

راه حل اول استفاده از جاسوسان جاسمین برای نظارت و رهگیری تماس های window.location.href است. در اینجا نحوه انجام آن آمده است:

import { ComponentFixture, TestBed } from ‘@angular/core/testing’;
import { YourComponent } from ‘./your-component’;

describe(‘YourComponent’, () => {
let component: YourComponent;
let fixture: ComponentFixtureYourComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [YourComponent] }).compileComponents();

fixture = TestBed.createComponent(YourComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it(‘should redirect to Pearl Jam website’, () => {
spyOn(window, ‘open’);
component.redirectToPearlJam();
expect(window.open).toHaveBeenCalledWith(‘https://pearljam.com’);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. Mocking Window Object

راه دیگر ایجاد یک mock از شی پنجره برای استفاده در تست ها است. ما می توانیم این کار را با تزریق پنجره به کامپوننت انجام دهیم:

export function windowFactory() {
return window;
}

@NgModule({
providers: [
{ provide: ‘Window’, useFactory: windowFactory }
] })
export class AppModule { }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و در کامپوننت از شی تزریق شده استفاده می کنیم:

import { Inject, Injectable } from ‘@angular/core’;

@Injectable({
providedIn: ‘root’,
})
export class YourService {
constructor(@Inject(‘Window’) private window: Window) {}

redirectToPearlJam() {
this.window.location.href = ‘https://pearljam.com’;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در تست، ما می توانیم یک پنجره ساختگی ایجاد کنیم:

import { TestBed } from ‘@angular/core/testing’;
import { YourService } from ‘./your-service’;

describe(‘YourService’, () => {
let service: YourService;
let mockWindow: { location: { href: string } };

beforeEach(() => {
mockWindow = { location: { href: ” } };

TestBed.configureTestingModule({
providers: [
YourService,
{ provide: ‘Window’, useValue: mockWindow }
] });

service = TestBed.inject(YourService);
});

it(‘should redirect to Pearl Jam website’, () => {
service.redirectToPearlJam();
expect(mockWindow.location.href).toEqual(‘https://pearljam.com’);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. اختصاص Mock به متغیر جزء

روش دیگر ایجاد یک متغیر در داخل مؤلفه ای است که شی پنجره را نگه می دارد. در تست ها می توانیم به این متغیر یک mock اختصاص دهیم. در اینجا نحوه انجام آن آمده است:

در کامپوننت، یک متغیر برای پنجره اضافه کنید:

export class YourComponent {
private window: Window;

constructor() {
this.window = window;
}

redirectToPearlJam() {
this.window.location.href = ‘https://pearljam.com’;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در تست، متغیر پنجره کامپوننت را با یک mock جایگزین می کنیم:

import { ComponentFixture, TestBed } from ‘@angular/core/testing’;
import { YourComponent } from ‘./your-component’;

describe(‘YourComponent’, () => {
let component: YourComponent;
let fixture: ComponentFixtureYourComponent>;
let mockWindow: { location: { href: string } };

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [YourComponent] }).compileComponents();

fixture = TestBed.createComponent(YourComponent);
component = fixture.componentInstance;
mockWindow = { location: { href: ” } };
component[‘window’] = mockWindow; // Assign the mock here
fixture.detectChanges();
});

it(‘should redirect to Pearl Jam website’, () => {
component.redirectToPearlJam();
expect(mockWindow.location.href).toEqual(‘https://pearljam.com’);
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

آزمایش کدی که با شی پنجره در Angular تعامل دارد، ممکن است پیچیده به نظر برسد، اما با این استراتژی‌ها، بسیار آسان‌تر می‌شود. استفاده از جاسوس‌های جاسمین، ایجاد یک تصویر ساختگی از پنجره، یا استفاده از یک متغیر جزء برای شی پنجره، روش‌های موثری هستند که به شما کمک می‌کنند تست‌های خود را تمیز و کاربردی نگه دارید.

redirectToPearlJam() {
  window.location.href = 'https://pearljam.com';
}

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixtureYourComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    spyOn(window, 'open');
    component.redirectToPearlJam();
    expect(window.open).toHaveBeenCalledWith('https://pearljam.com');
  });
});

export function windowFactory() {
  return window;
}

@NgModule({
  providers: [
    { provide: 'Window', useFactory: windowFactory }
  ]
})
export class AppModule { }

import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class YourService {
  constructor(@Inject('Window') private window: Window) {}

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

import { TestBed } from '@angular/core/testing';
import { YourService } from './your-service';

describe('YourService', () => {
  let service: YourService;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    mockWindow = { location: { href: '' } };

    TestBed.configureTestingModule({
      providers: [
        YourService,
        { provide: 'Window', useValue: mockWindow }
      ]
    });

    service = TestBed.inject(YourService);
  });

  it('should redirect to Pearl Jam website', () => {
    service.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

export class YourComponent {
  private window: Window;

  constructor() {
    this.window = window;
  }

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixtureYourComponent>;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    mockWindow = { location: { href: '' } };
    component['window'] = mockWindow;  // Assign the mock here
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    component.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});