javascript - 测试库 - 测试依赖于 CSS 的逻辑

Question

我已经制作了这个组件，它所做的一切都是接收文本(长段落)，如果文本超过 lines，CSS 将 chop 文本。支柱。如果被 chop ，则有一个“全部显示”按钮将删除隐藏某些文本的类。
该组件本身运行良好，但想要对其进行测试，除了练习测试之外没有其他原因。
我写了一个测试:

import { render, fireEvent } from '@testing-library/vue';
import TruncateText from '../TruncateText.vue';

describe('TruncateText', () => {
    it('should have truncate class on mount', async () => {
        const text = 'Super Duper Long Text';
        const { getByText } = render(TruncateText, { props: { text } });
        const pTag = getByText(text);
        expect(pTag).toHaveClass('truncate');
        expect(pTag).toHaveTextContent(text);
    });

    it('container should be truncated', async () => {
        const text =
            'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt';
        const lines = 2;
        const { getByText } = render(TruncateText, {
            props: { text, lines },
        });

        expect(lastThreeCharacters).toBe('...');
    });
});

关于如何编写测试以检查某些文本是否会被 chop 的任何想法？
其他潜在的测试正在 mock click发出，所以我可以检查类是否被删除。对于这个组件来说，这应该足够了。

<template>
    <div>
        <p
            class="text truncate"
            ref="announcement"
            :style="truncated ? `-webkit-line-clamp:${lines}` : ''"
        >
            {{ text }}
        </p>
        <OBButton
            :text="$t('show-all')"
            class="show-all-button"
            size="x-small"
            v-if="truncated"
            @click="showAll"
        />
    </div>
</template>

<script>
    export default {
        props: {
            text: {
                type: String,
                required: true,
            },
            lines: {
                type: Number,
                default: 10,
            },
        },
        data() {
            return { truncated: false };
        },
        mounted() {
            this.truncated = this.isOverflown(this.$refs.announcement);
        },
        methods: {
            isOverflown(el) {
                return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
            },
            showAll() {
                this.$refs.announcement.classList.remove('truncate');
                this.truncated = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .text {
        white-space: pre-line;
    }
    .truncate {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 24rem; //hack for IE1
    }
    .show-all-button {
        margin-top: 1rem;
    }
</style

Answer 1

通过查看组件，您在单击按钮时做了两件事:

删除 truncate类从段落

设置 truncated属性(property)给 false .

我会将类绑定(bind)到属性，使用 :class="{ truncate: truncated }"然后唯一需要测试 onclick 的是 truncated已设置为 false (您不想测试 Vue 是否有效)。
这消除了对您的 showAll 的需要。从段落中手动删除类:Vue 是数据驱动的 => 你更改数据，Vue 相应地管理 DOM。

为了尽可能清楚:您应该只测试组件的逻辑而不是其他任何东西。你不是在测试 Vue、JavaScript 或浏览器。你相信这些工作(其他人负责为他们编写测试)。所以，按顺序:

期待 truncated在安装时获得正确的值(有效测试 isOverflown() 在您关心的每种情况下提供预期输出)

当truncated是 true触发 click在按钮上(当 truncated 为 true 时，无需期望按钮存在，因为您将测试 v-if 是否有效)。点击按钮后，在$nextTick()期待 truncated设置为 false .

以下是您不应该测试的内容列表:

JavaScript 工作

Vue 工作(适用 :class 和 :style ，适用 v-if 等...)

浏览器理解并应用 -webkit-line-clamp

你的测试库可以工作

那showAll单击按钮后已运行(您希望能够重命名方法，并且如果单击按钮将 truncated 设置为 false，您的测试仍应通过)。

就是这样。