Vue js Разделители, не распознанные при тестировании - PullRequest
Новая
       21

Vue js Разделители, не распознанные при тестировании

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

Я работаю над проверкой формы, в которой отображается сообщение об ошибке. Из-за конфликтов с дзиндзя я использую '[[' и ']]' в качестве разделителей. Отображаемое сообщение об ошибке закодировано как [[error]]. Он правильно отображает в браузере. Однако при тестировании он говорит, что отображаемый текст - это «[[error]]», а не сообщение об ошибке, на которое указывает ошибка. Я передал разделители на mountOptions, но, похоже, это не имеет никакого эффекта. Пример кода ниже. Заранее спасибо.

ввод формы. js

const FormInput = {
  props: {
    name: {
      type: String,
    },
    value: {
      type: String,
    },
    required: {
      type: Boolean,
    },
    server_side_errors: {
      type: Array,
    },
  },
  template: `
  <div class="form-group">
      <label
        v-bind:for="name">
        <slot></slot>
      </label>
      <input
        class="form-control"
        :value="value"
        v-bind:id="name"
      </input>
      <template v-for="error in filtered_server_side_errors">
        <small class="form-error-message">
        [[error]]
        </small>
      </template>
  </div>
  `,
};
export default FormInput;

ввод формы теста. js

require('jsdom-global')();
global.Vue = require('vue/dist/vue.js');
global.VueTestUtils = require('@vue/test-utils');
import FormInput from '../src/components/forms/form-input';

const { describe, it, before, beforeEach } = require('mocha');
const { assert } = require('chai');

const App = Vue.component('app', FormInput);

const mountOptions = {
  propsData: {
    name: 'name',
    value: 'testing value',
  },
};

describe('Form Input Group', () => {
  let wrapper;
  beforeEach(async () => {
    wrapper=VueTestUtils.mount(App, mountOptions);
    await Vue.nextTick();
  });
  afterEach(async () => {
    wrapper.destroy();
    await Vue.nextTick();
  });
  describe('server side errors', () => {
    beforeEach(async () => {
      wrapper.setProps({
        server_side_errors: [
          'incorrect test value',
          'another incorrect value',
        ],
      });
      await Vue.nextTick();
    });
    describe('check', () => {
      describe('render', () => {
        it('should have 2 error field', () => {
          const errors = wrapper.findAll('.form-error-message');
          assert.equal(errors.length, 2, 'incorrect number error fields rendered');
        });
        it('renders correct error message text', () => {
          const errors = wrapper.findAll('.form-error-message');
          const sseProps = wrapper.props().server_side_errors;
          assert.equal(errors.at(0).text(), sseProps[0]); // expected '[[error]]' to equal 'incorrect test value'
        });
      });
    });
  });
});
...