Question

您好我正在编写单元测试用例提交表格。我正在尝试测试表单提交下面的代码。以下是我的表格。

 <form *ngIf="formResetToggle" class="form-horizontal" name="scopesEditorForm" #f="ngForm" novalidate
 (ngSubmit)="f.form.valid && isScopeValid() ? saveScope() : showErrorAlert('Please enter mandatory fields')">
 <input autofocus type="text" id="scopename" name="scopename"/>
 <input type="submit" id="savescope" class="btn btn-primary" value="Add Scope" />
</form>

以下是我的单元测试代码。

it('add scope', () => {
        let saveScopeButton = fixture.debugElement.nativeElement.querySelector('#savescope');
        scopename = fixture.debugElement.query(By.css('#scopename'));
        scopename.nativeElement.value = "/bmw/v1/s1";
        component.scopeEdit.scopevalue = scopename.name;
        saveScopeButton.click();
        var rows = component.rows;
        expect(rows.length).toBeGreaterThan(0);
        var isScopeNameAdded = rows.filter(
            scope => scope.scopevalue === 'xcxcx');
        if (isScopeNameAdded.length) {
            console.log('add scope unit test case passed');
        }
        {
            console.log("add scope unit test case failed");
        }
    });

每当上面的代码执行时，函数showErrorAlert就会执行，saveScope函数也不会执行。有人可以帮我做这个吗？任何帮助，将不胜感激。谢谢。

Answer 1

我们可以在您的组件中引用表格，如下所示。

component.scopeform.form.controls.scopename.setValue('/bmw/v1/s1');

然后我们可以将字段值设置为component.scopeform.form.valid

现在您的表单有效性将成立。你可以测试如下。

component.scopeform.form.status

或

new Vue({
  el: '#ttt',

  data: {
    events: [],
  },
  beforeCreate: function(){
    vm = this
        axios.get('/api/afisha/').then(function(response){
                vm.events = response.data
                console.log(response)
            });

  },
       components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }, 
  delimiters: ["[[","]]"]
});

无法在单元测试中测试表单提交代码

1 个答案: