Question

我对测试非常陌生，并在自己正在学习的所有新知识中苦苦挣扎。

今天我想为像这样的vuetify <v-text-field>组件编写测试

      <v-text-field
        v-model="user.caption"
        label="Name"
        :disabled="!checkPermissionFor('users.write')"
        required
      />

我的测试应处理以下情况：

一个活跃的登录用户在vuex存储中拥有一个数组，该数组具有其作为字符串数组的权限。完全像这样

userRights: ['dashboard', 'imprint', 'dataPrivacy']

checkPermissionFor()函数什么都不做，然后用arr.includes('x')

检查上面的数组

显示出来的权利不包括在内，它为我提供了协商的返回方式，用于处理该输入字段上的disabled状态。

我想测试这种确切的情况。

我的测试atm看起来像这样

  it('user has no rights to edit other user overview data', () => {
    const store = new Vuex.Store({
      state: {
        ActiveUser: {
          userData: {
            isLoggedIn: true,
            isAdmin: false,
            userRights: ['dashboard', 'imprint', 'dataPrivacy']
          }
        }
      }
    })
    const wrapper = shallowMount(Overview, {
      store,
      localVue
    })
    const addUserPermission = wrapper.vm.checkPermissionFor('users.write')
    const inputName = wrapper.find(
      'HOW TO SELECT A INPUT LIKE THIS? DO I HAVE TO ADD A CLASS FOR IT?'
    )
    expect(addUserPermission).toBe(false)
    expect(inputName.props('disabled')).toBe(false)
  })

现在有大问题：

我如何从vuetify中选择没有像我这样的课程的输入
我如何测试“输入是否被禁用？”

Answer 1

wrapper.find方法接受查询字符串。您可以像这样传递查询字符串： input[label='Name']，或者如果您知道确切的索引，也可以使用以下CSS查询：input:nth-of-type(2)。然后find方法将返回另一个包装器。 Wrapper具有名为element的属性，该属性返回基础本机元素。因此，您可以像这样检查输入是否被禁用：

const buttonWrapper = wrapper.find("input[label='Name']");
const isDisabled = buttonWrapper.element.disabled === true;
expect(isDisabled ).toBe(true)

Answer 2

对于问题 1，最好将额外的数据集放入仅用于测试的组件模板中，以便您可以提取该元素 - 最常见的约定是 data-testid="test-id"。

你应该这样做而不是依赖于类和 id 以及位置选择器或类似的东西的原因是因为这些选择器可能会以不应该破坏你的测试的方式改变 - 如果将来你改变了 css框架或出于某种原因更改 id，即使您的组件仍在工作，您的测试也会中断。

如果您（可以理解）担心所有这些 data-testid 属性会污染您的标记，您可以使用像 https://github.com/emensch/vue-remove-attributes 这样的 webpack 插件将它们从您的开发构建中剥离出来。这是我如何将其与 laravel mix 结合使用：

const createAttributeRemover = require('vue-remove-attributes');
if (mix.inProduction()) {
    mix.options({
        vue: {
            compilerOptions: {
                modules: [
                    createAttributeRemover('data-testid')
                ]
            }
        }
    })
}

至于你的第二个问题，我不知道我在谷歌上搜索同样的东西，然后我降落到了这里！

vue测试vuetify输入是否已禁用

2 个答案: