Как настроить таргетинг на первый дочерний элемент селектора при тестировании компонента с помощью jest - PullRequest
Новая
       15

Как настроить таргетинг на первый дочерний элемент селектора при тестировании компонента с помощью jest

0 голосов
/ 29 марта 2019

Я пытаюсь написать тест для таргетинга, если в HTML правильно передан реквизит по умолчанию с использованием jest и vue-test-utils.Я не могу найти свой целевой селектор.Я хочу иметь возможность проверить, что определенный тег p содержит правильный текст.В этом случае, если имя пропущено, оно отображает это.Если нет, то функция по умолчанию отображает значение по умолчанию payTo.

Я пробовал несколько комбинаций сцепления с оболочкой, но безрезультатно. 

console.log(wrapper.html()) // presents all the page html

console.log(wrapper.classes()) // array showing only one class ('.row-space-between')

Здесьмой компонент: 

<template>
  <div class="row-space-between">
    <div>
      <h3>{{ $t('label.payTo') }}</h3>
      <p>{{ merchantName.payTo }}</p> // TARGET SELECTOR
    </div>
    <div class="align-right">
      <h3>{{ $t('label.estimatedTotal') }}</h3>
      <p>{{ amount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayTo',
  props: {
    'merchant-name': {
      type: Object,
      // default: {} with type obj or arr default function is required
      default: function () {
        return { merchantName: {
          payTo: 'Order Total'
         }
       }
    },
    amount: {
      type: String,
      default: ''
    }
  }
}

А вот мой тест: 

describe('PayTo.vue', () => {
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(PayTo, {
      mocks: {
        $t
      },
      propsData: {
        merchantName: {
          payTo: 'foo-merchant-name'
        },
        amount: '$110.00'
      }
    })
  })
  it('[positive] should render correct contents', () => {
    // PayTo.props.merchantName.default()
    expect(wrapper.html()).toMatchSnapshot()
  })

  // The following two tests satisfy testing the default function in PayTo.vue props validation if not tested, coverage falls to zero

  // This test is meaningless until I can be more specific in targeting

  it('[positive] should display `AWS`', () => {
    wrapper.setProps({
      merchantName: {
        payTo: 'AWS'
      }
    })
    expect(wrapper.contains('p'))
  })

  it('[negative] should display `Order Total`', () => {
    wrapper.setProps({
      merchantName: {
        payTo: 'Order Total'
      }
    })
    console.log(wrapper.contains('div > p'))
    expect(wrapper.contains('p'))
  })

1 Ответ

1 голос
/ 30 марта 2019

Здесь можно использовать псевдокласс :first-child: 

expect(wrapper.contains("div:first-child > p")).toBeTruthy()

Я бы также проверил, что текст в p соответствует ожидаемому значению: 

expect(wrapper.find("div:first-child > p").text()).toBe("Order Total")

Также обратите внимание, что значение по умолчанию merchant-name prop не должно содержать другой ключ merchantName. В противном случае, если этот реквизит не указан, payTo будет доступен для merchantName.merchantName.payTo. 

props: {
  "merchant-name": {
    type: Object,
    default: function() {
      return {
        // merchantName: {  // DON'T DO THIS
        //  payTo: "Order Total"
        // }

        payTo: "Order Total"
      }
    }
  },
}

Edit Selectors in @vue/test-utils

...