Skip to content

Commit c683193

Browse files
zeusdeuxzeusdeux
committed
Add more tests
1 parent 08e8eca commit c683193

File tree

3 files changed

+74
-28
lines changed

3 files changed

+74
-28
lines changed

‎cypress/integration/useIntersectionObserver.test.js‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,69 @@ describe('useIsInViewport', () => {
1717
cy.get('[data-testid="box"]').should('contain', 'In viewport')
1818
})
1919

20-
// it('should report correctly when ')
21-
22-
// it('should work for element with a custom viewport', () => {
23-
// cy.get('[data-testid="div-viewport-parent-el"]').should(
24-
// 'contain',
25-
// 'Not intersecting with parent'
26-
// )
27-
// cy.get('[data-testid="toggle-container-size"]').click()
28-
// cy.get('[data-testid="div-viewport-parent-el"]').should('contain', 'Intersecting with parent')
29-
// cy.get('[data-testid="toggle-container-size"]').click()
30-
// cy.get('[data-testid="div-viewport-parent-el"]').should(
31-
// 'contain',
32-
// 'Not intersecting with parent'
33-
// )
34-
// })
20+
it('should report correctly when target ref is forwarded from a parent', () => {
21+
cy.get('[data-testid="toggle-ref-forwarding-parent-doc-test"]').should(
22+
'contain',
23+
'Show ref fwd parent doc test'
24+
)
25+
cy.get('[data-testid="toggle-ref-forwarding-parent-doc-test"]').click()
26+
cy.get('[data-testid="toggle-ref-forwarding-parent-doc-test"]').should(
27+
'contain',
28+
'Hide ref fwd parent doc test'
29+
)
30+
cy.get('[data-testid="box"]').should('contain', 'In viewport')
31+
cy.get('[data-testid="toggle-box-position"]').click()
32+
cy.get('[data-testid="box"]').should('contain', 'Out of viewport')
33+
cy.scrollTo(0, 413) // just about greater than 50% of target element intersects with parent doc viewport
34+
cy.get('[data-testid="box"]').should('contain', 'In viewport')
35+
cy.scrollTo(0, 412) // just about less than 50% of target element intersects with parent doc viewport
36+
cy.get('[data-testid="box"]').should('contain', 'Out of viewport')
37+
// test side effect from the target ref that was forwarded to the element to watch
38+
cy.window().then(window => {
39+
expect(window.forwardedTargetRef).length(1)
40+
expect(window.forwardedTargetRef[0].classList.contains('target-div')).to.be.true
41+
})
42+
})
3543

36-
// it('should work for elements that intersect with their parent document', () => {
37-
// cy.get('[data-testid="div-viewport-window"]')
38-
// .should('contain', 'Hidden')
39-
// .scrollIntoView()
40-
// .should('contain', 'Visible')
44+
it('should report correctly when a parent element is used as viewport', () => {
45+
cy.get('[data-testid="toggle-simple-parent-element-test"]').should(
46+
'contain',
47+
'Show simple parent element test'
48+
)
49+
cy.get('[data-testid="toggle-simple-parent-element-test"]').click()
50+
cy.get('[data-testid="toggle-simple-parent-element-test"]').should(
51+
'contain',
52+
'Hide simple parent element test'
53+
)
54+
cy.get('[data-testid="child"]').should('contain', 'In viewport')
55+
cy.get('[data-testid="toggle-box-position"]').click()
56+
cy.get('[data-testid="child"]').should('contain', 'Out of viewport')
57+
cy.get('[data-testid="viewport"]').scrollTo(0, 68) // just 1px of target intersecting with the parent viewport
58+
cy.get('[data-testid="child"]').should('contain', 'In viewport')
59+
cy.get('[data-testid="viewport"]').scrollTo(0, 67) // just 1px of target outside of the parent viewport
60+
cy.get('[data-testid="child"]').should('contain', 'Out of viewport')
61+
})
4162

42-
// cy.scrollTo(0, 0)
43-
// cy.get('[data-testid="div-viewport-window"]').should('contain', 'Hidden')
44-
// })
63+
it('should report correctly when a parent element ref is forwarded from a parent', () => {
64+
cy.get('[data-testid="toggle-ref-forwarding-parent-element-test"]').should(
65+
'contain',
66+
'Show ref fwd parent element test'
67+
)
68+
cy.get('[data-testid="toggle-ref-forwarding-parent-element-test"]').click()
69+
cy.get('[data-testid="toggle-ref-forwarding-parent-element-test"]').should(
70+
'contain',
71+
'Hide ref fwd parent element test'
72+
)
73+
cy.get('[data-testid="first-child"]').should('contain', 'First child >= 75% in viewport')
74+
cy.get('[data-testid="second-child"]').should('contain', 'Second child >= 75% in viewport')
75+
cy.get('[data-testid="toggle-boxes-positions"]').click()
76+
cy.get('[data-testid="first-child"]').should('contain', 'First child out of viewport')
77+
cy.get('[data-testid="second-child"]').should('contain', 'Second child out of viewport')
78+
cy.get('[data-testid="viewport"]').scrollTo(0, 190) // 75% or more of first child in viewport
79+
cy.get('[data-testid="first-child"]').should('contain', 'First child >= 75% in viewport')
80+
cy.get('[data-testid="second-child"]').should('contain', 'Second child out of viewport')
81+
cy.get('[data-testid="viewport"]').scrollTo(0, 250) // 75% or more of second child in viewport
82+
cy.get('[data-testid="first-child"]').should('contain', 'First child >= 75% in viewport')
83+
cy.get('[data-testid="second-child"]').should('contain', 'Second child >= 75% in viewport')
84+
})
4585
})

‎examples/cra/src/index.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,14 @@ import {
1212

1313
function App() {
1414
const [testToShow, setTestToShow] = React.useState(1)
15-
const forwardedTargetRef = node => console.log('target', node)
16-
const forwardedViewportRef = node => console.log('viewport', node)
15+
const forwardedTargetRef = node => {
16+
window.forwardedTargetRef = window.forwardedTargetRef || []
17+
window.forwardedTargetRef.push(node)
18+
}
19+
const forwardedViewportRef = node => {
20+
window.forwardedViewportRef = window.forwardedViewportRef || []
21+
window.forwardedViewportRef.push(node)
22+
}
1723

1824
return (
1925
<>

‎examples/cra/src/viewportParentDocument.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export function SimpleElement() {
4242

4343
export const RefForwardingElement = React.forwardRef(function RefForwardingElement(
4444
{ threshold = 10 }, // default value for threshold so that we don't pass it in as undefined
45-
ref
45+
targetRef
4646
) {
4747
const [isInViewport, childRef] = useIsInViewport({
48-
target: ref,
48+
target: targetRef,
4949
threshold // if threshold is passed as an option, it MUST be a number or number[]
5050
})
5151
const [hidden, toggleHide] = React.useState(false)
@@ -60,7 +60,7 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
6060
{hidden ? 'Show box' : 'Hide box'}
6161
</button>
6262
<div
63-
className={cx(box, {
63+
className={cx('target-div', box, {
6464
[inWindowViewport]: !hidden,
6565
[outsideWindowViewport]: hidden,
6666
[visible]: isInViewport

0 commit comments

Comments
 (0)