Testing custom elements without a name property

[Producdevity]

I'm using a library called Vuetify. Now my app contains (almost) only vuetify elements like v-btn/v-toolbar/...

The problem is that I can't test anything because Avoriaz requires custom elements to have a name property and none of those custom elements have a name property...

I'm sorry if I'm totally wrong, I'm pretty new to testing javascript. Any help is appreaciated. :)

[eddyerburgh]

Yes you're right, avoriaz needs a custom name property to identify components.

This isn't ideal, I can have a look and see what other ways we can use to identify vue components 🖒

[eddyerburgh]

Hi @YassineGherbi, I've looked into Vuetify, and every component I checked has a name. Which component were you using that didn't have a name?

[scottadamsmith]

I realize now this is a pretty old issue, but there is a workaround in case anyone else runs into it. Assuming that the Vuetify components are registered globally, you can set a name property on any relevant components via a new vue instance for your tests.

Something along these lines:

describe ('some-component', () => {
  const sandbox = sinon.sandbox.create();

  let vueInstance
       vuetifyComponentMock;

  beforeEach(() => {
    vuetifyComponentMock = { name: 'vuetify-component-name' };

    vueInstance = Vue.extend();
    vueInstance.use(Vuetify);
    vueInstance.options.components.someVuetifyComponent.name = vuetifyComponentMock.name;
  });

  it('some test', () => {
    const wrapper= mount(ComponentUnderTest, {
      instance: vueInstance
    });
  });
});

I haven't actually used the approach of setting name only in quite some time though (I now stub the entire component so I can just test if props are set correctly), so it's possible I have that property wrong (vueInstance.options.components.someVuetifyComponent.name). If so, you might need to inspect the object, it should be in the vicinity.