lundi 24 juillet 2017

Angular testings - is there a way to create a component with the TestBed object and not render the CSS?

I want to test a particular function located inside a component, so I don't really need to render its template or CSS. As far as I've researched, there's no way to prevent the template from loading, but I want to ask if there is a way to exclude the CSS files given inside the styles property.

This is the component:

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: [ './form.component.css' ],
    encapsulation: ViewEncapsulation.None,
})
export class FormComponent implements OnInit {
  constructor(
    // many dependencies
  ) {}

  // ....
  functionIWantToTest() { /*...*/}
}

This is the CSS that imports other files (which are not found (see below))

@import url("/vendor/selectize/dist/css/selectize.css");
@import url("/vendor/codemirror/lib/codemirror.css");

// many other rules

This is the test config:

let service: NetworktoolsSmtp;
let formComponent: FormComponent;

@Injectable()
class TranslateServiceStub {
}
@Injectable()
class NetworktoolsSmtpStub {
}
@Injectable()
class NetworkInterfaceStub {
}
@Injectable()
class MasterApiEntityRepositoryServiceStub {
}
@Injectable()
class AlertsRepositoryServiceStub {
}

let translations: any = {"TEST": "This is a test"};
class FakeLoader implements TranslateLoader {
    getTranslation(lang: string): Observable<any> {
        return Observable.of(translations);
    }
}

// there is a pipe names keys in the form template
@Pipe({name: 'keys'})
class KeysStub implements PipeTransform {
    transform(value: number): number {
        return value;
    }
}

beforeEach(async(() => {
    return TestBed.configureTestingModule({
        imports: [
            TranslateModule.forRoot({
                loader: {provide: TranslateLoader, useClass: FakeLoader}
            })
        ],
        declarations: [
            FormComponent,
            KeysStub,
        ],
        providers: [
            { provide: NetworktoolsSmtp, useClass: NetworktoolsSmtpStub },
            { provide: TranslateService, useClass: TranslateServiceStub },
            { provide: NetworkInterface, useClass: NetworkInterfaceStub },
            { provide: MasterApiEntityRepositoryService, useClass: MasterApiEntityRepositoryServiceStub },
            { provide: TranslateService, useClass: TranslateServiceStub },
            { provide: AlertsRepositoryService, useClass: AlertsRepositoryServiceStub },
        ],
        schemas: [ NO_ERRORS_SCHEMA ]
    }).compileComponents();
}));

beforeEach(() => {
    service = TestBed.get(NetworktoolsSmtp);
    formComponent = TestBed.createComponent(FormComponent).componentInstance;
});

These are the warnings shown in the console when running tests. I would like to prevent the loading of the CSS file so that there is no attempt to load the other resources (they are not found because they are not supposed to exist until the application is built). Is there a way to do it?

These are the warnings shown in console when running tests.

Aucun commentaire:

Enregistrer un commentaire