@elastic/eui/es/test/cypress/test_reposition_on_scroll.js

Elastic UI Component Library

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

/// <reference types="cypress" />
/// <reference types="cypress-real-events" />
/// <reference types="../../../cypress/support" />

import React from 'react';
import { jsx as ___EmotionJSX } from "@emotion/react";
export var testRepositionOnScroll = function testRepositionOnScroll(_ref) {
  var shouldReposition = _ref.shouldReposition,
    propValue = _ref.propValue,
    componentDefaultValue = _ref.componentDefaultValue,
    componentName = _ref.componentName,
    triggerSelector = _ref.triggerSelector,
    panelSelector = _ref.panelSelector,
    renderComponent = _ref.renderComponent;
  var repositionProps = {
    repositionOnScroll: typeof propValue === 'boolean' ? propValue : undefined
  };
  var providerProps = typeof componentDefaultValue === 'boolean' ? {
    providerProps: {
      componentDefaults: _defineProperty({}, componentName, {
        repositionOnScroll: componentDefaultValue
      })
    }
  } : undefined;
  cy.mount(___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
    style: {
      height: '200vh'
    }
  }), ___EmotionJSX("div", {
    style: {
      position: 'fixed',
      bottom: '16px',
      right: '16px'
    }
  }, renderComponent(repositionProps))), providerProps);
  cy.get(triggerSelector).click();

  // Wait for positioning to finish
  cy.get(panelSelector).as('panel').should('exist').waitForPositionToSettle();
  cy.get('@panel').then(function ($panel) {
    var initialRect = $panel[0].getBoundingClientRect();
    cy.scrollTo(0, 500);

    // Wait for re-positioning to finish
    cy.get('@panel').waitForPositionToSettle().then(function ($repositionedPanel) {
      var finalRect = $repositionedPanel[0].getBoundingClientRect();
      if (shouldReposition) {
        expect(finalRect.top).to.equal(initialRect.top);
      } else {
        expect(finalRect.top).to.not.equal(initialRect.top);
      }
    });
  });
};