Search Results Filter Component Tests

Problem/Feature Description

A job board startup has a SearchFilters component on their listings page. It includes a text input for keywords, a set of checkboxes for job categories (Engineering, Design, Marketing, Sales), a dropdown to select employment type (Full-time, Part-time, Contract), and a "Search" button. The component calls a callback when the user applies filters.

A developer has been asked to write tests for this component. In the past, the test suite kept breaking whenever the copy team changed button labels from "Search" to "Find Jobs" or capitalized a label differently. The team wants tests that won't break due to minor text changes, and that use the most semantic, accessibility-friendly way to locate each type of element.

Output Specification

Write a test file SearchFilters.test.tsx that tests the SearchFilters component provided below. Tests should cover:

• Typing a keyword into the search input
• Selecting a job category checkbox
• Changing the employment type dropdown
• Clicking the search/apply button and verifying the callback is called with the selected values

Also write a brief notes.md explaining the query strategy choices made in the tests.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: SearchFilters.tsx =============== import React, { useState } from 'react';

const CATEGORIES = ['Engineering', 'Design', 'Marketing', 'Sales']; const EMPLOYMENT_TYPES = ['Full-time', 'Part-time', 'Contract'];

interface FilterValues { keyword: string; categories: string[]; employmentType: string; }

interface SearchFiltersProps { onSearch: (values: FilterValues) => void; }

export function SearchFilters({ onSearch }: SearchFiltersProps) { const [keyword, setKeyword] = useState(''); const [categories, setCategories] = useState<string[]>([]); const [employmentType, setEmploymentType] = useState('');

function toggleCategory(cat: string) { setCategories((prev) => prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat] ); }

return ( <form onSubmit={(e) => { e.preventDefault(); onSearch({ keyword, categories, employmentType }); }}> <label> Keywords <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} /> </label>

<fieldset>
    <legend>Job Categories</legend>
    {CATEGORIES.map((cat) => (
      <label key={cat}>
        <input
          type="checkbox"
          checked={categories.includes(cat)}
          onChange={() => toggleCategory(cat)}
        />
        {cat}
      </label>
    ))}
  </fieldset>

  <label>
    Employment Type
    <select
      value={employmentType}
      onChange={(e) => setEmploymentType(e.target.value)}
    >
      <option value="">Any</option>
      {EMPLOYMENT_TYPES.map((t) => (
        <option key={t} value={t}>{t}</option>
      ))}
    </select>
  </label>

  <button type="submit">Search</button>
</form>

); }