การทดสอบคำสั่งเชิงมุมที่ลบองค์ประกอบ dom ไม่ทำงาน (อย่างน้อยสำหรับฉัน)

ฉันมีคำสั่งที่จะลบองค์ประกอบ dom เมื่อตรวจสอบสิทธิ์บางอย่าง:

angular.module('app').directive('permissionNeeded', function ($location, $route, SecurityService) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {

            var permissionNeeded = attributes.permissionNeeded;

            if (permissionNeeded) {
                if (SecurityService.checkAccess($route.current.name) !== permissionNeeded) {
                    element.remove();
                }
            }
        }
    };
});

Directive ทำงานได้ดี แต่ฉันไม่สามารถทดสอบได้ ดูเหมือนว่าการจัดการ DOM (element.remove()) จะถูกกระตุ้นหลังจากการยืนยันความคาดหวังของฉัน:

 it('should not do anything cos permissions are correct', function () {
        $route.current = {
            name: 'import'
        }
        var element = compileTemplate('<span permission-needed="W">Some content goes here</span>');
        $rootScope.$digest();
        expect(element.html()).toBe(''); // FAIL!!! it's still equals to 'Some Content goes here'
    });

ฉันเคยเห็นคำตอบบางอย่างเกี่ยวกับ SO เกี่ยวกับการใช้ฟังก์ชัน $timeout เพื่อชะลอการยืนยันความคาดหวัง แต่สิ่งที่ฉันได้ลองแล้วการยืนยันล้มเหลว (element.html() ยังคงเท่ากับ 'เนื้อหาบางส่วนไปที่นี่')

อย่างไรก็ตาม สิ่งที่ตลก (ใช่ไหม) คือถ้าฉันเปลี่ยน dom แทนที่จะลบมันออกในคำสั่งของฉัน การทดสอบของฉันก็โอเค :

angular.module('app').directive('permissionNeeded', function ($location, $route, SecurityService) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {

            var permissionNeeded = attributes.permissionNeeded;

            if (permissionNeeded) {
                if (SecurityService.checkAccess($route.current.name) !== permissionNeeded) {
                    element.html('');
                }
            }
        }
    };
});

โดยใช้คำสั่งข้างต้น การทดสอบกำลังผ่านไป

ฉันถูกต้องไหมเมื่อฉันเดาว่าการเรนเดอร์ dom ยังไม่สิ้นสุดเมื่อฉันยืนยัน หากเป็นเช่นนั้น ฉันจะทำอย่างไรเพื่อชะลอการยืนยันหลังจากการแสดงผล DOM

ขอบคุณ

มาติเยอ.


person Mat    schedule 09.01.2014    source แหล่งที่มา
comment
ในคำสั่งแรกของคุณ คุณทำ element.remove() ซึ่งหมายความว่าองค์ประกอบนั้นจะถูกแยกออกจาก DOM หรืออย่างน้อยก็ควร ฉันคิดว่า   -  person dcodesmith    schedule 10.01.2014
comment
ฉันคิดว่า dcodesmith นั้นถูกต้อง องค์ประกอบยังคงเป็นองค์ประกอบ มันเพิ่งถูกลบออกจาก dom คุณต้องการทดสอบว่ามันถูกลบออกจาก parentNode แล้ว   -  person jeffmayeur    schedule 10.01.2014
comment
ขอบคุณทั้งคู่คุณพูดถูก (ดูคำตอบของ @LostInComputer ด้านล่าง)   -  person Mat    schedule 10.01.2014


คำตอบ (1)


เมื่อคุณดำเนินการ element.remove() มันจะลบเฉพาะองค์ประกอบออกจากพาเรนต์ ลบกิจกรรมที่ถูกผูกไว้ ฯลฯ

วิธีแก้ปัญหาที่สั้นที่สุดคือการใส่คำสั่งไว้ในองค์ประกอบหลัก:

var element = compileTemplate('<div><span permission-needed="W">Some content goes here</span></div>');

แล้ว

expect(element.html()).toBe('')

จะผ่านไปเนื่องจาก element ไม่มี span อีกต่อไป

person LostInComputer    schedule 10.01.2014
comment
คุณช่วยเพิ่มเสียงระเบิดได้ไหม - person Evan Lévesque; 15.07.2014