Skip to content

Commit

Permalink
try to add a test case for a visible popup without any mouse events
Browse files Browse the repository at this point in the history
  • Loading branch information
philippotto committed Mar 11, 2024
1 parent 0938784 commit 74b13aa
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 2 deletions.
4 changes: 4 additions & 0 deletions src/hooks/useAlign.ts
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ export default function useAlign(
};
} else {
const rect = target.getBoundingClientRect();
console.log("target.getBoundingClientRect()", target.getBoundingClientRect());
targetRect = {
x: rect.x,
y: rect.y,
Expand Down Expand Up @@ -301,6 +302,8 @@ export default function useAlign(
scaleY === 0 ||
(isDOM(target) && !isVisible(target))
) {
console.warn("isDOM(target)", isDOM(target))
console.warn("!isVisible(target)", !isVisible(target))
return;
}

Expand Down Expand Up @@ -704,6 +707,7 @@ export default function useAlign(

// Reset ready status when placement & open changed
const resetReady = () => {
console.log("RESET");
setOffsetInfo((ori) => ({
...ori,
ready: false,
Expand Down
2 changes: 2 additions & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,7 @@ export function generateTrigger(
) => {
setMousePos([event.clientX, event.clientY]);
};
console.log("mousePos != null", mousePos != null, alignPoint);

const [
ready,
Expand All @@ -403,6 +404,7 @@ export function generateTrigger(
popupAlign,
onPopupAlign,
);
console.log("info", { ready, offsetX, alignInfo });

const [showActions, hideActions] = useAction(
mobile,
Expand Down
25 changes: 23 additions & 2 deletions tests/point.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('Trigger.Point', () => {
<div
className="scroll"
// Jest can not get calculated style in jsdom. So we need to set it manually
style={{ overflowX: 'hidden', overflowY: 'hidden' }}
style={{ overflowX: 'hidden', overflowY: 'hidden', width: 500, height: 500 }}
>
<Trigger
ref={this.props.triggerRef}
Expand All @@ -34,7 +34,7 @@ describe('Trigger.Point', () => {
alignPoint
{...this.props}
>
<div className="point-region" />
<div className="point-region" style={{ width: 100, height: 200 }} />
</Trigger>
</div>
);
Expand Down Expand Up @@ -141,6 +141,27 @@ describe('Trigger.Point', () => {

expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
});

it('should default to targets position when shown in controlled manner', async () => {
// TODO:
// This test does not work at all at the moment, because useAlign calls
// isVisible on the trigger's target (div with class "point-region").
// For that div, getBoundingClientRect() always returns a width and height
// of zero. Therefore, it is interpreted as not visible and useAlign
// returns ready==false.
const { container } = render(<Demo popupVisible action={[]} />);
await trigger(container, 'click', { clientX: 11, clientY: 28 });
await trigger(container, 'mouseenter', { clientX: 10, clientY: 20 });
await trigger(container, 'mouseover', { clientX: 9, clientY: 3 });

const popup = document.querySelector('.rc-trigger-popup');
console.log("popup.style.left", popup.style.left);
console.log("popup.style.top", popup.style.top);


// todo: compare with proper value
expect(popup.style.left).toEqual(0);
});
});

describe('placement', () => {
Expand Down

0 comments on commit 74b13aa

Please sign in to comment.