# Verify

> Use when verifying an ng-select change at runtime — launching the demo app, driving a component behavior in the browser, or running the repo's test/lint/build pipeline before claiming a change works.

- Skill: `ng-select/verify` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ng-select/verify`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ng-select/verify/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ng-select (https://skillmd.com/u/ng-select)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ng-select/verify

---


# Verifying ng-select changes

## Launch the demo app

Use the Browser pane, never Bash: `preview_start {name: "demo"}` (config in `.claude/launch.json`, pnpm ng serve). If port 4300 is taken by another session, `autoPort: true` lets it pick a free port.

Demo routes are hash-based: `http://localhost:<port>/#/forms`, `#/data-sources`, etc. (see `src/demo/app/routes.ts`).

## Drive component behaviors

- Theme switcher and LTR/RTL toggle are dropdowns in the demo header. Material theme is required for `appearance="outline"` / `appearance="fill"` styling.
- When changing styles, verify all three themes (`default`, `material`, `ant`) via the switcher — theme class names are part of the public styling contract (AGENTS.md).
- Outline-appearance selects live on `#/forms` ("Reactive form using ng-option" example).
- To test on a non-white background: `javascript_tool` → `document.body.style.background = '#263238'` and clear card backgrounds.

## Gotchas

- **Theme resets to `default` on full page reload** (component state, not persisted) — re-select Material after any force reload before judging appearance styles.
- **Opening a select programmatically:** dispatch `keydown` Space on the `ng-select` host element (`new KeyboardEvent('keydown', {keyCode: 32, ...})`). Synthetic `mousedown` on the container is unreliable, and coordinate clicks fight scroll jumps.
- **Demo RTL does not exercise theme RTL rules.** The demo nests themes under `:host.<x>-theme ::ng-deep` (app.component.scss) and puts `dir` on an inner div, so the themes' `@include rtl` rules (`[dir='rtl'] …` at root) never match in the demo. To verify RTL as real consumers see it, set `document.documentElement.dir = 'rtl'` via javascript_tool.
- Unit tests run in **Vitest browser mode** — real headless Chromium via `@vitest/browser-playwright` (wired through `@angular/build:unit-test` + root `vitest.config.ts`), not jsdom — layout measurement (`offsetWidth` etc.) works in specs.
- **Failed specs save screenshots** to `src/ng-select/lib/__screenshots__/` — read them when diagnosing a browser-mode test failure.

## Pipeline (Definition of Done, AGENTS.md)

```bash
pnpm lint
pnpm exec ng test ng-select --watch=false   # fast: ng-select only
pnpm test:ci                                # full: both libraries + coverage (what CI runs)
pnpm run build
pnpm exec prettier --check <changed files>  # or: pnpm format:check (whole repo)
```