1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-23 16:13:21 +00:00

remove abstraction, standalone true

This commit is contained in:
Isaac Ivins
2025-11-25 13:09:27 -05:00
parent d12a31596e
commit 41e5da0928
10 changed files with 18 additions and 156 deletions

View File

@@ -50,7 +50,7 @@ import { VaultV2Component } from "../vault/app/vault/vault-v2.component";
import { VaultComponent } from "../vault/app/vault-v3/vault.component";
import { Fido2PlaceholderComponent } from "./components/fido2placeholder.component";
import { UserLayoutComponent } from "./layout/user-layout.component";
import { DesktopLayoutComponent } from "./layout/desktop-layout.component";
import { SendComponent } from "./tools/send/send.component";
import { SendsComponent } from "./tools/send-v2/sends.component";
@@ -335,7 +335,7 @@ const routes: Routes = [
},
{
path: "",
component: UserLayoutComponent,
component: DesktopLayoutComponent,
canActivate: [authGuard],
children: [
{

View File

@@ -1,4 +1,10 @@
<bit-layout>
<ng-content select="app-desktop-side-nav, [slot=side-nav]" slot="side-nav"></ng-content>
<ng-content></ng-content>
<app-desktop-side-nav slot="side-nav">
<bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n"></bit-nav-logo>
<bit-nav-item icon="bwi-vault" [text]="'vault' | i18n" route="new-vault"></bit-nav-item>
<bit-nav-item icon="bwi-send" [text]="'send' | i18n" route="new-sends"></bit-nav-item>
</app-desktop-side-nav>
<router-outlet></router-outlet>
</bit-layout>

View File

@@ -1,14 +1,18 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { RouterModule } from "@angular/router";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { PasswordManagerLogo } from "@bitwarden/assets/svg";
import { LayoutComponent, NavigationModule } from "@bitwarden/components";
import { DesktopSideNavComponent } from "./desktop-side-nav.component";
@Component({
selector: "app-desktop-layout",
standalone: true,
imports: [CommonModule, RouterModule, LayoutComponent, NavigationModule],
imports: [RouterModule, JslibModule, LayoutComponent, NavigationModule, DesktopSideNavComponent],
templateUrl: "./desktop-layout.component.html",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DesktopLayoutComponent {}
export class DesktopLayoutComponent {
protected readonly logo = PasswordManagerLogo;
}

View File

@@ -1,14 +0,0 @@
import { NgModule } from "@angular/core";
import { NavigationModule } from "@bitwarden/components";
import { DesktopLayoutComponent } from "./desktop-layout.component";
import { DesktopSideNavComponent } from "./desktop-side-nav.component";
@NgModule({
imports: [DesktopLayoutComponent, DesktopSideNavComponent],
exports: [NavigationModule, DesktopLayoutComponent, DesktopSideNavComponent],
declarations: [],
providers: [],
})
export class DesktopLayoutModule {}

View File

@@ -5,7 +5,6 @@ import { NavigationModule, SideNavVariant } from "@bitwarden/components";
@Component({
selector: "app-desktop-side-nav",
standalone: true,
templateUrl: "desktop-side-nav.component.html",
imports: [CommonModule, NavigationModule],
changeDetection: ChangeDetectionStrategy.OnPush,

View File

@@ -1,10 +0,0 @@
<app-desktop-layout>
<app-desktop-side-nav slot="side-nav">
<bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n"></bit-nav-logo>
<bit-nav-item icon="bwi-vault" [text]="'vault' | i18n" route="new-vault"></bit-nav-item>
<bit-nav-item icon="bwi-send" [text]="'send' | i18n" route="new-sends"></bit-nav-item>
</app-desktop-side-nav>
<router-outlet></router-outlet>
</app-desktop-layout>

View File

@@ -1,102 +0,0 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { RouterModule } from "@angular/router";
import { mock } from "jest-mock-extended";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { DesktopLayoutModule } from "./desktop-layout.module";
import { UserLayoutComponent } from "./user-layout.component";
Object.defineProperty(window, "matchMedia", {
writable: true,
value: jest.fn().mockImplementation((query) => ({
matches: true,
media: query,
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn(),
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
describe("UserLayoutComponent", () => {
let component: UserLayoutComponent;
let fixture: ComponentFixture<UserLayoutComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UserLayoutComponent, RouterModule.forRoot([]), DesktopLayoutModule],
providers: [
{
provide: I18nService,
useValue: mock<I18nService>(),
},
],
}).compileComponents();
fixture = TestBed.createComponent(UserLayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it("creates component", () => {
expect(component).toBeTruthy();
});
it("renders desktop layout", () => {
const compiled = fixture.nativeElement;
const layoutElement = compiled.querySelector("app-desktop-layout");
expect(layoutElement).toBeTruthy();
});
it("renders desktop side nav", () => {
const compiled = fixture.nativeElement;
const sideNavElement = compiled.querySelector("app-desktop-side-nav");
expect(sideNavElement).toBeTruthy();
});
it("renders logo with correct properties", () => {
const compiled = fixture.nativeElement;
const logoElement = compiled.querySelector("bit-nav-logo");
expect(logoElement).toBeTruthy();
expect(logoElement.getAttribute("route")).toBe(".");
});
it("renders vault navigation item", () => {
const compiled = fixture.nativeElement;
const navItems = compiled.querySelectorAll("bit-nav-item");
const vaultItem = Array.from(navItems).find(
(item) => (item as Element).getAttribute("icon") === "bwi-vault",
) as Element | undefined;
expect(vaultItem).toBeTruthy();
expect(vaultItem?.getAttribute("route")).toBe("new-vault");
});
it("renders send navigation item", () => {
const compiled = fixture.nativeElement;
const navItems = compiled.querySelectorAll("bit-nav-item");
const sendItem = Array.from(navItems).find(
(item) => (item as Element).getAttribute("icon") === "bwi-send",
) as Element | undefined;
expect(sendItem).toBeTruthy();
expect(sendItem?.getAttribute("route")).toBe("new-sends");
});
it("renders router outlet", () => {
const compiled = fixture.nativeElement;
const routerOutlet = compiled.querySelector("router-outlet");
expect(routerOutlet).toBeTruthy();
});
it("has logo property set", () => {
expect(component["logo"]).toBeDefined();
});
});

View File

@@ -1,19 +0,0 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { RouterModule } from "@angular/router";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { PasswordManagerLogo } from "@bitwarden/assets/svg";
import { DesktopLayoutModule } from "./desktop-layout.module";
@Component({
selector: "app-user-layout",
standalone: true,
templateUrl: "user-layout.component.html",
imports: [CommonModule, RouterModule, JslibModule, DesktopLayoutModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserLayoutComponent {
protected readonly logo = PasswordManagerLogo;
}

View File

@@ -2,7 +2,6 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
@Component({
selector: "app-sends-v2",
standalone: true,
imports: [],
template: "<p>Sends V2 Component</p>",
changeDetection: ChangeDetectionStrategy.OnPush,

View File

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
@Component({
selector: "app-vault-v3",
standalone: true,
imports: [],
template: "<p>Vault V3 Component</p>",
changeDetection: ChangeDetectionStrategy.OnPush,