팝업 또는 그 안에 클릭했는지 확인하고 클릭하면 닫는 짝수 리스너에 연결된 함수가 있습니다. 창과 문서 개체의 다양한 속성을 사용하여 이러한 사항을 확인 getBoundingClientRect()하고 팝업의 위치를 가져옵니다.
내가 겪는 문제는 테스트에서 모든 것을 시뮬레이션하는 방법을 알 수 없다는 것입니다. Jest에서 조롱 할 때 창 개체로 전역 개체를 사용하는 것을 보았습니다.
위치 및 클릭을 확인하는 기능은 다음과 같습니다.
popoverEscape = e => {
const popover = this.panelEl.nativeElement.getBoundingClientRect();
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const left = popover.left + scrollLeft
const right = popover.left + scrollLeft + popover.width
const top = popover.top + scrollTop
const bottom = popover.top + scrollTop + popover.height
if(!this.isBetween(e.clientX, left, right) || !this.isBetween(e.clientY, top, bottom)){
this.closePopover()
}
};
isBetween(n, a, b) {
return (n - a) * (n - b) <= 0
}
다음은 단위 테스트 솔루션입니다.
index.ts:
export class SomeComponent {
panelEl = {
nativeElement: document.createElement('div'),
};
popoverEscape = (e) => {
const popover = this.panelEl.nativeElement.getBoundingClientRect();
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const left = popover.left + scrollLeft;
const right = popover.left + scrollLeft + popover.width;
const top = popover.top + scrollTop;
const bottom = popover.top + scrollTop + popover.height;
if (!this.isBetween(e.clientX, left, right) || !this.isBetween(e.clientY, top, bottom)) {
this.closePopover();
}
};
isBetween(n, a, b) {
return (n - a) * (n - b) <= 0;
}
closePopover() {}
}
index.test.ts:
import { SomeComponent } from './';
describe('59737707', () => {
afterEach(() => {
jest.clearAllMocks();
jest.restoreAllMocks();
});
describe('#popoverEscape', () => {
it('should close popover if first isBetween return falsy', () => {
Object.defineProperty(window, 'pageXOffset', { value: 100 });
document.documentElement.scrollTop = 200;
const comp = new SomeComponent();
const rect = { left: 10, width: 20, top: 10, height: 50 };
jest.spyOn(comp.panelEl.nativeElement, 'getBoundingClientRect').mockReturnValueOnce(rect as DOMRect);
jest.spyOn(comp, 'isBetween').mockReturnValueOnce(false);
comp.closePopover = jest.fn();
const mEvent = { clientX: 100, clientY: 200 };
comp.popoverEscape(mEvent);
expect(comp.panelEl.nativeElement.getBoundingClientRect).toBeCalledTimes(1);
expect(comp.closePopover).toBeCalledTimes(1);
expect(comp.isBetween).toBeCalledTimes(1);
});
it('should close popover if second isBetween return falsy', () => {
Object.defineProperty(window, 'pageXOffset', { value: 100 });
document.documentElement.scrollTop = 200;
const comp = new SomeComponent();
const rect = { left: 10, width: 20, top: 10, height: 50 };
jest.spyOn(comp.panelEl.nativeElement, 'getBoundingClientRect').mockReturnValueOnce(rect as DOMRect);
jest
.spyOn(comp, 'isBetween')
.mockReturnValueOnce(true)
.mockReturnValueOnce(false);
comp.closePopover = jest.fn();
const mEvent = { clientX: 100, clientY: 200 };
comp.popoverEscape(mEvent);
expect(comp.panelEl.nativeElement.getBoundingClientRect).toBeCalledTimes(1);
expect(comp.closePopover).toBeCalledTimes(1);
expect(comp.isBetween).toBeCalledTimes(2);
});
});
});
커버리지 보고서가 포함 된 단위 테스트 결과 :
PASS src/stackoverflow/59737707/index.test.ts (14.308s)
59737707
#popoverEscape
✓ should close popover if first isBetween return falsy (12ms)
✓ should close popover if second isBetween return falsy (3ms)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 94.12 | 75 | 50 | 93.75 | |
index.ts | 94.12 | 75 | 50 | 93.75 | 21 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 16.602s
커버되지 않은 분기 및 기능에 대해 동일한 방법을 수행하고 테스트 커버리지를 100 %로 개선 할 수 있습니다.
소스 코드 : https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59737707
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다