@qntm-code/utils
Version:
A collection of useful utility functions with associated TypeScript types. All functions have been unit tested.
179 lines (178 loc) • 9.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const viewport_details_1 = require("viewport-details");
const __1 = require("..");
const createElement_spec_1 = require("../test-helpers/createElement.spec");
describe('isVisible', () => {
beforeAll(() => {
const viewportDetails = (0, viewport_details_1.getViewportDetails)();
document.body.style.width = `${viewportDetails.width + 100}px`;
document.body.style.height = `${viewportDetails.height + 100}px`;
});
afterAll(() => {
document.body.removeAttribute('style');
});
afterEach(done => setTimeout(() => {
document.documentElement.scrollTo(0, 0);
done();
}));
it('should return false for an element that has a height of 0', () => {
const element = (0, createElement_spec_1.createElement)('div', { width: '100px', height: '0' });
expect((0, __1.isVisible)(element)).toEqual(false);
});
it('should return false for an element that has a width of 0', () => {
const element = (0, createElement_spec_1.createElement)('div', { width: '0', height: '100px' });
expect((0, __1.isVisible)(element)).toEqual(false);
});
it('should return false for an element that has a opacity of 0', () => {
const element = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
opacity: '0',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it('should return false for an element that is display none', () => {
const element = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
display: 'none',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it('should return false for an element that is visibility hidden', () => {
const element = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
visibility: 'hidden',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it('should return false for an element that is positioned off screen (negative)', () => {
const element = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
position: 'absolute',
top: '-200px',
left: '-200px',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it('should return false for an element that is positioned off screen (positive)', () => {
const element = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
position: 'absolute',
top: 'calc(100vh + 200px)',
left: 'calc(100vw + 200px)',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return true for an element that's ancestor has a height of 0", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '100px', height: '0' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(true);
});
it("should return true for an element that's ancestor has a width of 0", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '0', height: '100px' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(true);
});
it("should return false for an element that's ancestor has a height of 0 and overflow of hidden", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '100px', height: '0', overflow: 'hidden' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's ancestor has a width of 0 and overflow of hidden", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '0', height: '100px', overflow: 'hidden' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's ancestor has a opacity of 0", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '100px', height: '100px', opacity: '0' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's ancestor is display none", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '100px', height: '100px', display: 'none' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's ancestor is visibility hidden", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', { position: 'absolute', top: '0', width: '100px', height: '100px', visibility: 'hidden' });
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's ancestor is positioned off screen (negative)", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
position: 'absolute',
top: '-200px',
left: '-200px',
});
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's ancestor is positioned off screen (positive)", () => {
const ancestor = (0, createElement_spec_1.createElement)('div', {
width: '100px',
height: '100px',
position: 'absolute',
top: 'calc(100vh + 200px)',
left: 'calc(100vw + 200px)',
});
const element = (0, createElement_spec_1.createElement)('div', { width: '50px', height: '50px' }, false);
ancestor.appendChild(element);
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's scrolled off screen (y positive)", () => {
const viewportDetails = (0, viewport_details_1.getViewportDetails)();
const element = (0, createElement_spec_1.createElement)('div', {
position: 'absolute',
top: `${(viewportDetails.height + viewportDetails.scrollY).toString()}px`,
width: '50px',
height: '50px',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's scrolled off screen (y negative)", () => {
document.documentElement.scrollTo(0, 50);
const element = (0, createElement_spec_1.createElement)('div', {
position: 'absolute',
top: '0',
width: '50px',
height: '50px',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's scrolled off screen (x positive)", () => {
const viewportDetails = (0, viewport_details_1.getViewportDetails)();
const element = (0, createElement_spec_1.createElement)('div', {
position: 'absolute',
top: '0',
left: `${(viewportDetails.width + viewportDetails.scrollX).toString()}px`,
width: '50px',
height: '50px',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
it("should return false for an element that's scrolled off screen (x negative)", () => {
document.documentElement.scrollTo(100, 0);
const element = (0, createElement_spec_1.createElement)('div', {
position: 'absolute',
top: '0',
width: '50px',
height: '50px',
});
expect((0, __1.isVisible)(element)).toEqual(false);
});
});