mercredi 4 janvier 2017

Angular2 tests interfering with each other

I am writing a test spec for an Angular2 module which seems to have an issue where the final test works when the preceding 4 are commented out but fails when they are not. It leads me to believe that the final test is using a TestingModule that has been interfered with by a previous test. Here is my testing module:

import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from "@angular/core";
import { HttpModule } from "@angular/http";
import { By } from "@angular/platform-browser";
import { FileUploaderDirective } from "../../../components/directives/files/FileUploaderDirective";
import { APIUrlPipe } from "../../../pipes/apiurl.pipe";
import { FilesService } from "../../../services/files.service";
import { MockFilesService } from "../../mocks/services/mockFilesService";
import { mockFilesData } from "../../mocks/data/fileData";

let comp:    FileUploaderDirective;
let fixture: ComponentFixture<FileUploaderDirective>;
let de:      DebugElement;
let el:      HTMLElement;

describe('Directive: File Uploader', () => {
    let fileService = new MockFilesService();

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                FileUploaderDirective,
                APIUrlPipe
            ],
            providers: [
                {
                    provide: FilesService, useValue: fileService
                }
            ],
            imports: [
                HttpModule
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        })
            .compileComponents()
                .then(() => {
                    fixture = TestBed.createComponent(FileUploaderDirective);
                    comp = fixture.componentInstance;
                });

    }));

    it('Should check filesLoaded is true after page load', async(() => {
        comp.fileUploaderScope = {
            fileType: "image",
            options: {
                files: [

                ]
            },
            type: "product"
        };
        fixture.detectChanges();
        expect(comp.filesLoaded).toBe(true);
    }));


    it('Should check files are populated by images only', () => {
        //TODO fix this test!
        comp.fileUploaderScope = {
            fileType: "image",
            options: {
                files: mockFilesData.allFiles
            },
            type: "product"
        };
        fixture.detectChanges();
        expect(comp.files.length).toEqual(2);
    });

    it('Should check files are populated by files only', () => {
        comp.fileUploaderScope = {
            fileType: "file",
            options: {
                files: mockFilesData.allFiles
            },
            type: "product"
        };
        fixture.detectChanges();
        expect(comp.files.length).toEqual(2);
    });

    it('Should mark products as assigned if they exist in product assigned scope', () => {
        comp.fileUploaderScope = {
            fileType: "file",
            options: {
                files: mockFilesData.allFiles
            },
            type: "product"
        };
        fixture.detectChanges();
        comp.files.forEach((file) => {
            expect(file.assigned).toEqual(true);
        });
    });

    it('Should mark a file as assigned on click', () => {
        comp.fileUploaderScope = {
            fileType: "file",
            options: {
                files: []
            },
            type: "product"
        };
        fixture.detectChanges();

        let productToClick = fixture.nativeElement.querySelector('.image-file-wrap .file');
        expect(comp.files[0].assigned).not.toBeDefined();

        productToClick.dispatchEvent(new Event('click'));

    });
});

In the last test, when this is run in isolation the test runs correctly. This is to be expected and is the correct result. As you can see it checks to see if there is a property called 'assigned' defined on the element object, which there isn't. When I run that test in isolation by commenting the other tests out it fails and I get:

Expected true not to be defined.
Error: Expected true not to be defined.

One of the previous tests 'Should mark products as assigned if they exist in product assigned scope' sets the 'assigned' products to true and this precedes my final test so all I Can think of is that my testing module state is not being rebuilt on each test in the beforeEach. Can anyone see why this may be happening?

Thanks!

Aucun commentaire:

Enregistrer un commentaire