web-dev-qa-db-fra.com

Comment injecter le service dans le fichier spec Angular Testing (Jasmine / karma)

Je suis nouveau pour écrire Angular cas de test unitaire. J'injecte un service dans mon fichier contrôleur (.ts). Comment vais-je injecter le fichier de service dans le fichier spec.

Voici le code:

app.component.ts

getSortData() {
    this.sortService.sortNumberData(this.data, 'name', 'asce');
}

sort.service.ts

sortNumberData(data, rendererKey, type) {
    // data.sort((elem1, elem2) => {
    //   //if number is undefined, then assigning `MAX_SAFE_INTEGER` to to move it to the last in order. 
    //   if (elem1[rendererKey] == undefined) elem1[rendererKey] = Number.MAX_SAFE_INTEGER;
    //   if (!elem2[rendererKey] == undefined) elem2[rendererKey] = Number.MAX_SAFE_INTEGER;
    //   return Number(elem1[rendererKey]) - Number(elem2[rendererKey]);
    // });
    // if (type == "desc") {
    //   return data.reverse();
    // }
    // return data;   
    if (!Array.isArray(rendererKey)) {
        data.sort((elem1, elem2) => {
            if (elem1[rendererKey] == undefined && elem2[rendererKey] == undefined) {
                return 0;
            } else if (elem1[rendererKey] == undefined) {
                return 1;
            } else if (elem2[rendererKey] == undefined) {
                return -1;
            } else {
                return elem1[rendererKey] - elem2[rendererKey];
            }
        });
        // if the type of rendererKey is array, then use array elements as keys hierarchally.
        // This is used when compare element is not direct property of each element of data array.
    } else if (Array.isArray(rendererKey)) {
        data.sort((elem1, elem2) => {
            let temp1 = elem1, temp2 = elem2;
            rendererKey.map((e) => { temp1 = temp1[e], temp2 = temp2[e] });
            console.log(temp1, temp2);
            if (temp1 == undefined && temp2 == undefined) {
                return Number.MAX_SAFE_INTEGER - Number.MAX_SAFE_INTEGER
            } else if (temp1 == undefined) {
                return Number.MAX_SAFE_INTEGER - temp2;
            } else if (temp2 == undefined) {
                return temp1 - Number.MAX_SAFE_INTEGER;
            } else {
                return temp1 - temp2;
            };
        })

    }
    if (type == "desc") {
        return data.reverse();
    }
    return data;
}

Nous ne le savons pas. Comment injecter ce service dans un fichier spec. Quelqu'un peut-il nous aider?

Merci!

javascriptangulartypescriptkarma-jasmine
6
Pavan Kumar Idapalapati

Celui que vous essayez de réaliser est en fait un test d'intégration car vous essayez de tester deux unités (AppComponent et SortService) toutes les deux collectivement.

Puisque vous parlez de tests unitaires, je pense que vous voulez tester la classe AppComponent. Ce qui signifie que toute dépendance injectable utilisée dans AppComponent doit être moquée. Dans votre cas, il s'agit de la classe SortService. Il y a deux façons de procéder.

Approche 1: utilisation de la classe Mock pour SortService.

app.component.spec.ts

// Mock the SortService class, its method and return it with mock data
class MockSortService extends SortService{
                getSortData(data, rendererKey, type) {
                    return [someRandomArray];
                }
}

beforeEach(async( () => {
    TestBed.configureTestingModule({
            providers: [                   
                // Use the power of Angular DI with following provider. This will replace SortService with MockSortService in injector
                { provide: SortService, useClass: MockSortService },
            ]
    });
));

Approche 2: Utilisation d'un objet Spy.

app.component.spec.ts

beforeEach(async( () => {
        // Create jasmine spy object 
        sortServiceSpy = jasmine.createSpyObj('SortService', 'sortNumberData');
        // Provide the dummy/mock data to sortNumberData method.
        sortServiceSpy.sortNumberData.returnValue([someRandomArray]);
        TestBed.configureTestingModule({
                providers: [                   
                    { provide: SortService, useValue: sortServiceSpy},
                ]
        });
    ));

J'ai bien aimé l'approche 2. Elle est petite et élégante. Mais vous pouvez utiliser l'une des deux approches.

J'espère que cela vous aidera!

5
nikhil

Pour injecter un service dans un fichier de spécifications, vous devez ajouter la configuration TestBed et enregistrer votre service dans le tableau de fournisseurs de la même manière que le fichier ts du module.

Exemple: -describe ('description du cas de test', () => {const sortService;

   beforeEach(async( () => {
     TestBed.configureTestingModule({
         declarations: [],    
         providers: [SortService]
      }).compileComponents();
   }));

   beforeEach( () => {
       sortService = TestBed.get(SortService);
   });
3
user3206740

Cette réponse suppose que vous souhaitez tester unitaire le composant.

Si vous utilisez le Angular TestBed pour tester vos composants, il peut gérer l'injection de service pour vous en le spécifiant dans le tableau des fournisseurs. En supposant que vous souhaitez tester le composant (et simplement se moquer du service) ), Je ferais quelque chose comme ceci:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SortService } from '../services/sort.service';
import { AppComponent } from './app.component';

describe('app component', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let spySortService = jasmine.createSpyObj({ sortNumberData: null });

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [/* add all needed imports for AppComponent */],
            declarations: [ AppComponent ],
            providers: [
                { provide: SortService, useValue: spySortService }
            ]
        });
        fixture = TestBed.createComponent(AppComponent);
  }));

    it('should create', () => {
        expect(fixture).toBeTruthy();
    });
    it('getSortData() should call SortService sortNumberData() method', () => {
        fixture.detectChanges();
        component.getSortData();
        expect(spySortService.sortNumberData.toHaveBeenCalled();
    });
});
1
dmcgrandle