# test.web/presentation/components/filter.component.test.ts

> 15 lines of code and 0 definitions.

Tree: Codebase Testing
Language: typescript
Canonical: https://banes-lab.com/anatomy/testing#file-testing-test-web-presentation-components-filter-component-test-ts
Source text: https://banes-lab.com/source/testing/test.web/presentation/components/filter.component.test.ts.txt

Listed in [test.web/presentation/components](https://banes-lab.com/api/source/testing/test.web/presentation/components.md), after [test.web/presentation/components/diagram.component.test.ts](https://banes-lab.com/source/testing/test.web/presentation/components/diagram.component.test.ts.md) and before [test.web/presentation/components/folder.component.test.ts](https://banes-lab.com/source/testing/test.web/presentation/components/folder.component.test.ts.md).

## Contained in

- [test.web/presentation/components](https://banes-lab.com/anatomy/testing/folder-testing-test-web-presentation-components.md)

## Source

```typescript
import { describe, expect, it } from "vitest";
import { createFilterBox } from "@banes-lab/web/presentation/components/filter.component.ts";

describe("createFilterBox", () => {
    it("renders a labeled search input and reports each query trimmed and lower-cased", () => {
        const queries: string[] = [];
        const box = createFilterBox("Filter", "Filter", (query) => {
            queries.push(query);
        });
        expect(box.getAttribute("type")).toBe("search");
        expect(box.getAttribute("aria-label")).toBe("Filter");
        box.value = "  Single Owner ";
        box.dispatchEvent(new Event("input"));
        expect(queries).toStrictEqual(["single owner"]);
    });
});
```