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

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

Open
Seminioni opened this issue Oct 19, 2018 · 3 comments
Labels

Comments

@Seminioni
Copy link

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
Copy link
Author

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

@Seminioni
Copy link
Author

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

@eddyerburgh
Copy link
Owner

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

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

No branches or pull requests

2 participants