javascript - 在按钮单击事件更改事件 html 后，如何获取单元测试范围内的 html 以进行更新？

Question

目前我正在测试的表格有以下 html:

<table id="admin-self-assessment-table" class="table">
   <tr class="admin-self-assessment-table-headers">
       <th class="admin-tile" colspan="2">Question Category</th>
       <td class="admin-button">
           <button id="add-category-button" 
                   ng-click="selfAssessUpdateCtrl.addCategory()"
                   class="fa fa-plus-circle"></button>
       </td>
   </tr>

无论何时单击上述按钮，都会从测试中正确调用 addCategory() 方法，但未正确附加 html。

函数:

    vm.addCategory = function(){
        html = (
            '<tr class="category-heading admin-self-assessment-question-category">' +
                '<td class="category-name" contenteditable="true">Category</td>' +
                '<td><button class="button-coloring category-button-add fa fa-plus-circle"></button></td>' +
                '<td><button class="button-coloring category-table-delete fa fa-times-circle"></button></td>' +
            '</tr>');
        $('#admin-self-assessment-table').append(html);
    };

它在页面上按预期工作。新行出现在表格中并按预期运行，但单元测试失败，因为 html 实际上并未添加到该范围内。

单元测试:

describe('Self-Assessment Controller', function () {
    var scope, $state, ctrl, html, httpBackend, safeService;

    beforeEach(module('generic'));
    beforeEach(module('generic.reports'));

    beforeEach(inject(function (_$rootScope_, $templateCache, $controller, $compile, _$state_, _$httpBackend_) {
        scope = _$rootScope_.$new();
        $state = _$state_;
        httpBackend = _$httpBackend_;

        ctrl = $controller('selfAssessUpdateCtrl', {
            $scope: scope,
            org: testOrganization,
            $element: html,
            safeService: safeService
        });
        scope.selfAssessUpdateCtrl = ctrl;

        html = $templateCache.get('app/components/admin/selfAssessmentUpdate/selfAssessmentUpdate.html');
        html = $compile(angular.element(html))(scope);

        scope.$digest();
    }));

    it('should add a new category when appropriate button is clicked', function(){
        var table = html.find('#admin-self-assessment-table').find('tr');
        html.find('#add-category-button').click();
        scope.$apply();
        expect(table.length).toEqual(2);
    });
});

期望失败，“Expected 1 to equal 2”

当我 console.log 表变量(应该包含表的所有 trs)时，我得到:

LOG:{0: <tr class="admin-self-assessment-table-headers">
                    <th class="admin-tile" colspan="2">Question Category</th>
                    <td class="admin-button">
                        <button id="add-category-button" ng-click="selfAssessUpdateCtrl.addCategory()" class="fa fa-plus-circle"></button>
                    </td>
                </tr>, length: 1, prevObject: {0: <table id="admin-self-assessment-table" class="table">
                <tbody><tr class="admin-self-assessment-table-headers">
                    <th class="admin-tile" colspan="2">Question Category</th>
                    <td class="admin-button">
                        <button id="add-category-button" ng-click="selfAssessUpdateCtrl.addCategory()" class="fa fa-plus-circle"></button>
                    </td>
                </tr>
            </tbody></table>, length: 1, prevObject: {0: ..., 1: ..., 2: ..., 3: ..., 4: ..., length: ...}, context: undefined, selector: '#admin-self-assessment-table'}, context: undefined, selector: '#admin-self-assessment-table tr'}

它只显示原始 html 中的 tr。它没有在此范围内正确附加我的新 html。我不知道为什么。我尝试执行 scope.$digest 和 scope.$apply。

Answer 1

试试这个，

('<tr class="category-heading admin-self-assessment-question-category">' +
'<td class="category-name" contenteditable="true">Category</td>' +
'<td><button class="button-coloring category-button-add fa fa-plus-circle"></button></td>' +
'<td><button class="button-coloring category-table-delete fa fa-times-circle"></button></td>' +
'</tr>').appendTo( $('#admin-self-assessment-table') );

appendTo 与 append() 略有不同。另外，你没有 ('<tr ...' )作为$('<tr ... ') ，所以它不是 jQuery 对象。正在关注the docs更接近你会使用 jQuery 对象 $()与 .append() 和 .appendTo() 一起使用。要访问 jQuery 函数，您需要从 jQuery 对象调用它们(这是由于 jquery 库的面向对象的特性)。此外，同时使用 angular 和 jquery 并不是最佳做法，但有时可以奏效。