{
  "context": "This criteria evaluates how effectively the engineer uses Stencil's server-side testing framework with mock DOM environment (newSpecPage) to test web components. The focus is on proper usage of the testing API, mock DOM manipulation, and testing patterns specific to Stencil's testing utilities.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "newSpecPage Usage",
      "description": "Uses newSpecPage() function from @stencil/core/testing to create a test page with mock DOM environment",
      "max_score": 25
    },
    {
      "name": "Component Setup",
      "description": "Correctly configures the test page with the component class in the 'components' array and provides initial HTML or properties",
      "max_score": 15
    },
    {
      "name": "Mock DOM Querying",
      "description": "Uses page.root or page.body to query and access component elements within the mock DOM (e.g., using querySelector, shadowRoot access)",
      "max_score": 15
    },
    {
      "name": "Property Setting",
      "description": "Sets component properties correctly on the component instance and validates they affect the rendered output",
      "max_score": 10
    },
    {
      "name": "waitForChanges",
      "description": "Calls page.waitForChanges() after DOM mutations or property changes to ensure the mock DOM updates before assertions",
      "max_score": 15
    },
    {
      "name": "Event Testing",
      "description": "Tests custom events emitted by the component using event listeners or spies on the component element",
      "max_score": 10
    },
    {
      "name": "DOM Assertions",
      "description": "Makes assertions about the rendered DOM structure, content, and visibility states within the mock environment",
      "max_score": 10
    }
  ]
}