Skip to content

[FLINK-40035][runtime-web] Add Vitest smoke tests for the web-dashboard#28610

Open
spuru9 wants to merge 1 commit into
apache:masterfrom
spuru9:feature/FLINK-40035-vitest-smoke-specs
Open

[FLINK-40035][runtime-web] Add Vitest smoke tests for the web-dashboard#28610
spuru9 wants to merge 1 commit into
apache:masterfrom
spuru9:feature/FLINK-40035-vitest-smoke-specs

Conversation

@spuru9

@spuru9 spuru9 commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

What is the purpose of the change

The web-dashboard has no automated tests — eslint and the production build were the only guardrails, so framework upgrades (Angular, ng-zorro) rely on manual testing. This adds a Vitest-based test setup with smoke-level component specs for high-traffic views, wired into the existing CI build (FLINK-40035).

Brief change log

  • Wire Vitest via Angular's @angular/build:unit-test builder (the default unit-test runner in Angular 21; Karma is deprecated). Tests run in jsdom, so no browser is required in CI. Adds tsconfig.spec.json and src/test-setup.ts with the jsdom stubs ng-zorro / Angular CDK need (matchMedia, ResizeObserver, IntersectionObserver).
  • Migrate the build and serve targets from @angular-devkit/build-angular:browser-esbuild to @angular/build:application and :dev-server, which the unit-test builder requires and which is the Angular 21 default. Build output stays flat under web/, so packaging is unchanged. Removes the now-unused @angular-devkit/build-angular.
  • Add smoke specs (rendering + basic interactions) for the Overview statistic cards, the Task Manager list, and the Job Exceptions view.
  • Add test / test:ci npm scripts and include test:ci in ci-check, so the specs run as part of the existing Maven frontend build.

Verifying this change

This change adds tests and can be verified as follows:

  • npm run test:ci runs the Vitest suite — 6 specs across 3 components pass.
  • npm run ci-check (lint + tests + production build) passes; the production ng build output remains flat under web/ (unchanged packaging layout), with no CommonJS dependency warnings.
  • The dev-server proxy (npm run proxy) was verified against a stub backend on :8081: all REST roots — including subpaths and query strings such as /jobs/<jid>/flamegraph?type=FULL — are proxied, while /, main.js, styles.css, and the lazy chunk-*.js files are served by the local dev server with the correct content types. The ^-regex proxy key introduced in FLINK-40045 behaves identically under @angular/build:dev-server (same Vite matching semantics).
  • Regenerating the NOTICE file against a production-only install (npm ci --omit=dev) confirms no NOTICE change is needed — only devDependencies change.

Does this pull request potentially affect one of the following parts:

  • Dependencies (does it add or upgrade a dependency): yes (web-dashboard build/test tooling only — adds vitest, jsdom, @angular/build; migrates the build to @angular/build:application; removes @angular-devkit/build-angular)
  • The public API, i.e., is any changed class annotated with @Public(Evolving): no
  • The serializers: no
  • The runtime per-record code paths (performance sensitive): no
  • Anything that affects deployment or recovery: no
  • The S3 file system connector: no

Documentation

  • Does this pull request introduce a new feature? no (test infrastructure)
  • If yes, how is the feature documented? not applicable

AI Usage Disclosure

  • Claude Code

@flinkbot

flinkbot commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

CI report:

Bot commands The @flinkbot bot supports the following commands:
  • @flinkbot run azure re-run the last Azure build

@spuru9 spuru9 marked this pull request as draft July 2, 2026 12:40
@spuru9 spuru9 force-pushed the feature/FLINK-40035-vitest-smoke-specs branch 3 times, most recently from 1c79b8c to 387cb4d Compare July 7, 2026 17:28
The web-dashboard had no automated tests, leaving lint and the production
build as the only guardrails against breakage during Angular/ng-zorro
upgrades. Add a Vitest-based test setup with smoke-level component specs for
high-traffic views, and run them in CI.

- Wire Vitest via Angular's @angular/build:unit-test builder (the default
  test runner in Angular 21; Karma is deprecated). Tests run in jsdom, so no
  browser is needed in CI. Add tsconfig.spec.json and src/test-setup.ts with
  the jsdom stubs ng-zorro/CDK require (matchMedia, ResizeObserver,
  IntersectionObserver).
- Migrate the build and serve targets from
  @angular-devkit/build-angular:browser-esbuild to @angular/build:application
  and :dev-server, which the unit-test builder requires and which is the
  Angular 21 default. Output stays flat under web/ so packaging is unchanged.
  Remove the now-unused @angular-devkit/build-angular.
- Add smoke specs covering rendering and basic interactions for the Overview
  statistic cards, the Task Manager list, and the Job Exceptions view.
- Add test / test:ci npm scripts and include test:ci in ci-check so the specs
  run as part of the existing Maven frontend build.

Generated-by: Claude Code (claude-opus-4-8)
@spuru9 spuru9 force-pushed the feature/FLINK-40035-vitest-smoke-specs branch from 387cb4d to dfd0056 Compare July 7, 2026 17:46
@spuru9 spuru9 marked this pull request as ready for review July 7, 2026 17:57
@spuru9

spuru9 commented Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

@MartijnVisser Can you check this PR.
I have added only some minor tests to kick start the component testing. Will create some JIRAs for adding more module level tests in future. Would have been a longer PR for review.
Also after adding sufficient amount of component test, would also look into feasibility of playwright tests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants