SvelteBench 2.0 MCP ✓ (https://mcp.svelte.dev/mcp) $0.003671

Create a Svelte 5 counter component with increment and decrement functionality.

Use Svelte 5's `$state` rune for reactivity. The component should have increment/decrement buttons and display the current count starting at 0.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import userEvent from "@testing-library/user-event";
import Counter from "./Component.svelte"; // Your component that is written using the ResultWrite tool

describe("Counter component", () => {
  test("renders with initial count of 0", () => {
    render(Counter);

    // Use data-testid to get elements
    const countElement = screen.getByTestId("count-value");
    const decrementButton = screen.getByTestId("decrement-button");
    const incrementButton = screen.getByTestId("increment-button");

    // Check initial state
    expect(countElement).toHaveTextContent("0");
    expect(decrementButton).toBeInTheDocument();
    expect(incrementButton).toBeInTheDocument();
  });

  test("increments the count when + button is clicked", async () => {
    const user = userEvent.setup();
    render(Counter);

    const incrementButton = screen.getByTestId("increment-button");
    const countElement = screen.getByTestId("count-value");

    // Initial count should be 0
    expect(countElement).toHaveTextContent("0");

    // Click the increment button
    await user.click(incrementButton);

    // Count should now be 1
    expect(countElement).toHaveTextContent("1");
  });

  test("decrements the count when - button is clicked", async () => {
    const user = userEvent.setup();
    render(Counter);

    const decrementButton = screen.getByTestId("decrement-button");
    const countElement = screen.getByTestId("count-value");

    // Initial count should be 0
    expect(countElement).toHaveTextContent("0");

    // Click the decrement button
    await user.click(decrementButton);

    // Count should now be -1
    expect(countElement).toHaveTextContent("-1");
  });

  test("handles multiple clicks correctly", async () => {
    const user = userEvent.setup();
    render(Counter);

    const decrementButton = screen.getByTestId("decrement-button");
    const incrementButton = screen.getByTestId("increment-button");
    const countElement = screen.getByTestId("count-value");

    // Increment twice
    await user.click(incrementButton);
    await user.click(incrementButton);
    expect(countElement).toHaveTextContent("2");

    // Decrement once
    await user.click(decrementButton);
    expect(countElement).toHaveTextContent("1");
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a Svelte 5 number doubler component that uses the `$derived` rune.

The component should have a number input starting at 5, use `$derived` to calculate the doubled value, and include a button to increment the number.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import userEvent from "@testing-library/user-event";
import NumberDoubler from "./Component.svelte";

describe("NumberDoubler component", () => {
  test("renders with initial state", () => {
    render(NumberDoubler);

    expect(screen.getByTestId("number-value")).toHaveTextContent("Number: 5");
    expect(screen.getByTestId("doubled-value")).toHaveTextContent("Doubled: 10");
  });

  test("updates doubled value when number increments", async () => {
    const user = userEvent.setup();
    render(NumberDoubler);

    await user.click(screen.getByTestId("increment-button"));

    expect(screen.getByTestId("number-value")).toHaveTextContent("Number: 6");
    expect(screen.getByTestId("doubled-value")).toHaveTextContent("Doubled: 12");

    // Click again
    await user.click(screen.getByTestId("increment-button"));

    expect(screen.getByTestId("number-value")).toHaveTextContent("Number: 7");
    expect(screen.getByTestId("doubled-value")).toHaveTextContent("Doubled: 14");
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a Svelte 5 text analyzer component that uses the `$derived.by` rune for complex derivations.

The component should have a text input field and use `$derived.by` to calculate word count, character count, and whether the text is considered "long" (more than 15 words). Include a clear button to reset the text.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import userEvent from "@testing-library/user-event";
import TextAnalyzer from "./Component.svelte";

describe("TextAnalyzer component", () => {
  test("renders with initial state", () => {
    render(TextAnalyzer);

    expect(screen.getByTestId("word-count")).toHaveTextContent("Words: 0");
    expect(screen.getByTestId("char-count")).toHaveTextContent("Characters: 0");
    expect(screen.getByTestId("length-indicator")).toHaveTextContent("Status: Short text");
  });

  test("updates counts when text is entered", async () => {
    const user = userEvent.setup();
    render(TextAnalyzer);

    const input = screen.getByTestId("text-input");

    // Enter a short text
    await user.type(input, "Hello world");

    expect(screen.getByTestId("word-count")).toHaveTextContent("Words: 2");
    expect(screen.getByTestId("char-count")).toHaveTextContent("Characters: 11");
    expect(screen.getByTestId("length-indicator")).toHaveTextContent("Status: Short text");

    // Clear and enter a longer text
    await user.clear(input);
    await user.type(
      input,
      "This is a much longer text that should have more than fifteen words so that we can test the long text indicator functionality properly",
    );

    expect(screen.getByTestId("word-count")).toHaveTextContent("Words: 24");
    expect(screen.getByTestId("char-count")).toHaveTextContent("Characters: 134");
    expect(screen.getByTestId("length-indicator")).toHaveTextContent("Status: Long text");
  });

  test("clear button resets the text", async () => {
    const user = userEvent.setup();
    render(TextAnalyzer);

    const input = screen.getByTestId("text-input");
    const clearButton = screen.getByTestId("clear-button");

    // Enter some text
    await user.type(input, "Hello world");

    // Verify counts
    expect(screen.getByTestId("word-count")).toHaveTextContent("Words: 2");

    // Click the clear button
    await user.click(clearButton);

    // Verify everything is reset
    expect(screen.getByTestId("word-count")).toHaveTextContent("Words: 0");
    expect(screen.getByTestId("char-count")).toHaveTextContent("Characters: 0");
    expect(screen.getByTestId("length-indicator")).toHaveTextContent("Status: Short text");
    expect(input).toHaveValue("");
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a Svelte 5 character list component that uses the `{#each}` block.

The component should display a hardcoded list of 3 Seinfeld characters (Jerry, Elaine, Kramer) and include a button to add George to the list.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import userEvent from "@testing-library/user-event";
import CharacterList from "./Component.svelte";

describe("CharacterList component", () => {
  test("renders all characters initially", () => {
    render(CharacterList);

    const characterElements = screen.getAllByTestId("character");
    expect(characterElements.length).toBe(3);
    expect(characterElements[0]).toHaveTextContent("Jerry");
    expect(characterElements[1]).toHaveTextContent("Elaine");
    expect(characterElements[2]).toHaveTextContent("Kramer");
  });

  test("adds George to the list when button clicked", async () => {
    const user = userEvent.setup();
    render(CharacterList);

    // Initial check
    let characterElements = screen.getAllByTestId("character");
    expect(characterElements.length).toBe(3);

    // Click the button to add George
    await user.click(screen.getByTestId("add-george-button"));

    // Get updated elements
    characterElements = screen.getAllByTestId("character");

    // Check that George was added
    expect(characterElements.length).toBe(4);
    expect(characterElements[3]).toHaveTextContent("George");

    // Verify original characters are still there
    expect(characterElements[0]).toHaveTextContent("Jerry");
    expect(characterElements[1]).toHaveTextContent("Elaine");
    expect(characterElements[2]).toHaveTextContent("Kramer");
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a Svelte 5 number doubler component that uses the `$effect` rune.

The component should have a number input starting at 5, use `$effect` to calculate the doubled value whenever the number changes, and include a button to increment the number.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import userEvent from "@testing-library/user-event";
import NumberDoubler from "./Component.svelte";

describe("NumberDoubler component", () => {
  test("renders with initial state", () => {
    render(NumberDoubler);

    expect(screen.getByTestId("number-value")).toHaveTextContent("Number: 5");
    expect(screen.getByTestId("doubled-value")).toHaveTextContent("Doubled: 10");
  });

  test("updates doubled value when number increments", async () => {
    const user = userEvent.setup();
    render(NumberDoubler);

    await user.click(screen.getByTestId("increment-button"));

    expect(screen.getByTestId("number-value")).toHaveTextContent("Number: 6");
    expect(screen.getByTestId("doubled-value")).toHaveTextContent("Doubled: 12");

    // Click again
    await user.click(screen.getByTestId("increment-button"));

    expect(screen.getByTestId("number-value")).toHaveTextContent("Number: 7");
    expect(screen.getByTestId("doubled-value")).toHaveTextContent("Doubled: 14");
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a simple Svelte 5 component that displays "Hello, World!" with styling.

The text should be blue, centered, and have a small margin around it.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import HelloWorld from "./Component.svelte"; // Path to the generated component

describe("HelloWorld component", () => {
  test("renders with Hello, World! text", () => {
    render(HelloWorld);

    // Get the greeting element
    const greetingElement = screen.getByTestId("greeting");

    // Check that it contains the correct text
    expect(greetingElement).toHaveTextContent("Hello, World!");
  });

  test("has the correct styling class", () => {
    render(HelloWorld);

    // Get the greeting element
    const greetingElement = screen.getByTestId("greeting");

    // Check that it has the greeting class
    expect(greetingElement).toHaveClass("greeting");
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a Svelte 5 component that uses the `$props` rune to accept component properties.

The component should accept props for `name` (default "World"), `count` (default 0), and `showDetails` (default false). Display the name in a heading, show the count with an increment button, and conditionally display details when `showDetails` is true.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import userEvent from "@testing-library/user-event";
import PropsDemo from "./Component.svelte"; // Path to the generated component

describe("PropsDemo component", () => {
  test("renders with default props", () => {
    render(PropsDemo);

    // Check default values
    const nameDisplay = screen.getByTestId("name-display");
    const countDisplay = screen.getByTestId("count-display");

    expect(nameDisplay).toHaveTextContent("World");
    // Just check for the number 0 without requiring "Count: " prefix
    expect(countDisplay.textContent).toMatch(/0/);

    // Details should not be visible by default
    expect(screen.queryByTestId("details")).not.toBeInTheDocument();
  });

  test("renders with custom props", () => {
    render(PropsDemo, {
      props: { name: "Svelte", count: 5, showDetails: true },
    });

    // Check custom values
    const nameDisplay = screen.getByTestId("name-display");
    const countDisplay = screen.getByTestId("count-display");
    const details = screen.getByTestId("details");

    expect(nameDisplay).toHaveTextContent("Svelte");
    // Just check for the number 5 without requiring specific text before it
    expect(countDisplay.textContent).toMatch(/5/);

    expect(details).toBeInTheDocument();
    // Check for values without requiring specific text format
    expect(details.textContent).toMatch(/Svelte/);
    expect(details.textContent).toMatch(/5/);
    expect(details.textContent).toMatch(/true/i); // case insensitive match for "true"
  });

  test("increment button increases count", async () => {
    const user = userEvent.setup();
    render(PropsDemo, { props: { count: 10 } });

    const incrementButton = screen.getByTestId("increment-button");
    const countDisplay = screen.getByTestId("count-display");

    // Initial count should be 10, without requiring "Count: " prefix
    expect(countDisplay.textContent).toMatch(/10/);

    // Click the increment button
    await user.click(incrementButton);

    // Count should now be 11, without requiring "Count: " prefix
    expect(countDisplay.textContent).toMatch(/11/);
  });

  test("conditional rendering works correctly", () => {
    // First render without details
    const { unmount } = render(PropsDemo, { props: { showDetails: false } });
    expect(screen.queryByTestId("details")).not.toBeInTheDocument();

    // Unmount and render again with details
    unmount();
    render(PropsDemo, { props: { showDetails: true } });
    expect(screen.getByTestId("details")).toBeInTheDocument();
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.

Create a Svelte 5 book list component that uses snippets to render each title.

The component should display a list of book titles using a snippet to render each title. Use a hardcoded array of 3 books with appropriate syntax for Svelte 5 Snippets.


## Test Suite

Your component must pass the following tests:

```ts
import { render, screen } from "@testing-library/svelte";
import { expect, test, describe } from "vitest";
import BookList from "./Component.svelte";

describe("Simple Snippet component", () => {
  test("renders the correct number of book titles", () => {
    render(BookList);

    const bookItems = screen.getAllByTestId("book-item");
    expect(bookItems.length).toBe(3);

    const bookTitles = screen.getAllByTestId("book-title");
    expect(bookTitles.length).toBe(3);
  });

  test("displays correct book titles", () => {
    render(BookList);

    const bookTitles = screen.getAllByTestId("book-title");

    expect(bookTitles[0]).toHaveTextContent("The Lord of the Rings");
    expect(bookTitles[1]).toHaveTextContent("To Kill a Mockingbird");
    expect(bookTitles[2]).toHaveTextContent("1984");
  });

  test("has the correct structure for each book item", () => {
    render(BookList);

    const bookItems = screen.getAllByTestId("book-item");

    bookItems.forEach((item) => {
      expect(item.tagName).toBe("LI");

      const title = item.querySelector('[data-testid="book-title"]');
      expect(title).toBeInTheDocument();
      expect(title?.tagName).toBe("SPAN");
    });
  });
});

```

IMPORTANT: When you have finished implementing the component, use the ResultWrite tool to output your final Svelte component code. Only output the component code itself, no explanations or markdown formatting.