支持transition-group/activate测试用例 (#45)

* 支持transition-group/activate测试用例 * 支持transition-group/activate测试用例 * 支持transition-group/activate测试用例 Co-authored-by: donghualei <[email protected]>
searchfe · Dec 17, 2021 · a98f420 · a98f420
1 parent 3d5d768
commit a98f420
Show file tree

Hide file tree

Showing 16 changed files with 1,179 additions and 811 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -6,7 +6,8 @@ module.exports = {
         '!<rootDir>/src/runtime/bind-data.js',
         '!<rootDir>/src/runtime/bind-data-proxy.js',
         '!<rootDir>/src/runtime/calc-computed-observe.js',
-        '!<rootDir>/src/global-api/extend.js'
+        '!<rootDir>/src/global-api/extend.js',
+        '!<rootDir>/src/runtime/mixin.js',
     ],
     testTimeout: 30000,
     projects: [

diff --git a/src/compiler/modules/transition.js b/src/compiler/modules/transition.js
@@ -22,7 +22,6 @@ function postTransformNode(el) {
         const attrs = getAttrs(el.attrsMap);
 
         if (el.children && el.children[0]) {
-            // console.log('el.children~~~~~~~');
             el.children[0].attrsMap['s-transition'] = `_t({${attrs.join(',')}})`;
 
             if (el.children[0].ifConditions) {
@@ -33,18 +32,20 @@ function postTransformNode(el) {
                 }
             }
         }
-        // console.log('el~~~~~~~~', el);
     }
 
     if (el.tag === 'transition-group') {
-        el.tag = el.attrsMap.tag;
+        el.tag = el.attrsMap.tag || 'span';
         delete el.attrsMap.tag;
 
         if (!el.children || el.children.length <= 0) {
             return;
         }
 
         for (const node of el.children) {
+            if (node.type !== 1) {
+                continue;
+            }
             const attrs = getAttrs(el.attrsMap);
             if (node.for) {
                 attrs.push(`iterator:${node.iterator1}`);

diff --git a/src/runtime/call-activated-hook.js b/src/runtime/call-activated-hook.js
@@ -5,14 +5,68 @@
 
 import {NodeType} from 'san';
 
+function isInInactiveTree(vm) {
+    while (vm && (vm = vm.$parent)) {
+        if (vm._inactive) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function deactivateChildComponent(vm, direct) {
+    if (direct) {
+        vm._directInactive = true;
+        if (isInInactiveTree(vm)) {
+            return;
+        }
+    }
+    if (!vm._inactive) {
+        vm._inactive = true;
+        if (vm.children
+            && vm.children.length) {
+            for (let i = 0; i < vm.children.length; i++) {
+                if (vm.children[i].nodeType === NodeType.CMPT) {
+                    deactivateChildComponent(vm.children[i]);
+                }
+            }
+        }
+        vm._toPhase('deactivated');
+    }
+}
+
+function activateChildComponent(vm, direct) {
+    if (direct) {
+        vm._directInactive = false;
+        if (isInInactiveTree(vm)) {
+            return;
+        }
+    }
+    else if (vm._directInactive) {
+        return;
+    }
+
+    if (vm._inactive || vm._inactive === undefined) {
+        vm._inactive = false;
+        if (vm.children
+            && vm.children.length) {
+            for (let i = 0; i < vm.children.length; i++) {
+                if (vm.children[i].nodeType === NodeType.CMPT) {
+                    activateChildComponent(vm.children[i]);
+                }
+            }
+        }
+        vm._toPhase('activated');
+    }
+}
+
 function createCallFactory(name) {
     return function call(direct) {
-        const ele = this;
-        if (ele.nodeType === NodeType.CMPT) {
-            ele._toPhase(name);
+        if (name === 'deactivited') {
+            deactivateChildComponent(this, direct);
         }
-        if (ele.children && ele.children.length > 1) {
-            ele.children.forEach(call);
+        else {
+            activateChildComponent(this, direct);
         }
     };
 }

diff --git a/src/runtime/constant.js b/src/runtime/constant.js
@@ -9,7 +9,7 @@ export const lifeCycleMap = {
     created: 'inited',
     beforeMount: 'created',
     beforeDestroy: 'detached',
-    destroy: 'disposed',
+    destroyed: 'disposed',
     updated: 'updated',
     beforeUpdate: 'beforeUpdate',
     activated: 'activated',

diff --git a/src/runtime/define-component.js b/src/runtime/define-component.js
@@ -70,7 +70,10 @@ const defaultSanOptions = {
     $nextTick: nextTick,
     $set: set,
     _da: changeDisabled,
-    $destroy: Component.prototype.dispose,
+    $destroy: function () {
+        Component.prototype.dispose.call(this);
+        Component.prototype._leave.call(this);
+    },
 };
 /* eslint-enable fecs-camelcase */
 
@@ -100,6 +103,12 @@ const memberMap = {
             return child.nodeType === 5;
         });
     },
+    _isMounted() {
+        return !!this.lifeCycle.attached;
+    },
+    _isBeingDestroyed() {
+        return this.lifeCycle.detached !== true;
+    },
     $root() {
         let root = this;
         if (this.parentComponent) {
@@ -349,7 +358,7 @@ export default function define(options) {
             : (options.data || {});
 
         if (!optimizeSSR) {
-            this._dataKeys = Object.keys(data) || [];
+            this._dataKeys = data && Object.keys(data) || [];
         }
 
         const initialData = extend({$style: {}}, defaultProps, data);

diff --git a/test/helpers/vue.js b/test/helpers/vue.js
@@ -2,7 +2,6 @@ import {defineComponent} from '../../src/runtime/index';
 import {compile} from '../../src/compiler';
 import {omit} from 'lodash';
 
-
 function getTpl(options) {
     return compile(options.template, {
         strip: options.strip == null ? true : options.strip,

diff --git a/test/spec/runtime/activate/activate.spec.js b/test/spec/runtime/activate/activate.spec.js
@@ -0,0 +1,122 @@
+/* eslint-disable no-undef */
+
+import Vue from '../../../helpers/vue';
+
+describe('activated and deactivated', () => {
+    it('works', done => {
+
+        const activatedSpy = jasmine.createSpy();
+        const deactivatedSpy = jasmine.createSpy();
+        const childDeactivatedSpy = jasmine.createSpy();
+        const child2ActivatedSpy = jasmine.createSpy();
+        const vm = new Vue({
+            template: `
+                <div>
+                    <child1></child1>
+                    <child2></child2>
+                </div>
+            `,
+            components: {
+                child1: {
+                    data() {},
+                    template: '<div>child1</div>',
+                    deactivated: childDeactivatedSpy,
+                },
+                child2: {
+                    data() {},
+                    template: '<div>child2</div>',
+                    activated: child2ActivatedSpy,
+                },
+            },
+            activated: activatedSpy,
+            deactivated: deactivatedSpy,
+        }).$mount();
+        vm.$deactivate(true);
+        waitForUpdate(() => {
+            expect(deactivatedSpy).toHaveBeenCalled();
+            expect(childDeactivatedSpy).toHaveBeenCalled();
+            vm.$activate(true);
+        }).then(() => {
+            expect(activatedSpy).toHaveBeenCalled();
+            expect(child2ActivatedSpy).toHaveBeenCalled();
+        }).then(done);
+    });
+
+    it('activated child and parent', done => {
+        const activatedSpy = jasmine.createSpy();
+        const deactivatedSpy = jasmine.createSpy();
+        const childDeactivatedSpy = jasmine.createSpy();
+        const childActivatedSpy = jasmine.createSpy();
+
+        const vm = new Vue({
+            template: `
+                <div>
+                    <child1></child1>
+                </div>
+            `,
+            components: {
+                child1: {
+                    data() {},
+                    template: '<div>child1</div>',
+                    deactivated: childDeactivatedSpy,
+                    activated: childActivatedSpy,
+                },
+            },
+            activated: activatedSpy,
+            deactivated: deactivatedSpy,
+        }).$mount();
+        vm.$deactivate(true);
+        vm.$children[0].$deactivate(true);
+        waitForUpdate(() => {
+            expect(childDeactivatedSpy).toHaveBeenCalled();
+            expect(childDeactivatedSpy.calls.count()).toBe(1);
+            vm.$deactivate(true);
+        }).then(() => {
+            expect(childDeactivatedSpy.calls.count()).toBe(1);
+            vm.$activate(true);
+        }).then(() => {
+            vm.$children[0].$activate(true);
+        }).then(() => {
+            expect(childActivatedSpy.calls.count()).toBe(1);
+            expect(activatedSpy.calls.count()).toBe(1);
+        }).then(done);
+    });
+
+    it('activated child and parent', done => {
+        const activatedSpy = jasmine.createSpy();
+        const deactivatedSpy = jasmine.createSpy();
+        const childDeactivatedSpy = jasmine.createSpy();
+        const childActivatedSpy = jasmine.createSpy();
+
+        const vm = new Vue({
+            template: `
+                <div>
+                    <child1></child1>
+                </div>
+            `,
+            components: {
+                child1: {
+                    data() {},
+                    template: '<div>child1</div>',
+                    deactivated: childDeactivatedSpy,
+                    activated: childActivatedSpy,
+                },
+            },
+            activated: activatedSpy,
+            deactivated: deactivatedSpy,
+        }).$mount();
+        vm.$activate(true);
+        vm.$children[0].$activate(true);
+        waitForUpdate(() => {
+            expect(activatedSpy).toHaveBeenCalled();
+            expect(activatedSpy.calls.count()).toBe(1);
+            vm.$deactivate(true);
+        }).then(() => {
+            expect(deactivatedSpy.calls.count()).toBe(1);
+            expect(childDeactivatedSpy.calls.count()).toBe(1);
+            vm.$children[0].$activate(true);
+        }).then(() => {
+            expect(activatedSpy.calls.count()).toBe(1);
+        }).then(done);
+    });
+});
diff --git a/test/spec/runtime/filter/filter.spec.js b/test/spec/runtime/filter/filter.spec.js
@@ -3,15 +3,15 @@ import Vue from '../../../helpers/vue';
 describe('Filters', () => {
     it('basic usage', () => {
         const vm = new Vue({
-            template: '<div>{{ msg | upper }}</div>',
+            template: '<div> {{ msg | upper }} </div>',
             data: {
                 msg: 'hi',
             },
             filters: {
                 upper: v => v.toUpperCase(),
             },
         }).$mount();
-        expect(vm.$el.textContent).toBe('HI');
+        expect(vm.$el.textContent).toBe(' HI ');
     });
 
     it('chained usage', () => {

diff --git a/test/spec/runtime/global-api/methods-filters.spec.js b/test/spec/runtime/global-api/methods-filters.spec.js
@@ -0,0 +1,89 @@
+/* eslint-disable no-undef */
+import Vue from '../../../helpers/vue';
+
+
+describe('global-api methods and filters', () => {
+
+    it('methods', done => {
+        const vm = new Vue({
+            template: '<div><span :test="foo">hello</span></div>',
+            data: {
+                foo: ['hello', 'world'],
+                str: 'hello world',
+                arr: ['a', 'b', 'c', 'd', 'e'],
+                num: 1.1,
+            },
+            computed: {
+                b() {
+                    return this.array_join(this.foo, '-');
+                },
+                c() {
+                    return this.str_pos(this.str, 'e');
+                },
+                d() {
+                    return this.array_slice(this.arr, 0, 2);
+                },
+                e() {
+                    return this.math_floor(this.num);
+                },
+            },
+        }).$mount();
+
+        expect(vm.b).toBe('hello-world');
+        expect(vm.c).toBe(1);
+        expect(vm.d).toEqual(['a', 'b']);
+        expect(vm.e).toBe(1);
+        done();
+    });
+
+
+    it('filters', done => {
+        const vm = new Vue({
+            template: '<div :test="foo | json"><span>hello</span></div>',
+            data: {
+                foo: {a: 1},
+            },
+        }).$mount();
+
+
+        expect(vm.$el.getAttribute('test')).toBe('{"a":1}');
+        waitForUpdate(() => {
+
+        }).then(done);
+    });
+
+    it('filters lower', done => {
+        const vm = new Vue({
+            template: '<div>{{"HELLO" | lower}}</div>',
+            data: {
+                foo: {a: 1},
+            },
+        }).$mount();
+
+        expect(vm.$el.textContent).toBe('hello');
+        done();
+    });
+
+    it('filters lower', done => {
+        const vm = new Vue({
+            template: '<div>{{"hello" | upper}}</div>',
+            data: {
+                foo: {a: 1},
+            },
+        }).$mount();
+
+        expect(vm.$el.textContent).toBe('HELLO');
+        done();
+    });
+
+    // it('filters _s', done => {
+    //     const vm = new Vue({
+    //         template: '<div>{{foo | _s}}</div>',
+    //         data: {
+    //             foo: {a: 1},
+    //         },
+    //     }).$mount();
+    //     expect(vm.$el.textContent).toBe('{"a":1}');
+    //     done();
+    // });
+});