Dynamic classes not added correctly to wrapper classes when using shallowMount

[kierans]

Version

1.0.0-beta.32

Reproduction link

https://github.com/kierans/vue-test-utils-bug

Steps to reproduce

1. Create a SFC called Card.vue

<template>
  <v-card
    outlined
    flat
  >
    <v-list-item>
      <v-list-item-avatar
          color="grey"
      />
      <v-list-item-content>
        <v-list-item-title>{{ contents.title }}</v-list-item-title>
        <v-list-item-subtitle>
          {{ contents.subtitle }}
        </v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>

    <v-card-text
        class="subtitle-1"
        v-bind:class="{
        'negative-amount': contents.amount < 0
      }"
    >
      {{ contents.amount }}
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "Card",
  data() {
    return {
      contents: {
        title: "Title",
        subtitle: "Subtitle",
        amount: -10
      }
    };
  }
}
</script>

2. Write the following test code

wrapper = shallowMount(Card);

const text: Wrapper<Vue> = wrapper.find(VCardText as ComponentOptions<Vue>);
expect(text.classes("negative-amount"), "Amount not marked as negative").to.be.true;

What is expected?

That the classes array/string will contain the value "negative-amount"

What is actually happening?

The classes array/string contains "[object Object]"

---

When running the app, the Card is correctly rendered with the "negative-amount" class being added.

[lmiller1990]

Not sure why this isn't working. Will need to look into it.

For now you could use mount. That way the entire tree will be evaluated. Probably the best option here, so you can test the entire thing works together, as expected.

[lmiller1990]

Edit: This is working for me:

<template>
  <div>
    <h1>Hello world</h1>
    <Bar id="my-bar" class="bar-class" :class="{ 'is-bar': isBar }" />
    <Bar id="my-bar-with-slot">
      <Qux :class="{ 'is-qux': isQux }" />
    </Bar>
  </div>
</template>

<script>
import Bar from './Bar.vue'
import Qux from './Qux.vue'

export default {
  name: 'Foo',

  data() {
    return {
        isBar: true,
        isQux: true
    }
  },

  components: {
    Bar,
    Qux
  } 
}
</script>

Gives me

<div>
      <h1>Hello world</h1>
      <bar-stub id="my-bar" class="bar-class is-bar"></bar-stub>
      <bar-stub id="my-bar-with-slot">
        <qux-stub class="is-qux"></qux-stub>
      </bar-stub>
    </div>

I wonder what's different here? Hm.

[lmiller1990]

Edit: ok, this happens when the component is a functional component. v-card-text is a functional component.

[lmiller1990]

Problem is it is stringifed here

vue-test-utils/packages/create-instance/create-component-stubs.js

Line 62 in e2a6986

function createClassString(staticClass, dynamicClass) {

[lmiller1990]

Fixed! Turn around time of 6h, not to shabby. @kierans, Quick review? #1476

[kierans]

Ship it! 👏

[palpich]

Unfortunately, #1476 don't fix dynamic class as Array.

I did fix (also fix events binding), can you review, @lmiller1990 ?