Skip to content

testing a child component inside a parent slot #2065

@sandranrivas

Description

@sandranrivas

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions