Vue Jest-тестирование встроенного стиля элемента - PullRequest
Новая
       123

Vue Jest-тестирование встроенного стиля элемента

0 голосов
/ 07 августа 2020

Как получить свойство стиля элемента html в Vuejs + Jest test?

Используя jest и @vue/test-utils, чтобы проверить, есть ли у элемента textarea color встроенный стиль, примененный в Vuejs.

Я установил ref для текстового поля, и тесты для проверки существования текстового поля и его значения были успешными, но не удалось получить свойство color из стиль элемента.

Ниже мой код компонента и теста: 

<template>
    <Post :post="post">
        <QuestionCard ref="questioncard" :background="post.background">
            <textarea
                ref="posttext"
                :style="{ color: post.color }"
                class="text-center"
                v-model="post.text"
                disabled
            />
        </QuestionCard>
    </Post>
</template>

<script>
import Post from './Includes/Post';
import QuestionCard from '~/components/Posts/Includes/QuestionCard';
import { FeedPost } from '~/classes/FeedPost';

export default {
    name: 'SingleItemPost',
    components: {
        Post,
        QuestionCard,
    },
    props: {
        post: {
            type: FeedPost,
            required: true,
        },
    },
};
</script>

import { Wrapper, shallowMount } from '@vue/test-utils';
import QuestionPost from '../QuestionPost.vue';
import { FeedPost } from '~/classes/FeedPost';

Wrapper.prototype.ref = function (id) {
    return this.find({ ref: id });
};

describe('QuestionPost', () => {
    let wrapper;
    let post;
    const text = 'text';
    const color = 'color';

    beforeEach(() => {
        post = new FeedPost({
            text,
            color,
            type: 'questionPost',
        });
        wrapper = shallowMount(QuestionPost, {
            propsData: {
                post,
            },
        });
    });

    it('should render correct elements', () => {
        expect(wrapper.ref('questioncard').exists()).toBe(true); // OK
        expect(wrapper.ref('posttext').exists()).toBe(true); // OK
    });

    it('should have correct value and style', () => {
        const textarea = wrapper.ref('posttext');
        expect(textarea.element.value).toBe(text); // OK
        expect(textarea.element.style.getPropertyValue('color')).toBe(color); // failed
    });
});

Я тоже пробовал с textarea.element.style.color, но такой же.

Результат теста: 

Expected: "color"
Received: ""

Итак, как я могу получить color элемента textarea?

1 Ответ

1 голос
/ 07 августа 2020

Это происходит потому, что в тесте задано недопустимое значение цвета (т. Е. "color" не является допустимым значением для стиля color), поэтому настройка автоматически отклоняется.

Для решения проблемы выберите одно из допустимых значений color (например, "red" или "#090").

...