chore: fix vitest setup in new docs #4934

jdegand · 2025-08-21T18:25:18Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngrx/platform/blob/main/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[X] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Closes #4917
Closes #4918
Closes #4930

What is the new behavior?

Tests will run from the www folder (npx nx run www:test). There is a warning from tsconfig.spec.json file about missing types from vitest, but this doesn't prevent tests from running. I've tried many different changes and this never goes away. The npm packages got updated when I ran an analog command to regenerate the files.

Does this PR introduce a breaking change?

[ ] Yes
[X] No

Other information

netlify · 2025-08-21T18:25:23Z

✅ Deploy Preview for ngrx-io canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`5dfc2a8`
🔍 Latest deploy log	https://app.netlify.com/projects/ngrx-io/deploys/68c5b5dd95971d0008d9f65b

netlify · 2025-08-21T18:25:24Z

✅ Deploy Preview for ngrx-site-v19 ready!

Name	Link
🔨 Latest commit	`5dfc2a8`
🔍 Latest deploy log	https://app.netlify.com/projects/ngrx-site-v19/deploys/68c5b5ddd4a85a0008550f16
😎 Deploy Preview	https://deploy-preview-4934--ngrx-site-v19.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

jdegand · 2025-08-21T19:03:04Z

I just ran tests on main and the signals tests fail there as well. So that failure doesn't appear related to these code changes.

markostanimirovic · 2025-08-22T10:50:24Z

www should be removed from --exclude:

jdegand · 2025-08-22T18:03:36Z

@markostanimirovic The www tests fail because of #4930. I still don't get why the signals tests fail in this PR, but not in other ones. The signals tests timeout and maybe there is a potential memory leak.

markostanimirovic · 2025-08-22T22:07:16Z

@markostanimirovic The www tests fail because of #4930. I still don't get why the signals tests fail in this PR, but not in other ones. The signals tests timeout and maybe there is a potential memory leak.

@jdegand Let's then fix #4930 first. I left a comment there.

jdegand · 2025-08-22T23:09:29Z

@markostanimirovic I added the angular plugin, but I didn't put it ahead of the analog plugin. The www tests now pass.

jdegand · 2025-08-24T23:37:52Z

The manualChunks change could be source of signals tests failure. Maybe, the parsing is too big and then those tests timeout.

jdegand · 2025-08-26T02:30:18Z

Excluded examples folder from tests in www. Are these example projects going to be updated or a few removed?

The use of a constructor in place of an ngOnInit call may explain the injector error in app.component.ts.

timdeschryver · 2025-08-26T06:51:44Z

Excluded examples folder from tests in www. Are these example projects going to be updated or a few removed?

The use of a constructor in place of an ngOnInit call may explain the injector error in app.component.ts.

The examples are referenced within our docs, or offered as a Stackblitz project.
We can go over them to see if the spec files are needed or can be removed.
For now I think it's good to exclude them from the tests.

jdegand · 2025-08-30T18:25:49Z

Need to further investigate issues with angular-vitest-plugin. There are a few issues that are unresolved with Vitest's latest changes:

  resolve: {
    conditions: [...defaultClientConditions],
  },

is a workaround.

I tried using a zoneless vite.config.ts in www from the analog docs. It didn't seem to help.

I have started looking at more files for issues. There definitely appears to be a misconfiguration somewhere.

The signals tests always timeout. The timeout failures are all related to zone.js. An import issue in a test-setup?

Update: cacheDir scope could be important. All tests pull from same cache so race conditions and flakiness.

jdegand · 2025-09-12T23:18:27Z

There was an error in the configuration for www and I used inlineStyles inside angular vs analog. The newer version of the plugin doesn't require the vite object key.

Changing Object.assign and using globalThis seemed to help the signals tests although there is still one test timing out.

timdeschryver

Thanks @jdegand , I pushed some changes to push this over the finish line.

force push (no changes) was to trigger the build with our CI activated
this detected failing tests on all modules because the missing ts-node dependency (I don't know how I missed that in my cleanup) => I re-added the dependency
the signals were still giving a time-out. I noticed this were cases where there were multiple expectSnippets => I refactored these cases to only compile the snippet once

jdegand · 2025-09-13T18:10:42Z

@timdeschryver The www tests still can fail (inconsistent).

Below is an app.component change that makes the tests pass:

import {
  Component,
  Injector,
  PLATFORM_ID,
  inject,
  OnDestroy,
} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
import { MenuComponent } from './components/menu.component';
import { MarkdownSymbolLinkComponent } from './components/docs/markdown-symbol-link.component';
import { AlertComponent } from './components/docs/alert.component';
import { CodeExampleComponent } from './components/docs/code-example.component';
import { CodeTabsComponent } from './components/docs/code-tabs.component';
import { StackblitzComponent } from './components/docs/stackblitz.component';
import { FooterComponent } from './components/footer.component';

@Component({
  selector: 'ngrx-root',
  imports: [
    RouterOutlet,
    MenuComponent,
    MarkdownSymbolLinkComponent,
    AlertComponent,
    CodeExampleComponent,
    StackblitzComponent,
    FooterComponent,
  ],
  template: `
    <ngrx-menu></ngrx-menu>
    <router-outlet></router-outlet>
    <ngrx-footer></ngrx-footer>
  `,
  styles: [
    `
      :host {
        display: block;
        position: relative;
        width: calc(100% - 270px);
        left: 270px;
        @media only screen and (max-width: 1280px) {
          width: 100%;
          left: 0;
        }
      }

      ngrx-menu {
        position: fixed;
        top: 0;
        left: 0;
      }
    `,
  ],
})
export class AppComponent implements OnDestroy {
  private isAlive = true;
  private injector = inject(Injector);
  private platformId = inject(PLATFORM_ID);

  constructor() {
    if (isPlatformBrowser(this.platformId)) {
      this.installCustomElements();
    }
  }

  ngOnDestroy(): void {
    this.isAlive = false;
  }

  async installCustomElements() {
    if (!this.isAlive) return;

    const { createCustomElement } = await import('@angular/elements');

    if (!this.isAlive) return;

    const symbolLinkElement = createCustomElement(MarkdownSymbolLinkComponent, {
      injector: this.injector,
    });
    customElements.define('ngrx-docs-symbol-link', symbolLinkElement);

    if (!this.isAlive) return;

    const alertElement = createCustomElement(AlertComponent, {
      injector: this.injector,
    });
    customElements.define('ngrx-docs-alert', alertElement);

    if (!this.isAlive) return;

    const codeExampleElement = createCustomElement(CodeExampleComponent, {
      injector: this.injector,
    });
    customElements.define('ngrx-code-example', codeExampleElement);

    if (!this.isAlive) return;

    const codeTabsElement = createCustomElement(CodeTabsComponent, {
      injector: this.injector,
    });
    customElements.define('ngrx-code-tabs', codeTabsElement);

    if (!this.isAlive) return;

    const stackblitzElement = createCustomElement(StackblitzComponent, {
      injector: this.injector,
    });
    customElements.define('ngrx-docs-stackblitz', stackblitzElement);
  }
}

jdegand · 2025-09-13T18:23:41Z

@timdeschryver I updated the app component and changed the test-setup. I ran the www tests many times and they never failed. I think this should be it although the analog plugin API is tweaked in the next version so the vite config will need a change when that dependency is updated.

jdegand added 5 commits August 20, 2025 00:47

wip

bc17c8d

fix: relative paths

946fc6a

fix: get tests running in www

2f3b875

fix: remove comment

3ea43d8

fix: remove target

a3bac55

fix: update workflow files

359b718

jdegand added 3 commits August 22, 2025 23:38

fix: update vite config

40556b9

revert: test section in vite.config

797a03d

fix: flip order of plugins

112b8f0

jdegand added 3 commits August 26, 2025 02:09

chore: merge main

f4edbb6

revert: linked-state.md formatting change

09fbc5c

fix: add space in md file

b38da9f

fix: exclude examples in www tests

6dad271

jdegand added 2 commits August 27, 2025 01:34

fix: add resolve to vite.config

1ec2489

fix: update test-setup in signals

57836a8

jdegand added 4 commits September 4, 2025 01:38

fix: change target to 2016

ef82c73

fix: change signals target to es2016

1707ba9

fix: update cacheDir

52d9ba6

Merge branch 'main' into www-vitest

a992d34

jdegand added 7 commits September 4, 2025 23:24

chore: merge main branch

935ec27

chore: regen lock file

39feb2b

fix: add cacheDir to vite config in signals

1f8a82a

fix: stackblitz typo

e593ab5

chore: merge main again

cb606dd

chore: run prettier

fbd8a9e

fix: update TextDecoder import

a124ba8

fix: use different inlineStyles plugin

ad297a1

timdeschryver force-pushed the www-vitest branch from e863de2 to ad297a1 Compare September 13, 2025 13:31

timdeschryver added 2 commits September 13, 2025 16:27

add ts-node

4ba27ae

refactor slow type tests to only compile the code once

b8d6da7

timdeschryver approved these changes Sep 13, 2025

View reviewed changes

fix: update app.component and test-setup for zoneless

5dfc2a8

Uh oh!

chore: fix vitest setup in new docs #4934

Are you sure you want to change the base?

chore: fix vitest setup in new docs #4934

Uh oh!

Conversation

jdegand commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

netlify bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ngrx-io canceled.

Uh oh!

netlify bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ngrx-site-v19 ready!

Uh oh!

jdegand commented Aug 21, 2025

Uh oh!

markostanimirovic commented Aug 22, 2025

Uh oh!

jdegand commented Aug 22, 2025

Uh oh!

markostanimirovic commented Aug 22, 2025

Uh oh!

jdegand commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jdegand commented Aug 24, 2025

Uh oh!

jdegand commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timdeschryver commented Aug 26, 2025

Uh oh!

jdegand commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jdegand commented Sep 12, 2025

Uh oh!

timdeschryver left a comment

Choose a reason for hiding this comment

Uh oh!

jdegand commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jdegand commented Sep 13, 2025

Uh oh!

Uh oh!

jdegand commented Aug 21, 2025 •

edited

Loading

netlify bot commented Aug 21, 2025 •

edited

Loading

netlify bot commented Aug 21, 2025 •

edited

Loading

jdegand commented Aug 22, 2025 •

edited

Loading

jdegand commented Aug 26, 2025 •

edited

Loading

jdegand commented Aug 30, 2025 •

edited

Loading

jdegand commented Sep 13, 2025 •

edited

Loading