woocommerce/plugins/woocommerce-blocks/assets/js/base/hooks/test/use-position-relative-to-vi...

87 lines
2.0 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { render, screen, act } from '@testing-library/react';
/**
* Internal dependencies
*/
import { usePositionRelativeToViewport } from '../use-position-relative-to-viewport';
describe( 'usePositionRelativeToViewport', () => {
function setup() {
const TestComponent = () => {
const [ referenceElement, positionRelativeToViewport ] =
usePositionRelativeToViewport();
return (
<>
{ referenceElement }
{ positionRelativeToViewport === 'below' && (
<p data-testid="below"></p>
) }
{ positionRelativeToViewport === 'visible' && (
<p data-testid="visible"></p>
) }
{ positionRelativeToViewport === 'above' && (
<p data-testid="above"></p>
) }
</>
);
};
return render( <TestComponent /> );
}
it( "calls IntersectionObserver's `observe` and `unobserve` events", async () => {
const observe = jest.fn();
const unobserve = jest.fn();
// @ts-ignore
IntersectionObserver = jest.fn( () => ( {
observe,
unobserve,
} ) );
const { unmount } = setup();
expect( observe ).toHaveBeenCalled();
unmount();
expect( unobserve ).toHaveBeenCalled();
} );
it.each`
Add @woocommerce/eslint-plugin dependency (https://github.com/woocommerce/woocommerce-blocks/pull/3115) * convert eslint config to use @woocommerce/eslint-plugin - removes unnecessary dependencies - adds e2e-tests/specs to eslint ignore (they are automatically generated) - turns off rules that will be handled in subsequent pulls (to avoid a mammoth changeset for review). - NOTE: prettier config needs left in because of a bug with the existing version of `@wordpress/eslint-plugin` pulled in (fixed in https://github.com/WordPress/gutenberg/pull/25068) so I left the file for now. * prettier fixes. * remove obsolete plugin and fixes for eslint update This branch brings an update to eslint which also changes some syntax with plugins. So this commit: - fixes featuer-flag plugin syntax. - removed obsolete dependency-group plugin (which is now in the `@woocommerce/eslint-plugin` configuration. * add to-do comment * fixes for test runs - this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run. * fixes for test runs - this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run. * include prettier alias as a dependency This has to be done because prettier is installed with storybook and thus the alias setup in `@wordpress/scripts` is over-ridden by the storybook import. * another attempt at e2e-test-fix * add some debugging and temporarily just add one e2e config test for travis * more debugging * try installing full puppeteer and see if fixes * fix package-lock? * setupSettings separately from other fixture loading * add debugging of files * add another console.log (hopefully trigger travis) * split out blockPage creation to it’s own as well * fixed! remove debugging and re-enable travis configs for entire test suite * fix config and rename e2e-tests to e2e - fixes the failing product-search test - tests/e2e-tests was redundant, I changed to `tests/e2e` (this follows a file pattern change made in woocommerce core as well). * add todo for some eslint properties * remove unnecessary early function execution * revert earlier commit and remove duplicate call to createBlockPages
2020-09-07 17:31:10 +00:00
position | isIntersecting | top
${ 'visible' } | ${ true } | ${ 0 }
${ 'below' } | ${ false } | ${ 10 }
${ 'above' } | ${ false } | ${ 0 }
${ 'above' } | ${ false } | ${ -10 }
`(
"position relative to viewport is '$position' with isIntersecting=$isIntersecting and top=$top",
( { position, isIntersecting, top } ) => {
let intersectionObserverCallback = ( entries ) => entries;
// @ts-ignore
IntersectionObserver = jest.fn( ( callback ) => {
// @ts-ignore
intersectionObserverCallback = callback;
return {
observe: () => void null,
unobserve: () => void null,
};
} );
setup();
act( () => {
intersectionObserverCallback( [
{ isIntersecting, boundingClientRect: { top } },
] );
} );
expect( screen.getAllByTestId( position ) ).toHaveLength( 1 );
}
);
} );