Commit45c8171

committed

refactor(text-color): host binding, cleanup, tests

1 parenta09ec7a commit45c8171Copy full SHA for 45c8171

File tree

+35

-6

lines changed

+35

-6

lines changed

Lines changed: 28 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,38 @@`
`1`		`-import{TestBed}from'@angular/core/testing';`
	`1`	`+import{ComponentFixture,TestBed}from'@angular/core/testing';`
`2`	`2`	`import{TextColorDirective}from'./text-color.directive';`
	`3`	`+import{Component,DebugElement}from'@angular/core';`
	`4`	`+import{By}from'@angular/platform-browser';`
	`5`	`+`
	`6`	`+@Component({`
	`7`	`+imports:[TextColorDirective],`
	`8`	`+template:'<div cTextColor="primary"></div>'`
	`9`	`+})`
	`10`	`+classTestComponent{}`
`3`	`11`
`4`	`12`	`describe('TextColorDirective',()=>{`
	`13`	`+letcomponent:TestComponent;`
	`14`	`+letfixture:ComponentFixture<TestComponent>;`
	`15`	`+letdebugElement:DebugElement;`
	`16`	`+`
	`17`	`+beforeEach(()=>{`
	`18`	`+TestBed.configureTestingModule({`
	`19`	`+imports:[TestComponent]`
	`20`	`+}).compileComponents();`
	`21`	`+`
	`22`	`+fixture=TestBed.createComponent(TestComponent);`
	`23`	`+component=fixture.componentInstance;`
	`24`	`+debugElement=fixture.debugElement.query(By.directive(TextColorDirective));`
	`25`	`+fixture.detectChanges();`
	`26`	`+});`
	`27`	`+`
`5`	`28`	`it('should create an instance',()=>{`
`6`	`29`	`TestBed.runInInjectionContext(()=>{`
`7`	`30`	`constdirective=newTextColorDirective();`
`8`	`31`	`expect(directive).toBeTruthy();`
`9`	`32`	`});`
`10`	`33`	`});`
	`34`	`+`
	`35`	`+it('should have css classes',()=>{`
	`36`	`+expect(debugElement.nativeElement).toHaveClass('text-primary');`
	`37`	`+});`
`11`	`38`	`});`

Lines changed: 7 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,11 @@`
`1`		`-import{Directive,HostBinding,input,InputSignal}from'@angular/core';`
	`1`	`+import{computed,Directive,input,InputSignal}from'@angular/core';`
`2`	`2`	`import{TextColors}from'../coreui.types';`
`3`	`3`
`4`	`4`	`@Directive({`
`5`		`-selector:'[cTextColor]'`
	`5`	`+selector:'[cTextColor]',`
	`6`	`+host:{`
	`7`	`+'[class]':'hostClasses()'`
	`8`	`+}`
`6`	`9`	`})`
`7`	`10`	`exportclassTextColorDirective{`
`8`	`11`	`/**`
`@@ -11,11 +14,10 @@ export class TextColorDirective {`
`11`	`14`	`*/`
`12`	`15`	`readonlycolor:InputSignal<TextColors>=input('',{alias:'cTextColor'});`
`13`	`16`
`14`		`- @HostBinding('class')`
`15`		`-gethostClasses():any{`
	`17`	`+readonlyhostClasses=computed(()=>{`
`16`	`18`	`constcolor=this.color();`
`17`	`19`	`return{`
`18`	`20`	[`text-${color}`]:!!color
`19`	`21`	`};`
`20`		`-}`
	`22`	`+});`
`21`	`23`	`}`

Comments

(0)