[Feature] component testing mount result

[sand4rt]

Can the update and the unmount functions be added? This is useful for Vue, React and Svelte:

test('update props', ({ mount }) => {
  const component = await mount(Component, {
    props: { name: 'test' }
  });
  await component.update({ props: { name: 'test2' }});
  await expect(component).toHaveText('test2');
})

test('display a pending changes conformation', ({ mount }) => {
  const component = await mount(Component);
  await component.unmount();
  await expect(component.locator('#conformation-dialog')).toBeVisible();
})

TODO

• update Svelte
• update Solid
• update React
• update Vue
• update Vue2
• unmount Svelte
• unmount Solid
• unmount React
• unmount Vue
• unmount Vue2

[pavelfeldman]

Thanks for another useful use case. I meant to ask a while ago, would you be interested in contributing patches for the components story?

[sand4rt]

I'm somewhat limited in time, but I'd love to! How would you like to proceed?

[pavelfeldman]

I'm somewhat limited in time, but I'd love to! How would you like to proceed?

@sand4rt I'm adding unmount in the PR above, you can follow the pattern and implement setProps. I'm not sure it will work for all the frameworks, but present fixtures API allows framework-specific signatures, so I'm sure something useful can be done for each.

[sand4rt]

Awesome, i will have a look at setProps/update!

Wondering why you would choose for ({ unmount }) => {} and unmount(compoment) instead of just calling component.unmount()? The last option is easier to write and read.

[pavelfeldman]

Wondering why you would choose for ({ unmount }) => {} and unmount(compoment) instead of just calling component.unmount()? The last option is easier to write and read.

There is no Locator.unmount, so we would need a separate type for it. Let's see how many methods we will need and if we get a bunch, we can transition.

[sand4rt]

Have you taken into account that the update will not automatically be type safe as well if i follow the current implementation of unmount?

test('work', ({ mount, update }) => {
  const component = mount<Props>(Component, { 
    props: { title: 'test' }
  })
  
  update<Props>(component, { props: { title: 'test' }}) // Must specifically specify the type here
})

instead of

test('work', ({ mount }) => {
  const component = mount<Props>(Component, { 
    props: { title: 'test' }
  })
  
  component.update({ props: { title: 'test' }}) // Reuse of the same type defined in mount<Props>()
})

In addition, Testing Library, Vue Test Utils and partially Cypress component testing are using the same API. If you decide to use the same API as well, context switching and the migration to Playwright will becomes easier.

We now have feature requests for the following functions and i think a few more will follow. Assuming it will be a breaking change, why not release it sooner rather than later?

component.unmount()
component.update()
component.emitted() // if feature request gets accepted

Arguably, but a minor inconvenience is that you will have some line breaks if we have many function props, making the code more verbose in some situtations..

test('some test description', ({ 
  page,
  mount,
  update,
  unmount
}) => {
   // arrange, act, expect
})

Maybe i'm nitpicking here, but would like to know what you think.

[pavelfeldman]

We now have feature requests for the following functions and i think a few more will follow. Assuming it will be a breaking change, why not release it sooner rather than later?

We have until v1.25 branch point to make this decision. I agree with your points, we can put those calls on the Locator subclass. The unfortunate bit is that they might end up being different for each framework, but I guess we can live with it. Do you want to send a patch that does it?

[basickarl]

Hey guys any documentation on this? I've just been winging it until now would be nice to see some solid examples!

[sand4rt]

Hey @basickarl help is definitely appreciated :) feel free to add more topics/idea's in the ticket above