@cometchat/skills 4.4.2 → 5.0.0

package/skills/cometchat-angular-testing/SKILL.md

@@ -1,605 +0,0 @@
----
-name: cometchat-angular-testing
-description: Testing patterns for CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) in Angular 17–21 projects. Covers Jasmine/Karma (default) and Jest, Angular TestBed for STANDALONE components (imports[] not declarations[]), mocking the static CometChatUIKit kit API (init/login/getLoggedInUser/getLoggedinUser/loginWithAuthToken/logout) and the loggedInUser$ observable, fakeAsync/tick for Promise-based login, stubbing the kit's standalone <cometchat-*> components, Playwright/Cypress e2e, and CI. Mirrors cometchat-react-testing for the mocking philosophy.
-license: "MIT"
-compatibility: "Angular >=17 <22; @cometchat/chat-uikit-angular ^5.0; Jasmine + Karma (default ng test) OR Jest + jest-preset-angular; Playwright >= 1.40 OR Cypress >= 13"
-metadata:
-  author: "CometChat"
-  version: "4.0.0"
-  tags: "cometchat angular testing jasmine karma jest testbed standalone fakeasync tick ngzone playwright cypress e2e mocking v5"
----
-
-## Purpose
-
-Test recipes for CometChat **Angular UI Kit v5** (`@cometchat/chat-uikit-angular@5`) integrations. Three layers — unit, component, e2e — three different mocking strategies. This skill writes the configuration and the canonical assertions; real test bodies are app-specific.
-
-v5 is **standalone-component-based** (Angular 17–21). That changes how you test, versus the old v4 NgModule kit: standalone components go in TestBed's `imports`, **never** `declarations`; and v5 components are real Angular components, so the old `CUSTOM_ELEMENTS_SCHEMA` crutch is **not** how you handle `<cometchat-*>` selectors — you stub the component classes instead.
-
-**Read these other skills first:**
-- `cometchat-angular-core` — the `init → login → render` order, the static `CometChatUIKit` API, and `loggedInUser$`. The tests below assert against exactly those.
-- `cometchat-angular-patterns` — standalone wiring, NgZone, change detection.
-- `cometchat-angular-calls` — for the calls-specific testing patterns (this skill is for chat).
-
-**Ground truth:** **Official docs:** https://www.cometchat.com/docs/ui-kit/angular/overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP).
-- Installed kit types — `node_modules/@cometchat/chat-uikit-angular/types/cometchat-chat-uikit-angular.d.ts`. Verify any non-obvious symbol here before relying on it.
-- Angular testing — https://angular.dev/guide/testing
-- jest-preset-angular — https://github.com/thymikee/jest-preset-angular
-- Playwright — https://playwright.dev/ · Cypress — https://docs.cypress.io/
-
----
-
-## 1. Jasmine/Karma vs Jest — pick one
-
-| Criterion | Jasmine + Karma (default) | Jest |
-|---|---|---|
-| Comes with `ng new` | ✓ | ✗ (manual setup) |
-| Speed | Slower (real browser) | Faster (jsdom) |
-| Real browser parity | Higher | Lower (no real CSS / layout) |
-| Snapshot testing | Awkward | First-class |
-| CI complexity | Needs ChromeHeadless | Pure Node |
-
-Default to Jasmine/Karma if the project already uses it (every `ng new` through Angular 19 scaffolds it); use Jest if the team has already adopted it. The TestBed assertions in this skill are runner-agnostic — only the spy syntax differs (`jasmine.createSpyObj` / `spyOn` vs `jest.fn()` / `jest.spyOn`).
-
-> **Note (Angular 20+ / vitest):** Angular 20 ships an experimental **vitest** test runner, and the CometChat Angular kit's own test suite runs on vitest + `@analogjs/vitest-angular` (jsdom). If the consumer project already uses vitest, the same TestBed code below applies verbatim — spies become `vi.fn()` / `vi.spyOn(...).mockResolvedValue(...)`, and module mocks use `vi.mock("@cometchat/chat-uikit-angular", ...)`. The standalone `imports: [Component]` model is identical regardless of runner.
-
-### Jasmine/Karma setup (default Angular)
-
-Already configured by `ng new`. The skill writes test files only.
-
-### Jest setup
-
-```bash
-npm install -D jest @types/jest jest-preset-angular @angular-builders/jest
-ng add @angular-builders/jest
-```
-
-`jest.config.js`:
-
-```js
-module.exports = {
-  preset: "jest-preset-angular",
-  setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"],
-  globalSetup: "jest-preset-angular/global-setup",
-  testPathIgnorePatterns: ["/node_modules/", "/dist/", "/cypress/", "/e2e/"],
-};
-```
-
-`setup-jest.ts`:
-
-```ts
-import "jest-preset-angular/setup-jest";
-```
-
----
-
-## 2. Mocking the kit — `spyOn` the static `CometChatUIKit` methods
-
-The cardinal rule (same as the React testing skill): **mock the static kit API; never hit the network in a unit/component test.** `CometChatUIKit.init` / `login` open a real WebSocket and call CometChat's backend — un-mocked, your tests are slow, flaky, and dependent on a live app.
-
-The v5 kit surface you mock (verified against the installed `.d.ts`):
-
-| Symbol | Shape | Notes |
-|---|---|---|
-| `CometChatUIKit.init(settings)` | `Promise<InitResult> \| undefined` | async — mock with `Promise.resolve(...)` |
-| `CometChatUIKit.login(uid)` | `Promise<CometChat.User>` | **bare string uid**, not `{ uid }` |
-| `CometChatUIKit.loginWithAuthToken(token)` | `Promise<CometChat.User>` | production token path |
-| `CometChatUIKit.getLoggedInUser()` | `CometChat.User \| null` | **sync** getter (capital "In") |
-| `CometChatUIKit.getLoggedinUser()` | `Promise<CometChat.User \| null>` | **async** getter (lowercase "in") |
-| `CometChatUIKit.loggedInUser$` | observable | reactive current-user stream |
-| `CometChatUIKit.logout()` | `Promise<LogoutResult>` | |
-
-Get the casing right: `getLoggedInUser()` is synchronous and returns immediately; `getLoggedinUser()` returns a Promise. They are different methods — mocking the wrong one is a silent no-op that masks bugs.
-
-### Jasmine/Karma — `spyOn` the statics
-
-```ts
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { of } from "rxjs";
-
-export const mockUser = { getUid: () => "cometchat-uid-1", getName: () => "Alice" } as any;
-
-export function spyOnCometChatUIKit() {
-  spyOn(CometChatUIKit, "init").and.resolveTo({} as any);
-  spyOn(CometChatUIKit, "login").and.resolveTo(mockUser);
-  spyOn(CometChatUIKit, "loginWithAuthToken").and.resolveTo(mockUser);
-  spyOn(CometChatUIKit, "getLoggedInUser").and.returnValue(mockUser);     // sync
-  spyOn(CometChatUIKit, "getLoggedinUser").and.resolveTo(mockUser);       // async
-  spyOn(CometChatUIKit, "logout").and.resolveTo({} as any);
-  // loggedInUser$ is a static property, not a method — redefine it:
-  Object.defineProperty(CometChatUIKit, "loggedInUser$", {
-    value: of(mockUser), configurable: true,
-  });
-}
-```
-
-`.and.resolveTo(x)` is Jasmine sugar for `.and.returnValue(Promise.resolve(x))`. Call `spyOnCometChatUIKit()` in `beforeEach` **before** `fixture.detectChanges()`.
-
-### Jest — `jest.spyOn`
-
-```ts
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { of } from "rxjs";
-
-export const mockUser = { getUid: () => "cometchat-uid-1", getName: () => "Alice" } as any;
-
-export function spyOnCometChatUIKit() {
-  jest.spyOn(CometChatUIKit, "init").mockResolvedValue({} as any);
-  jest.spyOn(CometChatUIKit, "login").mockResolvedValue(mockUser);
-  jest.spyOn(CometChatUIKit, "loginWithAuthToken").mockResolvedValue(mockUser);
-  jest.spyOn(CometChatUIKit, "getLoggedInUser").mockReturnValue(mockUser); // sync
-  jest.spyOn(CometChatUIKit, "getLoggedinUser").mockResolvedValue(mockUser); // async
-  jest.spyOn(CometChatUIKit, "logout").mockResolvedValue({} as any);
-  Object.defineProperty(CometChatUIKit, "loggedInUser$", {
-    value: of(mockUser), configurable: true,
-  });
-}
-```
-
-### Per-test override
-
-```ts
-it("shows error when login fails", fakeAsync(() => {
-  // Jasmine: re-stub for this test
-  (CometChatUIKit.login as jasmine.Spy).and.rejectWith(new Error("401 Unauthorized"));
-  // Jest equivalent: .mockRejectedValueOnce(new Error("401 Unauthorized"))
-
-  fixture.detectChanges();
-  tick();
-  fixture.detectChanges();
-
-  expect(fixture.nativeElement.querySelector(".error-message").textContent)
-    .toContain("401");
-}));
-```
-
-> If your app wraps the kit in a `CometChatInitService` (the `cometchat-angular-core` `APP_INITIALIZER` pattern), you can instead provide a fake service via `{ provide: CometChatInitService, useValue: spy }` and skip spying the statics. Either is valid — spy the layer your component actually depends on. Don't do both; it's redundant and confusing.
-
----
-
-## 3. TestBed for STANDALONE components — `imports`, not `declarations`
-
-v5 integration components are **standalone**. So is the component under test (it imports the kit classes into its own `imports: []`). In TestBed, a standalone component goes in **`imports`**:
-
-```ts
-// chat.component.spec.ts
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { ChatComponent } from "./chat.component";
-import { spyOnCometChatUIKit } from "./testing/cometchat-spies";
-
-describe("ChatComponent", () => {
-  let fixture: ComponentFixture<ChatComponent>;
-  let component: ChatComponent;
-
-  beforeEach(async () => {
-    spyOnCometChatUIKit();
-
-    await TestBed.configureTestingModule({
-      imports: [ChatComponent],   // ← standalone component goes in imports, NOT declarations
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ChatComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("creates", () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-});
-```
-
-Putting a standalone component in `declarations` throws `Component ... is standalone, and cannot be declared in an NgModule. Use imports instead.` — there is no `CUSTOM_ELEMENTS_SCHEMA` workaround here, and you should not reach for one: that was the v4 NgModule mental model.
-
----
-
-## 4. Stub the kit's `<cometchat-*>` components
-
-`ChatComponent`'s template renders, say, `<cometchat-conversations>`. The real `CometChatConversationsComponent` reaches into the SDK on init — exactly the network access you're mocking away. Replace it with a lightweight stub via `TestBed.overrideComponent`:
-
-```ts
-import { Component } from "@angular/core";
-import {
-  CometChatConversationsComponent,
-  CometChatMessageListComponent,
-  CometChatMessageComposerComponent,
-  CometChatMessageHeaderComponent,
-} from "@cometchat/chat-uikit-angular";
-
-// A stub that reuses the real selector but renders nothing real.
-@Component({ selector: "cometchat-conversations", standalone: true, template: "" })
-class CometChatConversationsStub {}
-
-@Component({ selector: "cometchat-message-list", standalone: true, template: "" })
-class CometChatMessageListStub {}
-
-@Component({ selector: "cometchat-message-composer", standalone: true, template: "" })
-class CometChatMessageComposerStub {}
-
-@Component({ selector: "cometchat-message-header", standalone: true, template: "" })
-class CometChatMessageHeaderStub {}
-
-beforeEach(async () => {
-  spyOnCometChatUIKit();
-
-  await TestBed.configureTestingModule({
-    imports: [ChatComponent],
-  })
-    // swap each real kit component for its stub
-    .overrideComponent(ChatComponent, {
-      remove: {
-        imports: [
-          CometChatConversationsComponent,
-          CometChatMessageListComponent,
-          CometChatMessageComposerComponent,
-          CometChatMessageHeaderComponent,
-        ],
-      },
-      add: {
-        imports: [
-          CometChatConversationsStub,
-          CometChatMessageListStub,
-          CometChatMessageComposerStub,
-          CometChatMessageHeaderStub,
-        ],
-      },
-    })
-    .compileComponents();
-
-  fixture = TestBed.createComponent(ChatComponent);
-});
-```
-
-The stub keeps the same selector (`cometchat-conversations`), so the template still compiles and renders — but nothing hits the SDK. This is the Angular analogue of the React skill's `CometChatConversations: () => null` module mock.
-
-Component class names (verified against the v5 `.d.ts`) carry the **`Component`** suffix; the HTML selectors do **not**:
-
-| Class (import / override) | Selector (template / stub) |
-|---|---|
-| `CometChatConversationsComponent` | `<cometchat-conversations>` |
-| `CometChatMessageListComponent` | `<cometchat-message-list>` |
-| `CometChatMessageComposerComponent` | `<cometchat-message-composer>` |
-| `CometChatMessageHeaderComponent` | `<cometchat-message-header>` |
-| `CometChatUsersComponent` | `<cometchat-users>` |
-| `CometChatGroupsComponent` | `<cometchat-groups>` |
-| `CometChatIncomingCallComponent` | `<cometchat-incoming-call>` |
-
-See `cometchat-angular-components` for the full catalog. Never invent a selector — confirm it in the `.d.ts`.
-
----
-
-## 5. `fakeAsync` + `tick` for the Promise-based lifecycle
-
-`init()` and `login()` are Promises. A component that gates its UI on them (`*ngIf="ready"`) only flips after those resolve. In tests, flush them with `fakeAsync` + `tick()`:
-
-```ts
-import { fakeAsync, tick } from "@angular/core/testing";
-
-it("logs in then becomes ready", fakeAsync(() => {
-  fixture.detectChanges();   // triggers ngOnInit → init/login Promise chain
-  tick();                    // flush microtasks (the resolved Promises)
-  fixture.detectChanges();   // re-render now that ready === true
-
-  expect(CometChatUIKit.login).toHaveBeenCalledWith("cometchat-uid-1");  // bare string
-  expect(fixture.nativeElement.querySelector("cometchat-conversations")).toBeTruthy();
-}));
-```
-
-### Init resolves before children render (the highest-value test)
-
-Mirrors the React skill's "does not render children until login resolves" — catches the single most common production bug, a `<cometchat-*>` mounting before login finishes.
-
-```ts
-it("does not render chat UI until login resolves", fakeAsync(() => {
-  let resolveLogin!: (u: unknown) => void;
-  (CometChatUIKit.login as jasmine.Spy).and.returnValue(
-    new Promise((res) => { resolveLogin = res; })
-  );
-
-  fixture.detectChanges();
-  tick();
-  fixture.detectChanges();
-
-  // login still pending → chat UI gated off
-  expect(fixture.nativeElement.querySelector("cometchat-conversations")).toBeNull();
-
-  resolveLogin({ uid: "cometchat-uid-1" });
-  tick();
-  fixture.detectChanges();
-
-  expect(fixture.nativeElement.querySelector("cometchat-conversations")).toBeTruthy();
-}));
-```
-
-> If the component's promise chain schedules work via `setTimeout` / `requestAnimationFrame` (common when bridging SDK callbacks back into Angular's zone — see `cometchat-angular-patterns`), advance the virtual clock with `tick(N)` for N ms. As an alternative to `fakeAsync`, an `async` test with `await fixture.whenStable()` works too — but never write an `async` test body whose assertion isn't awaited (it passes trivially).
-
-### Asserting on `loggedInUser$`
-
-```ts
-it("exposes the current user from loggedInUser$", fakeAsync(() => {
-  fixture.detectChanges();
-  tick();
-  expect(component.currentUser?.getUid()).toBe("cometchat-uid-1");
-}));
-```
-
----
-
-## 6. Meta-tests against source (mirror the React skill)
-
-### No Auth Key hardcoded in source
-
-The Auth Key belongs in `src/environments/environment.ts` (dev) and never in production builds. A meta-test catches accidental inlining anywhere:
-
-```ts
-import { readFileSync } from "node:fs";
-import { globSync } from "glob";   // glob v9+ named export (NOT `sync as glob`, removed in v10)
-
-it("no Auth Key hardcoded outside environment files", () => {
-  const files = globSync("src/**/*.{ts,html}");
-  const hexKey = /[a-f0-9]{32,}/;
-
-  for (const file of files) {
-    if (/environments\//.test(file)) continue;          // env files are the allowed home (dev)
-    const offenders = readFileSync(file, "utf8")
-      .split("\n")
-      .filter((l) => hexKey.test(l) && !l.trim().startsWith("//") && !/AUTH_KEY/i.test(l));
-    expect(offenders, `Possible Auth Key in ${file}:\n${offenders.join("\n")}`).toHaveLength(0);
-  }
-});
-```
-
-### Kit assets are wired in `angular.json`
-
-The single most-missed v5 setup step is the assets glob (missing it = broken icons everywhere). Assert it once:
-
-```ts
-it("angular.json copies the CometChat kit assets", () => {
-  const cfg = readFileSync("angular.json", "utf8");
-  expect(cfg).toContain("@cometchat/chat-uikit-angular/src/lib/assets");
-});
-```
-
-### No `CUSTOM_ELEMENTS_SCHEMA` for CometChat (v4 smell)
-
-```ts
-it("does not use CUSTOM_ELEMENTS_SCHEMA in component specs/sources", () => {
-  const files = globSync("src/**/*.ts");
-  for (const file of files) {
-    const c = readFileSync(file, "utf8");
-    if (c.includes("@cometchat/chat-uikit-angular") && c.includes("CUSTOM_ELEMENTS_SCHEMA")) {
-      throw new Error(`${file}: v5 components are standalone — drop CUSTOM_ELEMENTS_SCHEMA`);
-    }
-  }
-  expect(true).toBe(true);
-});
-```
-
----
-
-## 7. Production token endpoint — `HttpTestingController`
-
-Only if your app fetches an auth token from your backend before `loginWithAuthToken`. Test the HTTP call with `HttpTestingController`; still spy `loginWithAuthToken` so nothing hits CometChat:
-
-```ts
-import { provideHttpClient } from "@angular/common/http";
-import { provideHttpClientTesting, HttpTestingController } from "@angular/common/http/testing";
-
-describe("TokenAuthService", () => {
-  let http: HttpTestingController;
-  let service: TokenAuthService;
-
-  beforeEach(() => {
-    spyOnCometChatUIKit();
-    TestBed.configureTestingModule({
-      // Angular 17+ : provider functions, NOT the deprecated HttpClientTestingModule
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        TokenAuthService,
-      ],
-    });
-    http = TestBed.inject(HttpTestingController);
-    service = TestBed.inject(TokenAuthService);
-  });
-
-  afterEach(() => http.verify());
-
-  it("fetches a token then logs in with it", fakeAsync(() => {
-    service.loginCurrentUser("cometchat-uid-1");
-
-    const req = http.expectOne("https://api.yourapp.com/cometchat-token");
-    expect(req.request.method).toBe("POST");
-    req.flush({ authToken: "AUTH_TOKEN_123" });
-
-    tick();
-    expect(CometChatUIKit.loginWithAuthToken).toHaveBeenCalledWith("AUTH_TOKEN_123");
-  }));
-});
-```
-
----
-
-## 8. E2E — Playwright (preferred) or Cypress
-
-### Playwright (preferred for two-user flows)
-
-```bash
-npm install -D @playwright/test
-npx playwright install
-```
-
-`playwright.config.ts`:
-
-```ts
-import { defineConfig, devices } from "@playwright/test";
-
-export default defineConfig({
-  testDir: "./e2e",
-  use: {
-    baseURL: process.env.E2E_BASE_URL ?? "http://localhost:4200",
-    trace: "on-first-retry",
-  },
-  projects: [
-    { name: "chromium", use: devices["Desktop Chrome"] },
-    { name: "firefox",  use: devices["Desktop Firefox"] },
-  ],
-  webServer: {
-    command: "npm start",                 // ng serve on :4200
-    url: "http://localhost:4200",
-    reuseExistingServer: !process.env.CI,
-  },
-});
-```
-
-Two-page chat smoke (real backend — e2e is the layer where the network IS the thing under test):
-
-```ts
-import { test, expect, type Page } from "@playwright/test";
-
-async function loginAs(page: Page, uid: string) {
-  await page.goto("/");
-  await page.evaluate((u) => localStorage.setItem("cc-test-uid", u), uid);
-  await page.reload();
-  await expect(page.getByText(/welcome|conversations/i)).toBeVisible({ timeout: 10_000 });
-}
-
-test("two users message back and forth", async ({ browser }) => {
-  const alice = await (await browser.newContext()).newPage();
-  const bob   = await (await browser.newContext()).newPage();
-
-  await loginAs(alice, "cometchat-uid-1");
-  await loginAs(bob, "cometchat-uid-2");
-
-  await alice.goto("/messages");
-  await alice.getByText("cometchat-uid-2").click();
-  await alice.getByPlaceholder(/type a message/i).fill("Hello Bob");
-  await alice.getByPlaceholder(/type a message/i).press("Enter");
-
-  await bob.goto("/messages");
-  await bob.getByText("cometchat-uid-1").click();
-  await expect(bob.getByText("Hello Bob")).toBeVisible({ timeout: 10_000 });
-});
-```
-
-The 10-second timeout is generous — WebSocket delivery is usually <500ms, but CI hosts have variable latency.
-
-### Cypress (single-window smoke)
-
-```bash
-npm install -D cypress
-npx cypress open
-```
-
-`cypress.config.ts`:
-
-```ts
-import { defineConfig } from "cypress";
-
-export default defineConfig({
-  e2e: {
-    baseUrl: process.env.E2E_BASE_URL ?? "http://localhost:4200",
-    specPattern: "cypress/e2e/**/*.cy.ts",
-    defaultCommandTimeout: 10_000,        // generous for WebSocket-driven assertions
-  },
-});
-```
-
-```ts
-// cypress/e2e/chat.cy.ts
-describe("chat smoke", () => {
-  it("logs in and sees the conversation list", () => {
-    cy.visit("/");
-    cy.window().then((w) => w.localStorage.setItem("cc-test-uid", "cometchat-uid-1"));
-    cy.reload();
-    cy.contains(/welcome|conversations/i, { timeout: 10_000 }).should("be.visible");
-  });
-});
-```
-
-Cypress can't drive two browser contexts in one test — for two-user flows use Playwright.
-
-### Test users
-
-Every CometChat app ships 5 pre-seeded users (`cometchat-uid-1` … `cometchat-uid-5`) — use them in e2e. Never create users via Auth-Key flows that leak credentials into test code.
-
----
-
-## 9. CI configuration
-
-```yaml
-# .github/workflows/test.yml
-name: tests
-on: [push, pull_request]
-
-jobs:
-  unit:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with: { node-version: 20, cache: npm }
-      - run: npm ci
-      # Jasmine/Karma — MUST disable watch or CI hangs forever:
-      - run: npm test -- --watch=false --browsers=ChromeHeadless --code-coverage
-      # OR Jest:
-      # - run: npm test -- --ci --coverage
-
-  e2e:
-    runs-on: ubuntu-latest
-    needs: unit
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with: { node-version: 20, cache: npm }
-      - run: npm ci
-      - run: npx playwright install --with-deps chromium firefox
-      - run: npx playwright test                  # webServer block boots `ng serve`
-        env:
-          E2E_BASE_URL: http://localhost:4200
-      - if: failure()
-        uses: actions/upload-artifact@v4
-        with: { name: playwright-report, path: playwright-report/ }
-```
-
-**Critical:** use a **dedicated test CometChat app** (Dashboard → New App → "ci-tests") for e2e — never share with production. Rotate the Auth Key if a CI log ever captures it. Unit/component tests need no credentials at all (the kit is fully mocked).
-
----
-
-## 10. Anti-patterns (mocks that pass tests but mask production)
-
-1. **Putting a standalone component in `declarations`.** v5 components (and your component-under-test) are standalone — they go in `imports`. `declarations` throws at compile time.
-2. **Reaching for `CUSTOM_ELEMENTS_SCHEMA` to silence `<cometchat-*>` "not a known element".** That was the v4 NgModule pattern. In v5 you either import the real component or override it with a stub (§4) — the schema masks genuine template typos.
-3. **Stubbing a kit component with a *real-ish* implementation.** Your stub passes; the real `CometChatConversationsComponent` behaves differently in prod. Keep stubs inert (`template: ""`) and test the wiring around them — same caution as the React skill's `() => null`.
-4. **Mocking `CometChatUIKit.init` / `login` with a synchronous value.** They return Promises; a sync mock hides the race conditions in your gating logic. Always resolve a Promise (`.and.resolveTo` / `.mockResolvedValue`).
-5. **Spying the wrong getter.** `getLoggedInUser()` is sync, `getLoggedinUser()` is async — spy the one your component calls, or the spy is a silent no-op.
-6. **`async` test body without awaiting the assertion.** Passes trivially. Use `fakeAsync` + `tick`, or `await fixture.whenStable()`.
-7. **Asserting on internal kit CSS classes** (`.cc-message-list__bubble`). Brittle across kit upgrades — assert on text, role, selector presence, or test-id.
-8. **Calling `ngOnInit()` directly** instead of `fixture.detectChanges()`. Bypasses Angular's lifecycle; tests diverge from production behavior.
-9. **Running Karma in CI without `--watch=false`.** Default `ng test` watches forever; the job hangs.
-10. **Hardcoding the Auth Key in test files.** Even a throwaway app's key leaks via code grep. Use environment files / CI secrets.
-11. **Running e2e against the dev/prod app.** Test data piles up. Separate app.
-
----
-
-## 11. Verification checklist
-
-- [ ] Runner chosen: Jasmine/Karma (default) OR Jest (`jest.config.js` + `setup-jest.ts`)
-- [ ] Component-under-test placed in TestBed `imports` (standalone), never `declarations`
-- [ ] `CometChatUIKit` statics spied (`init`/`login`/`getLoggedInUser`/`getLoggedinUser`/`loginWithAuthToken`/`logout`) — Promises resolved, not sync values
-- [ ] Kit `<cometchat-*>` components stubbed via `overrideComponent` (no SDK access in unit tests)
-- [ ] At least one `fakeAsync`/`tick` test for "init+login resolves before chat UI renders"
-- [ ] At least one test for "error state renders when `login` rejects"
-- [ ] No `CUSTOM_ELEMENTS_SCHEMA` anywhere CometChat is imported
-- [ ] Meta-test: no Auth Key hardcoded outside `environment.*`
-- [ ] Meta-test: `angular.json` copies the kit `assets/` glob
-- [ ] Playwright (or Cypress) config + at least one chat smoke; two-user smoke uses Playwright
-- [ ] CI runs unit + e2e separately; Karma uses `--watch=false`; e2e uses a dedicated test app
-- [ ] No `.only` / `fit` / `fdescribe` / `xit` left in committed tests
-
-## 12. Pointers
-
-- `cometchat-angular-core` — the init/login order and `CometChatUIKit` API the tests assert against
-- `cometchat-angular-components` — verified selectors + class names for stubs
-- `cometchat-angular-calls` — calls-specific testing (NgZone, getUserMedia, call components)
-- `cometchat-angular-troubleshooting` — when tests pass but the integration is still broken
-- `cometchat-react-testing` — the sister skill; same mocking philosophy