findAllVNodes doesn't look through children

Hello again! It seems for my setup that .find() doesn’t find any child nodes and therefore only looks at the parent node, making .find() the equivalent of .hasClass() (when used with a class selector). When used with an ID, it gives the error

 TypeError: node.elm.getAttribute is not a function

Also, in vNode.js, why is there a check for nodeName === '#text' (findById, line 32)?

The template of my component:

<template>
  <transition name="modal">
    <div class="modal-mask" @click="hideModal" transition="modal">
      <div class="modal-dialog" @click.stop>
        <div class="modal-header">
            <a class="btn close" @click="hideModal">
                <i class="icon-cross color-darkest-gray large"></i>
            </a>
        </div>

        <div class="modal-body">
            <slot name="body">
                <p>Default modal content goes here.</p>
            </slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    name: 'modal',
    methods: {
      ...mapActions('Modals', [
        'hideModal'
      ])
    }
}
</script>

And when running

import { mount } from 'avoriaz';
import { expect } from 'chai';
import Modal from '../src/components/Modal.vue';

describe('Modal.vue', () => { 
  it('renders a div element with class modal-mask', () => {
    const modal = mount(Modal);

    expect(modal.is('div')).to.equal(true);
    expect(modal.hasClass('modal-mask')).to.equal(true); // Here we can see the component considers this to be its root node
  });

  it('renders a div element with class modal-mask', () => {
    const modal = mount(Modal);
    const mask = modal.find('.modal-mask')[0]; // Finds .modal-mask

    expect(mask.is('div')).to.equal(true);
  });

  it('renders a div element with class modal-dialog', () => {
    const modal = mount(Modal);
    const dialog = modal.find('.modal-dialog')[0]; 
    // .find() returns empty array, dialog equals undefined at this point
    // Same happens for any child node

    expect(dialog.is('div')).to.equal(true);
  });
});

Should I try and replicate this in a fiddle?

[andreasvirkus]

Cheers, the fix works fine!

[eddyerburgh]

Hey, so I’ve just got round to having a look. The vNode tree is different for transitions, and I haven’t tested for them. Tomorrow I’m going to change how the vNode search works to account for transitions and scopes.

In the meantime - here’s one way to test the div is being rendered:

  it('renders a div element with class modal-dialog', () => {
    const modal = mount(Modal);
    console.log(modal);
    const modalDialog = modal.element.querySelector('.modal-dialog');
    expect(modalDialog.tagName).to.equal('DIV');
  });