lucid-ui
Version:
A UI component library from AppNexus.
83 lines (78 loc) • 4.03 kB
JavaScript
import _get from "lodash/get";
import React from 'react';
import { mount, shallow } from 'enzyme';
import assert from 'assert';
import { common } from '../../util/generic-tests';
import { dispatchDOMEvent } from '../../util/dom-helpers';
import StickySection from './StickySection';
describe('StickySection', function () {
common(StickySection);
describe('render', function () {
it('should render a div with class `lucid-StickySection`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(StickySection, null));
assert.equal(wrapper.find('div.lucid-StickySection').length, 1, 'StickySection must render the base div at root');
});
});
describe('props', function () {
describe('lowerBound', function () {
var wrapper;
var mountTestdiv;
beforeEach(function () {
document.body.style.height = '10000px';
mountTestdiv = document.createElement('div');
document.body.appendChild(mountTestdiv);
});
afterEach(function () {
if (wrapper) {
wrapper.unmount();
wrapper = null;
}
document.body.style.height = '';
mountTestdiv.parentNode.removeChild(mountTestdiv);
});
it.skip('render the sticky section normally (not fixed) when scrolled past the lowerBound value', function () {
// set the lowerBound to 500
wrapper = mount( /*#__PURE__*/React.createElement(StickySection, {
lowerBound: 500
}), {
attachTo: mountTestdiv
}); // scroll to position 499
window.pageYOffset = 499;
dispatchDOMEvent(window, 'scroll'); // check that the fixed position sticky section is rendered
assert.equal(_get(wrapper.find('.lucid-StickySection-sticky-frame').prop('style'), 'position'), 'fixed', 'sticky frame must be position fixed');
assert.equal(_get(wrapper.find('.lucid-StickySection-sticky-section').prop('style'), 'position'), 'absolute', 'sticky section must be position absolute'); // scroll to position 501, past the lowerBound value
window.pageYOffset = 501;
dispatchDOMEvent(window, 'scroll'); // check that the sticky section is no longer fixed position
assert.notEqual(_get(wrapper.find('.lucid-StickySection-sticky-frame').prop('style'), 'position'), 'fixed', 'sticky frame must not be position fixed');
assert.notEqual(_get(wrapper.find('.lucid-StickySection-sticky-section').prop('style'), 'position'), 'absolute', 'sticky section must not be position absolute');
});
});
describe('viewportWidth', function () {
it('should set the width of the sticky frame to this value when the section `isAboveFold`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(StickySection, {
viewportWidth: 321
})).setState({
isAboveFold: true
});
assert.equal(_get(wrapper.find('.lucid-StickySection-sticky-frame').prop('style'), 'width'), 321, 'sticky frame must have width of the prop value');
});
it('should not set the width of the sticky frame when the section `isAboveFold` is false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(StickySection, {
viewportWidth: 321
})).setState({
isAboveFold: false
});
assert.equal(_get(wrapper.find('.lucid-StickySection-sticky-frame').prop('style'), 'width'), undefined, 'sticky frame width must not be set');
});
it('should set the width of the sticky frame to the container width when value is not given and the section `isAboveFold`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(StickySection, null)).setState({
isAboveFold: true,
containerRect: {
width: 432
}
});
assert.equal(_get(wrapper.find('.lucid-StickySection-sticky-frame').prop('style'), 'width'), 432, 'sticky frame width must match the container width');
});
});
});
});