Erwartet ['/'] ist ['/'] - sie sehen gleich aus

Question

Ich versuche, einen Router Steckdose zu testen.

Ich hatte ursprünglich:

expect(landingPageLink).toBe('/', '1st link should go to landing page'); 

Ich war immer diese Fehlermeldung:

Error: Expected [ '/' ] to be '/', '1st link should go to landing'.

So änderte er dies:

expect(landingPageLink).toBe(['/'], '1st link should go to landing page'); 

Jetzt bekomme ich diesen Fehler:

Error: Expected [ '/' ] to be [ '/' ], '1st link should go to landing page'.

Im unteren Fehler sehen sie gleich aus. Wie kommt es, dass es nicht das Gleiche ist?

Volltest:

import 'zone.js/dist/long-stack-trace-zone.js'; 
import 'zone.js/dist/async-test.js'; 
import 'zone.js/dist/fake-async-test.js'; 
import 'zone.js/dist/sync-test.js'; 
import 'zone.js/dist/proxy.js'; 
import 'zone.js/dist/jasmine-patch.js'; 

import { 
    ComponentFixture, 
    TestBed, 
    async, 
    fakeAsync 
} from '@angular/core/testing'; 
import { 
    BrowserDynamicTestingModule, 
    platformBrowserDynamicTesting 
} from '@angular/platform-browser-dynamic/testing'; 
import { By } from '@angular/platform-browser'; 
import { 
    DebugElement, 
    Component, 
    ViewChild, 
    Pipe, 
    PipeTransform, 
    CUSTOM_ELEMENTS_SCHEMA, 
    NO_ERRORS_SCHEMA 
} from '@angular/core'; 
import { DatePipe } from '@angular/common'; 
import { Router, RouterOutlet, RouterModule } from '@angular/router'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { NavbarComponent } from './shared/subcomponents/navbar.component'; 
import { AppComponent } from './app.component'; 
import { RouterLinkStubDirective } from './router-stubs'; 
import { click } from './test/utilities.spec'; 

describe('AppComponent',() => { 
    let appComponent: AppComponent; 
    let navComponent: NavbarComponent; 
    let appFixture: ComponentFixture<AppComponent>; 
    let navFixture: ComponentFixture<NavbarComponent>; 
    let debugElement: DebugElement; 
    let element: HTMLElement; 
    let linkDes: any; 
    let links: any; 
    let landingPageLink: any; 
    let profileLink: any; 
    let aboutLink: any; 
    let findLink: any; 
    let addLink: any; 
    let registerLink: any; 

    beforeAll(() => { 
     TestBed.resetTestEnvironment(); 
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, 
      platformBrowserDynamicTesting()); 
    }); 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
       AppComponent, 
       NavbarComponent, 
       RouterLinkStubDirective 
      ], 
      imports: [RouterTestingModule], 
      schemas: [NO_ERRORS_SCHEMA] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     appFixture = TestBed.createComponent(AppComponent); 
     navFixture = TestBed.createComponent(NavbarComponent); 
     appComponent = appFixture.componentInstance; 
     navComponent = navFixture.componentInstance; 
     // trigger initial data binding 
     appFixture.detectChanges(); 
     navFixture.detectChanges(); 

     // find DebugElements with an attached RouterLinkStubDirective 
     linkDes = navFixture.debugElement 
      .queryAll(By.directive(RouterLinkStubDirective)); 

     // get the attached link directive instances using the DebugElement injectors 
     links = linkDes 
      .map((de: any) => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective); 
     landingPageLink = links[0].linkParams; 
     profileLink = links[1].linkParams; 
     aboutLink = links[2].linkParams; 
     findLink = links[3].linkParams; 
     addLink = links[4].linkParams; 
     registerLink = links[5].linkParams; 
    }); 

    it('can get RouterLinks from template',() => { 
     expect(links.length).toBe(6, 'should have 6 links'); 
     expect(landingPageLink).toBe(['/'], '1st link should go to landing page'); 
     expect(profileLink).toBe('/profile', '2nd link should go to Heroes'); 
     expect(aboutLink).toBe('/about', '3rd link should go to Heroes'); 
     expect(findLink).toBe('/find', '4th link should go to Heroes'); 
     expect(addLink).toBe('/add', '5th link should go to Heroes'); 
     expect(registerLink).toBe('/register', '6th link should go to Heroes'); 
    }); 

    it('can click find link in template',() => { 
     expect(profileLink.navigatedTo).toBeNull('link should not have navigated yet'); 
     profileLink.triggerEventHandler('click', null); 
     appFixture.detectChanges(); 
     expect(profileLink.navigatedTo).toBe('/find'); 
    }); 
}); 

Answer 1

Warum Ihr erster Versuch fehlschlägt

['/'] ist ein Array ein Element enthält, die Zeichenfolge: '/'.

'/' ist eine literale Zeichenfolge.

Jasmins toBe() Matcher vergleicht mit ===, nicht ==, so dass Ihr erster Vergleich zu ['/'] === '/' entspricht, die immer fehlschlägt.

Warum Ihr zweiter Versuch fehlschlägt

Sie nicht zwei Arrays mit === direkt vergleichen kann; Das Ergebnis wird immer falsch sein. Also, Ihr zweiter Vergleich, der ['/'] === ['/'] entspricht, schlägt ebenfalls fehl.

The Fix

Statt toBe verwenden toEqual, die tief Vergleiche der Fall ist. Dies bedeutet, dass Arrays und Objekte verglichen werden können, um zu überprüfen, ob ihre Elemente gleich sind. Beispiel:

expect(landingPageLink).toEqual(['/'], '1st link should go to landing page'); 

All dies ist documented in the section "Included Matchers," aber nicht super-klar.