Vue Тест кармы Мокко не определен не является конструктором querySelector - PullRequest
Новая
       17

Vue Тест кармы Мокко не определен не является конструктором querySelector

0 голосов
/ 05 апреля 2020

Я создал новый модульный тест для файла vue с именем badge. vue. При запуске я получаю следующую ошибку: 

badge.vue
    ✗ has zero badges
    undefined is not a constructor (evaluating 'vm.$el.querySelector('.badge')')

    ✗ has a trending badge
    expected null to not equal null

Я думаю, что функция hasBadge как-то является причиной. Потому что, когда я перемещаю его в дочерний элемент div, проверка «имеет нулевые значки» проходит, но отклоняющийся значок все равно не проходит.

Есть ли что-то, чего мне не хватает?

Я использую: Карма v1.7.1

Призрак JS 2.1.1

Мокко

значок. vue

<template>
  <div v-if="hasBadge" class="badge">
    <icon-base :iconColor="iconColor" :icon-name="iconName"><component v-if="iconName" :is="iconName"></component></icon-base>
    <div class="badge-copy" v-bind:style="iconColorObj">{{badgeCopy}}</div>
  </div>
</template>

<script>
import iconBase from '../icon_base/icon_base';
import iconTrending from '../icons/icon_trending';
import iconClock from '../icons/icon_clock';
import iconEye from '../icons/icon_eye';
import iconTrophy from '../icons/icon_trophy';
import iconStar from '../icons/icon_star';
export default {
  components: {
    iconBase,
    iconTrending,
    iconClock,
    iconEye,
    iconTrophy,
    iconStar,
  },
  data() {
    return {
      iconMap: {
        TRENDING: 'icon-trending',
        ALMOST_GONE: 'icon-clock',
        TOP_SELLER: 'icon-star',
        RECENTLY_VIEWED: 'icon-eye',
        DOORBUSTER: 'icon-trophy',
      },
    };
  },
  props: [
    'deal',
    'toStartCase',
  ],
  computed: {
    hasBadge() {
      const deal = this.deal;
      return deal.badges
        && deal.badges.length > 0
        && deal.badges[0]
        && deal.badges[0].badgeType
        && deal.badges[0].text;
    },
    iconName() {
      const iconMap = this.iconMap;
      const deal = this.deal;
      const badgeType = deal.badges[0].badgeType.toUpperCase();
      if (!iconMap[badgeType]) {
        return undefined;
      }
      return iconMap[badgeType];
    },
    badgeCopy() {
      const deal = this.deal;
      const badgeText = deal.badges[0].text;
      return this.toStartCase &&
        this.toStartCase(badgeText.toLowerCase());
    },
    hasIconColor() {
      const deal = this.deal;
      return deal.badges
        && deal.badges[0]
        && deal.badges[0].primaryColor;
    },
    iconColor() {
      const deal = this.deal;
      if (this.hasIconColor) {
        return deal.badges[0].primaryColor;
      }
      return '#6650D7';
    },
    iconColorObj() {
      return { color: this.iconColor };
    },
  },
};
</script>

<style scoped>
.badge svg {
  display: inline-block;
  vertical-align: baseline;
}
.badge svg path {
  margin: 0 auto;
  width: 12px;
}
.badge-copy {
  color: iconColor;
}
</style>

значок.spe c. js

import Vue from "vue";
import badge from "./badge";

describe('badge.vue', () => {

  /* Badges */
  it('has zero badges', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      data: {
        content: {
          rapi: [
            {
              "badges": [],
            }
          ],
        },
      },
      components: {
        badge
      },
      template: '<badge :deal="content.rapi[0]" :toStartCase="toStartCase" ></badge>',
    });
    expect(vm.$el.querySelector('.badge')).to.equal(null);
  });

  it('has a trending badge', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      data: {
        content: {
          rapi: [
            {
              "badges": [
                {
                  "uuid": "84fbb816-3fec-4693-b0a6-ec2f9fb4e400",
                  "primaryColor": "#6650D7E6",
                  "text": "TRENDING",
                  "secondaryColor": "#FFFFFFFF",
                  "badgeType": "TRENDING"
                }
              ],
            },
          ],
        },
      },
      components: {
        badge
      },
      template: '<badge :deal="content.rapi[0]" ></badge>',
    });
    expect(vm.$el.querySelector('.badge')).to.not.equal(null);
    expect(vm.$el.querySelector('.badge-copy').innerText).to.equal('Trending');
  });
});

1 Ответ

0 голосов
/ 06 апреля 2020

Оказывается, прежде чем делать какие-либо утверждения, мне нужно было сначала использовать Vue .nextTick () с последующими утверждениями и закончить с помощью done ().

Source

badge.spe c. js

import Vue from "vue";
import badge from "./badge";

describe('badge.vue', () => {

  /* Badges */
  it('has zero badges', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      data: {
        content: {
          rapi: [
            {
              "badges": [],
            }
          ],
        },
      },
      components: {
        badge
      },
      template: '<badge :deal="content.rapi[0]" ></badge>',
    });
    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.badge-copy')).to.equal(null);
      done();
    });
  });

  it('has a trending badge', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      data: {
        content: {
          rapi: [
            {
              "badges": [
                {
                  "uuid": "84fbb816-3fec-4693-b0a6-ec2f9fb4e400",
                  "primaryColor": "#6650D7E6",
                  "text": "TRENDING",
                  "secondaryColor": "#FFFFFFFF",
                  "badgeType": "TRENDING"
                }
              ],
            },
          ],
        },
      },
      components: {
        badge
      },
      template: '<badge :deal="content.rapi[0]" ></badge>',
    });
    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.badge')).to.not.equal(null);
      expect(vm.$el.querySelector('.badge-copy').innerText).to.equal('Trending');
      done();
    });
  });
});
...