как смоделировать директиву vt vue -i18n для возврата ключа во время тестирования - PullRequest
Новая
       11

как смоделировать директиву vt vue -i18n для возврата ключа во время тестирования

0 голосов
/ 31 января 2020

Я использую vue -i18n и директиву vt. В моих модульных тестах для моего компонента я хотел бы иметь возможность проверить, был ли предоставлен правильный языковой ключ для кнопки (или другого компонента).

Я могу достаточно легко смоделировать функцию $ t с помощью: 

config.mocks = {
  $t: (key) => key
};

, но я не могу сделать то же самое с vt. Это не заполняет ключ во внутреннем тексте или внутреннем HTML элемента: 

  localVue.directive('t', (el: HTMLElement, key: any) => {
    return key.value;
  });

Кто-нибудь придумал, как смоделировать директиву vt, чтобы сделать что-то подобное?

Я монтирую (не мелкий) монтируемый компонент.

1 Ответ

0 голосов
/ 31 января 2020

Я разобрался с ответом. Я был близок, я ошибочно предположил, что директива mock, которую я создал для локального Vue, должна что-то возвращать, все что нужно было сделать - установить innerText элемента, который ему передается. Это то, что делает настоящая директива vt (на самом деле, я думаю, она устанавливает внутренний Html).

В конце концов, вот что нужно сделать:

  1. Определить директиву макета следующим образом: 
localVue.directive('t', (el: HTMLElement, key: any) => {
  el.innerText = key.value;
});
в своем тесте выполните следующее (при условии, что у вас есть класс в div, который содержит директиву vt) 
  const div = wrapper.find('.divclass');
  expect(div.element.innerText).toBe('key');

А для полноты давайте предположим, что ваш компонент vue выглядит следующим образом this: 

<template>
  <div v-t='label' v-if="label" class="divclass"></div>
</template>

<script lang="ts">

import Vue from 'vue'
export default Vue.extend({
  inheritAttrs: false,
  name: 'MyLabelDiv',
  props: ['label']
})
</script>

Здесь компонент принимает реквизит, называемый меткой, который считается языковым ключом. Если установлена ​​метка prop, тогда div существует и будет содержать строку языка, обозначенную ключом.

...