无法读取所有测试中未定义的属性“ toUpperCase”

时间:2019-05-15 22:49:28

标签: unit-testing jasmine undefined-function

我的茉莉花单元测试存在一些问题。

我所有的测试,在同一文件中,引发以下错误:

  

“无法读取未定义的属性'toUpperCase'”

我试图将所有从模块中导入的文件都放入测试文件中,但是我没有成功

.html

<div class="km-btn-group" *ngIf="create">
    <button class="km-btn km-btn-cancel" type="button" (click)="delete()">descartar bot</button>
    <button *ngIf="botThirdStep?.type?.toUpperCase() == 'FAQ'" class="km-btn km-btn-default" type="button" (click)="cleanStep()">remover
        selecionados</button>
    <button class="km-btn km-btn-success" type="button" (click)="goToReview()">concluir</button>
</div>

<div class="km-btn-group" *ngIf="!create">
    <button class="km-btn km-btn-cancel" type="button" (click)="cancel()">cancelar</button>
    <!-- <button *ngIf="botThirdStep?.type?.toUpperCase() == 'FAQ'" class="km-btn km-btn-default" type="button" (click)="reset()">limpar
        alterações</button> -->
    <button class="km-btn km-btn-success" type="button" (click)="saveChanges()">salvar</button>
</div>

<card-structured-dialog *ngIf="botThirdStep?.type?.toUpperCase() == 'STRUCTURED'" class="km-structured-dialog"></card-structured-dialog>

<div *ngIf="botThirdStep?.type?.toUpperCase() != 'STRUCTURED'" class="row no-gutters km-newbot-wrap">

    <div class="col-md-4">
        <div class="card km-card km-newbot-card">
            <h2 class="km-newbot-card-title">Assuntos Selecionados</h2>
            <app-loading *ngIf="loading"></app-loading>
            <ul *ngIf="!loading" class="list-unstyled km-newbot-dragarea" dragula="SUBJECTS" [(dragulaModel)]='selected'>
                <li *ngFor="let subject of selected">
                    <app-bot-subject [botSubjects]="subject" remove="true" (backToAvailable)="goBackToAvailable(subject.id)"></app-bot-subject>
                </li>
            </ul>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card km-card km-newbot-card">
            <div class="row km-newbot-card-title">
                <div class="col-md-5 col-lg-4">
                    <h2>Assuntos Disponíveis</h2>
                </div>
                <div *ngIf="!loading" class="col-md-7 col-lg-8 km-newbot-search">
                    <app-input name="search" placeholder="Qual Assunto você procura?" [value]="filter" (bindValue)="debounce.next($event)"
                        urlimg="../../../assets/images/search.png">
                    </app-input>
                </div>
            </div>
            <app-loading *ngIf="loading"></app-loading>
            <ul *ngIf="!loading" class="row list-unstyled km-newbot-droparea" dragula="SUBJECTS" [(dragulaModel)]='available'>
                <li class="col-xs-12 col-sm-6" *ngFor="let subject of available | filterByParam: 'name':filter | orderByParam: 'name'">
                    <app-bot-subject [botSubjects]="subject"></app-bot-subject>
                </li>
            </ul>
        </div>
    </div>

</div><div class="km-btn-group" *ngIf="create">
    <button class="km-btn km-btn-cancel" type="button" (click)="delete()">descartar bot</button>
    <button *ngIf="botThirdStep?.type?.toUpperCase() == 'FAQ'" class="km-btn km-btn-default" type="button" (click)="cleanStep()">remover
        selecionados</button>
    <button class="km-btn km-btn-success" type="button" (click)="goToReview()">concluir</button>
</div>

<div class="km-btn-group" *ngIf="!create">
    <button class="km-btn km-btn-cancel" type="button" (click)="cancel()">cancelar</button>
    <!-- <button *ngIf="botThirdStep?.type?.toUpperCase() == 'FAQ'" class="km-btn km-btn-default" type="button" (click)="reset()">limpar
        alterações</button> -->
    <button class="km-btn km-btn-success" type="button" (click)="saveChanges()">salvar</button>
</div>

<card-structured-dialog *ngIf="botThirdStep?.type?.toUpperCase() == 'STRUCTURED'" class="km-structured-dialog"></card-structured-dialog>

<div *ngIf="botThirdStep?.type?.toUpperCase() != 'STRUCTURED'" class="row no-gutters km-newbot-wrap">

    <div class="col-md-4">
        <div class="card km-card km-newbot-card">
            <h2 class="km-newbot-card-title">Assuntos Selecionados</h2>
            <app-loading *ngIf="loading"></app-loading>
            <ul *ngIf="!loading" class="list-unstyled km-newbot-dragarea" dragula="SUBJECTS" [(dragulaModel)]='selected'>
                <li *ngFor="let subject of selected">
                    <app-bot-subject [botSubjects]="subject" remove="true" (backToAvailable)="goBackToAvailable(subject.id)"></app-bot-subject>
                </li>
            </ul>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card km-card km-newbot-card">
            <div class="row km-newbot-card-title">
                <div class="col-md-5 col-lg-4">
                    <h2>Assuntos Disponíveis</h2>
                </div>
                <div *ngIf="!loading" class="col-md-7 col-lg-8 km-newbot-search">
                    <app-input name="search" placeholder="Qual Assunto você procura?" [value]="filter" (bindValue)="debounce.next($event)"
                        urlimg="../../../assets/images/search.png">
                    </app-input>
                </div>
            </div>
            <app-loading *ngIf="loading"></app-loading>
            <ul *ngIf="!loading" class="row list-unstyled km-newbot-droparea" dragula="SUBJECTS" [(dragulaModel)]='available'>
                <li class="col-xs-12 col-sm-6" *ngFor="let subject of available | filterByParam: 'name':filter | orderByParam: 'name'">
                    <app-bot-subject [botSubjects]="subject"></app-bot-subject>
                </li>
            </ul>
        </div>
    </div>

</div>

component.ts

@Component({
    selector: 'app-step-third',
    templateUrl: './step-third.component.html',
    styleUrls: ['./step-third.component.scss']
})
export class StepThirdComponent implements OnInit, OnDestroy {

    private loading = false;
    private filter = '';
    private debounce: Subject<string> = new Subject<string>();
    private subs = new Subscription();
    private compareAvailable: BotSubject[] = [];
    private compareSelected: BotSubject[] = [];
    @Input() autosave = false;
    @Input() create = true;
    @Input() botThirdStep: Bot;
    @Input() available: BotSubject[] = [];
    @Input() selected: BotSubject[] = [];
    @Output() relodSubjects: EventEmitter<any> = new EventEmitter();
    @Output() deleteDraft: EventEmitter<any> = new EventEmitter();
    @Output() goBack: EventEmitter<any> = new EventEmitter();
    private user: UserModel;
    private userColaboratorInformation: UserColaboratorInformation

    constructor(
        private router: Router,
        private dragulaService: DragulaService,
        private subjectService: BotSubjectService
    ) {
        this.user = new UserModel();
        this.user = JSON.parse(window.localStorage.getItem('userLogged'));
        this.userColaboratorInformation = new UserColaboratorInformation();
        this.userColaboratorInformation = JSON.parse(window.localStorage.getItem('userColaboratorInformation'));
    }

    ngOnInit(): void {
        if ((this.botThirdStep.type.toUpperCase() === 'STRUCTURED') && !(this.selected.length === 0))
            this.cleanStep()


        window.scrollTo(0, 0);
        this.debounce
            .subscribe(filter => this.filter = filter);

        if (this.autosave) {
            this.subs.add(this.dragulaService.dropModel('SUBJECTS')
                .subscribe(({ sourceModel, targetModel, item }) => {
                    if (sourceModel !== targetModel) {
                        this.updateSubject(this.botThirdStep._id, item.id, false);
                    }
                })
            );
        } else {
            this.compareAvailable = this.available;
            this.compareSelected = this.selected;
        }

    }

    ngOnDestroy(): void {
        this.debounce.unsubscribe();
        this.subs.unsubscribe();
    }

    public updateSubject(botId: string, subjectId: string, reload: boolean): void {
        this.loading = true;
        const data: changeSubject = {
            userName: this.userColaboratorInformation.employeeName,
            userRole: this.userColaboratorInformation.occupationName,
        };
        this.subjectService.updateSubject(botId, subjectId, data)
            // .map((res: Response) => (res.json()))
            .subscribe((res) => {
                this.loading = false;
                if (reload) {
                    this.relodSubjects.emit();
                }
            }, (err) => {
                this.loading = false;
                if (reload) {
                    this.relodSubjects.emit();
                }
            });
    }

    public cleanStep(): void {
        if (this.autosave) {
            this.selected.forEach(subject => {
                this.updateSubject(this.botThirdStep._id, subject.id, true);
            });
        }
    }

    public delete(): void {
        this.deleteDraft.emit();
    }

    public goToReview(): void {
        this.router.navigateByUrl('/bot/review-draft/' + this.botThirdStep._id);
    }

    public goBackToAvailable(subjectId): void {
        if (this.autosave) {
            this.updateSubject(this.botThirdStep._id, subjectId, true);
        } else {
            this.loading = true;
            this.filter = ' ';
            let auxIndex = -1;
            let auxObj: BotSubject;
            this.selected.forEach((element, index) => {
                if (element.id === subjectId) {
                    auxIndex = index;
                    auxObj = element;
                }
            });
            if (auxIndex >= 0) {
                setTimeout(() => {
                    this.selected.splice(auxIndex, 1);
                    this.available.push(auxObj);
                    this.filter = null;
                    this.loading = false;
                }, 100);
            }
        }
    }

    public saveChanges(): void {
        this.loading = true;
        let sendToChange: BotSubject[];
        sendToChange = this.objectsInBoth(this.compareAvailable, this.selected).concat(this.objectsInBoth(this.compareSelected, this.available));
        if (sendToChange.length > 0) {
            this.subjectService.swapSelected(this.botThirdStep._id, this.jsonWithOnlySubjectId(sendToChange))
                // .map((res: Response) => (res.json()))
                .subscribe((res) => {
                    this.loading = false;
                    this.goBack.emit();
                }, (err) => {
                    this.loading = false;
                    alert('Ocorreu algum erro ao tentar salvar as alterações. Por favor tente novamente');
                });
        } else {
            this.goBack.emit();
        }
    }

    public objectsInBoth(mainArray, compareArray): BotSubject[] {
        const hasInBoth = [];
        mainArray.forEach(obj => {
            if (compareArray.includes(obj)) {
                hasInBoth.push(obj);
            }
        });
        return hasInBoth;
    }

    public jsonWithOnlySubjectId(array: BotSubject[]) {
        const normalizeArray = [];
        for (const object of array) {
            normalizeArray.push({ 'id': object.id });
        }
        const json = {
            'userName': 'Maycon pacheco',
            'userRole': 'Back',
            'subjects': normalizeArray
        };
        return json;
    }

    public cancel(): void {
        this.goBack.emit();
    }

}

.spec

class MockDragulaService {
    dropModel = jasmine.createSpy('dropModel').and.returnValue(
        Observable.of({
            name: '',
            el: undefined,
            target: undefined,
            source: undefined,
            sibling: undefined,
            item: { id: 111 },
            sourceModel: [1],
            targetModel: [2],
            sourceIndex: 0,
            targetIndex: 0
        })
    );
}

class MockBotSubjectService {
    updateSubject = jasmine.createSpy('updateSubject').and.returnValue(Observable.of({ attr: 'test' }));
}

fdescribe('StepThirdComponent', () => {
    let component: StepThirdComponent;
    let fixture: ComponentFixture<StepThirdComponent>;
    const router = {
        navigateByUrl: jasmine.createSpy('navigateByUrl'),    // to spy on the url that has been routed
    };
    let dragulaServiceSpy: DragulaService;
    let botSubjectServiceSpy: BotSubjectService;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [

            ],
            declarations: [
                StepThirdComponent,
                // SubjectStubComponent,
                // InputStubComponent,
                FilterByParamPipe,
                OrderByParamPipe,
            ],
            schemas: [
                NO_ERRORS_SCHEMA
            ],
            providers: [
                { provide: Router, useValue: router },
                { provide: DragulaService, useClass: MockDragulaService },
                { provide: BotSubjectService, useClass: MockBotSubjectService },
            ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(StepThirdComponent);
        component = fixture.componentInstance;
        component.botThirdStep = { _id: 'test' };
        fixture.detectChanges();
        dragulaServiceSpy = fixture.debugElement.injector.get(DragulaService);
        botSubjectServiceSpy = fixture.debugElement.injector.get(BotSubjectService);
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('should test updateSubject called on ngOnInit if autosave is true', () => {
        component['debounce'] = new Subject<string>();
        component['subs'] = new Subscription();
        component['autosave'] = true;
        component.ngOnInit();
        expect(botSubjectServiceSpy.updateSubject).toHaveBeenCalled();
    });

    it('should test ngOnDestroy', () => {
        spyOn(component['debounce'], 'unsubscribe');
        spyOn(component['subs'], 'unsubscribe');
        component.ngOnDestroy();
        expect(component['debounce'].unsubscribe).toHaveBeenCalled();
        expect(component['subs'].unsubscribe).toHaveBeenCalled();
    });

    describe('should test updateSubject', () => {
        it('should test updateSubject for reload = false', () => {
            const mockData: changeSubject = {
                userName: 'Iara Nascimento',
                userRole: 'Front End'
            };
            component.updateSubject('botId', 'subjectId', false);
            expect(component['loading']).toBe(false);
            expect(botSubjectServiceSpy.updateSubject).toHaveBeenCalledWith('botId', 'subjectId', mockData);
        });
    });

    it('should test cleanStep', () => {
        botSubjectServiceSpy.updateSubject = jasmine.createSpy('updateSubject').and.returnValue(Observable.of({ attr: 'test' }));
        component.botThirdStep._id = 'testId1';
        component.selected = [
            { id: 'testId2', name: '', userName: '', userRole: '', subjectType: '', subjectChannel: '', subjectArea: '' },
            { id: 'testId3', name: '', userName: '', userRole: '', subjectType: '', subjectChannel: '', subjectArea: '' }
        ];
        component['autosave'] = true;
        component.cleanStep();
        expect(botSubjectServiceSpy.updateSubject).toHaveBeenCalledTimes(2);
    });

    it('should test cleanStep else case', () => {
        component['autosave'] = false;
        component.cleanStep();

    });

    it('should test delete', () => {
        spyOn(component['deleteDraft'], 'emit');
        component.delete();
        expect(component['deleteDraft'].emit).toHaveBeenCalled();
    });

    it('should test goToReview', () => {
        component.botThirdStep._id = 'testId1';
        component.goToReview();
        expect(router.navigateByUrl).toHaveBeenCalledWith('/bot/review-draft/testId1');
    });

    it('should test goBackToAvailable', () => {
        spyOn(component, 'updateSubject');
        component.botThirdStep._id = 'testId1';
        component['autosave'] = true;
        component.goBackToAvailable('testId2');
        expect(component.updateSubject).toHaveBeenCalledWith('testId1', 'testId2', true);
    });

    it('should test goBackToAvailable else case with an array with 1 or more lenght', () => {
        // tslint:disable-next-line:max-line-length
        const selected: BotSubject[] = [{ id: '1234', name: 'Cartão', userName: 'Jonathan', userRole: 'Jonathan', subjectType: 'FAQ', subjectChannel: 'Mobile', subjectArea: 'Cartões' }, { id: '4321', name: 'Cartão', userName: 'Jonathan', userRole: 'Jonathan', subjectType: 'FAQ', subjectChannel: 'Mobile', subjectArea: 'Cartões' }, { id: '1234', name: 'Cartão', userName: 'Jonathan', userRole: 'Jonathan', subjectType: 'FAQ', subjectChannel: 'Mobile', subjectArea: 'Cartões' }];
        component.selected = selected;
        component['autosave'] = false;
        component.goBackToAvailable('1234');
    });

});

我没想到所有这些问题。 拜托,我尝试了很多没有成功的事情,请帮助我。

0 个答案:

没有答案