I have a complex inner component in my parent component (parent component is one of steps in a wizard, inner component displays a dynamic subform and collects inputs. I have my inner component fully tested. It emits onUpdate:modelValue. Now I want to test the wizard step component - the parent component. I want to abstract that so I stub the inner component with ... well, currently a div but I am willing to substitute that with anything that will work. My goal is to trigger the onUpdate:modelValue in the inner component to check that the parent component is in fact handing this event and triggers its own (parent component is one step in a wizard so it will bubble it up to the wizard aka. stepper to decide if the "next" button should be activated or stay disabled.
This is my helper function for binding component for cypress test:
function mountAndBind(values: any) {
const modelValueEventSpy = cy.spy().as("modelUpdate");
const validityEventSpy = cy.spy().as("validityUpdate");
const internalModelValueEventSpy = cy.spy().as("internalModelUpdate");
const internalValidityEventSpy = cy.spy().as("internalValidityUpdate");
cy.mount(ParrentCompoenent, {
global: {
stubs: {
InnerComponent: h(
"div",
{
class: "internal",
"onUpdate:modelValue": internalModelValueEventSpy
},
"metadata details"
),
},
},
props: {
"onUpdate:modelValue": modelValueEventSpy,
modelValue: values,
},
});
}
And this is the test that fails on the last assertion:
it("shows the step, and when option chosen, shows details.", () => {
mountAndBind({});
cy.contains("metadata details").should("not.exist");
// that's a custom cypress command - a helper.
cy.selectChooseOption("parentSelectOptions", "abc");
cy.wait("@webapirequest_for_details");
cy.contains("metadata details").should("exist");
cy.get(".internal").trigger("onUpdate:modelValue", { someField: "value" });
cy.get("@modelUpdate").should("have.been.calledWith", { someField: "value" });
});