Merge branch 'master' of https://github.com/bitwarden/jslib into feature/additional-item-types-scaffold

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,10 +17,6 @@
 
 - **file.ext:** Description of what was changed and why
 
-## Testing requirements
-
-<!--What functionality requires testing by QA? This includes testing new behavior and regression testing-->
-
 ## Before you submit
 
 - [ ] I have checked for **linting** errors (`npm run lint`) (required)

angular/src/validators/notAllowedValueAsync.validator.ts

@@ -0,0 +1,21 @@
+import { AbstractControl, AsyncValidatorFn, ValidationErrors } from "@angular/forms";
+
+export function notAllowedValueAsync(
+  valueGetter: () => Promise<string>,
+  caseInsensitive = false
+): AsyncValidatorFn {
+  return async (control: AbstractControl): Promise<ValidationErrors | null> => {
+    let notAllowedValue = await valueGetter();
+    let controlValue = control.value;
+    if (caseInsensitive) {
+      notAllowedValue = notAllowedValue.toLowerCase();
+      controlValue = controlValue.toLowerCase();
+    }
+
+    if (controlValue === notAllowedValue) {
+      return {
+        notAllowedValue: true,
+      };
+    }
+  };
+}

common/src/abstractions/api.service.ts

@@ -1,5 +1,11 @@
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
+import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
 import { BillingHistoryResponse } from "jslib-common/models/response/billingHistoryResponse";
 import { BillingPaymentResponse } from "jslib-common/models/response/billingPaymentResponse";
+import {
+  OrganizationConnectionConfigApis,
+  OrganizationConnectionResponse,
+} from "jslib-common/models/response/organizationConnectionResponse";
 
 import { PolicyType } from "../enums/policyType";
 import { SetKeyConnectorKeyRequest } from "../models/request/account/setKeyConnectorKeyRequest";
@@ -39,6 +45,7 @@ import { KeysRequest } from "../models/request/keysRequest";
 import { OrganizationSponsorshipCreateRequest } from "../models/request/organization/organizationSponsorshipCreateRequest";
 import { OrganizationSponsorshipRedeemRequest } from "../models/request/organization/organizationSponsorshipRedeemRequest";
 import { OrganizationSsoRequest } from "../models/request/organization/organizationSsoRequest";
+import { OrganizationApiKeyRequest } from "../models/request/organizationApiKeyRequest";
 import { OrganizationCreateRequest } from "../models/request/organizationCreateRequest";
 import { OrganizationImportRequest } from "../models/request/organizationImportRequest";
 import { OrganizationKeysRequest } from "../models/request/organizationKeysRequest";
@@ -121,9 +128,11 @@ import { IdentityTwoFactorResponse } from "../models/response/identityTwoFactorR
 import { KeyConnectorUserKeyResponse } from "../models/response/keyConnectorUserKeyResponse";
 import { ListResponse } from "../models/response/listResponse";
 import { OrganizationSsoResponse } from "../models/response/organization/organizationSsoResponse";
+import { OrganizationApiKeyInformationResponse } from "../models/response/organizationApiKeyInformationResponse";
 import { OrganizationAutoEnrollStatusResponse } from "../models/response/organizationAutoEnrollStatusResponse";
 import { OrganizationKeysResponse } from "../models/response/organizationKeysResponse";
 import { OrganizationResponse } from "../models/response/organizationResponse";
+import { OrganizationSponsorshipSyncStatusResponse } from "../models/response/organizationSponsorshipSyncStatusResponse";
 import { OrganizationSubscriptionResponse } from "../models/response/organizationSubscriptionResponse";
 import { OrganizationUserBulkPublicKeyResponse } from "../models/response/organizationUserBulkPublicKeyResponse";
 import { OrganizationUserBulkResponse } from "../models/response/organizationUserBulkResponse";
@@ -508,6 +517,22 @@ export abstract class ApiService {
   getOrganization: (id: string) => Promise<OrganizationResponse>;
   getOrganizationBilling: (id: string) => Promise<BillingResponse>;
   getOrganizationSubscription: (id: string) => Promise<OrganizationSubscriptionResponse>;
+  getCloudCommunicationsEnabled: () => Promise<boolean>;
+  abstract getOrganizationConnection<TConfig extends OrganizationConnectionConfigApis>(
+    id: string,
+    type: OrganizationConnectionType,
+    configType: { new (response: any): TConfig }
+  ): Promise<OrganizationConnectionResponse<TConfig>>;
+  abstract createOrganizationConnection<TConfig extends OrganizationConnectionConfigApis>(
+    request: OrganizationConnectionRequest,
+    configType: { new (response: any): TConfig }
+  ): Promise<OrganizationConnectionResponse<TConfig>>;
+  abstract updateOrganizationConnection<TConfig extends OrganizationConnectionConfigApis>(
+    request: OrganizationConnectionRequest,
+    configType: { new (response: any): TConfig },
+    organizationConnectionId: string
+  ): Promise<OrganizationConnectionResponse<TConfig>>;
+  deleteOrganizationConnection: (id: string) => Promise<void>;
   getOrganizationLicense: (id: string, installationId: string) => Promise<any>;
   getOrganizationTaxInfo: (id: string) => Promise<TaxInfoResponse>;
   getOrganizationAutoEnrollStatus: (
@@ -525,11 +550,14 @@ export abstract class ApiService {
   postOrganizationLicenseUpdate: (id: string, data: FormData) => Promise<any>;
   postOrganizationApiKey: (
     id: string,
-    request: SecretVerificationRequest
+    request: OrganizationApiKeyRequest
   ) => Promise<ApiKeyResponse>;
+  getOrganizationApiKeyInformation: (
+    id: string
+  ) => Promise<ListResponse<OrganizationApiKeyInformationResponse>>;
   postOrganizationRotateApiKey: (
     id: string,
-    request: SecretVerificationRequest
+    request: OrganizationApiKeyRequest
   ) => Promise<ApiKeyResponse>;
   postOrganizationSso: (
     id: string,
@@ -666,6 +694,9 @@ export abstract class ApiService {
     sponsorshipOrgId: string,
     request: OrganizationSponsorshipCreateRequest
   ) => Promise<void>;
+  getSponsorshipSyncStatus: (
+    sponsoredOrgId: string
+  ) => Promise<OrganizationSponsorshipSyncStatusResponse>;
   deleteRevokeSponsorship: (sponsoringOrganizationId: string) => Promise<void>;
   deleteRemoveSponsorship: (sponsoringOrgId: string) => Promise<void>;
   postPreValidateSponsorshipToken: (sponsorshipToken: string) => Promise<boolean>;

common/src/enums/organizationApiKeyType.ts

@@ -0,0 +1,4 @@
+export enum OrganizationApiKeyType {
+  Default = 0,
+  BillingSync = 1,
+}

common/src/enums/organizationConnectionType.ts

@@ -0,0 +1,3 @@
+export enum OrganizationConnectionType {
+  CloudBillingSync = 1,
+}

common/src/models/api/billingSyncConfigApi.ts

@@ -0,0 +1,13 @@
+import { BaseResponse } from "../response/baseResponse";
+
+export class BillingSyncConfigApi extends BaseResponse {
+  billingSyncKey: string;
+
+  constructor(data: any) {
+    super(data);
+    if (data == null) {
+      return;
+    }
+    this.billingSyncKey = this.getResponseProperty("BillingSyncKey");
+  }
+}

common/src/models/data/organizationData.ts

@@ -39,6 +39,9 @@ export class OrganizationData {
   planProductType: ProductType;
   keyConnectorEnabled: boolean;
   keyConnectorUrl: string;
+  familySponsorshipLastSyncDate?: Date;
+  familySponsorshipValidUntil?: Date;
+  familySponsorshipToDelete?: boolean;
 
   constructor(response: ProfileOrganizationResponse) {
     this.id = response.id;
@@ -74,5 +77,8 @@ export class OrganizationData {
     this.planProductType = response.planProductType;
     this.keyConnectorEnabled = response.keyConnectorEnabled;
     this.keyConnectorUrl = response.keyConnectorUrl;
+    this.familySponsorshipLastSyncDate = response.familySponsorshipLastSyncDate;
+    this.familySponsorshipValidUntil = response.familySponsorshipValidUntil;
+    this.familySponsorshipToDelete = response.familySponsorshipToDelete;
   }
 }

common/src/models/domain/organization.ts

@@ -40,6 +40,9 @@ export class Organization {
   planProductType: ProductType;
   keyConnectorEnabled: boolean;
   keyConnectorUrl: string;
+  familySponsorshipLastSyncDate?: Date;
+  familySponsorshipValidUntil?: Date;
+  familySponsorshipToDelete?: boolean;
 
   constructor(obj?: OrganizationData) {
     if (obj == null) {
@@ -80,6 +83,9 @@ export class Organization {
     this.planProductType = obj.planProductType;
     this.keyConnectorEnabled = obj.keyConnectorEnabled;
     this.keyConnectorUrl = obj.keyConnectorUrl;
+    this.familySponsorshipLastSyncDate = obj.familySponsorshipLastSyncDate;
+    this.familySponsorshipValidUntil = obj.familySponsorshipValidUntil;
+    this.familySponsorshipToDelete = obj.familySponsorshipToDelete;
   }
 
   get canAccess() {

common/src/models/request/billingSyncConfigRequest.ts

@@ -0,0 +1,3 @@
+export class BillingSyncConfigRequest {
+  constructor(private billingSyncKey: string) {}
+}

common/src/models/request/organizationApiKeyRequest.ts

@@ -0,0 +1,7 @@
+import { OrganizationApiKeyType } from "../../enums/organizationApiKeyType";
+
+import { SecretVerificationRequest } from "./secretVerificationRequest";
+
+export class OrganizationApiKeyRequest extends SecretVerificationRequest {
+  type: OrganizationApiKeyType = OrganizationApiKeyType.Default;
+}

common/src/models/request/organizationConnectionRequest.ts

@@ -0,0 +1,15 @@
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
+
+import { BillingSyncConfigRequest } from "./billingSyncConfigRequest";
+
+/**API request config types for OrganizationConnectionRequest */
+export type OrganizationConnectionRequestConfigs = BillingSyncConfigRequest;
+
+export class OrganizationConnectionRequest {
+  constructor(
+    public organizationId: string,
+    public type: OrganizationConnectionType,
+    public enabled: boolean,
+    public config: OrganizationConnectionRequestConfigs
+  ) {}
+}

common/src/models/response/apiKeyResponse.ts

@@ -2,9 +2,11 @@ import { BaseResponse } from "./baseResponse";
 
 export class ApiKeyResponse extends BaseResponse {
   apiKey: string;
+  revisionDate: Date;
 
   constructor(response: any) {
     super(response);
     this.apiKey = this.getResponseProperty("ApiKey");
+    this.revisionDate = new Date(this.getResponseProperty("RevisionDate"));
   }
 }

common/src/models/response/organizationApiKeyInformationResponse.ts

@@ -0,0 +1,12 @@
+import { OrganizationApiKeyType } from "../../enums/organizationApiKeyType";
+
+import { BaseResponse } from "./baseResponse";
+
+export class OrganizationApiKeyInformationResponse extends BaseResponse {
+  keyType: OrganizationApiKeyType;
+
+  constructor(response: any) {
+    super(response);
+    this.keyType = this.getResponseProperty("KeyType");
+  }
+}

common/src/models/response/organizationConnectionResponse.ts

@@ -0,0 +1,28 @@
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
+
+import { BillingSyncConfigApi } from "../api/billingSyncConfigApi";
+
+import { BaseResponse } from "./baseResponse";
+
+/**API response config types for OrganizationConnectionResponse */
+export type OrganizationConnectionConfigApis = BillingSyncConfigApi;
+
+export class OrganizationConnectionResponse<
+  TConfig extends OrganizationConnectionConfigApis
+> extends BaseResponse {
+  id: string;
+  type: OrganizationConnectionType;
+  organizationId: string;
+  enabled: boolean;
+  config: TConfig;
+
+  constructor(response: any, configType: { new (response: any): TConfig }) {
+    super(response);
+    this.id = this.getResponseProperty("Id");
+    this.type = this.getResponseProperty("Type");
+    this.organizationId = this.getResponseProperty("OrganizationId");
+    this.enabled = this.getResponseProperty("Enabled");
+    const rawConfig = this.getResponseProperty("Config");
+    this.config = rawConfig == null ? null : new configType(rawConfig);
+  }
+}

common/src/models/response/organizationSponsorshipSyncStatusResponse.ts

@@ -0,0 +1,13 @@
+import { BaseResponse } from "./baseResponse";
+
+export class OrganizationSponsorshipSyncStatusResponse extends BaseResponse {
+  lastSyncDate?: Date;
+
+  constructor(response: any) {
+    super(response);
+    const lastSyncDate = this.getResponseProperty("LastSyncDate");
+    if (lastSyncDate) {
+      this.lastSyncDate = new Date(lastSyncDate);
+    }
+  }
+}

common/src/models/response/profileOrganizationResponse.ts

@@ -40,6 +40,9 @@ export class ProfileOrganizationResponse extends BaseResponse {
   planProductType: ProductType;
   keyConnectorEnabled: boolean;
   keyConnectorUrl: string;
+  familySponsorshipLastSyncDate?: Date;
+  familySponsorshipValidUntil?: Date;
+  familySponsorshipToDelete?: boolean;
 
   constructor(response: any) {
     super(response);
@@ -77,5 +80,18 @@ export class ProfileOrganizationResponse extends BaseResponse {
     this.planProductType = this.getResponseProperty("PlanProductType");
     this.keyConnectorEnabled = this.getResponseProperty("KeyConnectorEnabled") ?? false;
     this.keyConnectorUrl = this.getResponseProperty("KeyConnectorUrl");
+    const familySponsorshipLastSyncDateString = this.getResponseProperty(
+      "FamilySponsorshipLastSyncDate"
+    );
+    if (familySponsorshipLastSyncDateString) {
+      this.familySponsorshipLastSyncDate = new Date(familySponsorshipLastSyncDateString);
+    }
+    const familySponsorshipValidUntilString = this.getResponseProperty(
+      "FamilySponsorshipValidUntil"
+    );
+    if (familySponsorshipValidUntilString) {
+      this.familySponsorshipValidUntil = new Date(familySponsorshipValidUntilString);
+    }
+    this.familySponsorshipToDelete = this.getResponseProperty("FamilySponsorshipToDelete");
   }
 }

common/src/services/api.service.ts

@@ -1,8 +1,14 @@
 import { AppIdService } from "jslib-common/abstractions/appId.service";
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
 import { DeviceRequest } from "jslib-common/models/request/deviceRequest";
 import { TokenRequestTwoFactor } from "jslib-common/models/request/identityToken/tokenRequestTwoFactor";
+import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
 import { BillingHistoryResponse } from "jslib-common/models/response/billingHistoryResponse";
 import { BillingPaymentResponse } from "jslib-common/models/response/billingPaymentResponse";
+import {
+  OrganizationConnectionConfigApis,
+  OrganizationConnectionResponse,
+} from "jslib-common/models/response/organizationConnectionResponse";
 
 import { ApiService as ApiServiceAbstraction } from "../abstractions/api.service";
 import { EnvironmentService } from "../abstractions/environment.service";
@@ -47,6 +53,7 @@ import { KeysRequest } from "../models/request/keysRequest";
 import { OrganizationSponsorshipCreateRequest } from "../models/request/organization/organizationSponsorshipCreateRequest";
 import { OrganizationSponsorshipRedeemRequest } from "../models/request/organization/organizationSponsorshipRedeemRequest";
 import { OrganizationSsoRequest } from "../models/request/organization/organizationSsoRequest";
+import { OrganizationApiKeyRequest } from "../models/request/organizationApiKeyRequest";
 import { OrganizationCreateRequest } from "../models/request/organizationCreateRequest";
 import { OrganizationImportRequest } from "../models/request/organizationImportRequest";
 import { OrganizationKeysRequest } from "../models/request/organizationKeysRequest";
@@ -130,9 +137,11 @@ import { IdentityTwoFactorResponse } from "../models/response/identityTwoFactorR
 import { KeyConnectorUserKeyResponse } from "../models/response/keyConnectorUserKeyResponse";
 import { ListResponse } from "../models/response/listResponse";
 import { OrganizationSsoResponse } from "../models/response/organization/organizationSsoResponse";
+import { OrganizationApiKeyInformationResponse } from "../models/response/organizationApiKeyInformationResponse";
 import { OrganizationAutoEnrollStatusResponse } from "../models/response/organizationAutoEnrollStatusResponse";
 import { OrganizationKeysResponse } from "../models/response/organizationKeysResponse";
 import { OrganizationResponse } from "../models/response/organizationResponse";
+import { OrganizationSponsorshipSyncStatusResponse } from "../models/response/organizationSponsorshipSyncStatusResponse";
 import { OrganizationSubscriptionResponse } from "../models/response/organizationSubscriptionResponse";
 import { OrganizationUserBulkPublicKeyResponse } from "../models/response/organizationUserBulkPublicKeyResponse";
 import { OrganizationUserBulkResponse } from "../models/response/organizationUserBulkResponse";
@@ -1654,6 +1663,47 @@ export class ApiService implements ApiServiceAbstraction {
     return new OrganizationSubscriptionResponse(r);
   }
 
+  async getCloudCommunicationsEnabled(): Promise<boolean> {
+    const r = await this.send("GET", "/organizations/connections/enabled", null, true, true);
+    return r as boolean;
+  }
+
+  async getOrganizationConnection<TConfig extends OrganizationConnectionConfigApis>(
+    id: string,
+    type: OrganizationConnectionType,
+    configType: { new (response: any): TConfig }
+  ): Promise<OrganizationConnectionResponse<TConfig>> {
+    const r = await this.send("GET", `/organizations/connections/${id}/${type}`, null, true, true);
+    return new OrganizationConnectionResponse(r, configType);
+  }
+
+  async createOrganizationConnection<TConfig extends OrganizationConnectionConfigApis>(
+    request: OrganizationConnectionRequest,
+    configType: { new (response: any): TConfig }
+  ): Promise<OrganizationConnectionResponse<TConfig>> {
+    const r = await this.send("POST", "/organizations/connections/", request, true, true);
+    return new OrganizationConnectionResponse(r, configType);
+  }
+
+  async updateOrganizationConnection<TConfig extends OrganizationConnectionConfigApis>(
+    request: OrganizationConnectionRequest,
+    configType: { new (response: any): TConfig },
+    organizationConnectionId?: string
+  ): Promise<OrganizationConnectionResponse<TConfig>> {
+    const r = await this.send(
+      "PUT",
+      "/organizations/connections/" + organizationConnectionId,
+      request,
+      true,
+      true
+    );
+    return new OrganizationConnectionResponse(r, configType);
+  }
+
+  async deleteOrganizationConnection(id: string): Promise<void> {
+    return this.send("DELETE", "/organizations/connections/" + id, null, true, false);
+  }
+
   async getOrganizationLicense(id: string, installationId: string): Promise<any> {
     return this.send(
       "GET",
@@ -1709,15 +1759,28 @@ export class ApiService implements ApiServiceAbstraction {
 
   async postOrganizationApiKey(
     id: string,
-    request: SecretVerificationRequest
+    request: OrganizationApiKeyRequest
   ): Promise<ApiKeyResponse> {
     const r = await this.send("POST", "/organizations/" + id + "/api-key", request, true, true);
     return new ApiKeyResponse(r);
   }
 
+  async getOrganizationApiKeyInformation(
+    id: string
+  ): Promise<ListResponse<OrganizationApiKeyInformationResponse>> {
+    const r = await this.send(
+      "GET",
+      "/organizations/" + id + "/api-key-information",
+      null,
+      true,
+      true
+    );
+    return new ListResponse(r, OrganizationApiKeyInformationResponse);
+  }
+
   async postOrganizationRotateApiKey(
     id: string,
-    request: SecretVerificationRequest
+    request: OrganizationApiKeyRequest
   ): Promise<ApiKeyResponse> {
     const r = await this.send(
       "POST",
@@ -2268,17 +2331,35 @@ export class ApiService implements ApiServiceAbstraction {
   ): Promise<void> {
     return await this.send(
       "POST",
-      "/organization/sponsorship/" + sponsoredOrgId + "/families-for-enterprise",
+      "/organization/sponsorship/" +
+        (this.platformUtilsService.isSelfHost() ? "self-hosted/" : "") +
+        sponsoredOrgId +
+        "/families-for-enterprise",
       request,
       true,
       false
     );
   }
 
+  async getSponsorshipSyncStatus(
+    sponsoredOrgId: string
+  ): Promise<OrganizationSponsorshipSyncStatusResponse> {
+    const response = await this.send(
+      "GET",
+      "/organization/sponsorship/" + sponsoredOrgId + "/sync-status",
+      null,
+      true,
+      true
+    );
+    return new OrganizationSponsorshipSyncStatusResponse(response);
+  }
+
   async deleteRevokeSponsorship(sponsoringOrganizationId: string): Promise<void> {
     return await this.send(
       "DELETE",
-      "/organization/sponsorship/" + sponsoringOrganizationId,
+      "/organization/sponsorship/" +
+        (this.platformUtilsService.isSelfHost() ? "self-hosted/" : "") +
+        sponsoringOrganizationId,
       null,
       true,
       false

common/src/services/sync.service.ts

@@ -362,7 +362,7 @@ export class SyncService implements SyncServiceAbstraction {
   private async syncSends(response: SendResponse[]) {
     const sends: { [id: string]: SendData } = {};
     response.forEach((s) => {
-      sends[s.id] = new SendData();
+      sends[s.id] = new SendData(s);
     });
     return await this.sendService.replace(sends);
   }

components/angular.json

@@ -73,18 +73,6 @@
           "options": {
             "browserTarget": "components:build"
           }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
-            "scripts": []
-          }
         }
       }
     }

components/jest.config.js

@@ -0,0 +1,17 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+
+const { compilerOptions } = require("./tsconfig");
+
+module.exports = {
+  name: "angular",
+  displayName: "component library tests",
+  preset: "jest-preset-angular",
+  testMatch: ["**/+(*.)+(spec).+(ts)"],
+  setupFilesAfterEnv: ["<rootDir>/spec/test.ts"],
+  collectCoverage: true,
+  coverageReporters: ["html", "lcov"],
+  coverageDirectory: "coverage",
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
+    prefix: "<rootDir>/",
+  }),
+};

components/karma.conf.js

@@ -1,42 +0,0 @@
-/* eslint-disable */
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
-    plugins: [
-      require("karma-jasmine"),
-      require("karma-chrome-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage"),
-      require("@angular-devkit/build-angular/plugins/karma"),
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true, // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require("path").join(__dirname, "./coverage/components"),
-      subdir: ".",
-      reporters: [{ type: "html" }, { type: "text-summary" }],
-    },
-    reporters: ["progress", "kjhtml"],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ["Chrome"],
-    singleRun: false,
-    restartOnFileChange: true,
-  });
-};

components/package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "storybook": "npm run docs:json && start-storybook -p 6006",
     "build-storybook": "npm run docs:json && build-storybook",
@@ -24,8 +25,8 @@
     "@angular/platform-browser-dynamic": "^12.2.13",
     "@bitwarden/jslib-angular": "file:../angular",
     "bootstrap": "4.6.0",
-    "tslib": "^2.3.0",
-    "rxjs": "^7.4.0"
+    "rxjs": "^7.4.0",
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^12.2.13",
@@ -41,18 +42,12 @@
     "@storybook/angular": "^6.4.18",
     "@storybook/builder-webpack5": "^6.4.18",
     "@storybook/manager-webpack5": "^6.4.18",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^16.11.33",
     "@webcomponents/custom-elements": "^1.5.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.5.2",
-    "jasmine-core": "~3.10.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "jest-preset-angular": "^11.1.2",
     "postcss": "^8.4.6",
     "storybook-addon-designs": "^6.2.1",
     "tailwindcss": "^3.0.18",

components/spec/test.ts

@@ -0,0 +1 @@
+import "jest-preset-angular/setup-jest";

components/src/banner/banner.component.spec.ts

@@ -17,7 +17,7 @@ describe("BannerComponent", () => {
   });
 
   it("should create with alert", () => {
-    expect(component.useAlertRole).toBeTrue();
+    expect(component.useAlertRole).toBe(true);
     const el = fixture.nativeElement.children[0];
     expect(el.getAttribute("role")).toEqual("status");
     expect(el.getAttribute("aria-live")).toEqual("polite");
@@ -27,7 +27,7 @@ describe("BannerComponent", () => {
     component.useAlertRole = false;
     fixture.autoDetectChanges();
 
-    expect(component.useAlertRole).toBeFalse();
+    expect(component.useAlertRole).toBe(false);
     const el = fixture.nativeElement.children[0];
     expect(el.getAttribute("role")).toBeNull();
     expect(el.getAttribute("aria-live")).toBeNull();

components/src/callout/callout.component.spec.ts

@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { I18nMockService } from "src/utils/i18n-mock.service";
 
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 
+import { I18nMockService } from "../utils/i18n-mock.service";
+
 import { CalloutComponent } from ".";
 
 describe("Callout", () => {

components/src/menu/menu.component.spec.ts

@@ -14,7 +14,7 @@ describe("Menu", () => {
   };
 
   // The overlay is created outside the root debugElement, so we need to query its parent
-  const getBitMenuPanel = () => fixture.debugElement.parent.query(By.css(".bit-menu-panel"));
+  const getBitMenuPanel = () => document.querySelector(".bit-menu-panel");
 
   beforeEach(
     waitForAsync(() => {
@@ -30,7 +30,7 @@ describe("Menu", () => {
     })
   );
 
-  it("should open when the trigger is clicked", () => {
+  it("should open when the trigger is clicked", async () => {
     const buttonDebugElement = fixture.debugElement.query(By.directive(MenuTriggerForDirective));
     (buttonDebugElement.nativeElement as HTMLButtonElement).click();
 
@@ -49,7 +49,7 @@ describe("Menu", () => {
   it("should close when a menu item is clicked", () => {
     getMenuTriggerDirective().toggleMenu();
 
-    fixture.debugElement.parent.query(By.css("#item1")).nativeElement.click();
+    (document.querySelector("#item1") as HTMLAnchorElement).click();
 
     expect(getBitMenuPanel()).toBeFalsy();
   });
@@ -57,7 +57,7 @@ describe("Menu", () => {
   it("should close when the backdrop is clicked", () => {
     getMenuTriggerDirective().toggleMenu();
 
-    fixture.debugElement.parent.query(By.css(".cdk-overlay-backdrop")).nativeElement.click();
+    (document.querySelector(".cdk-overlay-backdrop") as HTMLAnchorElement).click();
 
     expect(getBitMenuPanel()).toBeFalsy();
   });

components/tsconfig.json

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {

components/tsconfig.spec.json

@@ -1,10 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": ["jasmine"]
-  },
-  "files": ["src/test.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  "extends": "./tsconfig.json"
 }