【脱初心者】Angular×Jasmineで単体テストを書く方法！

ng test

fdescribe('SampleComponent', () => {
});

TestBed.configureTestingModule({
});

TestBed.configureTestingModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
});

describe('テストのグループ', () => {
});

beforeEach(() => {
});

beforeEach(() => {
  fixture.detectChanges();
});

expect(component).toBeTruthy();

expect(xxx).not.ToEqual(yyy)

const hogeServiceSpy = jasmine.createSpyObj('HogeService', ['getHoge']);

beforeEach(
  TestBed.configureTestingModule({
    declarations: [SampleComponent],
    providers: [
      { provide: HogeService, useValue: hogeServiceSpy },
    ],
  }).compileComponents();

  hogeServiceSpy.getHoge.and.returnValue(of(getHoge()));
);

describe('getHoge', () => {
  it('hoge情報取得', () => {
    const mock = getHoge();
    const debugElement = fixture.debugElement;
    expect(debugElement.query(By.css('.id')).nativeElement.textContent).toEqual(mock.id);
  });
});

function getHoge() {
  return {
    id: 1,
  };
}

import { HogeDirective } from './hoge.directive';

describe('HogeDirective', () => {
  it('onClick時', () => {
    const directive = new HogeDirective();
    directive.onClick();

    expect(hoge).toHaveBeenCalled();
  });
});

import { HogePipe } from './hoge.pipe';

describe('HogePipe', () => {
  const pipe = new HogePipe();

  it('transform', () => {
    expect(pipe.transform('abc')).toBe('abc');
  });
});

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-hoge-test',
  templateUrl: './hoge-test.component.html',
  styleUrls: ['./hoge-test.component.scss']
})
export class HogeTestComponent implements OnInit {
  @Input() title: string;
}

it('titleのテスト', () => {
  component.title = 'タイトル';
  fixture.detectChanges();

  const element = fixture.debugElement.query(By.css('.title')).nativeElement as HTMLSpanElement;
  expect(element.textContent).toBe('タイトル');
});

describe('HogeComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {
              paramMap: convertToParamMap({ id: 123 })
            }
          }
        }
      ]
    });
  }));
});

redirect() {
  this.router.navigate(['/hoge']);
}

let router: Router;
let service: HogeService;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [AppRoutingModule],
    providers: [HogeService],
  });

  router = TestBed.inject(Router);
  service = TestBed.inject(HogeService);
});

it('リダイレクトしていること', fakeAsync(() => {
  service.redirect();
  tick();
  expect(router.url).toBe('/hoge');
}));

a() {
  b();
}

component.a();
expect(component.b).toHaveBeenCalled();