avoriaz icon indicating copy to clipboard operation
avoriaz copied to clipboard

Can't find nested component with neither '.find' nor '.first' wrapper methods

Open Seminioni opened this issue 6 years ago • 3 comments

My BottomConnectorControl.vue has template:

<template>
  <div
    class="col-lg-6 col-md-6 col-sm-12 col-xs-12"
    v-if="showControl"
  >
    <panel
      title="Boot on wallplug"
    >
      <p>
        Automatically turn unit on when the power is supplied via the bottom connector.
      </p>
      <p>
        <toggle
          @input="bootOnWallplugSettingToggle"
          v-model="bootOnWallplugEnabled"
          :disabled="bootOnWallplugSettingPending"
          :hideLabels="true"
        />
      </p>
    </panel>
  </div>
</template>

In tests I try to find Toggle to trigger click on it, but it finishes with nothing.

import BottomConnectorControl from '@/components/Settings/BottomConnectorControl.vue';
import type { Wrapper } from '../types.flow';
import { expect } from 'chai';
import { mount } from 'avoriaz';
import store from '@/store';
import Panel from '@/components/common/Panel.vue';
import Toggle from '@/components/common/Toggle.vue';

describe('BottomConnectorControl.vue', (): void => {
   const createWrapper: Function = (): Wrapper => {
    return mount(BottomConnectorControl, {
      store
    });
   };

   describe('Interactions', (): void => {
    it('click on pending toggle', (): void => {
      store.commit('changeDevice', 'ReachRS+');

      const control: Wrapper = createWrapper();
      const toggle1: Object = control.find(Toggle);
      const toggle2: Object = control.find('.toggle');
      const panel: Object = control.find(Panel);

      console.log('toggle1',toggle1)
      console.log('toggle2', toggle2)
      console.log('panel', panel)
    });
  });
})

After running the tests I see it in my console. Despite of the argument I pass to the find method it returns [] an empty Array. But if I try to find Panel component, it will find it: image

Seminioni avatar Oct 19 '18 15:10 Seminioni

@eddyerburgh sorry to trouble you, can you help? :)

Seminioni avatar Oct 23 '18 10:10 Seminioni

Issue resolved after migration to the @vue/test-utils

Seminioni avatar Oct 24 '18 17:10 Seminioni

Yes, I recommend migrating to @vue/test-utils 👍

eddyerburgh avatar Oct 24 '18 19:10 eddyerburgh