[Angular Unit Testing] Shallow Pipe Testing

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { FileSizePipe } from './file-size.pipe';
import {Component} from '@angular/core';

TestBed.initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);


describe('FileSizePipe', () => {


  describe('Shallow Pipe Testing', () => {
    @Component({
      template: `size: {{size | filesize:suffix}}`
    })
    class TestComponent {
      suffix;
      size = 123456789;
    }

    let component : TestComponent;
    let fixture : ComponentFixture<TestComponent>;
    let el: HTMLElement;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [
          FileSizePipe,
          TestComponent
        ]
      });
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
      el = fixture.nativeElement;
      fixture.detectChanges();
    });

    it('should convert bytes to megabytes', () => {
      expect(el.textContent).toContain('size: 117.74MB');
      component.size = 1029281;
      fixture.detectChanges();
      expect(el.textContent).toContain('size: 0.98MB');
    });

    it('should use the default extension when not supplied', () => {
      component.suffix = 'myExt';
      fixture.detectChanges();
      expect(el.textContent).toContain('size: 117.74myExt');
    });
  });
});