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:
@@ -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: [
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {}
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user