[bug] CL - fix default button display and callout header class (#756)

This commit is contained in:
Vincent Salucci 2022-04-05 12:19:13 -05:00 committed by GitHub
parent f3a4fde513
commit 5f4a8c18fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 15 deletions

View File

@ -1,10 +1,15 @@
import { Component } from "@angular/core"; import { Component, DebugElement } from "@angular/core";
import { TestBed, waitForAsync } from "@angular/core/testing"; import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
import { By } from "@angular/platform-browser"; import { By } from "@angular/platform-browser";
import { ButtonModule } from "./index"; import { ButtonModule } from "./index";
describe("Button", () => { describe("Button", () => {
let fixture: ComponentFixture<TestApp>;
let testAppComponent: TestApp;
let buttonDebugElement: DebugElement;
let linkDebugElement: DebugElement;
beforeEach( beforeEach(
waitForAsync(() => { waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@ -13,16 +18,14 @@ describe("Button", () => {
}); });
TestBed.compileComponents(); 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", () => { 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"; testAppComponent.buttonType = "primary";
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true); 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(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
expect(linkDebugElement.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({ @Component({
selector: "test-app", selector: "test-app",
template: ` template: `
<button type="button" bit-button [buttonType]="buttonType">Button</button> <button type="button" bit-button [buttonType]="buttonType" [block]="block">Button</button>
<a href="#" bit-button [buttonType]="buttonType"> Link </a> <a href="#" bit-button [buttonType]="buttonType" [block]="block"> Link </a>
`, `,
}) })
class TestApp { class TestApp {
buttonType: string; buttonType: string;
block: boolean;
} }

View File

@ -74,7 +74,7 @@ export class ButtonComponent implements OnInit, OnChanges {
"focus:tw-ring", "focus:tw-ring",
"focus:tw-ring-offset-2", "focus:tw-ring-offset-2",
"focus:tw-ring-primary-700", "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"], buttonStyles[this.buttonType ?? "secondary"],
]; ];
} }

View File

@ -33,6 +33,7 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBeUndefined(); expect(component.title).toBeUndefined();
expect(component.icon).toBe("bwi-check"); expect(component.icon).toBe("bwi-check");
expect(component.headerClass).toBe("!tw-text-success");
}); });
it("info", () => { it("info", () => {
@ -40,6 +41,7 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBeUndefined(); expect(component.title).toBeUndefined();
expect(component.icon).toBe("bwi-info-circle"); expect(component.icon).toBe("bwi-info-circle");
expect(component.headerClass).toBe("!tw-text-info");
}); });
it("warning", () => { it("warning", () => {
@ -47,6 +49,7 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBe("Warning"); expect(component.title).toBe("Warning");
expect(component.icon).toBe("bwi-exclamation-triangle"); expect(component.icon).toBe("bwi-exclamation-triangle");
expect(component.headerClass).toBe("!tw-text-warning");
}); });
it("danger", () => { it("danger", () => {
@ -54,6 +57,7 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBe("Error"); expect(component.title).toBe("Error");
expect(component.icon).toBe("bwi-error"); expect(component.icon).toBe("bwi-error");
expect(component.headerClass).toBe("!tw-text-danger");
}); });
}); });
}); });

View File

@ -51,13 +51,13 @@ export class CalloutComponent implements OnInit {
get headerClass() { get headerClass() {
switch (this.type) { switch (this.type) {
case "danger": case "danger":
return "tw-text-danger"; return "!tw-text-danger";
case "info": case "info":
return "tw-text-info"; return "!tw-text-info";
case "success": case "success":
return "tw-text-success"; return "!tw-text-success";
case "warning": case "warning":
return "tw-text-warning"; return "!tw-text-warning";
} }
} }
} }