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

基于 React 的移动端UI库

"use strict";

var _keyframes = require("../keyframes");

describe('keyframes', function () {
  afterEach(function () {
    jest.restoreAllMocks();
  });
  describe('#removeKeyframe', function () {
    it('should remove key frame from head element if it exists', function () {
      var div = document.createElement('div');
      var getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(div);
      var head = document.createElement('head');
      var docFragment = document.createDocumentFragment();
      docFragment.appendChild(head);
      var htmlCollection = docFragment.children;
      var getElementsByTagNameSpy = jest.spyOn(document, 'getElementsByTagName').mockReturnValue(htmlCollection);
      var removeChildSpy = jest.spyOn(head, 'removeChild').mockImplementation();
      (0, _keyframes.removeKeyframe)('test');
      expect(getElementByIdSpy).toBeCalledWith('test');
      expect(getElementsByTagNameSpy).toBeCalledWith('head');
      expect(removeChildSpy).toBeCalledWith(div);
    });
    it('should do nothing if key frame does not exist', function () {
      var getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(null);
      var getElementsByTagNameSpy = jest.spyOn(document, 'getElementsByTagName');
      (0, _keyframes.removeKeyframe)('test');
      expect(getElementByIdSpy).toBeCalledWith('test');
      expect(getElementsByTagNameSpy).not.toBeCalled();
    });
  });
  describe('#addKeyframe', function () {
    it('should add key frame to head element', function () {
      var head = document.createElement('head');
      var docFragment = document.createDocumentFragment();
      docFragment.appendChild(head);
      var htmlCollection = docFragment.children;
      var style = {};
      var createElementSpy = jest.spyOn(document, 'createElement').mockReturnValueOnce(style);
      var getElementsByTagNameSpy = jest.spyOn(document, 'getElementsByTagName').mockReturnValueOnce(htmlCollection);
      var appendChildSpy = jest.spyOn(head, 'appendChild').mockImplementation();
      (0, _keyframes.addKeyframe)('test', "0%, 100% {\n          -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n        }");
      expect(createElementSpy).toBeCalledWith('style');
      expect(getElementsByTagNameSpy).toBeCalledWith('head');
      expect(appendChildSpy).toBeCalledWith({
        id: 'test',
        type: 'text/css',
        innerHTML: expect.any(String)
      });
      expect(style.innerHTML).toMatchInlineSnapshot("\n        \"\n          @-webkit-keyframes test {\n            0%, 100% {\n                  -webkit-transform: translate3d(0, 0, 0);\n                  transform: translate3d(0, 0, 0);\n                }\n          }\n          @keyframes test {\n            0%, 100% {\n                  -webkit-transform: translate3d(0, 0, 0);\n                  transform: translate3d(0, 0, 0);\n                }\n          }\n        \"\n      ");
    });
    describe('#getKeyframe', function () {
      it('should return key frame', function () {
        var keyframe = {
          innerHTML: "\n          @keyframes test {\n              0%, 100% {\n                -webkit-transform: translate3d(0, 0, 0);\n                transform: translate3d(0, 0, 0);\n              }\n          }"
        };
        var getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(keyframe);
        var actual = (0, _keyframes.getKeyframe)('test');
        expect(actual).toMatchInlineSnapshot("\n          \"\n                    @keyframes test {\n                        0%, 100% {\n                          -webkit-transform: translate3d(0, 0, 0);\n                          transform: translate3d(0, 0, 0);\n                        }\n                    }\"\n        ");
        expect(getElementByIdSpy).toBeCalledWith('test');
      });
      it('should return null if keyframe does not exist', function () {
        var getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(null);
        expect((0, _keyframes.getKeyframe)('test')).toBeNull();
        expect(getElementByIdSpy).toBeCalledWith('test');
      });
    });
    describe('#existKeyframe', function () {
      it('should return false if keyframe does not exist', function () {
        var getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(null);
        var actual = (0, _keyframes.existKeyframe)('test');
        expect(actual).toBeFalsy();
        expect(getElementByIdSpy).toBeCalledWith('test');
      });
      it('should return true if keyframe exist', function () {
        var keyframe = document.createElement('div');
        var getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(keyframe);
        var actual = (0, _keyframes.existKeyframe)('test');
        expect(actual).toBeTruthy();
        expect(getElementByIdSpy).toBeCalledWith('test');
      });
    });
  });
});