in Education by
We have a repository of logos that we can look up by ID, but there are a few instances where they are missing and we need to show a "default" logo instead. I've made an angular directive to make this process a bit easier. It's used like this: image And here's the functioning directive import { Directive, Input, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appLogoFromId]' }) export class LogoFromIdDirective { private static readonly baseUrl: string = 'https://our-website.com/sitelogos/'; private static readonly fallbackImgUrl: string = LogoFromIdDirective.baseUrl + 'default.svg'; @Input() set appLogoFromId(value: string | number) { this.nativeEl.src = LogoFromIdDirective.baseUrl + value + '.jpg'; } private readonly nativeEl: HTMLImageElement; private errCount: number = 0; constructor(private elem: ElementRef) { this.nativeEl = this.elem.nativeElement; //This directive only works on image elements, so throw an error otherwise const elTag = this.nativeEl.tagName.toLowerCase(); if (elTag !== 'img') { throw Error(`The "appLogoFromId" directive may only be used on "image" elements, but this is a "<${elTag}>" element!`); } } @HostListener('error') onError(): void { //404 error on image path, so we instead load this fallback image //but if that fallback image ever goes away we don't want to be in a loop here, //so we ned to keep track of how many errors we've encountered if (this.errCount < 2) { this.nativeEl.src = LogoFromIdDirective.fallbackImgUrl; } this.errCount++; } } My question is: How do I test the @HostListener('error') portion of this directive? I have this test, but it's failing. what do I need to be doing differently? it('should update the img element src attribute for an invalid image', () => { component.bankId = 'foo'; fixture.detectChanges(); expect(nativeEl.src).toBe('https://our-website.com/sitelogos/default.svg'); }); error message: Expected 'https://our-website.com/sitelogos/foo.jpg' to be 'https://our-website.com/sitelogos/default.svg'. For completeness, here's my entire spec file for this directive import { LogoFromIdDirective } from './logo-from-id.directive'; import {ComponentFixture, TestBed } from '@angular/core/testing'; import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; import { By } from '@angular/platform-browser'; @Component({ template: `image` }) class TestLogoFromIdOnImgComponent { theId: number | string = 5; } @Component({ template: `
` }) class TestLogoFromIdOnNonImgComponent { theId: number | string = 5; } describe('Directive: [appLogoFromId]', () => { describe('On an `image` element', () => { let component: TestLogoFromIdOnImgComponent; let fixture: ComponentFixture; let inputEl: DebugElement; let nativeEl: HTMLInputElement; beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestLogoFromIdOnImgComponent, LogoFromIdDirective], schemas: [ NO_ERRORS_SCHEMA ] }); fixture = TestBed.createComponent(TestLogoFromIdOnImgComponent); component = fixture.componentInstance; inputEl = fixture.debugElement.query(By.css('img')); nativeEl = inputEl.nativeElement; }); it('should set the img element src attribute for a valid image', () => { fixture.detectChanges(); expect(nativeEl.src).toBe('https://our-website.com/sitelogos/5.jpg'); }); it('should update the img element src attribute for a valid image when using a number', () => { component.theId = 2852; fixture.detectChanges(); expect(nativeEl.src).toBe('https://our-website.com/sitelogos/2852.jpg'); }); it('should update the img element src attribute for a valid image when using a string', () => { component.theId = '3278'; fixture.detectChanges(); expect(nativeEl.src).toBe('https://our-website.com/sitelogos/3278.jpg'); }); it('should update the img element src attribute for an invalid image', () => { component.theId = 'foo'; fixture.detectChanges(); expect(nativeEl.src).toBe('https://our-website.com/sitelogos/default.svg'); }); }); describe('On a `
` element', () => { it('should throw an error', () => { TestBed.configureTestingModule({ declarations: [TestLogoFromIdOnNonImgComponent, LogoFromIdDirective], schemas: [ NO_ERRORS_SCHEMA ] }); expect(() => TestBed.createComponent(TestLogoFromIdOnNonImgComponent)).toThrow(); }); }); }); JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by
I've finally found a solution that works! it('should update the img element src attribute for an invalid image', () => { const spyError = spyOn(nativeEl, 'onerror' ).and.callThrough(); component.bankId = 'foo'; fixture.detectChanges(); nativeEl.dispatchEvent(new Event('error')); expect(spyError).toHaveBeenCalled(); expect(nativeEl.src).toBe('https://our-website.com/sitelogos/default_bank.svg'); });

Related questions

0 votes
    I have this template that I used everywhere in my project : {{ event.title }} {{ event.content } ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 19, 2022 in Education by JackTerrance
0 votes
    I have this template that I used everywhere in my project : {{ event.title }} {{ event.content } ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 1, 2022 in Education by JackTerrance
0 votes
    I have a component billing that includes ngb-tabset component of Ng Bootstrap. ngb-tabset has the following ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 29, 2022 in Education by JackTerrance
0 votes
    I have a component billing that includes ngb-tabset component of Ng Bootstrap. ngb-tabset has the following ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 26, 2022 in Education by JackTerrance
0 votes
    I need to create an new link from the current route: https://website.com/post/99 = curent browser ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 24, 2022 in Education by JackTerrance
0 votes
    I need to create an new link from the current route: https://website.com/post/99 = curent browser ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 23, 2022 in Education by JackTerrance
0 votes
    I have a component billing that includes ngb-tabset component of Ng Bootstrap. ngb-tabset has the following ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 23, 2022 in Education by JackTerrance
0 votes
    I am using spring-boot latest 2.1.3 release and want to start with testcases, but this is not ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 13, 2022 in Education by JackTerrance
0 votes
    I am using spring-boot latest 2.1.3 release and want to start with testcases, but this is not ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 8, 2022 in Education by JackTerrance
0 votes
    I'm trying to enable Slow Query Logging on mysql 5.7 and getting this error: 2016-04-27T14:55:51 ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 11, 2022 in Education by JackTerrance
0 votes
    I am have a working webdriverio framework which executes without any issue. But recently I included a REST ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 13, 2022 in Education by JackTerrance
0 votes
    What are the provisions made in the Directive Principles regarding decentralization? Please answer the above question....
asked Aug 14, 2022 in Education by JackTerrance
0 votes
    Which page directive should be used in JSP to generate a PDF page? (a) contentType (b) generatePdf (c) typePDF (d ... JSP & API of Java Select the correct answer from above options...
asked Feb 22, 2022 in Education by JackTerrance
0 votes
    Which is not a directive? (a) include (b) page (c) export (d) useBean I got this question in homework. This is ... , JSP & API of Java Select the correct answer from above options...
asked Feb 22, 2022 in Education by JackTerrance
0 votes
    Which one of the following is correct for directive in JSP? (a) (b) (c) (d) This question was addressed to me ... , JSP & API of Java Select the correct answer from above options...
asked Feb 22, 2022 in Education by JackTerrance
...