locker组件的测试案列

src/locker/component.js

@@ -35,7 +35,7 @@ export default function ($timeout) {
         }
 
         if (_.isFunction(options)) {
-          return $scope.enter({}, options);
+          return $scope.show({}, options);
         }
 
         /**
@@ -96,7 +96,7 @@ export default function ($timeout) {
          * 设置属性
          */
         $scope.isOpened = undefined;
-        $scope.content  = defaults.content;
+        $scope.content  = options.content;
 
         timeoutPromise && $timeout.cancel(timeoutPromise);
 

src/locker/index.js

@@ -1,9 +1,10 @@
-if (window.angular && window.angular.env && window.angular.env.QT_UI_LOG) {
-  window.console.log('qt-angular-ui/src/locker load');
-}
-
 import './index.scss';
 
-import component   from './_index';
+import angular   from 'angular';
+import Service   from './service';
+import Component from './component';
 
-export default component;
+export default angular.module('qtAngularUi.locker', [])
+.provider('$locker', Service)
+.directive('locker', Component)
+.name;

src/locker/locker.spec.js

@@ -0,0 +1,222 @@
+/* eslint max-nested-callbacks: off */
+/* eslint-env mocha */
+/* global expect */
+
+import angular    from 'angular';
+import 'angular-mocks';
+
+import $          from 'jquery';
+import Locker      from './index';
+import Config     from './config';
+
+describe('Locker 组件', function () {
+  const NEST_CONTENT       = 'Message';
+  const { module, inject } = angular.mock;
+
+  beforeEach(function () {
+    // 设置延迟时间为 0
+    Config.during = 10;
+
+    // 初始化 Locker 组件
+    module(Locker);
+
+    // 清场
+    document.body.innerHTML = '';
+  });
+
+  describe('结构规范', function () {
+    it('会返回组件名称', function () {
+      expect(Locker).to.be.a('string');
+    });
+
+    it('能进行初始化', function () {
+      inject(function ($rootScope, $compile) {
+        let $element = $compile('<locker></locker>')($rootScope.$new());
+        let $scope   = angular.element($element[0].childNodes[0]).scope();
+
+        expect($scope.content).to.equal(Config.content);
+      });
+    });
+
+    it('拥有自己的作用域', function () {
+      inject(function ($rootScope, $compile) {
+        let $scope     = $rootScope.$new();
+        let $element   = $compile('<locker></locker>')($scope);
+        let $nestScope = angular.element($element[0].childNodes[0]).scope();
+
+        expect($scope.$id).to.not.equal($nestScope.$id);
+      });
+    });
+
+    it('应该拥有额定的结构', function () {
+      inject(function ($rootScope, $compile) {
+        let $element = $compile('<locker></locker>')($rootScope.$new());
+        let $scope   = angular.element($element[0].childNodes[0]).scope();
+
+        expect($scope.isOpened).to.be.a('boolean');
+        expect($scope.content).to.be.a('string');
+        expect($scope.show).to.be.a('function');
+        expect($scope.hide).to.be.a('function');
+      });
+    });
+  });
+
+  describe('触发流程', function () {
+    it('能够显示与隐藏', function () {
+      inject(function ($rootScope, $compile, $timeout) {
+        let $element = $compile('<locker></locker>')($rootScope.$new());
+        let $scope   = angular.element($element[0].childNodes[0]).scope();
+
+        angular.element(document.body).append($element);
+        expect($scope.isOpened).to.be.false;
+        expect(document.getElementsByClassName('locker').length).to.equal(1);
+
+        // FadeIn
+        $scope.show();
+        $timeout.flush();
+
+        expect($scope.isOpened).to.be.true;
+        expect($element.hasClass(Config.duringClass)).to.be.true;
+        expect($element.hasClass(Config.enterClass)).to.be.true;
+        expect($element.hasClass(Config.leaveClass)).to.be.false;
+
+        // out
+        $scope.hide();
+        expect($element.hasClass(Config.leaveClass)).to.be.true;
+
+        $timeout.flush();
+
+        expect($scope.isOpened).to.be.false;
+        expect($element.hasClass(Config.duringClass)).to.be.false;
+        expect($element.hasClass(Config.enterClass)).to.be.false;
+        expect($element.hasClass(Config.leaveClass)).to.be.false;
+      });
+    });
+  });
+
+  describe('服务', function () {
+    it('能够显示与隐藏', function () {
+      inject(function ($timeout, $locker) {
+        let $jqLocker = $('.locker');
+        let $scope    = angular.element($jqLocker[0].childNodes[0]).scope();
+
+        // 检查 DOM 节点
+        expect($jqLocker.length).to.equal(1);
+
+        // 检查属性
+        expect($scope.isOpened).to.be.false;
+
+        // FadeIn
+        $locker.show();
+        $timeout.flush();
+
+        expect($scope.isOpened).to.be.true;
+        expect($jqLocker.hasClass(Config.duringClass)).to.be.true;
+        expect($jqLocker.hasClass(Config.enterClass)).to.be.true;
+        expect($jqLocker.hasClass(Config.leaveClass)).to.be.false;
+
+        // out
+        $locker.hide();
+        expect($jqLocker.hasClass(Config.leaveClass)).to.be.true;
+
+        $timeout.flush();
+
+        expect($scope.isOpened).to.be.false;
+        expect($jqLocker.hasClass(Config.duringClass)).to.be.false;
+        expect($jqLocker.hasClass(Config.enterClass)).to.be.false;
+        expect($jqLocker.hasClass(Config.leaveClass)).to.be.false;
+      });
+    });
+
+    it('更改内容', function () {
+      module(function ($lockerProvider) {
+        $lockerProvider.configure({ content: NEST_CONTENT });
+      });
+
+      inject(function ($timeout, $locker) {
+        let $jqLocker = $('.locker');
+        let $scope    = angular.element($jqLocker[0].childNodes[0]).scope();
+
+        $locker.show();
+        $timeout.flush();
+        expect($scope.content).to.equal(NEST_CONTENT);
+
+        $locker.hide('hide');
+        $timeout.flush();
+        expect(document.getElementsByClassName('locker').length).to.equal(1);
+        expect($scope.content).to.equal('hide');
+
+        $locker.show('show');
+        $timeout.flush();
+        expect(document.getElementsByClassName('locker').length).to.equal(1);
+        expect($scope.content).to.equal('show');
+      });
+    });
+
+    it('多次显示隐藏', function () {
+      inject(function ($timeout, $locker) {
+        let $jqLocker = $('.locker');
+        let $scope    = angular.element($jqLocker[0].childNodes[0]).scope();
+
+        $locker.show();
+        expect($scope.isOpened).to.be.an('undefined');
+
+        $timeout.flush();
+        expect($scope.isOpened).to.be.true;
+
+        $locker.show();
+        expect($scope.isOpened).to.be.true;
+
+        $locker.hide();
+        expect($scope.isOpened).to.be.an('undefined');
+
+        $timeout.flush();
+        expect($scope.isOpened).to.be.false;
+
+        $locker.hide();
+        expect($scope.isOpened).to.be.false;
+      });
+    });
+
+    it('只传一个为function的参数', function () {
+      inject(function ($timeout, $locker) {
+        let callback = false;
+
+        $locker.show(function () {
+          callback = true;
+        });
+        $timeout.flush();
+        expect(callback).to.be.true;
+
+        callback = false;
+
+        $locker.hide(function () {
+          callback = true;
+        });
+        $timeout.flush();
+        expect(callback).to.be.true;
+      });
+    });
+
+    it('取消上一次未完成的timeout', function () {
+      inject(function ($timeout, $locker) {
+        let $jqLocker = $('.locker');
+        let $scope    = angular.element($jqLocker[0].childNodes[0]).scope();
+
+        $locker.show({ during: 99999 });
+        expect($scope.isOpened).to.be.an('undefined');
+
+        $locker.show({ during: 10 });
+        $timeout.flush();
+        expect($scope.isOpened).to.be.true;
+
+        $locker.hide({ during: 99999 });
+        expect($scope.isOpened).to.be.an('undefined');
+
+        $locker.hide({ during: 10 });
+        $timeout.flush();
+        expect($scope.isOpened).to.be.false;
+      });
+    });
+  });
+});

src/locker/service.js

@@ -10,7 +10,7 @@ export default class LockerService {
       defaults = _.defaultsDeep(options, defaults);
     };
 
-    this.$get = function ($rootScope, $compile) {
+    this.$get = ($rootScope, $compile) => {
       'ngInject';
 
       let $scope      = $rootScope.$new();
@@ -20,10 +20,10 @@ export default class LockerService {
       angular.element(document.body).append($component);
 
       return {
-        show (options, callback) {
+        show (options = defaults, callback) {
           $childScope.show(options, callback);
         },
-        hide (options, callback) {
+        hide (options = defaults, callback) {
           $childScope.hide(options, callback);
         },
       };