Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/src/button/button.component.spec.ts
View File

@ -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<TestApp>;
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: `
<button type="button" bit-button [buttonType]="buttonType">Button</button>
<a href="#" bit-button [buttonType]="buttonType"> Link </a>
<button type="button" bit-button [buttonType]="buttonType" [block]="block">Button</button>
<a href="#" bit-button [buttonType]="buttonType" [block]="block"> Link </a>
`,
})
class TestApp {
buttonType: string;
block: boolean;
}

2
components/src/button/button.component.ts
View File

@ -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"],
];
}

4
components/src/callout/callout.component.spec.ts
View File

@ -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");
});
});
});

8
components/src/callout/callout.component.ts
View File

@ -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";
}
}
}