Skip to content

Directive which overrides Component @Input does not work #397

@PauloKoglin

Description

@PauloKoglin

Hi, I'm having an issue with a directive which should override an @input of a PrimeNG Component. In the real app it does work, but in the test not.

I have such a directive, that overrides the virtualScroll @input from the PrimeNG p-table:

import { Directive } from '@angular/core'; import { Table } from 'primeng/table'; @Directive({ selector: 'p-table', }) export class TableDirective { constructor(private table: Table) { this.table.virtualScroll = false; } }

In the test, I would expect, that the virtualScroll attribute gets changed, but it's not the case:

import { TableModule } from 'primeng/table'; describe('Table directive', () => { it('override input from component with directive', async () => { // virtualScroll should be overriden by the p-table directive await render('<p-table [value]="[1]" [virtualScroll]="true"></p-table>', { declarations: [TableDirective], imports: [TableModule], }); screen.debug(); });

The screen.debug() results are this:

<body> <div id="root10" ng-version="15.2.7" > <p-table class="p-element" ng-reflect-value="1" ng-reflect-virtual-scroll="true" > <div class="p-datatable p-component" id="pr_id_107" ng-reflect-ng-class="[object Object]" > <div class="p-datatable-wrapper" ng-reflect-ng-style="[object Object]" > <p-scroller class="p-scroller-viewport p-element" ng-reflect-auto-size="true" ng-reflect-delay="0" ng-reflect-inline="true" ng-reflect-item-size="28" ng-reflect-items="1" ng-reflect-lazy="false" ng-reflect-loader-disabled="true" ng-reflect-options="[object Object]" ng-reflect-show-spacer="false" > <table class="p-datatable-table" id="pr_id_107-table" ng-reflect-ng-class="[object Object]" role="table" > <thead class="p-datatable-thead" /> <tbody class="p-element p-datatable-tbody" ng-reflect-scroller-options="[object Object]" ng-reflect-value="1" /> </table> </p-scroller> </div> </div> </p-table> </div> </body>

As you can see, the attribute ng-reflect-virtual-scroll from p-table is still true.

Is there anything I`m doing wrong? 😕

The versions I`m using

  • testing-library/angular: ^13.4.0
  • angular: 15.2.7
  • primeng: 15.4.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions