mirror of
https://github.com/bitwarden/browser
synced 2025-12-12 14:23:32 +00:00
b0f46004ff
* Use aria-disabled for button disabled state * remove import from testing story * use aria-disabled attr on bitLink button * remove unnecessary story attrs * remove disabled attr if on button element * create caprture click util * use caprture click util and fix tests * fix lint errors * fix event type * combine click capture and attr modification * fix lint error. Commit spec changes left out of last commit in error * inject element ref * move aria-disabled styles to common * move disabled logic into util * fix broken async actions stories * fix broken tests asserting disabled attr * have test check for string true vlalue * fix Signal type * fix form-field story import * remove injector left in error * aria-disable icon buttons * update form component css selector to look for aria-disabled buttons * use correct types. pass nativeElement directly * add JSDoc comment for util function * WIP * WIP * inject service in directive * remove console log * remove disabled attr left in error * update comments * remove unnecessary logic * remove :disabled psuedo selector as its apparently not needed * fix event type * coerce disabled attr to boolean * remove duplicate style concat left by conflict resolution * add back buttonStyles default * move reactive logic back to helper * add test to ensure menu button doesn't open when trigger is disabled * remove menu toggle to fix tests * remove disabled menu story * Fix usage of bitLink in verify email component * Update varaible name * no longer pass destroyRef
93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import { Component, DebugElement } from "@angular/core";
|
|
import { ComponentFixture, TestBed } 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 disabledButtonDebugElement: DebugElement;
|
|
let linkDebugElement: DebugElement;
|
|
|
|
beforeEach(async () => {
|
|
TestBed.configureTestingModule({
|
|
imports: [TestApp],
|
|
});
|
|
|
|
await TestBed.compileComponents();
|
|
fixture = TestBed.createComponent(TestApp);
|
|
testAppComponent = fixture.debugElement.componentInstance;
|
|
buttonDebugElement = fixture.debugElement.query(By.css("button"));
|
|
disabledButtonDebugElement = fixture.debugElement.query(By.css("button#disabled"));
|
|
linkDebugElement = fixture.debugElement.query(By.css("a"));
|
|
});
|
|
|
|
it("should not be disabled when loading and disabled are false", () => {
|
|
testAppComponent.loading = false;
|
|
testAppComponent.disabled = false;
|
|
fixture.detectChanges();
|
|
|
|
expect(buttonDebugElement.attributes["loading"]).toBeFalsy();
|
|
expect(linkDebugElement.attributes["loading"]).toBeFalsy();
|
|
expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
|
|
});
|
|
|
|
it("should be aria-disabled and not html attribute disabled when disabled is true", () => {
|
|
testAppComponent.disabled = true;
|
|
fixture.detectChanges();
|
|
expect(buttonDebugElement.attributes["aria-disabled"]).toBe("true");
|
|
expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
|
|
// Anchor tags cannot be disabled.
|
|
});
|
|
|
|
it("should be aria-disabled not html attribute disabled when attribute disabled is true", () => {
|
|
fixture.detectChanges();
|
|
expect(disabledButtonDebugElement.attributes["aria-disabled"]).toBe("true");
|
|
expect(disabledButtonDebugElement.nativeElement.disabled).toBeFalsy();
|
|
});
|
|
|
|
it("should be disabled when loading is true", () => {
|
|
testAppComponent.loading = true;
|
|
fixture.detectChanges();
|
|
|
|
expect(buttonDebugElement.attributes["aria-disabled"]).toBe("true");
|
|
});
|
|
});
|
|
|
|
@Component({
|
|
selector: "test-app",
|
|
template: `
|
|
<button
|
|
type="button"
|
|
bitButton
|
|
[buttonType]="buttonType"
|
|
[block]="block"
|
|
[disabled]="disabled"
|
|
[loading]="loading"
|
|
>
|
|
Button
|
|
</button>
|
|
<a
|
|
href="#"
|
|
bitButton
|
|
[buttonType]="buttonType"
|
|
[block]="block"
|
|
[disabled]="disabled"
|
|
[loading]="loading"
|
|
>
|
|
Link
|
|
</a>
|
|
|
|
<button id="disabled" type="button" bitButton disabled>Button</button>
|
|
`,
|
|
imports: [ButtonModule],
|
|
})
|
|
class TestApp {
|
|
buttonType?: string;
|
|
block?: boolean;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
}
|