Svelte‐query要素によるテスト駆動開発

我々はSvelteアプリをテストするための必要な依存関係をインストールしている.これで、我々はどのように我々が彼らと対話することができるかについて要素を照らすことができるかについて見そうです.

登録フォームの作成
テストが既に実行されていない場合、open consoleと実行し、npm test新しいsvelteコンポーネントと対応するテストモジュールを作成することから始めましょう.
ちょうど署名ページを加えましょう.Svelteファイル.今のところ空にしておきなさい.を使ってsignuppageを作成します.spec . jsファイル.
あなたは、signupページのためにコンソールで失敗メッセージを見ます.私たちはまだテストを受けていないからです.最初のテストから始めましょう
そして、このファイルが作成されているので、import

// SignUpPage.spec.js
import SignUpPage from './SignUpPage.svelte';
import { render, screen } from '@testing-library/svelte';
import '@testing-library/jest-dom';

今すぐ私たちの最初のテストを追加できます.このページでフォームフォームのサインアップを行います.

// SignUpPage.spec.js
it('has Sign Up header', () => {
    render(SignUpPage);
    const header = screen.getByRole('heading', { name: 'Sign Up'});
    expect(header).toBeInTheDocument();
})

テストライブラリの2つの機能を使用しています.最初にコンポーネントをレンダリングします.テストランナー、Jestはjsdomを使用しています.そしてそれは私たちにブラウザのような環境を提供しています.また、テストライブラリはそのドキュメントにコンポーネントをレンダリングします.そして、このドキュメントで探している要素を取得するためにscreenで来るクエリを実行します.
すべての利用可能なクエリ関数についてのより良いビューを得るには、testing-library documentationをチェックすることができます
Docsから

Queries are the methods that Testing Library gives you to find elements on the page. There are several types of queries ("get", "find", "query"); the difference between them is whether the query will throw an error if no element is found or if it will return a Promise and retry.

そのため、getByRoleクエリを使用しています.このクエリを使用すると、accessibility rolesに基づいて要素を取得できます.
このページでheadingの役割を持つ要素を探しています.これはH 1 - H 6要素を持っていることを意味します.
このテストモジュールを保存した後、Jestはテストを実行します.

TestingLibraryElementError: Unable to find an accessible
element with the role "heading" and name "Sign Up"

今、我々は我々のsignuppageにヘッダーを加えることによってそれを修正することができます.スベルト

<!-- SignUpPage.svelte -->
<h1>Sign Up</h1>

これを加えたあと、テストは通過します.
今フォームの入力を追加できます.ユーザーがサインアップデータを入力され、我々はそれのカップルの入力を持っている必要があります.ユーザー名入力から始めましょう.
複数の入力要素を持ち、どの入力がどのフィールドになっているかを伝えるために、ユーザにそのテキストを表示する必要があります.入力用のプレースホルダテキストを使用したり、ラベルを関連付けることもできます.テストライブラリは、両方のクエリの種類を提供しています.プレースホルダを先に行きましょう.

// SignUpPage.spec.js
it('has input for username', () => {
    render(SignUpPage);
    const input = screen.getByPlaceholderText('Username');
    expect(input).toBeInTheDocument();
})

プレースホルダに基づいて入力を取得するには、GetByplacholderText関数を使用します.
この入力を加えてこれを修正しましょう

<!-- SignUpPage.svelte -->
<h1>Sign Up</h1>
<!-- Right after this h1 lets add input and
lets set the placeholder for it -->
<input placeholder="Username" />

これはテストの修正です.
プレースホルダの代わりにラベルを使いたいなら、テストはこのようなものになります.

// SignUpPage.spec.js
it('has input for username', () => {
    render(SignUpPage);
    // just replace getByPlaceholderText with getByLabelText
    const input = screen.getByLabelText('Username');
    expect(input).toBeInTheDocument();
})

そして、対応する実装は以下のようになります

<!-- SignUpPage.svelte -->
<label for="username">Username</label>
<input id="username" />

ユーザー名テキストを持つラベルを追加し、入力要素と関連付ける.
この変更テストをパスします.
これと同じようにメールとパスワードの入力を追加します.基本的にはユーザ名入力テストのコピーです

<!-- SignUpPage.spec.js -->
it('has input for email', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('E-mail');
    expect(input).toBeInTheDocument();
})
it('has input for password', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password');
    expect(input).toBeInTheDocument();
})

対応する入力はここにある

<!-- SignUpPage.svelte -->
<h1>Sign Up</h1>
<label for="username">Username</label>
<input id="username" />
<!-- -->
<label for="email">E-mail</label>
<input id="email" />
<label for="password">Password</label>
<input id="password" />

これらの変更の後、テストは通過されます.
ブラウザの進捗状況を見るには、このようなアプリケーションを実行できます.

npm run dev

SignupPageを見るには、メインを更新してください.プロジェクトのJS

// main.js
import SignUpPage from './SignUpPage.svelte';

const app = new SignUpPage({
    target: document.body
});

export default app;

パスワード入力では、我々は彼らがタイプして、ユーザーエントリをマスキングしなければなりません.しかし、現在、パスワード入力に何かを入力すると、すべてクリアテキストになります.レットフィックス

// SignUpPage.spec.js
it('has type as password for password input', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password');
    expect(input.type).toBe('password');
})

この場合の実装の詳細を確認する必要があります.私たちはパスワードの値を持つために入力のtype属性を探しています.

<!-- SignUpPage.svelte -->
<label for="password">Password</label>
<!-- just setting type for the input -->
<input id="password" type="password"/>

今テストが通過しています.そして、あなたがブラウザーをチェックするならば、あなたはパスワード入力がユーザーエントリをマスキングしているのを見ます.
パスワードが現在マスクされているので、ユーザーが意図した値を入力するように、確認のために2番目のパスワード入力を追加できます.
ちょうどコピーとパスワードを最後の2つのパスワード入力テストとその説明とラベルのテキストを更新します.

// SignUpPage.spec.js
it('has input for password repeat', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password Repeat');
    expect(input).toBeInTheDocument();
})
it('has type as password for password repeat input', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password Repeat');
    expect(input.type).toBe('password');
})

そして、svelteコンポーネントの同じステップも繰り返します.

<!-- SignUpPage.svelte -->
<label for="password-repeat">Password Repeat</label>
<input id="password-repeat" type="password"/>

我々はこのフォームを完成しようとしている.我々が必要とするすべては、ちょうどユーザーに要求を送るようにするボタンです.テストの追加

// SignUpPage.spec.js
it('has Sign Up button', () => {
    render(SignUpPage);
    const button = screen.getByRole('button', { name: 'Sign Up'});
    expect(button).toBeInTheDocument();
})

そして、我々のページにボタンを加えさせてください.

<!-- SignUpPage.svelte -->
<button>Sign Up</button>

この部分の1つの最終テストを加えてください.ボタンを最初に無効にすることを確認します.その後、ユーザーがパスワードとパスワードの繰り返し入力に同じ値を入力した後、それを有効にするつもりです.

it('disables the button initially', () => {
    render(SignUpPage);
    const button = screen.getByRole('button', { name: 'Sign Up'});
    // for the matcher functions we are using
    // '@testing-library/jest-dom' and for this case
    // we can use
    expect(button).toBeDisabled();

    // or we have option to use matcher with 'not' function
    // expect(button).not.toBeEnabled();
})

そして、ボタンにdisabled属性を追加することで修正します

<button disabled>Sign Up</button>

すべてのテストは現在通過しています.私たちには今形があります.
次に、相互作用を実装します.

資源
このプロジェクトのためのgithub repoは、ここで見つかります

basarbk / dev-svelte-tdd
Svelteによるテスト駆動開発に関する記事プロジェクトのリポジトリ
また、Svelteプロジェクトの同じフォームの作成のためにこのビデオチュートリアルをチェックすることもできます
そして、あなたが興味があるならば、私はsvelteで完全なコースTDDを持ちます.Svelte with Test Driven Development
読書ありがとう