diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts index 6ef2cf1d4d..89e6cfeacb 100644 --- a/libs/angular/src/jslib.module.ts +++ b/libs/angular/src/jslib.module.ts @@ -85,11 +85,11 @@ import { IconComponent } from "./vault/components/icon.component"; TextDragDirective, CopyClickDirective, A11yTitleDirective, + AutofocusDirective, ], declarations: [ A11yInvalidDirective, ApiActionDirective, - AutofocusDirective, BoxRowDirective, DeprecatedCalloutComponent, CopyTextDirective, diff --git a/libs/components/src/button/button.component.spec.ts b/libs/components/src/button/button.component.spec.ts index b20e4148b6..6ddbc17280 100644 --- a/libs/components/src/button/button.component.spec.ts +++ b/libs/components/src/button/button.component.spec.ts @@ -1,7 +1,5 @@ -// FIXME: Update this file to be type safe and remove this and next line -// @ts-strict-ignore import { Component, DebugElement } from "@angular/core"; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { ButtonModule } from "./index"; @@ -13,21 +11,18 @@ describe("Button", () => { let disabledButtonDebugElement: DebugElement; let linkDebugElement: DebugElement; - beforeEach(waitForAsync(() => { + beforeEach(async () => { TestBed.configureTestingModule({ - imports: [ButtonModule], - declarations: [TestApp], + imports: [TestApp], }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - TestBed.compileComponents(); + 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; @@ -85,11 +80,11 @@ describe("Button", () => { `, - standalone: false, + imports: [ButtonModule], }) class TestApp { - buttonType: string; - block: boolean; - disabled: boolean; - loading: boolean; + buttonType?: string; + block?: boolean; + disabled?: boolean; + loading?: boolean; } diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts index 5db6577091..a9fe92ea4b 100644 --- a/libs/components/src/dialog/dialog.service.stories.ts +++ b/libs/components/src/dialog/dialog.service.stories.ts @@ -1,18 +1,15 @@ -import { DIALOG_DATA, DialogModule, DialogRef } from "@angular/cdk/dialog"; +import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog"; import { Component, Inject } from "@angular/core"; +import { provideAnimations } from "@angular/platform-browser/animations"; import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ButtonModule } from "../button"; -import { IconButtonModule } from "../icon-button"; -import { SharedModule } from "../shared"; import { I18nMockService } from "../utils/i18n-mock.service"; -import { DialogComponent } from "./dialog/dialog.component"; +import { DialogModule } from "./dialog.module"; import { DialogService } from "./dialog.service"; -import { DialogCloseDirective } from "./directives/dialog-close.directive"; -import { DialogTitleContainerDirective } from "./directives/dialog-title-container.directive"; interface Animal { animal: string; @@ -20,7 +17,7 @@ interface Animal { @Component({ template: ``, - standalone: false, + imports: [ButtonModule], }) class StoryDialogComponent { constructor(public dialogService: DialogService) {} @@ -50,7 +47,7 @@ class StoryDialogComponent { `, - standalone: false, + imports: [DialogModule, ButtonModule], }) class StoryDialogContentComponent { constructor( @@ -68,17 +65,8 @@ export default { component: StoryDialogComponent, decorators: [ moduleMetadata({ - declarations: [StoryDialogContentComponent], - imports: [ - SharedModule, - ButtonModule, - DialogModule, - IconButtonModule, - DialogCloseDirective, - DialogComponent, - DialogTitleContainerDirective, - ], providers: [ + provideAnimations(), DialogService, { provide: I18nService, diff --git a/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts index d703b6a673..036ef1177e 100644 --- a/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts +++ b/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts @@ -1,6 +1,6 @@ import { Component } from "@angular/core"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; -import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular"; +import { provideAnimations } from "@angular/platform-browser/animations"; +import { Meta, StoryObj, applicationConfig } from "@storybook/angular"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; @@ -31,7 +31,7 @@ import { DialogModule } from "../../dialog.module"; } `, - standalone: false, + imports: [ButtonModule, CalloutModule, DialogModule], }) class StoryDialogComponent { protected dialogs: { title: string; dialogs: SimpleDialogOptions[] }[] = [ @@ -147,11 +147,9 @@ export default { title: "Component Library/Dialogs/Service/SimpleConfigurable", component: StoryDialogComponent, decorators: [ - moduleMetadata({ - imports: [ButtonModule, BrowserAnimationsModule, DialogModule, CalloutModule], - }), applicationConfig({ providers: [ + provideAnimations(), { provide: I18nService, useFactory: () => { diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts index e5695a7ac5..cc5c8f2ae1 100644 --- a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts +++ b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts @@ -1,13 +1,11 @@ import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog"; import { Component, Inject } from "@angular/core"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { provideAnimations } from "@angular/platform-browser/animations"; import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { ButtonModule } from "../../button"; -import { IconButtonModule } from "../../icon-button"; -import { SharedModule } from "../../shared/shared.module"; import { I18nMockService } from "../../utils/i18n-mock.service"; import { DialogModule } from "../dialog.module"; import { DialogService } from "../dialog.service"; @@ -18,7 +16,7 @@ interface Animal { @Component({ template: ``, - standalone: false, + imports: [ButtonModule], }) class StoryDialogComponent { constructor(public dialogService: DialogService) {} @@ -49,7 +47,7 @@ class StoryDialogComponent { `, - standalone: false, + imports: [ButtonModule, DialogModule], }) class StoryDialogContentComponent { constructor( @@ -67,15 +65,8 @@ export default { component: StoryDialogComponent, decorators: [ moduleMetadata({ - declarations: [StoryDialogContentComponent], - imports: [ - SharedModule, - IconButtonModule, - ButtonModule, - BrowserAnimationsModule, - DialogModule, - ], providers: [ + provideAnimations(), DialogService, { provide: I18nService, diff --git a/libs/components/src/form-field/password-input-toggle.spec.ts b/libs/components/src/form-field/password-input-toggle.spec.ts index 78b2521d64..114010c37b 100644 --- a/libs/components/src/form-field/password-input-toggle.spec.ts +++ b/libs/components/src/form-field/password-input-toggle.spec.ts @@ -6,7 +6,6 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic import { IconButtonModule } from "../icon-button"; import { BitIconButtonComponent } from "../icon-button/icon-button.component"; -import { InputModule } from "../input/input.module"; import { I18nMockService } from "../utils/i18n-mock.service"; import { BitFormFieldControl } from "./form-field-control"; @@ -25,7 +24,7 @@ import { BitPasswordInputToggleDirective } from "./password-input-toggle.directi `, - standalone: false, + imports: [FormFieldModule, IconButtonModule], }) class TestFormFieldComponent {} @@ -37,8 +36,7 @@ describe("PasswordInputToggle", () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [FormFieldModule, IconButtonModule, InputModule], - declarations: [TestFormFieldComponent], + imports: [TestFormFieldComponent], providers: [ { provide: I18nService, diff --git a/libs/components/src/input/autofocus.directive.ts b/libs/components/src/input/autofocus.directive.ts index 3fd06156f3..46eb1b15b1 100644 --- a/libs/components/src/input/autofocus.directive.ts +++ b/libs/components/src/input/autofocus.directive.ts @@ -19,7 +19,6 @@ import { FocusableElement } from "../shared/focusable-element"; */ @Directive({ selector: "[appAutofocus], [bitAutofocus]", - standalone: false, }) export class AutofocusDirective implements AfterContentChecked { @Input() set appAutofocus(condition: boolean | string) { diff --git a/libs/components/src/menu/menu.component.spec.ts b/libs/components/src/menu/menu.component.spec.ts index 7992407587..c6a54f1afa 100644 --- a/libs/components/src/menu/menu.component.spec.ts +++ b/libs/components/src/menu/menu.component.spec.ts @@ -1,5 +1,5 @@ import { Component } from "@angular/core"; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { MenuTriggerForDirective } from "./menu-trigger-for.directive"; @@ -16,19 +16,16 @@ describe("Menu", () => { // The overlay is created outside the root debugElement, so we need to query its parent const getBitMenuPanel = () => document.querySelector(".bit-menu-panel"); - beforeEach(waitForAsync(() => { + beforeEach(async () => { TestBed.configureTestingModule({ - imports: [MenuModule], - declarations: [TestApp], + imports: [TestApp], }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - TestBed.compileComponents(); + await TestBed.compileComponents(); fixture = TestBed.createComponent(TestApp); fixture.detectChanges(); - })); + }); it("should open when the trigger is clicked", async () => { const buttonDebugElement = fixture.debugElement.query(By.directive(MenuTriggerForDirective)); @@ -73,6 +70,6 @@ describe("Menu", () => { Item 2 `, - standalone: false, + imports: [MenuModule], }) class TestApp {} diff --git a/libs/components/src/radio-button/radio-button.component.spec.ts b/libs/components/src/radio-button/radio-button.component.spec.ts index 617eb8454b..265b8e2312 100644 --- a/libs/components/src/radio-button/radio-button.component.spec.ts +++ b/libs/components/src/radio-button/radio-button.component.spec.ts @@ -1,7 +1,5 @@ -// FIXME: Update this file to be type safe and remove this and next line -// @ts-strict-ignore import { Component } from "@angular/core"; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; @@ -17,26 +15,23 @@ describe("RadioButton", () => { let testAppComponent: TestApp; let radioButton: HTMLInputElement; - beforeEach(waitForAsync(() => { + beforeEach(async () => { mockGroupComponent = new MockedButtonGroupComponent(); TestBed.configureTestingModule({ - imports: [RadioButtonModule], - declarations: [TestApp], + imports: [TestApp], providers: [ { provide: RadioGroupComponent, useValue: mockGroupComponent }, { provide: I18nService, useValue: new I18nMockService({}) }, ], }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - TestBed.compileComponents(); + await TestBed.compileComponents(); fixture = TestBed.createComponent(TestApp); fixture.detectChanges(); testAppComponent = fixture.debugElement.componentInstance; radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement; - })); + }); it("should emit value when clicking on radio button", () => { testAppComponent.value = "value"; @@ -77,7 +72,7 @@ class MockedButtonGroupComponent implements Partial { @Component({ selector: "test-app", template: `Element`, - standalone: false, + imports: [RadioButtonModule], }) class TestApp { value?: string; diff --git a/libs/components/src/radio-button/radio-group.component.spec.ts b/libs/components/src/radio-button/radio-group.component.spec.ts index 7ca99aaca1..ff01b9323f 100644 --- a/libs/components/src/radio-button/radio-group.component.spec.ts +++ b/libs/components/src/radio-button/radio-group.component.spec.ts @@ -1,5 +1,5 @@ import { Component } from "@angular/core"; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; import { FormsModule } from "@angular/forms"; import { By } from "@angular/platform-browser"; @@ -16,16 +16,13 @@ describe("RadioGroupComponent", () => { let buttonElements: RadioButtonComponent[]; let radioButtons: HTMLInputElement[]; - beforeEach(waitForAsync(() => { + beforeEach(async () => { TestBed.configureTestingModule({ - imports: [FormsModule, RadioButtonModule], - declarations: [TestApp], + imports: [TestApp], providers: [{ provide: I18nService, useValue: new I18nMockService({}) }], }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - TestBed.compileComponents(); + await TestBed.compileComponents(); fixture = TestBed.createComponent(TestApp); fixture.detectChanges(); testAppComponent = fixture.debugElement.componentInstance; @@ -37,7 +34,7 @@ describe("RadioGroupComponent", () => { .map((e) => e.nativeElement); fixture.detectChanges(); - })); + }); it("should select second element when setting selected to second", async () => { testAppComponent.selected = "second"; @@ -75,7 +72,7 @@ describe("RadioGroupComponent", () => { Third `, - standalone: false, + imports: [FormsModule, RadioButtonModule], }) class TestApp { selected?: string; diff --git a/libs/components/src/toggle-group/toggle-group.component.spec.ts b/libs/components/src/toggle-group/toggle-group.component.spec.ts index 6da5c4258f..b00161d906 100644 --- a/libs/components/src/toggle-group/toggle-group.component.spec.ts +++ b/libs/components/src/toggle-group/toggle-group.component.spec.ts @@ -1,7 +1,5 @@ -// FIXME: Update this file to be type safe and remove this and next line -// @ts-strict-ignore import { Component } from "@angular/core"; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { ToggleGroupModule } from "./toggle-group.module"; @@ -13,15 +11,12 @@ describe("Button", () => { let buttonElements: ToggleComponent[]; let radioButtons: HTMLInputElement[]; - beforeEach(waitForAsync(() => { + beforeEach(async () => { TestBed.configureTestingModule({ - imports: [ToggleGroupModule], - declarations: [TestApp], + imports: [TestApp], }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - TestBed.compileComponents(); + await TestBed.compileComponents(); fixture = TestBed.createComponent(TestApp); testAppComponent = fixture.debugElement.componentInstance; buttonElements = fixture.debugElement @@ -32,7 +27,7 @@ describe("Button", () => { .map((e) => e.nativeElement); fixture.detectChanges(); - })); + }); it("should select second element when setting selected to second", () => { testAppComponent.selected = "second"; @@ -67,7 +62,7 @@ describe("Button", () => { Third `, - standalone: false, + imports: [ToggleGroupModule], }) class TestApp { selected?: string; diff --git a/libs/components/src/toggle-group/toggle.component.spec.ts b/libs/components/src/toggle-group/toggle.component.spec.ts index a4377b2e7b..c26ea3ed6a 100644 --- a/libs/components/src/toggle-group/toggle.component.spec.ts +++ b/libs/components/src/toggle-group/toggle.component.spec.ts @@ -1,7 +1,5 @@ -// FIXME: Update this file to be type safe and remove this and next line -// @ts-strict-ignore import { Component } from "@angular/core"; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { ToggleGroupComponent } from "./toggle-group.component"; @@ -13,22 +11,19 @@ describe("Button", () => { let testAppComponent: TestApp; let radioButton: HTMLInputElement; - beforeEach(waitForAsync(() => { + beforeEach(async () => { mockGroupComponent = new MockedButtonGroupComponent(); TestBed.configureTestingModule({ - imports: [ToggleGroupModule], - declarations: [TestApp], + imports: [TestApp], providers: [{ provide: ToggleGroupComponent, useValue: mockGroupComponent }], }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - TestBed.compileComponents(); + await TestBed.compileComponents(); fixture = TestBed.createComponent(TestApp); testAppComponent = fixture.debugElement.componentInstance; radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement; - })); + }); it("should emit value when clicking on radio button", () => { testAppComponent.value = "value"; @@ -69,7 +64,7 @@ class MockedButtonGroupComponent implements Partial { @Component({ selector: "test-app", template: ` Element`, - standalone: false, + imports: [ToggleGroupModule], }) class TestApp { value?: string;