zarm/lib/utils/__tests__/dom.test.js

基于 React 的移动端UI库

"use strict";

var _dom = require("../dom");

describe('utils', function () {
  describe('dom', function () {
    describe('#getTop', function () {
      it('should get offset top of a HTML element', function () {
        var testElement = {
          offsetTop: 100,
          offsetParent: null
        };
        var actual = (0, _dom.getTop)(testElement);
        expect(actual).toEqual(100);
      });
      it('should get offset top recursively', function () {
        var testElement = {
          offsetTop: 100,
          offsetParent: {
            offsetTop: 50
          }
        };
        var actual = (0, _dom.getTop)(testElement);
        expect(actual).toEqual(150);
      });
    });
    describe('#getLeft', function () {
      it('should get offset left of a HTML element', function () {
        var testElement = {
          offsetLeft: 100,
          offsetParent: null
        };
        var actual = (0, _dom.getLeft)(testElement);
        expect(actual).toEqual(100);
      });
      it('should get offset left recursively', function () {
        var testElement = {
          offsetLeft: 100,
          offsetParent: {
            offsetLeft: 50
          }
        };
        var actual = (0, _dom.getLeft)(testElement);
        expect(actual).toEqual(150);
      });
    });
    describe('#getBoundingClientRect', function () {
      afterEach(function () {
        jest.clearAllMocks();
      });
      it('should get bounding client rect for modern browser', function () {
        var testElement = {
          getBoundingClientRect: jest.fn().mockReturnValueOnce({
            top: 10,
            left: 9,
            right: 19,
            bottom: 20
          })
        };
        var userAgentSpy = jest.spyOn(navigator, 'userAgent', 'get').mockReturnValueOnce('Mozilla/5.0');
        var actual = (0, _dom.getBoundingClientRect)(testElement);
        expect(actual).toEqual({
          left: 9,
          top: 10,
          right: 19,
          bottom: 20,
          width: 10,
          height: 10
        });
        expect(testElement.getBoundingClientRect).toBeCalledTimes(1);
        expect(userAgentSpy).toBeCalledTimes(1);
      });
      it('should get bounding client rect for IE browser', function () {
        var testElement = {
          tagName: 'HTML',
          scrollTop: -10,
          getBoundingClientRect: jest.fn().mockReturnValueOnce({
            left: 9,
            right: 19,
            bottom: 20
          })
        };
        var userAgentSpy = jest.spyOn(navigator, 'userAgent', 'get').mockReturnValueOnce('Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; .NET4.0E; .NET4.0C)');
        var actual = (0, _dom.getBoundingClientRect)(testElement);
        expect(actual).toEqual({
          left: 9,
          top: 10,
          right: 19,
          bottom: 20,
          width: 10,
          height: 10
        });
        expect(testElement.getBoundingClientRect).toBeCalledTimes(1);
        expect(userAgentSpy).toBeCalledTimes(1);
      });
    });
    describe('#setStyle', function () {
      it('should set style correctly', function () {
        var testElement = {
          style: {}
        };
        (0, _dom.setStyle)(testElement, {
          color: 'red',
          width: 100,
          height: 100
        });
        expect(testElement.style).toEqual({
          color: 'red',
          width: '100px',
          height: '100px'
        });
      });
    });
    describe('#getStyleComputedProperty', function () {
      afterEach(function () {
        jest.clearAllMocks();
      });
      it('should get style computed property', function () {
        var testElement = {};
        var computedStyle = {
          border: '1px solid #ddd'
        };
        var getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValueOnce(computedStyle);
        var actual = (0, _dom.getStyleComputedProperty)(testElement, 'border');
        expect(actual).toEqual('1px solid #ddd');
        expect(getComputedStyleSpy).toBeCalledWith({}, null);
      });
    });
    describe('#isFixed', function () {
      afterEach(function () {
        jest.restoreAllMocks();
      });
      it('should return false if the element is document.body', function () {
        var actual = (0, _dom.isFixed)(window.document.body);
        expect(actual).toBeFalsy();
      });
      it('should return true if the position of the element is "fixed"', function () {
        var computedStyle = {
          position: 'fixed'
        };
        var getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValueOnce(computedStyle);
        var actual = (0, _dom.isFixed)({});
        expect(actual).toBeTruthy();
        expect(getComputedStyleSpy).toBeCalledWith({}, null);
      });
      it('should return false if parent node is body', function () {
        var ele = {
          parentNode: window.document.body
        };
        var computedStyle = {
          position: 'absolute'
        };
        var getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValueOnce(computedStyle);
        var actual = (0, _dom.isFixed)(ele);
        expect(actual).toBeFalsy();
        expect(getComputedStyleSpy).toBeCalledTimes(1);
      });
      it('should return false if ele has no parent node and is not fixed', function () {
        var computedStyle = {
          position: 'absolute'
        };
        var getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValueOnce(computedStyle);
        var ele = {};
        var actual = (0, _dom.isFixed)(ele);
        expect(actual).toBeFalsy();
        expect(getComputedStyleSpy).toBeCalledTimes(1);
      });
    });
  });
});