Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

testing a child component inside a parent slot #2065

Open
sandranrivas opened this issue Apr 13, 2023 · 0 comments
Open

testing a child component inside a parent slot #2065

sandranrivas opened this issue Apr 13, 2023 · 0 comments

Comments

@sandranrivas
Copy link

Parent Children should be able to render a child component which is inside a default slot

I have a parent component that has an empty slot, in this slot, I have several child components.

example:

<parentComponent>
    <childComponent></childComponent>
    <childComponent></childComponent>
    <childComponent></childComponent>
</parentComponent>

functionality

My parent component serves as a wrapper, this parent component has for example a property dense, when is true then it sets an attribute to all my ChildComponents. via a watch function. so it will either set or remove the dense attribute when the property is changed in the parent component, using query selectors which select every child inside my parent component.

In this case, my child components are not a stubbed components because it isn't a dumb component, I should get the attributes from dense passed. and I want to test if the parent has prop true, then the child too(set via attrs).

how I am implementing it

const mountTestComponent = (
  dense?: boolean,
) => {
  return mount(Stepper, {
    props: {
      dense
    },
    slots: {
      default: `<my-child value="1">
      1
      <div slot="label">First Step</div>
    </my-child>
    <my-child value="2">
      2
      <div slot="label">Second Step</div>
    </my-child>`,
    },
    global: {
      components: {
        'my-child': {
          ChildComponent,
          template: '<div></div>',
          props: {
            value: '2',
          },
        },
      },
    },
  })
}
  beforeEach(() => {
    wrapper = mountTestComponent()
  })

  it('is dense', async () => {
    await wrapper.setProps({ dense: true })
  })

what is not working

after long time debugging, I can't see any attributes added either in my parent or child component. I used so many console logs, where I checked the wrapper.html(), updatingforce, nextTickt, and the attribute doesn't seem to appear never. In my component this attr is just set when the property changes via a watch function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant