How to use IntersectionObserver method in taiko

Best JavaScript code snippet using taiko

IntersectionObserver.spec.js

Source:IntersectionObserver.spec.js

1import 'intersection-observer';2import React from 'react';3import renderer from 'react-test-renderer';4import IntersectionObserver, {5    getOptions,6} from '../../src/IntersectionObserver';7import { callback, observerElementsMap } from '../../src/observer';8import mockTarget from './__mocks__/mock-target';9jest.mock('react-dom', () => {10    const { findDOMNode } = jest.requireActual('react-dom');11    const target = jest.requireActual('./__mocks__/mock-target');12    return {13        findDOMNode(x) {14            const found = findDOMNode(x);15            if (found == null) {16                return found;17            }18            return typeof x.type === 'string' ? found : target;19        },20    };21});22const target = { ...mockTarget, type: 'span' };23const targets = {24    div: { ...mockTarget, type: 'div' },25    span: target,26};27const createNodeMock = ({ type }) => targets[type];28const noop = () => {};29class RenderChildren extends React.Component {30    render() {31        // eslint-disable-next-line react/prop-types32        return this.props.children;33    }34}35afterEach(() => {36    observerElementsMap.clear();37});38test('throws when the property children is not an only child', () => {39    global.spyOn(console, 'error');40    expect(() =>41        renderer.create(42            <IntersectionObserver onChange={noop}>43                <span />44                <span />45            </IntersectionObserver>46        )47    ).toThrowErrorMatchingInlineSnapshot(48        `"React.Children.only expected to receive a single React element child."`49    );50});51test('throws trying to observe children without a DOM node', () => {52    global.spyOn(console, 'error'); // suppress error boundary warning53    const sizeBeforeObserving = observerElementsMap.size;54    expect(() =>55        renderer.create(56            <IntersectionObserver onChange={noop}>57                <RenderChildren>{null}</RenderChildren>58            </IntersectionObserver>59        )60    ).toThrowErrorMatchingInlineSnapshot(61        `"ReactIntersectionObserver: Can't find DOM node in the provided children. Make sure to render at least one DOM node in the tree."`62    );63    expect(observerElementsMap.size).toBe(sizeBeforeObserving);64});65test('should not observe children that equal null or undefined', () => {66    const sizeBeforeObserving = observerElementsMap.size;67    renderer.create(68        <IntersectionObserver onChange={noop}>{undefined}</IntersectionObserver>69    );70    expect(observerElementsMap.size).toBe(sizeBeforeObserving);71});72test('should not reobserve children that equal null or undefined', () => {73    const tree = renderer.create(74        <IntersectionObserver onChange={noop}>{undefined}</IntersectionObserver>75    );76    const instance = tree.getInstance();77    const observe = jest.spyOn(instance, 'observe');78    const unobserve = jest.spyOn(instance, 'unobserve');79    tree.update(80        <IntersectionObserver onChange={noop}>{null}</IntersectionObserver>81    );82    tree.update(83        <IntersectionObserver onChange={noop} rootMargin="1%">84            {null}85        </IntersectionObserver>86    );87    expect(unobserve).not.toBeCalled();88    expect(observe).toBeCalledTimes(1);89    expect(observe).toReturnWith(false);90});91test('should reobserve null children updating to a DOM node', () => {92    const tree = renderer.create(93        <IntersectionObserver onChange={noop}>{null}</IntersectionObserver>,94        {95            createNodeMock,96        }97    );98    const instance = tree.getInstance();99    const observe = jest.spyOn(instance, 'observe');100    const unobserve = jest.spyOn(instance, 'unobserve');101    tree.update(102        <IntersectionObserver onChange={noop}>103            <div />104        </IntersectionObserver>105    );106    expect(observe).toBeCalledTimes(1);107    expect(observe).toReturnWith(true);108    expect(unobserve).not.toBeCalled();109});110test('should unobserve children updating to null', () => {111    const tree = renderer.create(112        <IntersectionObserver onChange={noop}>113            <div />114        </IntersectionObserver>,115        { createNodeMock }116    );117    const instance = tree.getInstance();118    const observe = jest.spyOn(instance, 'observe');119    const unobserve = jest.spyOn(instance, 'unobserve');120    tree.update(121        <IntersectionObserver onChange={noop}>{null}</IntersectionObserver>122    );123    expect(unobserve).toBeCalledTimes(1);124    expect(observe).toReturnWith(false);125});126test('should call ref callback of children with target', () => {127    const spy = jest.fn();128    renderer.create(129        <IntersectionObserver onChange={noop}>130            <span ref={spy} />131        </IntersectionObserver>,132        { createNodeMock }133    );134    expect(spy).toBeCalledWith(target);135});136test('should handle children ref of type RefObject', () => {137    const ref = React.createRef();138    renderer.create(139        <IntersectionObserver onChange={noop}>140            <span ref={ref} />141        </IntersectionObserver>,142        { createNodeMock }143    );144    expect(ref.current).toEqual(target);145});146test('getOptions returns props `root`, `rootMargin` and `threshold`', () => {147    const options = {148        root: { nodeType: 1 },149        rootMargin: '50% 0%',150        threshold: [0, 1],151    };152    const tree = renderer.create(153        <IntersectionObserver onChange={noop} {...options}>154            <span />155        </IntersectionObserver>,156        { createNodeMock }157    );158    expect(getOptions(tree.getInstance().props)).toEqual(options);159});160test('should observe target on mount', () => {161    const sizeAfterObserving = observerElementsMap.size + 1;162    renderer.create(163        <IntersectionObserver onChange={noop}>164            <span />165        </IntersectionObserver>,166        { createNodeMock }167    );168    expect(sizeAfterObserving).toBe(observerElementsMap.size);169});170test('should unobserve target on unmount', () => {171    const sizeBeforeObserving = observerElementsMap.size;172    const tree = renderer.create(173        <IntersectionObserver onChange={noop}>174            <span />175        </IntersectionObserver>,176        { createNodeMock }177    );178    tree.unmount();179    expect(sizeBeforeObserving).toBe(observerElementsMap.size);180});181describe('updating', () => {182    test('should reobserve with new root, rootMargin and/or threshold props', () => {183        const root1 = { id: 'window', nodeType: 1 };184        const root2 = { id: 'document', nodeType: 1 };185        const initialProps = {186            onChange: noop,187            root: root1,188            rootMargin: '10% 20%',189            threshold: 0.5,190        };191        const tree = renderer.create(192            <IntersectionObserver {...initialProps}>193                <span />194            </IntersectionObserver>,195            { createNodeMock }196        );197        const instance = tree.getInstance();198        const unobserve = jest.spyOn(instance, 'unobserve');199        const observe = jest.spyOn(instance, 'observe');200        // none of the props updating [0/0]201        tree.update(202            <IntersectionObserver {...initialProps}>203                <span />204            </IntersectionObserver>205        );206        // only children updating [1/1]207        tree.update(208            <IntersectionObserver {...initialProps}>209                <div />210            </IntersectionObserver>211        );212        // DOM node not updating [1/1]213        tree.update(214            <IntersectionObserver {...initialProps}>215                <div key="forcesRender" />216            </IntersectionObserver>217        );218        // only root updating (document) [2/2]219        tree.update(220            <IntersectionObserver {...initialProps} root={root2}>221                <div />222            </IntersectionObserver>223        );224        // only root updating (window) [3/3]225        tree.update(226            <IntersectionObserver {...initialProps} root={root1}>227                <div />228            </IntersectionObserver>229        );230        // only rootMargin updating [4/4]231        tree.update(232            <IntersectionObserver233                {...initialProps}234                root={root1}235                rootMargin="20% 10%"236            >237                <div />238            </IntersectionObserver>239        );240        // only threshold updating (non-scalar) [5/5]241        tree.update(242            <IntersectionObserver {...initialProps} threshold={[0.5, 1]}>243                <div />244            </IntersectionObserver>245        );246        // only threshold updating (length changed) [6/6]247        tree.update(248            <IntersectionObserver249                {...initialProps}250                threshold={[0, 0.25, 0.5, 0.75, 1]}251            >252                <div />253            </IntersectionObserver>254        );255        // only threshold updating (scalar) [7/7]256        tree.update(257            <IntersectionObserver {...initialProps} threshold={1}>258                <div />259            </IntersectionObserver>260        );261        // both props and children updating [8/8]262        tree.update(263            <IntersectionObserver {...initialProps}>264                <span />265            </IntersectionObserver>266        );267        // sanity check: nothing else updates [8/8]268        tree.update(269            <IntersectionObserver {...initialProps}>270                <span />271            </IntersectionObserver>272        );273        expect(unobserve).toBeCalledTimes(8);274        expect(observe).toReturnTimes(8);275        expect(observe).toReturnWith(true);276    });277    test('should throw when updating without a DOM Node', () => {278        global.spyOn(console, 'error'); // suppress error boundary warning279        const tree = renderer.create(280            <IntersectionObserver onChange={noop}>281                <RenderChildren>282                    <div />283                </RenderChildren>284            </IntersectionObserver>,285            { createNodeMock }286        );287        const instance = tree.getInstance();288        const observe = jest.spyOn(instance, 'observe');289        const unobserve = jest.spyOn(instance, 'unobserve');290        expect(() =>291            tree.update(292                <IntersectionObserver onChange={noop}>293                    <RenderChildren key="forcesRender">{null}</RenderChildren>294                </IntersectionObserver>295            )296        ).toThrowErrorMatchingInlineSnapshot(297            `"ReactIntersectionObserver: Can't find DOM node in the provided children. Make sure to render at least one DOM node in the tree."`298        );299        expect(unobserve).toBeCalledTimes(1);300        expect(observe).toBeCalledTimes(1);301    });302    test('should observe only when updating with a DOM Node', () => {303        global.spyOn(console, 'error'); // suppress error boundary warning304        const sizeAfterUnobserving = observerElementsMap.size;305        const sizeAfterObserving = observerElementsMap.size + 1;306        const tree = renderer.create(307            <IntersectionObserver onChange={noop}>308                <RenderChildren>309                    <div />310                </RenderChildren>311            </IntersectionObserver>,312            { createNodeMock }313        );314        const instance = tree.getInstance();315        const unobserve = jest.spyOn(instance, 'unobserve');316        expect(() => {317            tree.update(318                <IntersectionObserver onChange={noop}>319                    <RenderChildren key="forcesRender">{null}</RenderChildren>320                </IntersectionObserver>321            );322        }).toThrow();323        expect(unobserve).toBeCalledTimes(1);324        expect(sizeAfterUnobserving).toBe(observerElementsMap.size);325        tree.update(326            <IntersectionObserver onChange={noop}>327                <RenderChildren>328                    <div />329                </RenderChildren>330            </IntersectionObserver>331        );332        expect(sizeAfterObserving).toBe(observerElementsMap.size);333    });334});335describe('onChange', () => {336    const boundingClientRect = {};337    const intersectionRect = {};338    test('should invoke a callback for each observer entry', () => {339        const onChange = jest.fn();340        const component = (341            <IntersectionObserver onChange={onChange}>342                <span />343            </IntersectionObserver>344        );345        const instance1 = renderer346            .create(component, { createNodeMock: () => targets.div })347            .getInstance();348        const instance2 = renderer349            .create(React.cloneElement(component), { createNodeMock })350            .getInstance();351        expect(observerElementsMap.size).toBe(1);352        const entry1 = new IntersectionObserverEntry({353            target: targets.div,354            boundingClientRect,355            intersectionRect,356        });357        const entry2 = new IntersectionObserverEntry({358            target,359            boundingClientRect,360            intersectionRect,361        });362        callback([entry1, entry2], instance1.observer);363        expect(onChange).toHaveBeenNthCalledWith(364            1,365            entry1,366            instance1.externalUnobserve367        );368        expect(onChange).toHaveBeenNthCalledWith(369            2,370            entry2,371            instance2.externalUnobserve372        );373    });374    test('unobserve using the second argument from onChange', () => {375        const sizeAfterObserving = observerElementsMap.size + 1;376        const sizeAfterUnobserving = observerElementsMap.size;377        const onChange = (_, unobserve) => {378            unobserve();379        };380        const instance = renderer381            .create(382                <IntersectionObserver onChange={onChange}>383                    <span />384                </IntersectionObserver>,385                { createNodeMock }386            )387            .getInstance();388        expect(sizeAfterObserving).toBe(observerElementsMap.size);389        callback(390            [391                new IntersectionObserverEntry({392                    target,393                    boundingClientRect,394                    intersectionRect,395                }),396            ],397            instance.observer398        );399        expect(sizeAfterUnobserving).toBe(observerElementsMap.size);400    });401});402describe('disabled', () => {403    test('should not observe if disabled', () => {404        const sizeBeforeObserving = observerElementsMap.size;405        renderer.create(406            <IntersectionObserver onChange={noop} disabled={true}>407                <span />408            </IntersectionObserver>,409            { createNodeMock }410        );411        expect(observerElementsMap.size).toBe(sizeBeforeObserving);412    });413    test('should observe if no longer disabled', () => {414        const tree = renderer.create(415            <IntersectionObserver onChange={noop} disabled={true}>416                <span />417            </IntersectionObserver>,418            { createNodeMock }419        );420        const instance = tree.getInstance();421        const observe = jest.spyOn(instance, 'observe');422        const unobserve = jest.spyOn(instance, 'unobserve');423        tree.update(424            <IntersectionObserver onChange={noop}>425                <span />426            </IntersectionObserver>427        );428        expect(unobserve).not.toBeCalled();429        expect(observe).toReturnWith(true);430    });431    test('should unobserve if disabled', () => {432        const tree = renderer.create(433            <IntersectionObserver onChange={noop}>434                <span />435            </IntersectionObserver>,436            { createNodeMock }437        );438        const instance = tree.getInstance();439        const unobserve = jest.spyOn(instance, 'unobserve');440        const observe = jest.spyOn(instance, 'observe');441        tree.update(442            <IntersectionObserver onChange={noop} disabled={true}>443                <span />444            </IntersectionObserver>445        );446        expect(unobserve).toBeCalled();447        expect(observe).toReturnWith(false);448    });...

intersection_observer.js

Source:intersection_observer.js

...105 * @param {!IntersectionObserverInit=} opt_options The object defining the106 *     thresholds, etc.107 * @constructor108 */109function IntersectionObserver(handler, opt_options) {};110/**111 * The root Element to use for intersection, or null if the observer uses the112 * implicit root.113 * @see https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-root114 * @const {?Element}115 */116IntersectionObserver.prototype.root;117/**118 * Offsets applied to the intersection rootâs bounding box, effectively growing119 * or shrinking the box that is used to calculate intersections.120 * @see https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-rootmargin121 * @const {string}122 */123IntersectionObserver.prototype.rootMargin;...

Using AI Code Generation

1const { openBrowser, goto, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await closeBrowser();6    } catch (error) {7        console.error(error);8    } finally {9    }10})();11const { openBrowser, goto, closeBrowser, intersectionObserver } = require('taiko');12(async () => {13    try {14        await openBrowser();15        await intersectionObserver();16        await closeBrowser();17    } catch (error) {18        console.error(error);19    } finally {20    }21})();22    at ExecutionContext._evaluateInternal (node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)23    at processTicksAndRejections (internal/process/task_queues.js:93:5)24    at async ExecutionContext.evaluate (node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)25    at async Object.intersect (node_modules/taiko/lib/taiko.js:114:19)26    at async Object.intersect (node_modules/taiko/lib/taiko.js:114:19)27    at async Object.intersect (node_modules/taiko/lib/taiko.js:114:19)28    at async Object.intersect (node_modules/taiko/lib/taiko.js:114:19)29    at async Object.intersect (node_modules/taiko/lib/taiko.js:114:19)30    at async Object.intersect (node_modules/taiko/lib/taiko.js:114:19)

Using AI Code Generation

1const { openBrowser, goto, closeBrowser, $, $$ } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await click("Images");6        await click("Search by image");7        await click("Upload an image");

Using AI Code Generation

1const { openBrowser, goto, closeBrowser, $, link, text, button, image, below, textBox, toRightOf, listItem, toLeftOf, fileField, dropDown, checkBox, radioButton, write, focus, hover, evaluate, intercept, clear, reload, scrollDown, scrollUp, scrollRight, scrollLeft, press, screenshot, accept, emulate, setConfig, inputField, waitFor, toLeftOf, toRightOf, above, below, near, within, highlight, $x, $xpath, $id, $class, $classes, $name, $names, $link, $links, $button, $buttons, $image, $images, $input, $inputs, $placeholder, $placeholders, $text, $texts, $near, $within, $eval, $evaluate, $click, $doubleclick, $focus, $hover, $write, $clear, $attach, $select, $deselect, $check, $uncheck, $radio, $table, $row, $rows, $cell, $cells, $scroll, $scrollTo, $scrollRight, $scrollLeft, $scrollUp, $scrollDown, $press, $screenshot, $accept, $dismiss, $emulate, $reload, $waitFor, $waitForNavigation, $waitForEvent, $waitForText, $waitForSelector, $waitForXPath, $waitForXpath, $waitForURL, $waitForURLPath, $waitForURLPathname, $waitForURLSearch, $waitForURLHash, $waitForRequest, $waitForResponse, $waitForFunction, $title, $exists, $visible, $hidden, $deleteCookies, $setCookie, $getCookies, $getCookie, $setConfig, $setNavigationTimeout, $setPageTimeout, $setRequestTimeout, $setSearchTimeout, $setElementTimeout, $setRetryTimeout, $setIntervalBetweenRetries, $setHeadless, $setHost, $setIgnoreCertificateErrors, $setHTTPProxy, $setHTTPProxyAuth, $setHTTPAuth, $setUserAgent, $setViewport } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await write("Taiko");6        await press("Enter");7        await click("Taiko");8        await click("Taiko

Using AI Code Generation

1const { openBrowser, goto, closeBrowser, click, button, textBox, into, write, toRightOf, link, waitFor, below, text, $, image, toLeftOf, focus, evaluate, intercept, reload, $x } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await click("I agree");6        await write("Taiko", into(textBox("Search")));7        await click("Taiko - Google Search");8        await click("Taiko");9        await click("Installation");10        await waitFor(3000);11        await click("GitHub");12        await click("Install Taiko");13        await click("Installation");14        await click("Installation");15        await click("Installation");

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.