@elastic/eui/test-env/test/cypress/test_reposition_on_scroll.js

Elastic UI Component Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.testRepositionOnScroll = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
/*
 * 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" />

var testRepositionOnScroll = exports.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: (0, _defineProperty2.default)({}, componentName, {
        repositionOnScroll: componentDefaultValue
      })
    }
  } : undefined;
  cy.mount((0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
    style: {
      height: '200vh'
    }
  }), (0, _react2.jsx)("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);
      }
    });
  });
};