Skip to content

Commit 504d225

Browse files
bacali95bacali95
committed
test: enhance test coverage for ngx-json-table components
This commit adds comprehensive unit tests for multiple components: - Expanded test coverage for THeadComponent with detailed scenarios - Added tests for file loading, dropdown menu interactions, and event handling - Improved test cases for JsonTreeNode and helpers - Verified edge cases in component methods and event emissions
1 parent 42e9c53 commit 504d225

File tree

7 files changed

+362
-61
lines changed

7 files changed

+362
-61
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,4 @@ Thumbs.db
4242

4343
# Snippets
4444
projects/demo/src/assets/snippets/*.md
45+
CHANGELOG.md

‎projects/ngx-json-table/src/lib/components/tbody/key/key.component.spec.ts‎

Lines changed: 60 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentFixture, TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
22
import { KeyComponent } from './key.component';
33
import { NgxJsonTableModule } from '../../../ngx-json-table.module';
44
import { JsonTreeNode } from '../../../lib/json-tree-node';
@@ -188,7 +188,7 @@ describe('KeyComponent', () => {
188188
});
189189

190190
it('should emit valueChange event when key is edited', () => {
191-
spyOn(component.valueChange, 'emit');
191+
spyOn(component.somethingChanged, 'emit');
192192

193193
// Enable edit mode
194194
settings.options.edit.key = true;
@@ -204,7 +204,7 @@ describe('KeyComponent', () => {
204204
component.onEnterKeyListener();
205205
fixture.detectChanges();
206206

207-
expect(component.valueChange.emit).toHaveBeenCalledWith('edit');
207+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('edit');
208208
});
209209

210210
it('should add a child node when addChild is called', () => {
@@ -213,7 +213,7 @@ describe('KeyComponent', () => {
213213
component.item = complexNode;
214214
fixture.detectChanges();
215215

216-
spyOn(component.valueChange, 'emit');
216+
spyOn(component.somethingChanged, 'emit');
217217

218218
// Call addChild method
219219
component.addChild(true, false);
@@ -224,7 +224,7 @@ describe('KeyComponent', () => {
224224
expect(complexNode.children[0].isNew).toBe(true);
225225
expect(complexNode.children[0].edit).toBe(true);
226226
expect(complexNode.children[0].type).toBe('object');
227-
expect(component.valueChange.emit).toHaveBeenCalledWith('add');
227+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('add');
228228
});
229229

230230
it('should add an array child node when addChild is called with isArray=true', () => {
@@ -284,29 +284,21 @@ describe('KeyComponent', () => {
284284
expect(dropdownElement.style.display).toBe('none');
285285
});
286286

287-
it('should properly propagate value changes to parent', () => {
288-
spyOn(component.valueChange, 'emit');
289-
290-
component.onValueChange('testValue');
291-
292-
expect(component.valueChange.emit).toHaveBeenCalledWith('testValue');
293-
});
294-
295287
it('should handle escape key to cancel editing', () => {
296288
// Enable edit mode
297289
settings.options.edit.key = true;
298290
component.item.edit = true;
299291
fixture.detectChanges();
300292

301-
spyOn(component.valueChange, 'emit');
293+
spyOn(component.somethingChanged, 'emit');
302294

303295
// Trigger escape key event
304296
component.onEscapeKeyListener();
305297
fixture.detectChanges();
306298

307299
expect(component.item.edit).toBe(false);
308300
// Shouldn't emit clean for regular items
309-
expect(component.valueChange.emit).not.toHaveBeenCalled();
301+
expect(component.somethingChanged.emit).not.toHaveBeenCalled();
310302
});
311303

312304
it('should handle escape key for new items', () => {
@@ -315,14 +307,65 @@ describe('KeyComponent', () => {
315307
component.item.edit = true;
316308
fixture.detectChanges();
317309

318-
spyOn(component.valueChange, 'emit');
310+
spyOn(component.somethingChanged, 'emit');
319311
spyOn(component.item, 'delete');
320312

321313
// Trigger escape key event
322314
component.onEscapeKeyListener();
323315
fixture.detectChanges();
324316

325317
expect(component.item.delete).toHaveBeenCalled();
326-
expect(component.valueChange.emit).toHaveBeenCalledWith('clean');
318+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('clean');
319+
});
320+
321+
it('should handle delete field when delete icon is clicked', () => {
322+
spyOn(component.item, 'delete').and.callThrough();
323+
324+
component.settings.options.delete = true;
325+
component.item.showEditPanel = true;
326+
component.item.parent = new JsonTreeNode(
327+
'testParent',
328+
'',
329+
'object',
330+
0,
331+
true,
332+
null,
333+
[
334+
component.item,
335+
new JsonTreeNode('testChild', '', 'string', 0, false, component.item, [], true),
336+
],
337+
true
338+
);
339+
fixture.detectChanges();
340+
341+
const deleteIcon = fixture.debugElement.query(By.css('.icon-delete-child'));
342+
deleteIcon.nativeElement.click();
343+
fixture.detectChanges();
344+
345+
expect(component.item.delete).toHaveBeenCalled();
327346
});
347+
348+
it('should check the uniqueness of the key', fakeAsync(() => {
349+
spyOn(component.item, 'checkNotUniqueKey').and.callThrough();
350+
351+
component.item.key = '';
352+
fixture.detectChanges();
353+
354+
expect(component.onEnterKeyListener()).toBe(false);
355+
expect(component.item.checkNotUniqueKey).toHaveBeenCalled();
356+
expect(component.item.error).toBe(true);
357+
358+
component.item.key = 'testKey';
359+
const parent = new JsonTreeNode('testParent', '', 'object', 0, false, null, [], true);
360+
parent.addChild(component.item);
361+
parent.addChild(new JsonTreeNode('testKey', '', 'string', 0, false, parent, [], true));
362+
fixture.detectChanges();
363+
364+
expect(component.onEnterKeyListener()).toBe(false);
365+
expect(component.item.checkNotUniqueKey).toHaveBeenCalled();
366+
expect(component.item.error).toBe(true);
367+
368+
tick(2000);
369+
expect(component.item.error).toBe(false);
370+
}));
328371
});

‎projects/ngx-json-table/src/lib/components/tbody/trow/trow.component.spec.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,18 @@ describe('TRowComponent', () => {
6060
expect(valueComponent).toBeTruthy();
6161
});
6262

63+
it('should show and hide edit panel when mouse enters and leaves', () => {
64+
fixture.debugElement.triggerEventHandler('mouseenter');
65+
fixture.detectChanges();
66+
67+
expect(component.item.showEditPanel).toBe(true);
68+
69+
fixture.debugElement.triggerEventHandler('mouseleave');
70+
fixture.detectChanges();
71+
72+
expect(component.item.showEditPanel).toBe(false);
73+
});
74+
6375
it('should apply indentation based on node level', () => {
6476
// Set node level
6577
node.level = 2;
@@ -71,23 +83,23 @@ describe('TRowComponent', () => {
7183
expect(keyComponent.styles['margin-left']).toBe('40px'); // 20px * level
7284
});
7385

74-
it('should emit valueChange event when key component emits valueChange', () => {
75-
spyOn(component.valueChange, 'emit');
86+
it('should emit somethingChanged event when key component emits somethingChanged', () => {
87+
spyOn(component.somethingChanged, 'emit');
7688

77-
// Trigger valueChange event from key component
89+
// Trigger somethingChanged event from key component
7890
const keyComponent = fixture.debugElement.query(By.css('[ngx-json-table-key]'));
79-
keyComponent.triggerEventHandler('valueChange', 'edit');
91+
keyComponent.triggerEventHandler('somethingChanged', 'edit');
8092

81-
expect(component.valueChange.emit).toHaveBeenCalledWith('edit');
93+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('edit');
8294
});
8395

84-
it('should emit valueChange event when value component emits valueChange', () => {
85-
spyOn(component.valueChange, 'emit');
96+
it('should emit somethingChanged event when value component emits somethingChanged', () => {
97+
spyOn(component.somethingChanged, 'emit');
8698

8799
// Trigger valueChange event from value component
88100
const valueComponent = fixture.debugElement.query(By.css('[ngx-json-table-value]'));
89-
valueComponent.triggerEventHandler('valueChange', 'edit');
101+
valueComponent.triggerEventHandler('somethingChanged', 'edit');
90102

91-
expect(component.valueChange.emit).toHaveBeenCalledWith('edit');
103+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('edit');
92104
});
93105
});

‎projects/ngx-json-table/src/lib/components/tbody/value/value.component.spec.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@ describe('ValueComponent', () => {
161161
expect(editIcon).toBeFalsy();
162162
});
163163

164-
it('should emit valueChange event when value is edited', () => {
165-
spyOn(component.valueChange, 'emit');
164+
it('should emit somethingChanged event when value is edited', () => {
165+
spyOn(component.somethingChanged, 'emit');
166166

167167
// Enable edit mode
168168
settings.options.edit.value = true;
@@ -178,7 +178,7 @@ describe('ValueComponent', () => {
178178
component.onEnterKeyListener();
179179
fixture.detectChanges();
180180

181-
expect(component.valueChange.emit).toHaveBeenCalledWith('edit');
181+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('edit');
182182
});
183183

184184
it('should add a new child when add icon is clicked for complex nodes', () => {
@@ -221,7 +221,7 @@ describe('ValueComponent', () => {
221221
component.item = childNode;
222222
fixture.detectChanges();
223223

224-
spyOn(component.valueChange, 'emit');
224+
spyOn(component.somethingChanged, 'emit');
225225

226226
// Find and click delete icon
227227
const deleteIcon = fixture.debugElement.query(By.css('.delete-icon'));
@@ -231,7 +231,7 @@ describe('ValueComponent', () => {
231231

232232
// Should have removed the child from parent
233233
expect(parentNode.children.length).toBe(0);
234-
expect(component.valueChange.emit).toHaveBeenCalledWith('delete');
234+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('delete');
235235
}
236236
});
237237

@@ -260,7 +260,7 @@ describe('ValueComponent', () => {
260260
component.item = testNode;
261261
fixture.detectChanges();
262262

263-
spyOn(component.valueChange, 'emit');
263+
spyOn(component.somethingChanged, 'emit');
264264
spyOn(testNode, 'resetState');
265265
spyOn(testNode, 'toggleEdit');
266266

@@ -269,7 +269,7 @@ describe('ValueComponent', () => {
269269

270270
expect(testNode.resetState).toHaveBeenCalled();
271271
expect(testNode.toggleEdit).toHaveBeenCalled();
272-
expect(component.valueChange.emit).not.toHaveBeenCalled();
272+
expect(component.somethingChanged.emit).not.toHaveBeenCalled();
273273
});
274274

275275
it('should handle escape key for new items', () => {
@@ -280,14 +280,14 @@ describe('ValueComponent', () => {
280280
component.item = testNode;
281281
fixture.detectChanges();
282282

283-
spyOn(component.valueChange, 'emit');
283+
spyOn(component.somethingChanged, 'emit');
284284
spyOn(testNode, 'delete');
285285

286286
// Trigger escape key
287287
component.onEscapeKeyListener();
288288

289289
expect(testNode.delete).toHaveBeenCalled();
290-
expect(component.valueChange.emit).toHaveBeenCalledWith('clean');
290+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('clean');
291291
});
292292

293293
it('should handle enter key to save changes', () => {
@@ -297,7 +297,7 @@ describe('ValueComponent', () => {
297297
component.item = testNode;
298298
fixture.detectChanges();
299299

300-
spyOn(component.valueChange, 'emit');
300+
spyOn(component.somethingChanged, 'emit');
301301
spyOn(testNode, 'toggleEdit');
302302
spyOn(testNode, 'updateState');
303303
spyOn(testNode, 'checkNotUniqueKey').and.returnValue(false);
@@ -308,7 +308,7 @@ describe('ValueComponent', () => {
308308
expect(testNode.checkNotUniqueKey).toHaveBeenCalled();
309309
expect(testNode.toggleEdit).toHaveBeenCalled();
310310
expect(testNode.updateState).toHaveBeenCalled();
311-
expect(component.valueChange.emit).toHaveBeenCalledWith('edit');
311+
expect(component.somethingChanged.emit).toHaveBeenCalledWith('edit');
312312
});
313313

314314
it('should not proceed with enter key if key is not unique', () => {
@@ -318,7 +318,7 @@ describe('ValueComponent', () => {
318318
component.item = testNode;
319319
fixture.detectChanges();
320320

321-
spyOn(component.valueChange, 'emit');
321+
spyOn(component.somethingChanged, 'emit');
322322
spyOn(testNode, 'toggleEdit');
323323
spyOn(testNode, 'checkNotUniqueKey').and.returnValue(true);
324324

@@ -327,6 +327,6 @@ describe('ValueComponent', () => {
327327

328328
expect(testNode.checkNotUniqueKey).toHaveBeenCalled();
329329
expect(testNode.toggleEdit).not.toHaveBeenCalled();
330-
expect(component.valueChange.emit).not.toHaveBeenCalled();
330+
expect(component.somethingChanged.emit).not.toHaveBeenCalled();
331331
});
332332
});

0 commit comments

Comments
 (0)