Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 775d17d

Browse files
l-linl-lin
committed
fix(#1591): using-ng-template-ref unit test
1 parent 74890b5 commit 775d17d

File tree

3 files changed

+99
-91
lines changed

3 files changed

+99
-91
lines changed

‎demo/src/app/advanced/using-ng-pipe.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ describe('UsingNgPipeComponent', () => {
7979

8080
const lastNameFromData = (instance.row(dataRow).data() as Person).lastName;
8181
const lastNameFromTable = $('td:nth-child(3)', dataRow).text();
82-
return firstNameFromTable == firstNameFromData.toUpperCase() && lastNameFromTable == lastNameFromData.toUpperCase();
82+
return firstNameFromTable === firstNameFromData.toUpperCase() && lastNameFromTable === lastNameFromData.toUpperCase();
8383
}))
8484
.toEqual(expectedArray);
8585
});

‎demo/src/app/advanced/using-ng-template-ref.component.ts

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -18,57 +18,60 @@ export class UsingNgTemplateRefComponent implements OnInit, AfterViewInit {
1818
mdTS = 'assets/docs/advanced/using-ng-template-ref/source-ts.md';
1919

2020
dtOptions: ADTSettings = {};
21-
dtTrigger = new Subject();
21+
dtTrigger: Subject<ADTSettings> = new Subject<ADTSettings>();
2222

2323
@ViewChild('demoNg') demoNg: TemplateRef<DemoNgComponent>;
2424
message = '';
2525

2626
ngOnInit(): void {
27-
}
28-
29-
ngAfterViewInit() {
30-
const self = this;
31-
this.dtOptions = {
32-
ajax: 'data/data.json',
33-
columns: [
34-
{
35-
title: 'ID',
36-
data: 'id'
37-
},
38-
{
39-
title: 'First name',
40-
data: 'firstName',
41-
},
42-
{
43-
title: 'Last name',
44-
data: 'lastName'
45-
},
46-
{
47-
title: 'Actions',
48-
data: null,
49-
defaultContent: '',
50-
ngTemplateRef: {
51-
ref: this.demoNg,
52-
context: {
53-
// needed for capturing events inside <ng-template>
54-
captureEvents: self.onCaptureEvent.bind(self)
27+
// use setTimeout as a hack to ensure the `demoNg` is usable in the datatables rowCallback function
28+
setTimeout(() => {
29+
const self = this;
30+
this.dtOptions = {
31+
ajax: 'data/data.json',
32+
columns: [
33+
{
34+
title: 'ID',
35+
data: 'id'
36+
},
37+
{
38+
title: 'First name',
39+
data: 'firstName',
40+
},
41+
{
42+
title: 'Last name',
43+
data: 'lastName'
44+
},
45+
{
46+
title: 'Actions',
47+
data: null,
48+
defaultContent: '',
49+
ngTemplateRef: {
50+
ref: this.demoNg,
51+
context: {
52+
// needed for capturing events inside <ng-template>
53+
captureEvents: self.onCaptureEvent.bind(self)
54+
}
5555
}
5656
}
57-
}
58-
]
59-
};
57+
]
58+
};
59+
});
60+
}
6061

61-
// wait before loading table
62+
ngAfterViewInit() {
6263
setTimeout(() => {
6364
// race condition fails unit tests if dtOptions isn't sent with dtTrigger
6465
this.dtTrigger.next(this.dtOptions);
6566
}, 200);
6667
}
6768

68-
6969
onCaptureEvent(event: IDemoNgComponentEventType) {
7070
this.message = `Event '${event.cmd}' with data '${JSON.stringify(event.data)}`;
7171
}
7272

73-
73+
ngOnDestroy(): void {
74+
// Do not forget to unsubscribe the event
75+
this.dtTrigger.unsubscribe();
76+
}
7477
}

‎demo/src/assets/docs/advanced/using-ng-template-ref/source-ts.md

Lines changed: 60 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -40,77 +40,82 @@ export interface IDemoNgComponentEventType {
4040
}
4141

4242
// ng-template-ref.component.ts
43-
import {
44-
AfterViewInit,
45-
Component,
46-
OnInit,
47-
TemplateRef,
48-
ViewChild,
49-
} from "@angular/core";
50-
import { ADTSettings } from "angular-datatables/src/models/settings";
51-
import { Subject } from "rxjs";
52-
import { IDemoNgComponentEventType } from "./demo-ng-template-ref-event-type";
53-
import { DemoNgComponent } from "./demo-ng-template-ref.component";
43+
44+
import { AfterViewInit, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
45+
import { ADTSettings, } from 'angular-datatables/src/models/settings';
46+
import { Subject } from 'rxjs';
47+
import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type';
48+
import { DemoNgComponent } from './demo-ng-template-ref.component';
5449

5550
@Component({
56-
selector: "app-using-ng-template-ref",
57-
templateUrl: "./using-ng-template-ref.component.html",
51+
selector: 'app-using-ng-template-ref',
52+
templateUrl: './using-ng-template-ref.component.html',
5853
})
5954
export class UsingNgTemplateRefComponent implements OnInit, AfterViewInit {
60-
constructor() {}
6155

62-
pageTitle = "Using Angular TemplateRef";
63-
mdIntro = "assets/docs/advanced/using-ng-template-ref/intro.md";
64-
mdHTML = "assets/docs/advanced/using-ng-template-ref/source-html.md";
65-
mdTS = "assets/docs/advanced/using-ng-template-ref/source-ts.md";
56+
constructor() { }
6657

67-
dtOptions: ADTSettings = {};
68-
dtTrigger = new Subject();
58+
pageTitle = 'Using Angular TemplateRef';
59+
mdIntro = 'assets/docs/advanced/using-ng-template-ref/intro.md';
60+
mdHTML = 'assets/docs/advanced/using-ng-template-ref/source-html.md';
61+
mdTS = 'assets/docs/advanced/using-ng-template-ref/source-ts.md';
6962

70-
@ViewChild("demoNg") demoNg: TemplateRef<DemoNgComponent>;
63+
dtOptions: ADTSettings = {};
64+
dtTrigger: Subject<ADTSettings> = new Subject<ADTSettings>();
7165

72-
ngOnInit(): void {}
66+
@ViewChild('demoNg') demoNg: TemplateRef<DemoNgComponent>;
67+
message = '';
7368

74-
ngAfterViewInit() {
75-
const self = this;
76-
this.dtOptions = {
77-
ajax: "data/data.json",
78-
columns: [
79-
{
80-
title: "ID",
81-
data: "id",
82-
},
83-
{
84-
title: "First name",
85-
data: "firstName",
86-
},
87-
{
88-
title: "Last name",
89-
data: "lastName",
90-
},
91-
{
92-
title: "Actions",
93-
data: null,
94-
defaultContent: "",
95-
ngTemplateRef: {
96-
ref: this.demoNg,
97-
context: {
98-
// needed for capturing events inside <ng-template>
99-
captureEvents: self.onCaptureEvent.bind(self),
100-
},
69+
ngOnInit(): void {
70+
// use setTimeout as a hack to ensure the `demoNg` is usable in the datatables rowCallback function
71+
setTimeout(() => {
72+
const self = this;
73+
this.dtOptions = {
74+
ajax: 'data/data.json',
75+
columns: [
76+
{
77+
title: 'ID',
78+
data: 'id'
79+
},
80+
{
81+
title: 'First name',
82+
data: 'firstName',
10183
},
102-
},
103-
],
104-
};
84+
{
85+
title: 'Last name',
86+
data: 'lastName'
87+
},
88+
{
89+
title: 'Actions',
90+
data: null,
91+
defaultContent: '',
92+
ngTemplateRef: {
93+
ref: this.demoNg,
94+
context: {
95+
// needed for capturing events inside <ng-template>
96+
captureEvents: self.onCaptureEvent.bind(self)
97+
}
98+
}
99+
}
100+
]
101+
};
102+
});
103+
}
105104

106-
// wait before loading table
105+
ngAfterViewInit() {
107106
setTimeout(() => {
108-
this.dtTrigger.next();
107+
// race condition fails unit tests if dtOptions isn't sent with dtTrigger
108+
this.dtTrigger.next(this.dtOptions);
109109
}, 200);
110110
}
111111

112112
onCaptureEvent(event: IDemoNgComponentEventType) {
113-
console.log(event);
113+
this.message = `Event '${event.cmd}' with data '${JSON.stringify(event.data)}`;
114+
}
115+
116+
ngOnDestroy(): void {
117+
// Do not forget to unsubscribe the event
118+
this.dtTrigger.unsubscribe();
114119
}
115120
}
116121
```

0 commit comments

Comments
 (0)