在Angular中单击按钮时添加新值

如何解决在Angular中单击按钮时添加新值

我正在Angular 9上工作，在这里我的代码无法按我的期望工作，但是测试用例无法执行。 这是我的github链接，以获取完整代码https://github.com/mehulk05/RestuarentAdd

问题是当我在输入字段中添加任何值并按测试用例单击“提交”时，应在单击“提交”按钮时添加我的数据，并且应在视图中显示，因此，我的数据出现在视图中，但某种程度上是失败。下面是我的代码段

注意：我无法修改测试用例中写的任何内容

component.html

<div class="layout-column align-items-center mt-50">
    <form #f="ngForm" (ngSubmit)="myFunction(f)">

       
            <input type="text" class="large" name="name" 
            placeholder="Restaurant Name" [(ngModel)]="name"
            data-test-id="restaurant-name-input" />

            <input type="text" class="large" name="city" 
            placeholder="City Name" [(ngModel)]="city" 
            data-test-id="city-name-input" />

            <button data-test-id="submit-button" 
            [disabled]="!city || !name">Submit</button>
    
    </form>
    <div class="card w-30 mt-30 pb-8">
        <table class="mb-0">
            <thead>
                <tr>
                    <th>Restaurant name</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody data-test-id="restaurant-list">
                <tr *ngFor="let i of data">
                    <th>{{i.name}}</th>
                    <th>{{i.city}}</th>
                </tr>
            </tbody>
        </table>

    </div>
</div>

component.ts

export class RestaurantDirectory implements OnInit {
  data: any[] = []
  name: string
  city: string
  
  ngOnInit() {
   
  }

  myFunction(f) {
    console.log(f.value)
    this.data.push(f.value)
    this.data = this.data.slice()
    console.log(this.data)
    f.reset()
  }
}

Test.spec.ts

describe('RestaurantDirectory',() => {
  let component: RestaurantDirectory;
  let fixture: ComponentFixture<RestaurantDirectory>;
  let restaurantNameInput;
  let cityNameInput;
  let submitBtn;
  let compiled;

  const pushValue = async (value1,value2) => {
    restaurantNameInput.value = value1;
    restaurantNameInput.dispatchEvent(new Event('change'));
    restaurantNameInput.dispatchEvent(new Event('input'));
    cityNameInput.value = value2;
    cityNameInput.dispatchEvent(new Event('change'));
    cityNameInput.dispatchEvent(new Event('input'));
    submitBtn.click();
    await fixture.whenStable();
  };

  const getByTestId = (testId: string) => {
    return compiled.querySelector(`[data-test-id="${testId}"]`);
  };


  beforeEach(() => {
    fixture = TestBed.createComponent(RestaurantDirectory);
    component = fixture.componentInstance;
    compiled = fixture.debugElement.nativeElement;
    restaurantNameInput = getByTestId('restaurant-name-input');
    cityNameInput = getByTestId('city-name-input');
    submitBtn = getByTestId('submit-button');
    fixture.detectChanges();
  });

 it('Should add new values on btn click',async () => {
    const values1 = ['Hard Rock Cafe','Subway','McDonalds'];
    const values2 = ['San Jose','Seattle','New York'];
    await pushValue(values1[0],values2[0]);
    await pushValue(values1[1],values2[1]);
    await pushValue(values1[2],values2[2]);
    await fixture.autoDetectChanges(true);

    const restaurantList = getByTestId('restaurant-list');
    console.log(restaurantList)
    expect(restaurantList.children.length).toEqual(3);
    expect(restaurantList.children[0].children[0].innerHTML).toEqual('Hard Rock Cafe');
    expect(restaurantList.children[0].children[1].innerHTML).toEqual('San Jose');
    expect(restaurantList.children[1].children[0].innerHTML).toEqual('Subway');
    expect(restaurantList.children[1].children[1].innerHTML).toEqual('Seattle');
    expect(restaurantList.children[2].children[0].innerHTML).toEqual('McDonalds');
    expect(restaurantList.children[2].children[1].innerHTML).toEqual('New York');
  });

此外，当我在测试文件中登录控制台时，它在表中显示空的html结构

所以我得到的错误是×在运行测试用例时，应该在btn click上添加新值。我不确定自己缺少什么。我也尝试了不使用模板驱动的表单方法。任何帮助都会有帮助