74199: Lint and LGTM fixes + HoverClassDirective JSDocs and tests

This commit is contained in:
Kristof De Langhe
2020-11-04 14:59:10 +01:00
parent 7bd7f38259
commit 5835c661ac
4 changed files with 49 additions and 4 deletions

View File

@@ -5,7 +5,6 @@ import { ItemSearchResult } from '../../../../../shared/object-collection/shared
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { SidebarSearchListElementComponent } from '../../../../../shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component'; import { SidebarSearchListElementComponent } from '../../../../../shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component';
import { Item } from '../../../../../core/shared/item.model'; import { Item } from '../../../../../core/shared/item.model';
import { isNotEmpty } from '../../../../../shared/empty.util';
@listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.SideBarSearchModal) @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.SideBarSearchModal)
@listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.SideBarSearchModalCurrent) @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.SideBarSearchModalCurrent)

View File

@@ -5,7 +5,6 @@ import { ItemSearchResult } from '../../../../../shared/object-collection/shared
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { SidebarSearchListElementComponent } from '../../../../../shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component'; import { SidebarSearchListElementComponent } from '../../../../../shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component';
import { Item } from '../../../../../core/shared/item.model'; import { Item } from '../../../../../core/shared/item.model';
import { isNotEmpty } from '../../../../../shared/empty.util';
@listableObjectComponent('ProjectSearchResult', ViewMode.ListElement, Context.SideBarSearchModal) @listableObjectComponent('ProjectSearchResult', ViewMode.ListElement, Context.SideBarSearchModal)
@listableObjectComponent('ProjectSearchResult', ViewMode.ListElement, Context.SideBarSearchModalCurrent) @listableObjectComponent('ProjectSearchResult', ViewMode.ListElement, Context.SideBarSearchModalCurrent)

View File

@@ -0,0 +1,35 @@
import { Component, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HoverClassDirective } from './hover-class.directive';
import { By } from '@angular/platform-browser';
@Component({
template: `<div dsHoverClass="ds-hover"></div>`
})
class TestComponent { }
describe('HoverClassDirective', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
let el: DebugElement;
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [TestComponent, HoverClassDirective]
}).createComponent(TestComponent);
fixture.detectChanges();
component = fixture.componentInstance;
el = fixture.debugElement.query(By.css('div'));
});
it('should add the class on mouseenter and remove on mouseleave', () => {
el.triggerEventHandler('mouseenter', null);
fixture.detectChanges();
expect(el.nativeElement.classList).toContain('ds-hover');
el.triggerEventHandler('mouseleave', null);
fixture.detectChanges();
expect(el.nativeElement.classList).not.toContain('ds-hover');
});
});

View File

@@ -3,15 +3,27 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({ @Directive({
selector: '[dsHoverClass]' selector: '[dsHoverClass]'
}) })
/**
* A directive adding a class to an element when hovered over
*/
export class HoverClassDirective { export class HoverClassDirective {
/**
constructor(public elementRef: ElementRef) { } * The name of the class to add on hover
*/
@Input('dsHoverClass') hoverClass: string; @Input('dsHoverClass') hoverClass: string;
constructor(public elementRef: ElementRef) { }
/**
* On mouse enter, add the class to the element's class list
*/
@HostListener('mouseenter') onMouseEnter() { @HostListener('mouseenter') onMouseEnter() {
this.elementRef.nativeElement.classList.add(this.hoverClass); this.elementRef.nativeElement.classList.add(this.hoverClass);
} }
/**
* On mouse leave, remove the class from the element's class list
*/
@HostListener('mouseleave') onMouseLeave() { @HostListener('mouseleave') onMouseLeave() {
this.elementRef.nativeElement.classList.remove(this.hoverClass); this.elementRef.nativeElement.classList.remove(this.hoverClass);
} }