Доступ к свойствам компонента в Svelte for Jest test - PullRequest
Новая
       103

Доступ к свойствам компонента в Svelte for Jest test

0 голосов
/ 18 июня 2020

Проблема : Как получить доступ к реквизитам для стройного компонента с помощью тестирования шуткой. Например, если компонент svelte выглядит следующим образом:

ExampleComponent.svelte 

    <script>
    import { createEventDispatcher } from 'svelte'

    const dispatch = createEventDispatcher()
    export let booleanProp

    const toggle = () => {
        dispatch('toggle')
    }
</script>

<style lang="scss" src="./style.scss">
</style>

<button class:-closed="{booleanProp == false}" class="c-toggle" on:click={toggle}>
    <svg class="toggle-icon">
        {#if booleanProp}
            <use xlink:href="icons/some-icon.svg" />
        {:else}
            <use xlink:href="icons/some-other-icon.svg" />
        {/if}
    </svg>
</button>

1 Ответ

1 голос
/ 19 июня 2020

Свойства - это интерфейс с внешним миром. Имитация:

Пример 1) имитируйте опору 

    test("should render articles", () => {
  const booleanProp = " I am true";
  const { container, getByText } = render(ExampleComponent, {
    props: {
      articles: [
        {
          booleanProp
        }
      ]
    }
  });

  expect(container.querySelector("a").href).toBe(
    `http://localhost/${canonical_url}`
  );
  expect(getByText(myBool)).toBeInTheDocument();
});

Хорошая статья: https://dev.to/jpblancodb/testing-svelte-components-with-jest-53h3

Пример 2) имитируйте DOM

Для тестирования функции за кнопкой. Код HTML содержит необходимые элементы, позволяющие вызываемой функции выполнять свою работу: 

   it('testFunctionModifiesDom', async () => {
        const documentHTML = 
            '<!doctype html><html><body>' +
            '<my-custom-element>' +
            '<input id="id0" value="true"/>' +. 
            '</my-custom-element>' +
            '</body></html>';
        document.body.innerHTML = documentHTML;

        const myCustomElement = document.querySelector('my-custom-element');

        let actual = myCustomElementsService.toggleMyBoolEffectsElement();

        expect(myCustomElement.getElementById('id0').value).toBe(false)
    })

Пример 3) имитируйте компонент.

Чтобы проверить, имеет ли нажатие кнопки действие, используя @ testing-library: 

import {render, fireEvent} from '@testing-library/svelte'
import {jest} from "@jest/globals";

it('testMyCustomElement_awesomeAction', async () => {
    const config = {booleanProp: true};
    const dom = render(MyCustomElement, config);

    const toggleButton = dom.getByLabelText('toggle-boolean-prop');
    await fireEvent.click(toggleButton);


    expect(config.booleanProp).toBe(false);
})

Чтобы поймать элемент, вам понадобится метка aria для его идентификации: 

<button aria-label="toggle-boolean-prop" class:-closed="{booleanProp == false}" class="c-toggle" on:click={toggle}>...</button>
...