@dsivd/prestations-ng 19.0.6-beta.2 → 19.0.7

package/src/eslint/rules/__tests__/no-uninvoked-signal-in-template.test.mjs

@@ -0,0 +1,291 @@
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import * as templateParser from '@angular-eslint/template-parser';
+import { RuleTester } from 'eslint';
+import { beforeAll, describe, it } from 'vitest';
+import rule from '../no-uninvoked-signal-in-template.mjs';
+
+describe('no-uninvoked-signal-in-template', () => {
+  const ruleTester = new RuleTester({
+    languageOptions: { parser: templateParser },
+  });
+
+  // The rule reads the twin `.ts` of the template and walks its inheritance chain, so
+  // the fixtures have to exist on disk. They are laid out like a real project — the
+  // base class package under `node_modules` — so that module resolution is exercised.
+  let templatePath;
+  let inlineTemplatePath;
+  let heirTemplatePath;
+
+  const write = (path, content) => {
+    mkdirSync(join(path, '..'), { recursive: true });
+    writeFileSync(path, content, 'utf8');
+  };
+
+  beforeAll(() => {
+    const root = mkdtempSync(join(tmpdir(), 'no-uninvoked-signal-'));
+
+    // A flattened declaration bundle, as published by ng-packagr: several classes in a
+    // single file, signal types qualified by the namespace they were imported under.
+    write(
+      join(root, 'node_modules', '@fake', 'kit', 'package.json'),
+      JSON.stringify({ name: '@fake/kit', types: 'index.d.ts' }),
+    );
+    write(
+      join(root, 'node_modules', '@fake', 'kit', 'index.d.ts'),
+      `import * as _angular_core from '@angular/core';
+       declare class KitInputComponent {
+         readonly label: _angular_core.InputSignal<string>;
+         readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+         readonly value: _angular_core.ModelSignal<string>;
+         plainInherited: string;
+         reset(): void;
+       }
+       declare class KitFieldComponent extends KitInputComponent {
+         readonly fieldId: _angular_core.Signal<string>;
+       }
+       declare class UnrelatedComponent {
+         readonly unrelated: _angular_core.InputSignal<string>;
+       }
+       export { KitFieldComponent, KitInputComponent, UnrelatedComponent };`,
+    );
+
+    // A base class of the project itself, reached through a relative import.
+    write(
+      join(root, 'src', 'abstract-page.component.ts'),
+      `import { KitFieldComponent } from '@fake/kit';
+       export abstract class AbstractPageComponent extends KitFieldComponent {
+         readonly foehnFormComponent = viewChild(FoehnFormComponent);
+         protected readonly step = signal(0);
+       }`,
+    );
+
+    write(
+      join(root, 'src', 'sample.component.ts'),
+      `import { Component, computed, input, model, signal } from '@angular/core';
+       import { AbstractPageComponent } from './abstract-page.component';
+
+       class LocalBaseComponent extends AbstractPageComponent {
+         readonly fromLocalBase = input<string>('');
+       }
+
+       @Component({ selector: 'app-sample', templateUrl: './sample.component.html' })
+       export class SampleComponent extends LocalBaseComponent {
+         readonly count = signal(0);
+         readonly title = input.required<string>();
+         readonly comment = model<string>('');
+         readonly double = computed(() => this.count() * 2);
+         readonly items = computed<string[]>(() => []);
+         readonly fromType: Signal<number> = this.double;
+         plainField = 'plain';
+         helper(): string { return ''; }
+       }`,
+    );
+
+    templatePath = join(root, 'src', 'sample.component.html');
+    // Virtual block name produced by `angular.processInlineTemplates`.
+    inlineTemplatePath = join(
+      root,
+      'src',
+      'sample.component.ts',
+      '1_inline-template-sample.component.ts-1.component.html',
+    );
+
+    // A component whose only signals come from its base classes.
+    write(
+      join(root, 'src', 'heir.component.ts'),
+      `import { AbstractPageComponent } from './abstract-page.component';
+       export class HeirComponent extends AbstractPageComponent {}`,
+    );
+    heirTemplatePath = join(root, 'src', 'heir.component.html');
+  });
+
+  const template = (code) => ({ code, filename: templatePath });
+  const invalidTemplate = (code, output, ...names) => ({
+    ...template(code),
+    output,
+    errors: names.map((name) => ({ messageId: 'uninvoked', data: { name } })),
+  });
+
+  it('should validate uninvoked signal rule', () => {
+    ruleTester.run('no-uninvoked-signal-in-template', rule, {
+      valid: [
+        // Invoked signals
+        template('{{ count() }}'),
+        template('{{ this.count() }}'),
+        template('{{ double() + count() }}'),
+        template('<div [hidden]="!count()"></div>'),
+        template('@if (double()) { {{ title() }} }'),
+
+        // Safe call
+        template('{{ count?.() }}'),
+
+        // Members of the signal API target the signal itself
+        template('<button (click)="count.set(1)"></button>'),
+        template('<button (click)="comment.update((v) => v + \'!\')"></button>'),
+        template('<app-child [value]="comment.asReadonly()"></app-child>'),
+
+        // Non-signal members
+        template('{{ plainField }}'),
+        template('{{ helper() }}'),
+
+        // Written position: Angular calls `.set()` itself
+        template('<button (click)="comment = \'x\'"></button>'),
+
+        // Template-local names shadow the class members
+        template('<input #count />{{ count.value }}'),
+        template('@for (title of items(); track title) { {{ title }} }'),
+        template('@if (comment(); as count) { {{ count }} }'),
+        template('@let count = 1; {{ count }}'),
+        template('<ng-template let-count>{{ count }}</ng-template>'),
+        template('@for (item of items(); track item) { {{ $index }} }'),
+
+        // No twin `.ts`: nothing to resolve
+        { code: '{{ count }}', filename: 'unknown.component.html' },
+      ],
+
+      invalid: [
+        invalidTemplate('{{ count }}', '{{ count() }}', 'count'),
+        invalidTemplate('{{ this.count }}', '{{ this.count() }}', 'count'),
+        invalidTemplate(
+          '<div [hidden]="!count"></div>',
+          '<div [hidden]="!count()"></div>',
+          'count',
+        ),
+        invalidTemplate(
+          '{{ title + \'x\' }}',
+          '{{ title() + \'x\' }}',
+          'title',
+        ),
+        invalidTemplate(
+          '@if (double) { {{ count }} }',
+          '@if (double()) { {{ count() }} }',
+          'double',
+          'count',
+        ),
+        invalidTemplate(
+          '<div>{{ items.length }}</div>',
+          '<div>{{ items().length }}</div>',
+          'items',
+        ),
+        // Declared by its type only, without a signal factory
+        invalidTemplate('{{ fromType }}', '{{ fromType() }}', 'fromType'),
+        invalidTemplate(
+          '@for (item of items; track item) { {{ item }} }',
+          '@for (item of items(); track item) { {{ item }} }',
+          'items',
+        ),
+        invalidTemplate(
+          '<button (click)="doSomething(count)"></button>',
+          '<button (click)="doSomething(count())"></button>',
+          'count',
+        ),
+      ],
+    });
+  });
+
+  // A writable signal is two-way bound WITHOUT parentheses: Angular reads it and calls
+  // `.set()` itself. Adding `()` there is a compilation error, so the autofix must not
+  // touch the target of a `[(…)]` binding.
+  it('should not require parentheses on a two-way bound writable signal', () => {
+    ruleTester.run('no-uninvoked-signal-in-template', rule, {
+      valid: [
+        template('<app-child [(value)]="comment"></app-child>'),
+        template('<app-child [(value)]="this.comment"></app-child>'),
+        template('<input [(ngModel)]="comment" />'),
+        // Inherited writable signal as the target
+        template('<app-child [(value)]="value"></app-child>'),
+        // Two-way binding next to a correctly invoked signal
+        template('<app-child [(value)]="comment" [label]="title()"></app-child>'),
+      ],
+
+      invalid: [
+        // The exemption is scoped to the bound position, not to the signal name
+        invalidTemplate(
+          '<app-child [(value)]="comment"></app-child>{{ comment }}',
+          '<app-child [(value)]="comment"></app-child>{{ comment() }}',
+          'comment',
+        ),
+        // A one-way binding on the same element is still reported, exactly once
+        invalidTemplate(
+          '<app-child [(value)]="comment" [label]="title"></app-child>',
+          '<app-child [(value)]="comment" [label]="title()"></app-child>',
+          'title',
+        ),
+        // `[value]` alone is not a two-way binding
+        invalidTemplate(
+          '<app-child [value]="comment"></app-child>',
+          '<app-child [value]="comment()"></app-child>',
+          'comment',
+        ),
+      ],
+    });
+  });
+
+  // No list of base-class members is configured anywhere: everything below is resolved
+  // by following the `extends` clauses across files and packages.
+  it('should resolve inherited signals automatically', () => {
+    const heir = (code) => ({ code, filename: heirTemplatePath });
+    const invalidHeir = (code, output, name) => ({
+      ...heir(code),
+      output,
+      errors: [{ messageId: 'uninvoked', data: { name } }],
+    });
+
+    ruleTester.run('no-uninvoked-signal-in-template', rule, {
+      valid: [
+        // Relative import, then a package, up the whole chain
+        heir('{{ foehnFormComponent()?.id }}'),
+        heir('{{ fieldId() }}'),
+        heir('<div [class.off]="disabled()">{{ label() }}</div>'),
+        template('{{ fromLocalBase() }}'),
+
+        // Not a signal, even though it sits on the same base class
+        heir('{{ plainInherited }}'),
+        heir('<button (click)="reset()"></button>'),
+
+        // A class of the same declaration bundle that is NOT in the chain
+        heir('{{ unrelated }}'),
+      ],
+
+      invalid: [
+        // Declared in the base class of the twin `.ts`
+        invalidHeir(
+          '{{ foehnFormComponent }}',
+          '{{ foehnFormComponent() }}',
+          'foehnFormComponent',
+        ),
+        // Declared in a package, reached through two levels of `extends`
+        invalidHeir('{{ label }}', '{{ label() }}', 'label'),
+        invalidHeir('{{ fieldId }}', '{{ fieldId() }}', 'fieldId'),
+        // `InputSignalWithTransform`
+        invalidHeir(
+          '<div [class.off]="disabled"></div>',
+          '<div [class.off]="disabled()"></div>',
+          'disabled',
+        ),
+        // Base class declared in the component file itself
+        invalidTemplate(
+          '{{ fromLocalBase }}',
+          '{{ fromLocalBase() }}',
+          'fromLocalBase',
+        ),
+      ],
+    });
+  });
+
+  it('should resolve the signals of an inline template', () => {
+    ruleTester.run('no-uninvoked-signal-in-template', rule, {
+      valid: [{ code: '{{ count() }}', filename: inlineTemplatePath }],
+      invalid: [
+        {
+          code: '{{ count }}',
+          filename: inlineTemplatePath,
+          output: '{{ count() }}',
+          errors: [{ messageId: 'uninvoked', data: { name: 'count' } }],
+        },
+      ],
+    });
+  });
+});

package/src/eslint/rules/index.mjs

@@ -1 +1,7 @@
-export { default as noDirectSignalMutation } from './no-direct-signal-mutation.mjs';
+import noDirectSignalMutation from './no-direct-signal-mutation.mjs';
+import noUninvokedSignalInTemplate from './no-uninvoked-signal-in-template.mjs';
+
+export default {
+  'no-direct-signal-mutation': noDirectSignalMutation,
+  'no-uninvoked-signal-in-template': noUninvokedSignalInTemplate,
+};