utilities.test.js

import {
  getScrollingElement,
  getTargetScrollTop,
  getElementsInContainerViewport,
  elementFillsContainer,
} from './utilities';

const SCREEN_WIDTH = 800;
const SCREEN_HEIGHT = 600;

window.innerWidth = SCREEN_WIDTH;
window.innerHeight = SCREEN_HEIGHT;

describe('getScrolllingElement', () => {
  test('returns same element when container is not body', () => {
    const container = document.createElement('div');
    expect(getScrollingElement(container)).toBe(container);
  });

  test('returns scrollingElement when container is body on modern browser', () => {
    const container = document.body;
    const scrollContainer = document.createElement('div');
    document.scrollingElement = scrollContainer;
    expect(getScrollingElement(container)).toBe(scrollContainer);

    // TODO: Jest should clean this up...
    delete document.scrollingElement;
  });

  test('returns same element when container is body on WebKit browser', () => {
    Object.defineProperty(window.navigator, 'userAgent', { value: 'WebKit', configurable: true });
    const container = document.body;
    expect(getScrollingElement(container)).toBe(container);
  });

  test('returns document element when container is body on legacy browser', () => {
    Object.defineProperty(window.navigator, 'userAgent', { value: 'legacy browser', configurable: true });
    const container = document.body;
    const scrollContainer = document.documentElement;
    expect(getScrollingElement(container)).toBe(scrollContainer);
  });
});

describe('getTargetScrollTop', () => {
  function getElements(scrollTop, containerDimensions, targetDimensions) {
    const container = document.createElement('div');
    container.scrollTop = scrollTop;
    container.getBoundingClientRect = () => ({
      ...containerDimensions,
      height: containerDimensions.bottom - containerDimensions.top,
    });

    const target = document.createElement('div');
    target.getBoundingClientRect = () => ({
      ...targetDimensions,
      height: targetDimensions.bottom - targetDimensions.top,
    });

    return [container, target];
  }

  test('calculates scrollTop for target element', () => {
    expect(getTargetScrollTop(...getElements(0, { top: 0 }, { top: 0 }))).toEqual(0);
    expect(getTargetScrollTop(...getElements(100, { top: 0 }, { top: -100 }))).toEqual(0);
    expect(getTargetScrollTop(...getElements(100, { top: 0 }, { top: 0 }))).toEqual(100);
    expect(getTargetScrollTop(...getElements(0, { top: 0 }, { top: 100 }))).toEqual(100);
    expect(getTargetScrollTop(...getElements(100, { top: 0 }, { top: 100 }))).toEqual(200);
    expect(getTargetScrollTop(...getElements(100, { top: 100 }, { top: 100 }))).toEqual(100);
  });

  test('calculates scrollTop for target element bottom', () => {
    expect(getTargetScrollTop(...getElements(0, {
      top: 0,
      bottom: 300,
    }, {
      top: 0,
      bottom: 300,
    }), true)).toEqual(0);

    expect(getTargetScrollTop(...getElements(100, {
      top: 0,
      bottom: 300,
    }, {
      top: -100,
      bottom: 200,
    }), true)).toEqual(0);

    expect(getTargetScrollTop(...getElements(100, {
      top: 0,
      bottom: 300,
    }, {
      top: 0,
      bottom: 300,
    }), true)).toEqual(100);

    expect(getTargetScrollTop(...getElements(0, {
      top: 0,
      bottom: 300,
    }, {
      top: 100,
      bottom: 400,
    }), true)).toEqual(100);

    expect(getTargetScrollTop(...getElements(100, {
      top: 0,
      bottom: 300,
    }, {
      top: 100,
      bottom: 400,
    }), true)).toEqual(200);

    expect(getTargetScrollTop(...getElements(100, {
      top: 100,
      bottom: 400,
    }, {
      top: 100,
      bottom: 400,
    }), true)).toEqual(100);
  });

  function getBodyElements(scrollTop, targetDimensions) {
    const container = document.body;
    getScrollingElement(document.body).scrollTop = scrollTop;

    const target = document.createElement('div');
    target.getBoundingClientRect = () => ({
      ...targetDimensions,
      height: targetDimensions.bottom - targetDimensions.top,
    });

    return [container, target];
  }

  test('calculates scrollTop for target element in body', () => {
    expect(getTargetScrollTop(...getBodyElements(0, { top: 0 }))).toEqual(0);
    expect(getTargetScrollTop(...getBodyElements(100, { top: -100 }))).toEqual(0);
    expect(getTargetScrollTop(...getBodyElements(100, { top: 0 }))).toEqual(100);
    expect(getTargetScrollTop(...getBodyElements(0, { top: 100 }))).toEqual(100);
    expect(getTargetScrollTop(...getBodyElements(100, { top: 100 }))).toEqual(200);
  });

  test('calculates scrollTop for target element bottom in body', () => {
    expect(getTargetScrollTop(...getBodyElements(0, {
      top: 0,
      bottom: SCREEN_HEIGHT,
    }), true)).toEqual(0);

    expect(getTargetScrollTop(...getBodyElements(100, {
      top: -100,
      bottom: SCREEN_HEIGHT - 100,
    }), true)).toEqual(0);

    expect(getTargetScrollTop(...getBodyElements(100, {
      top: 0,
      bottom: SCREEN_HEIGHT,
    }), true)).toEqual(100);

    expect(getTargetScrollTop(...getBodyElements(0, {
      top: 100,
      bottom: SCREEN_HEIGHT + 100,
    }), true)).toEqual(100);

    expect(getTargetScrollTop(...getBodyElements(100, {
      top: 100,
      bottom: SCREEN_HEIGHT + 100,
    }), true)).toEqual(200);
  });
});

describe('getElementsInContainerViewport', () => {
  function getElements(scrollTop, amountOfElements, elementHeight) {
    return Array.from(Array(amountOfElements), (_, i) => {
      const target = document.createElement('div');
      target.getBoundingClientRect = () => ({
        top: (i * elementHeight) - scrollTop,
        bottom: ((i + 1) * elementHeight) - scrollTop,
        left: 0,
        right: SCREEN_WIDTH,
      });

      return target;
    });
  }

  test('finds elements in body viewport', () => {
    const test1 = getElementsInContainerViewport(document.body, getElements(0, 5, 300));
    expect(test1).toHaveLength(2);

    const test2 = getElementsInContainerViewport(document.body, getElements(200, 5, 300));
    expect(test2).toHaveLength(3);

    const test3 = getElementsInContainerViewport(document.body, getElements(600, 3, 300));
    expect(test3).toHaveLength(1);
  });

  test('finds elements in non-body viewport', () => {
    const container = getElements(0, 1, 400)[0];

    const test1 = getElementsInContainerViewport(container, getElements(0, 5, 300));
    expect(test1).toHaveLength(2);
    const test2 = getElementsInContainerViewport(container, getElements(0, 5, 400));
    expect(test2).toHaveLength(1);
  });
});


describe('elementFillsContainer', () => {
  function getElement(top, bottom, left = 0, right = SCREEN_WIDTH) {
    const target = document.createElement('div');
    target.getBoundingClientRect = () => ({
      top, bottom, left, right,
    });

    return target;
  }

  test('checks element in body viewport', () => {
    expect(elementFillsContainer(document.body, getElement(-100, SCREEN_HEIGHT + 100))).toBe(true);
    expect(elementFillsContainer(document.body, getElement(0, SCREEN_HEIGHT))).toBe(true);
    expect(elementFillsContainer(document.body, getElement(1, SCREEN_HEIGHT + 1))).toBe(false);
    expect(elementFillsContainer(document.body, getElement(-1, SCREEN_HEIGHT - 1))).toBe(false);
  });

  test('checks element in non-body viewport', () => {
    const container = getElement(200, 500);
    expect(elementFillsContainer(container, getElement(100, 600))).toBe(true);
    expect(elementFillsContainer(container, getElement(200, 500))).toBe(true);
    expect(elementFillsContainer(container, getElement(201, 501))).toBe(false);
    expect(elementFillsContainer(container, getElement(99, 499))).toBe(false);
  });
});