diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts index fbe033d25dc..2206d73e4bc 100644 --- a/components/cascader/nz-cascader.spec.ts +++ b/components/cascader/nz-cascader.spec.ts @@ -1176,6 +1176,71 @@ describe('cascader', () => { expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0); // 0列 expect(testComponent.cascader.isMenuVisible()).toBe(false); })); + it('should not change on hover work', fakeAsync(() => { + testComponent.nzChangeOnSelect = true; + testComponent.nzExpandTrigger = 'hover'; + fixture.detectChanges(); + expect(testComponent.values).toBeNull(); + expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0); // 0列 + expect(testComponent.values).toBeNull(); // not select yet + + testComponent.cascader.setMenuVisible(true); + fixture.detectChanges(); + expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(1); // 1列 + expect(testComponent.values).toBeNull(); // not select yet + + const itemEl1 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(1) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第1列第1个 + expect(itemEl1.classList).not.toContain('ant-cascader-menu-item-active'); + dispatchMouseEvent(itemEl1, 'mouseenter'); + fixture.detectChanges(); + tick(200); + fixture.detectChanges(); + + expect(testComponent.cascader.isMenuVisible()).toBe(true); + expect(itemEl1.classList).toContain('ant-cascader-menu-item-active'); + expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(2); // 2列 + expect(testComponent.values).toBeNull(); // mouseenter does not trigger selection + + const itemEl2 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(2) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第2列第1个 + expect(itemEl1.classList).toContain('ant-cascader-menu-item-active'); + expect(itemEl2.classList).not.toContain('ant-cascader-menu-item-active'); + dispatchMouseEvent(itemEl2, 'mouseenter'); + fixture.detectChanges(); + tick(200); + fixture.detectChanges(); + + expect(testComponent.cascader.isMenuVisible()).toBe(true); + expect(itemEl1.classList).toContain('ant-cascader-menu-item-active'); + expect(itemEl2.classList).toContain('ant-cascader-menu-item-active'); + expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(3); // 3列 + expect(testComponent.values).toBeNull(); // mouseenter does not trigger selection + + const itemEl3 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(3) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第3列第1个 + expect(itemEl1.classList).toContain('ant-cascader-menu-item-active'); + expect(itemEl2.classList).toContain('ant-cascader-menu-item-active'); + expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active'); + dispatchMouseEvent(itemEl3, 'mouseenter'); + fixture.detectChanges(); + tick(200); + fixture.detectChanges(); + + expect(testComponent.values).toBeNull(); // mouseenter does not trigger selection + + itemEl3.click(); + fixture.detectChanges(); + tick(200); + fixture.detectChanges(); + + expect(testComponent.values).toBeDefined(); // click trigger selection + expect(testComponent.values.length).toBe(3); + expect(testComponent.values[ 0 ]).toBe('zhejiang'); + expect(testComponent.values[ 1 ]).toBe('hangzhou'); + expect(testComponent.values[ 2 ]).toBe('xihu'); + flush(); // wait for cdk-overlay to close + fixture.detectChanges(); + expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0); // 0列 + expect(testComponent.cascader.isMenuVisible()).toBe(false); + })); it('should change on function work', fakeAsync(() => { testComponent.nzChangeOn = testComponent.fakeChangeOn; fixture.detectChanges();