From 5f4a8c18fef9e22b42e18f8ca7cdbb3419a53788 Mon Sep 17 00:00:00 2001 From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com> Date: Tue, 5 Apr 2022 12:19:13 -0500 Subject: [PATCH] [bug] CL - fix default button display and callout header class (#756) --- .../src/button/button.component.spec.ts | 40 ++++++++++++++----- components/src/button/button.component.ts | 2 +- .../src/callout/callout.component.spec.ts | 4 ++ components/src/callout/callout.component.ts | 8 ++-- 4 files changed, 39 insertions(+), 15 deletions(-) diff --git a/components/src/button/button.component.spec.ts b/components/src/button/button.component.spec.ts index f174f28c90..82452b713a 100644 --- a/components/src/button/button.component.spec.ts +++ b/components/src/button/button.component.spec.ts @@ -1,10 +1,15 @@ -import { Component } from "@angular/core"; -import { TestBed, waitForAsync } from "@angular/core/testing"; +import { Component, DebugElement } from "@angular/core"; +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { ButtonModule } from "./index"; describe("Button", () => { + let fixture: ComponentFixture; + let testAppComponent: TestApp; + let buttonDebugElement: DebugElement; + let linkDebugElement: DebugElement; + beforeEach( waitForAsync(() => { TestBed.configureTestingModule({ @@ -13,16 +18,14 @@ describe("Button", () => { }); TestBed.compileComponents(); + fixture = TestBed.createComponent(TestApp); + testAppComponent = fixture.debugElement.componentInstance; + buttonDebugElement = fixture.debugElement.query(By.css("button")); + linkDebugElement = fixture.debugElement.query(By.css("a")); }) ); it("should apply classes based on type", () => { - const fixture = TestBed.createComponent(TestApp); - - const testAppComponent: TestApp = fixture.debugElement.componentInstance; - const buttonDebugElement = fixture.debugElement.query(By.css("button")); - const linkDebugElement = fixture.debugElement.query(By.css("a")); - testAppComponent.buttonType = "primary"; fixture.detectChanges(); expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true); @@ -43,15 +46,32 @@ describe("Button", () => { expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true); expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true); }); + + it("should apply block when true and inline-block when false", () => { + testAppComponent.block = true; + fixture.detectChanges(); + expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(true); + expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(true); + expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false); + expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false); + + testAppComponent.block = false; + fixture.detectChanges(); + expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true); + expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true); + expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(false); + expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(false); + }); }); @Component({ selector: "test-app", template: ` - - Link + + Link `, }) class TestApp { buttonType: string; + block: boolean; } diff --git a/components/src/button/button.component.ts b/components/src/button/button.component.ts index 5fcbff6a30..172be48b45 100644 --- a/components/src/button/button.component.ts +++ b/components/src/button/button.component.ts @@ -74,7 +74,7 @@ export class ButtonComponent implements OnInit, OnChanges { "focus:tw-ring", "focus:tw-ring-offset-2", "focus:tw-ring-primary-700", - this.block ? "tw-w-full tw-block" : "", + this.block ? "tw-w-full tw-block" : "tw-inline-block", buttonStyles[this.buttonType ?? "secondary"], ]; } diff --git a/components/src/callout/callout.component.spec.ts b/components/src/callout/callout.component.spec.ts index ec84a2e4e9..1e021d29c6 100644 --- a/components/src/callout/callout.component.spec.ts +++ b/components/src/callout/callout.component.spec.ts @@ -33,6 +33,7 @@ describe("Callout", () => { fixture.detectChanges(); expect(component.title).toBeUndefined(); expect(component.icon).toBe("bwi-check"); + expect(component.headerClass).toBe("!tw-text-success"); }); it("info", () => { @@ -40,6 +41,7 @@ describe("Callout", () => { fixture.detectChanges(); expect(component.title).toBeUndefined(); expect(component.icon).toBe("bwi-info-circle"); + expect(component.headerClass).toBe("!tw-text-info"); }); it("warning", () => { @@ -47,6 +49,7 @@ describe("Callout", () => { fixture.detectChanges(); expect(component.title).toBe("Warning"); expect(component.icon).toBe("bwi-exclamation-triangle"); + expect(component.headerClass).toBe("!tw-text-warning"); }); it("danger", () => { @@ -54,6 +57,7 @@ describe("Callout", () => { fixture.detectChanges(); expect(component.title).toBe("Error"); expect(component.icon).toBe("bwi-error"); + expect(component.headerClass).toBe("!tw-text-danger"); }); }); }); diff --git a/components/src/callout/callout.component.ts b/components/src/callout/callout.component.ts index 0e15207322..e7f5c51c0e 100644 --- a/components/src/callout/callout.component.ts +++ b/components/src/callout/callout.component.ts @@ -51,13 +51,13 @@ export class CalloutComponent implements OnInit { get headerClass() { switch (this.type) { case "danger": - return "tw-text-danger"; + return "!tw-text-danger"; case "info": - return "tw-text-info"; + return "!tw-text-info"; case "success": - return "tw-text-success"; + return "!tw-text-success"; case "warning": - return "tw-text-warning"; + return "!tw-text-warning"; } } }