Блог

У меня есть приложение vue js, которое содержит родительский компонент и дочерний компонент. Я поместил кнопку «Отправить» в родительский компонент, и она вызывает вызов api для дочернего компонента.

Пожалуйста, найдите мой исходный код в родительском компоненте

   <button type="button" @click.prevent="buttonSubmitEvent">
            Submit
   </button>



 export default class EditModal extends Vue {
   private buttonSubmitEvent(): void {
   this.$router.app.$emit("saveEventTriggered");
    }
}
  

Пожалуйста, найдите мой код в дочернем компоненте

 export default class EditHighlights extends Vue {
  private mounted() {
    this.$router.app.$on('saveEventTriggered', (data: any) => {
    this.updateHighlights();
    return;
  });
  }

  private async updateHighlights() {
    alert('api call');
  }
}
  

Также, пожалуйста, найдите исходный код тестового файла

 import { isExportDeclaration } from "typescript";
const mountVue = require("cypress-vue-unit-test");
import camelcaseKeys from 'camelcase-keys';
import Popup from "../../../../src/components/edit/EditComponent.vue";
import { iterator } from "rxjs/internal-compatibility";
const template = `<div>
  <Popup :componentName="EditHighLightsComponent" :heading="title"></Popup>
</div>`;
const data = () => ({title:"Edit HighLights ",EditHighLightsComponent:"EditHighLightsComponent",
highlightModel: [
    {
        "Id": "31",
        "TitileOne": "mmmm  m",
        "ContentOne": "Pssoas ",
        "TitleTwo": "Rlhões22",
        "ContentTwo": "Distrbasil22",
        "TitleThree": "Pa33",
        "ContentThree": "E ada22",
        "TitleFour": "No autos25",
        "ContentFour": "Nal225",
        },], 
      })
  const components = {  Popup};
  describe('Edit highlights component ',()=>{    
  beforeEach(mountVue({ template, components,data}))

  it('check the posted data with ui',()=>{
  mountVue({ template, components,data});  
  cy.get('#btnSubmitHighlights').click();
  });
  });
  

Когда пользователь нажимает кнопку ‘Отправить’ в родительском компоненте, должен сработать метод ‘updateHighlights’. Оно работает в браузере, но не работает в Cypress. Может ли кто-нибудь помочь мне решить эту проблему?