bixi/packages/core/image/safe-src.spec.ts

企业级中后台前端解决方案

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { BixiImageModule } from './image.module';

const IMG = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs';
const IMG404 = './assets/img/404.jpg';
const ERROR_CLASS = 'error-class';
const SUCCESS_CLASS = 'success-class';
const makeClassSelector = (kls: string) => `.${kls}`;

describe('#@bixi/core bixi-safe-src', () => {
  let fixture: ComponentFixture<TestComponent>;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BixiImageModule],
      declarations: [TestComponent]
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
  });

  it('# success', (done) => {
    fixture.detectChanges();
    setTimeout(() => {
      fixture.detectChanges();
      const src = fixture.nativeElement.querySelector('img').getAttribute('src');
      expect(src).toBe(IMG);
      expect(fixture.nativeElement.querySelector(makeClassSelector(ERROR_CLASS))).toBeNull();
      expect(fixture.nativeElement.querySelector(makeClassSelector(SUCCESS_CLASS))).not.toBeNull();
      done();
    }, 20);
  });

  it('# error', (done) => {
    fixture.componentInstance.src = './asset/s.png';
    fixture.detectChanges();
    setTimeout(() => {
      fixture.detectChanges();
      const src = fixture.nativeElement.querySelector('img').getAttribute('src');
      expect(src).toBe(IMG404);
      expect(fixture.nativeElement.querySelector(makeClassSelector(SUCCESS_CLASS))).toBeNull();
      expect(fixture.nativeElement.querySelector(makeClassSelector(ERROR_CLASS))).not.toBeNull();
      done();
    }, 500);
  });
});


@Component({
  template: `
    <div>
      <img
        style="width: 100px;height: 100%;"
        [bixiSafeSrc]="src"
        [bixiErrorSrc]="srcError"
        [bixiSuccessClass]="successClass"
        [bixiErrorClass]="errorClass">
    </div>
  `
})
class TestComponent {
  src = IMG;
  srcError = IMG404;
  errorClass = ERROR_CLASS;
  successClass = SUCCESS_CLASS;
}