{"id":31661,"date":"2020-12-23T00:00:00","date_gmt":"2020-12-22T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=31661"},"modified":"2021-01-13T09:39:53","modified_gmt":"2021-01-13T08:39:53","slug":"angular-testing-non-mi-fai-paura","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/","title":{"rendered":"Angular Testing non mi fai paura"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

La prima volta che ho aperto un file di test, di quelli che troviamo dopo aver creato un nuovo progetto mediante la CLI Angular, mi sono un po\u2019 perso.<\/p>\n\n\n\n

Avendo molta pi\u00f9 familiarit\u00e0 con framework di test come XUnit o NUnit, ho cercato di fare il match tra quelle che sono le parti di un file di test in NUnit e quelle presenti in un file di test di Jasmine.<\/p>\n\n\n\n

Di seguito, vediamo il codice del file app.component.spec.ts con l\u2019obiettivo di analizzarlo, cos\u00ec da poter iniziare a creare i nostri file di test.<\/p>\n\n\n

\nimport { TestBed, async } from '@angular\/core\/testing';\nimport { RouterTestingModule } from '@angular\/router\/testing';\nimport { AppComponent } from '.\/app.component';\n \ndescribe('AppComponent', () => {\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        RouterTestingModule\n      ],\n      declarations: [\n        AppComponent\n      ],\n    }).compileComponents();\n  }));\n \n  it('should create the app', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app).toBeTruthy();\n  });\n \n  it(`should have as title 'AngularTesting'`, () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app.title).toEqual('AngularTesting');\n  });\n \n  it('should render title in a h1 tag', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    fixture.detectChanges();\n    const compiled = fixture.debugElement.nativeElement;\n    expect(compiled.querySelector('h1').textContent).toContain('Welcome to AngularTesting!');\n  });\n});\n<\/pre><\/div>\n\n\n
Come primo passaggio ho cercato qualcosa del tipo [TestFixture] <\/em><\/strong>che mi identifichi che \u00e8 una classe di test.<\/p>\n\n\n\n
Nel codice troviamo describe<\/strong>(\u2018AppComponent\u2019 () => {});che rappresenta il nostro [TestFixture]<\/em><\/strong>.<\/p>\n\n\n\n
Subito dopo c\u2019\u00e8 beforeEach<\/strong>(() => {}); che in NUnit viene identificato con l\u2019annotazione [SetUp]<\/em><\/strong>, con la quale stiamo istruendo NUnit ad eseguire prima di ogni test il metodo decorato, molto utile quando i test necessitano di una fase di setup comune. Allo stesso modo, le istruzioni contenute nel blocco beforeEach verranno eseguite prima di ogni test.<\/p>\n\n\n\n
A questo punto ci manca [Test]<\/em><\/strong> che troviamo in genere sui metodi, ma in questo caso direi che \u00e8 abbastanza semplice individuarlo, anche per come \u00e8 formato il file.<\/p>\n\n\n\n
it<\/strong>(‘should create the app’, () => {});<\/p>\n\n\n\n
Ora che siamo riusciti a dividere il file di test possiamo analizzare le aree in modo pi\u00f9 specifico.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Angular TestBed<\/h2>\n\n\n\n
In beforeEach troviamo la seguente istruzione:<\/p>\n\n\n\n
TestBed.configureTestingModule({});<\/em><\/p>\n\n\n\n
Innanzitutto, occorre capire chi \u00e8 TestBed<\/strong>.<\/p>\n\n\n\n
Angular Test Bed (ATB) <\/strong>\u00e8 il framework di testing Angular a pi\u00f9 alto livello che ci permette di testare tutto ci\u00f2 che dipende dal Framework Angular stesso.<\/p>\n\n\n\n
Tornando all\u2019istruzione, ecco una delle cose che ci permette di fare TestBed: creare dinamicamente un modulo per il nostro test che simula un NgModule di Angular. La struttura \u00e8 praticamente la stessa, con le import, le declarations e tutto quello che possiamo dichiarare in un NgModule.<\/p>\n\n\n\n
Analizzando uno dei test, ad esempio:<\/p>\n\n\n
\nit('should create the app', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app).toBeTruthy();\n  });\n<\/pre><\/div>\n\n\n
incontriamo un\u2019altra istruzione in cui \u00e8 presente ATB,<\/p>\n\n\n\n
TestBed.createComponent(AppComponent);<\/em><\/strong><\/p>\n\n\n\n
La prima cosa che mi sono chiesto guardando questa istruzione \u00e8 stata perch\u00e9 non \u00e8 stato utilizzata una semplice new<\/em><\/strong>.<\/p>\n\n\n\n
Un component non \u00e8 solo una classe, con la new ottengo solo l\u2019istanza della classe del component. Certo, posso ancora testare il suo funzionamento, ma non posso testare se gli elementi della DOM vengono correttamente creati e se interagiscono come mi aspetto.<\/p>\n\n\n\n
Va quindi utilizzato il createComponent<\/strong> del ATB che crea un\u2019istanza di AppComponent, alla quale \u00e8 associato il template HTML e ritorna un oggetto di tipo ComponentFixture.<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
ComponentFixture<\/h2>\n\n\n\n
Un ComponentFixture<\/strong> \u00e8 uno strumento che ci permette di debuggare e testare un componente.<\/p>\n\n\n
\nit('should create the app', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app).toBeTruthy();\n  });\n<\/pre><\/div>\n\n\n
Possiamo intuire cosa stia testando questo metodo: si assicura che sia stata creata correttamente l\u2019istanza di AppComponent.<\/p>\n\n\n\n
Cos\u2019\u00e8 invece debugElement <\/strong>non \u00e8 cos\u00ec immediato e va quindi analizzato.<\/p>\n\n\n\n
Come abbiamo detto un component non \u00e8 solo una classe ma \u00e8 anche il suo template. ComponentFixture racchiude queste due cose in un unico oggetto, ed espone alcune propriet\u00e0 come debugElement<\/strong> e nativeElement<\/strong>.<\/p>\n\n\n\n
In nativeElement, Angular non \u00e8 in grado di sapere a tempo di compilazione cosa andremo a trovare, dipende dall\u2019ambiente di test che stiamo utilizzando.<\/p>\n\n\n\n
Nel caso sia un ambiente browser, come quello che vedremo in questi test, ci sar\u00e0 un HTMLElement e l\u2019oggetto sar\u00e0 lo stesso che troveremo in debugElement.nativeElement<\/strong>. Altrimenti, potrebbe esserci un oggetto che avr\u00e0 delle API ridotte rispetto ad HTMLElement o non averne affatto.<\/p>\n\n\n\n
Angular quindi si affida all\u2019astrazione di debugElement<\/strong> per restare safe su ogni piattaforma supportata.<\/p>\n\n\n\n
A partire dal HTMLElement possiamo utilizzare il querySelector per prendere gli elementi del DOM che ci interessa testare come accade nella seguente istruzione dell\u2019ultimo test:<\/p>\n\n\n
\nconst compiled = fixture.debugElement.nativeElement;\nexpect(compiled.querySelector('h1').textContent).toContain('Welcome to AngularTesting!');\n<\/pre><\/div>\n\n\n
<\/p>\n\n\n\n
Spy e TestBed.inject<\/h2>\n\n\n\n
A questo punto, siamo quasi pronti per scrivere una nostra classe di test, ma ancora non abbiamo modo di testare componenti o servizi che hanno dipendenze.<\/p>\n\n\n\n
Ci sono diversi modi per poter fornire alla classe che stiamo testando le sue dipendenze.
Possiamo, ad esempio, passarle con una new, possiamo creare una classe Test Double, oppure, ed \u00e8 la scelta consigliata, utilizzare uno spy<\/strong>.<\/p>\n\n\n\n
Jasmine ci permette di creare uno spy mediante la seguente istruzione:<\/p>\n\n\n
\nvar fooSpy = jasmine.createSpyObj(foo, [bar]);\n<\/pre><\/div>\n\n\n
e, con l\u2019istruzione seguente, possiamo fare il setup del metodo bar:<\/p>\n\n\n
\nfooSpy.bar.and.returnValue('stub value');\n<\/pre><\/div>\n\n\n
ora non ci resta che creare la nostra classe passando lo spy<\/p>\n\n\n
\nservice = new Service(fooSpy);\n<\/pre><\/div>\n\n\n
Con questa tecnica, per\u00f2, non stiamo utilizzando la dependency injection di Angular: nelle nostre applicazioni Angular non ci sogneremo mai di fare una new<\/strong> di una classe per passarla al nostro service. Generalmente, infatti, un approccio di questo tipo comporterebbe avere delle dipendenze che non facilitano il testing e richiederebbero la creazione manuale dell\u2019istanza. Per superare il problema, registriamo nel modulo opportuno tutte le classi che ci servono nell\u2019array Provider.<\/p>\n\n\n\n
Vorremmo replicare lo stesso comportamento anche nei nostri test. Possiamo farlo combinando spy e ATB:<\/p>\n\n\n
\nvar fooSpy = jasmine.createSpyObj(Foo, [bar]);\nTestBed.configureTestingModule({\n    \u2026\n        providers: [\n     Service,\n      { provide: Foo, useValue: fooSpy }\n    ]\n    ..\n});\n<\/pre><\/div>\n\n\n
Infine, nei metodi di test utilizzeremo le seguenti istruzioni per recuperare le istanze che ci servono<\/p>\n\n\n
\nservice = TestBed.inject(Service);\nfooSpy = TestBed.inject(Foo) as jasmine.SpyObj&lt;Foo>;\n<\/pre><\/div>\n\n\n
TestBed.inject<\/strong> \u00e8 possibile utilizzarlo dalla versione 9 di Angular, per quelle precedenti va utilizzato TestBed.get.<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
Demo<\/h2>\n\n\n\n
Non ci resta che passare al codice e provare ad aggiungere una dipendenza all’AppComponent creato dalla CLI, e testare il tutto mediante uno spy.<\/p>\n\n\n\n
Voglio creare un service che espone un metodo che restituisce una lista di stringhe: se la chiamata va a buon fine verr\u00e0 mostrata la lista, altrimenti un messaggio di errore.<\/p>\n\n\n\n
Vediamo come possiamo configurare il test. Innanzitutto creiamo il service:<\/p>\n\n\n
\nimport { Injectable } from '@angular\/core';\nimport { Observable, of } from 'rxjs';\n@Injectable({ providedIn: 'root' })\nexport class AppService {\n  constructor() { }\n  getList(): Observable<string[]> {\n    return of(['item1', 'item2', 'item3']);\n  }\n}\n<\/pre><\/div>\n\n\n
Aggiungiamolo ad app.module.ts<\/em><\/strong> inserendolo tra i provider<\/p>\n\n\n
\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule\n  ],\n  providers: [AppService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre><\/div>\n\n\n
modifichiamo app.component.ts<\/em><\/strong> per poter fare la chiamata a getList()<\/p>\n\n\n
\nimport { Component, OnInit } from '@angular\/core';\nimport { AppService } from '.\/app.service';\n \n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n  title = 'AngularTesting';\n  items = [];\n  constructor(service: AppService) {\n    service.getList().subscribe(\n      data => this.items = data\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
e app.component.html<\/em><\/strong> per visualizzare la lista.<\/p>\n\n\n
\n<div style="text-align:center">\n  <h1>\n    Welcome to {{ title }}!\n  <\/h1>\n<\/div>\n<ul>\n  <li *ngFor="let item of items">{{item}}<\/li>\n<\/ul>\n<\/pre><\/div>\n\n\n
Ora possiamo passare ad aggiungere i nostri test, modificando la classe di test che abbiamo analizzato prima app.component.spec.ts<\/em><\/strong><\/p>\n\n\n\n
Eseguendo ora i test presenti, saranno tutti rossi. Nell\u2019AppComponent abbiamo aggiunto una dipendenza con un metodo che ritorna un observable, quindi dobbiamo istruire la classe di test affinch\u00e9 gestisca la modifica.<\/p>\n\n\n\n
Modifichiamo il beforeEach <\/strong>aggiungendo lo spy <\/strong>per il servizio creato, e procediamo con il setup del metodo getList<\/p>\n\n\n
\nconst items = ['item1', 'item2', 'item3'];\nbeforeEach(async(() => {\n    const spy = jasmine.createSpyObj('AppService', ['getList']);\n    spy.getList.and.returnValue(of(items));\n \n    TestBed.configureTestingModule({\n      imports: [\n        RouterTestingModule\n      ],\n      declarations: [\n        AppComponent\n      ],\n      providers: [\n        { provide: AppService, useValue: spy }\n      ]\n    }).compileComponents();\n  }));\n<\/pre><\/div>\n\n\n
Con i test di nuovo verdi, possiamo inserirne uno nuovo.<\/p>\n\n\n
\nit('should render list when getList() work properly', () => {\n  const fixture = TestBed.createComponent(AppComponent);\n \n  fixture.detectChanges();\n  const compiled = fixture.debugElement.nativeElement;\n  const elements = compiled.querySelector('ul')\n  .querySelectorAll('li');\n \n  items.forEach((item, index) => {\n    expect(elements[index].textContent === item);\n  });\n});\n<\/pre><\/div>\n\n\n
Con questo test ci assicuriamo che gli elementi della lista mostrati all\u2019utente, nel caso in cui getList vada a buon fine, siano esattamente quelli che abbiamo fornito nel setup.<\/p>\n\n\n\n
Manca il test in cui la chiamata genera un errore, e vogliamo mostrare all\u2019utente un messaggio di errore.<\/p>\n\n\n\n
Nel componente, al momento non abbiamo nulla che gestisca tale errore lato codice n\u00e9 elementi in grado di visualizzarlo, dovremo quindi modificarlo per poter gestire questa casistica.<\/p>\n\n\n\n
Proviamo, per\u00f2, a partire con un approccio TDD, partendo quindi dal test, e poi modifichiamo il componente.<\/p>\n\n\n\n
Come primo passo andiamo a recuperare lo spy di AppService e cambiamo il comportamento del metodo getList, restituendo un errore.<\/p>\n\n\n\n
Ora possiamo creare il nostro expect: mediante querySelector recuperiamo l\u2019elemento html che dovrebbe contenere il messaggio di errore e verifichiamo che contenga esattamente \u201cError!\u201d.<\/p>\n\n\n\n
Il test completo dovrebbe essere cos\u00ec<\/p>\n\n\n
\nit('should show error message when getList() return an error', () => {\n   const errorMessage = 'Fake error';\n   const spy = TestBed.get(AppService) as jasmine.SpyObj&lt;AppService>;\n   spy.getList.and.callFake(() => {\n     return throwError(new Error(errorMessage));\n   });\n   const fixture = TestBed.createComponent(AppComponent);\n \n   fixture.detectChanges();\n   const compiled = fixture.debugElement.nativeElement;\n   const element = compiled.querySelector('h2.error');\n \n   expect(element.textContent.trim()).toEqual(errorMessage);\n });\n<\/pre><\/div>\n\n\n
Lanciando i test, avremo un test rosso, e la motivazione \u00e8 che non pu\u00f2 essere letta la propriet\u00e0 textContent di un oggetto nullo. In parole povere, non \u00e8 stato trovato nessun elemento h2 con classe error nel componente. Mi sarei sorpreso del contrario.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Andiamo a modificare ora il componente per catturare l\u2019errore lanciato da getList:<\/p>\n\n\n
\napp.component.ts\nimport { Component } from '@angular\/core';\nimport { AppService } from '.\/app.service';\n \n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n  title = 'AngularTesting';\n  items = [];\n  errorMessage = '';\n \n  constructor(service: AppService) {\n    this.errorMessage = '';\n \n    service.getList().subscribe(\n      data => this.items = data,\n      error => this.errorMessage = error.message\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
e mostriamolo mediante tag h2 con classe error come stabilito nel test:<\/p>\n\n\n
\napp.component.html\n<h1>\n    Welcome to {{ title }}!\n  <\/h1>\n<\/div>\n<h2 class="error" *ngIf="errorMessage">\n  {{errorMessage}}\n<\/h2>\n<ul>\n  <li *ngFor="let item of items">{{item}}<\/li>\n<\/ul>\n<\/pre><\/div>\n\n\n
Infine rilanciamo i test:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In un solo articolo non \u00e8 stato possibile affrontare tutti gli scenari che si presentano nei test. Ma questa pu\u00f2 essere di sicuro una buona base per poter iniziare a comprendere i test esistenti in un progetto Angular e per poter iniziare a scrivere i nostri test che coprono le richieste delle attivit\u00e0 che ci hanno assegnato.<\/p>\n\n\n\n
Spero che l\u2019articolo vi sia piaciuto.
Al prossimo!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
Uno sguardo al testing partendo dai file .spec.ts e creazione dei nostri primi test<\/p>\n","protected":false},"author":196716250,"featured_media":31662,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387,688637409],"class_list":["post-31661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular","tag-testing"],"yoast_head":"\nAngular Testing non mi fai paura - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Testing non mi fai paura - Blexin\" \/>\n<meta property=\"og:description\" content=\"Uno sguardo al testing partendo dai file .spec.ts e creazione dei nostri primi test\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-22T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:39:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1105\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adolfo Arnold\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adolfo Arnold\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/\"},\"author\":{\"name\":\"Adolfo Arnold\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"headline\":\"Angular Testing non mi fai paura\",\"datePublished\":\"2020-12-22T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:39:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/\"},\"wordCount\":1324,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1\",\"keywords\":[\"Angular\",\"Testing\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/\",\"name\":\"Angular Testing non mi fai paura - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1\",\"datePublished\":\"2020-12-22T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:39:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1\",\"width\":1105,\"height\":656},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-testing-non-mi-fai-paura\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Testing non mi fai paura\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\",\"name\":\"Adolfo Arnold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"caption\":\"Adolfo Arnold\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/adolfo-arnoldblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Testing non mi fai paura - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/","og_locale":"it_IT","og_type":"article","og_title":"Angular Testing non mi fai paura - Blexin","og_description":"Uno sguardo al testing partendo dai file .spec.ts e creazione dei nostri primi test","og_url":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/","og_site_name":"Blexin","article_published_time":"2020-12-22T23:00:00+00:00","article_modified_time":"2021-01-13T08:39:53+00:00","og_image":[{"width":1105,"height":656,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1","type":"image\/png"}],"author":"Adolfo Arnold","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Adolfo Arnold","Tempo di lettura stimato":"9 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/"},"author":{"name":"Adolfo Arnold","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"headline":"Angular Testing non mi fai paura","datePublished":"2020-12-22T23:00:00+00:00","dateModified":"2021-01-13T08:39:53+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/"},"wordCount":1324,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1","keywords":["Angular","Testing"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/","url":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/","name":"Angular Testing non mi fai paura - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1","datePublished":"2020-12-22T23:00:00+00:00","dateModified":"2021-01-13T08:39:53+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1","width":1105,"height":656},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/angular-testing-non-mi-fai-paura\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Angular Testing non mi fai paura"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517","name":"Adolfo Arnold","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","caption":"Adolfo Arnold"},"url":"https:\/\/blexin.com\/it\/author\/adolfo-arnoldblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/01\/1105x656_w_blog-angulartesting.png?fit=1105%2C656&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-8eF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/31661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716250"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=31661"}],"version-history":[{"count":23,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/31661\/revisions"}],"predecessor-version":[{"id":31698,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/31661\/revisions\/31698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/31662"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=31661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=31661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=31661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}