Sweater Vest (Sweater velte test)

Sweater Vest is a svelte utility (component) that simplifies testing svelte components in browser environments, specifically when you're testing multiple components together and/or within complex markup.

Anatomy of a Sweater Vest Test

Jump to the complete example below if you want to see what a Sweater Vest test looks like in its entirety.

Sweater Component

Begin a Sweater Vest test by utilizing the Sweater component imported from the "sweater-vest" package.

<script lang="ts">
  import { Sweater } from "sweater-vest";
</script>

<Sweater
  ...
>
  ...
</Sweater>

vest Snippet

The Sweater component expects a vest snippet to be defined which takes a single argument (which is called pocket as a convention).

<Sweater
  ...
>
  {#snippet vest(pocket: ...)}
    ...
  {/snippet}
</Sweater>

pocket Argument Type

You as the test author will determine the type of the pocket argument based on the requirements of your test. The type should include:

• Any elements and/or componets within your markup that you want to bind:this to in order to interact with in your test's body. For example:

{#snippet vest(pocket: { container: HTMLDivElement; ... })}
  <div bind:this={pocket.container}>
    ...
  </div>
{/snippet}

• Any data that will be utilized within your markup (which will be initilalized / manipulated by your test's body). For example:

{#snippet vest(pocket: { ..., value: string; })}
  <div ...>
    {pocket.value}
  </div>
{/snippet}

body Function Prop

<Sweater
  body={async (harness) => {
    ...
  }}
>
  ...
</Sweater>

Complete

<script lang="ts">
  import { Sweater } from "sweater-vest";
</script>

<Sweater
  body={async (harness) => {
    const { set, given, expect } = harness;
    set({ value: "Hello, world!" });
    const { container } = await given("container");
    expect(container.textContent).toBe("Hello, world!");
  }}
>
  {#snippet vest(pocket: { container: HTMLDivElement; value: string; })}
    <div bind:this={pocket.container}>
      {pocket.value}
    </div>
  {/snippet}
</Sweater>

Configuration

The <Sweater> component can (optionally) be used to configure and group similar tests, as demonstrated below.

Without Config

<script lang="ts">
  import { Sweater } from "sweater-vest";
</script>

<Sweater name="Test 1" body={async (harness) => {}}>
  {#snippet vest(pocket: {})}{/snippet}
</Sweater>

<Sweater name="Test 2" body={async (harness) => {}}>
  {#snippet vest(pocket: {})}{/snippet}
</Sweater>

With Nesting

<script lang="ts">
  import { Sweater } from "sweater-vest";
</script>

<Sweater config>
  <Sweater name="Test 1" body={async (harness) => {}}>
    {#snippet vest(pocket: {})}{/snippet}
  </Sweater>
  <Sweater name="Test 2" body={async (harness) => {}}>
    {#snippet vest(pocket: {})}{/snippet}
  </Sweater>
</Sweater>

Sequentially

Mixed