Top 10 Examples of "ng-zorro-antd in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'ng-zorro-antd' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
it('test click event', fakeAsync(() => {
fixture.detectChanges();
// To avoid *ngIf to hide nodes
treeInstance.expandAll = true;
fixture.detectChanges();
const clickSpy = spyOn(treeInstance, 'nzEvent');
// click 0-0-0 to select
let targetNode = treeElement.querySelectorAll('nz-tree-node')[1];
dispatchMouseEvent(targetNode, 'click');
fixture.detectChanges();
// 0-0-0 / 0-0-0-0 are selected
expect(treeElement.querySelectorAll('.ant-tree-node-selected').length).toEqual(2);
expect(treeInstance.treeComponent.getSelectedNodeList().length).toEqual(2);
expect(clickSpy).toHaveBeenCalledTimes(1);
// cancel 0-0-0 selected
dispatchMouseEvent(targetNode, 'click');
fixture.detectChanges();
expect(treeInstance.treeComponent.getSelectedNodeList().length).toEqual(1);
expect(clickSpy).toHaveBeenCalledTimes(2);
// double click 0-0-0, only response once
targetNode = treeElement.querySelectorAll('nz-tree-node')[1];
dispatchMouseEvent(targetNode, 'dblclick');
fixture.detectChanges();
// 0-0-0-0 are selectedit('should support nzOnChange', fakeAsync(() => {
fixtureInstance.nzValue = new Date('2018-11');
const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
fixture.detectChanges();
dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
fixture.detectChanges();
tick(500);
fixture.detectChanges();
const cell = getSecondYearCell(); // Use the second cell
const cellText = cell.textContent!.trim();
dispatchMouseEvent(cell, 'click');
fixture.detectChanges();
tick(500);
fixture.detectChanges();
expect(nzOnChange).toHaveBeenCalled();
const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
expect(result.getFullYear()).toBe(parseInt(cellText, 10));
}));
}); // /general api testingngOnInit(): void {
if (!this.value) {
this.value = new CandyDate(); // Show today by default
}
this.render();
}it('should support keydown events to open and close select panel', fakeAsync(() => {
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', SPACE);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.open).toBe(true);
// #2201, space should not close select panel
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', TAB);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.open).toBe(false);
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', DOWN_ARROW);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.open).toBe(true);
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', TAB);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.open).toBe(false);
testComponent.disabled = true;
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', TAB);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.open).toBe(false);it('should select option when press ENTER', fakeAsync(() => {
fixture.detectChanges();
expect(testComponent.values).toBeNull();
testComponent.cascader.setMenuVisible(true);
fixture.detectChanges();
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', DOWN_ARROW); // active 1
fixture.detectChanges();
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ENTER);
fixture.detectChanges();
expect(testComponent.values).toBeNull(); // not select yet
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', RIGHT_ARROW); // active 2
fixture.detectChanges();
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ENTER);
fixture.detectChanges();
expect(testComponent.values).toBeNull(); // not select yet
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', RIGHT_ARROW); // active 3
fixture.detectChanges();
expect(testComponent.values).toBeNull(); // not select yet
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ENTER);it('should auto sort range value when start is after end', fakeAsync(() => {
fixture.detectChanges();
openPickerByClickTrigger();
const leftInput = getPickerPanelLeftInput();
const rightInput = getPickerPanelRightInput();
typeInElement('2019-08-10', leftInput);
fixture.detectChanges();
typeInElement('2018-02-06', rightInput);
fixture.detectChanges();
expect(leftInput.value).toBe('2018-02-06');
expect(rightInput.value).toBe('2019-08-10');
}));
}); // /specified date picker testingit('should not change value when click ESC', fakeAsync(() => {
fixtureInstance.modelValue = [new Date('2018-09-11'), new Date('2020-09-12')];
fixture.detectChanges();
tick(); // Wait writeValue() tobe done
fixture.detectChanges();
openPickerByClickTrigger();
const leftInput = getPickerPanelLeftInput();
const rightInput = getPickerPanelRightInput();
typeInElement('2019-11-05', leftInput);
fixture.detectChanges();
// value should be change
expect(getFirstSelectedDayCell().textContent!.trim()).toBe('5');
typeInElement('2019-12-08', rightInput);
fixture.detectChanges();
tick(500);
expect(getSecondSelectedDayCell().textContent!.trim()).toBe('8');
dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
fixture.detectChanges();
tick(500);
expect(getRangePickerLeftInput()!.value).toBe('2018-09-11');
}));it('should custom input date', fakeAsync(() => {
const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
fixture.detectChanges();
openPickerByClickTrigger();
const input = queryFromOverlay('.ant-calendar-date-input-wrap input.ant-calendar-input') as HTMLInputElement;
// Wrong inputing support
typeInElement('wrong', input);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(input.classList.contains('ant-calendar-input-invalid')).toBeTruthy();
// Correct inputing
input.value = '2018-11-22';
input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
// dispatchKeyboardEvent(input, 'keyup', ENTER); // Not working?
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(nzOnChange).toHaveBeenCalled();
const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
expect(result.getDate()).toBe(22);
}));it('test drag drop with dragPos', () => {
// init selected node
let treeNodes = treeInstance.treeComponent.getTreeNodes();
treeService = treeNodes[1].treeService;
const dragNode = treeElement.querySelectorAll('li')[1]; // 0-0-0
treeService!.setSelectedNode(treeInstance.treeComponent.getTreeNodeByKey('000')!); // set 0-0-0
dispatchTouchEvent(dragNode, 'dragstart');
fixture.detectChanges();
// drop 0-0-0 to 0-0 pre
let targetNode = treeNodes[0]; // 0-0
treeService!.dropAndApply(targetNode, -1);
// get treeNodes again
treeNodes = treeInstance.treeComponent.getTreeNodes();
// now ['0-0-0', '0-0', '0-1', '0-2']
expect(treeNodes[0].title).toEqual('0-0-0');
expect(treeNodes[0].level).toEqual(0);
fixture.detectChanges();
// drop 0-0-0 to 0-0-1 next
treeService!.selectedNode = treeNodes[0];
targetNode = treeNodes[1].getChildren()[0]; // 0-0-1
treeService!.dropAndApply(targetNode, 1);it('test drag event nzBeforeDrop', () => {
const dragNode = treeElement.querySelector("[title='0-2']") as HTMLElement;
let dropNode = treeElement.querySelector("[title='0-1']") as HTMLElement;
treeInstance.beforeDrop = (): Observable => {
return of(true);
};
fixture.detectChanges();
dispatchTouchEvent(dragNode, 'dragstart');
dispatchTouchEvent(dropNode, 'dragover');
// drop 0-2 to 0-1
dispatchTouchEvent(dropNode, 'drop');
fixture.detectChanges();
dropNode = treeElement.querySelector("[title='0-1']") as HTMLElement;
expect(dropNode.parentElement!.querySelector("[title='0-2']")).toBeDefined();
});
});