testing tools to test brisa routes (pages and api)

[aralroca]

brisa/test

•  render. Supporting "Server Components" (HTML elements) and "Web Components" (custom elements). Should also support a Response to use it together with serveRoute to render pages.
• serveRoute. Call Bun.serve with getServeOptions and return the response.
• The render and serveRoute returns: container and cleanup.
• The render should work with server actions and possible to test them
• The render should work with signals and custom elements
• waitFor to wait for an "expect" assertion to pass.
• userEvent to simulate user events like click, type, hover, focus, etc.
• debug (similar to console.log(document.documentElement.outerHTML) but prettier and with colors in the HTML elements
• cleanup method to clear the document and server actions register.

Matchers

For components/pages:

• toBeChecked: Checks if the target element is checked.
• toHaveAttribute: Verifies whether a specified attribute exists within the target element.
• toHaveTagName: Checks if the target element has a specific HTML tag.
• toHaveTextContent: Ensures that the target element renders the expected text content.
• toContainTextContent: Verifies if the rendered text content contains a specific string.
• toHaveStyle: Validates the styling properties of the target element.
• toHaveClass: Checks for the presence of a specified CSS class within the target element.
• toHaveValue: Verifies the current value of form elements such as input fields.
• toHaveFocus: Indicates whether the target element currently has focus.
• toBeVisible: Checks if the target element is visible within the DOM.
• toBeEnabled: Verifies that the target element is enabled and interactive.
• toBeDisabled: Indicates whether the target element is disabled and non-interactive.
• toBeSelected: Indicates whether the target element is selected.
• toBeRequired: Indicates whether the target element is required.
• toBeInvalid: Indicates whether the target element is invalid.
• toBeValid: Checks if the target element is valid.
• toBeInputTypeOf: Verifies if the target element is hidden.
• toBeInTheDocument: Checks if the target element is present in the DOM.
• toHaveElementByNodeName: Use toHaveElementByNodeName to assert that an element has a specific node name.

Details: https://twitter.com/kyusyukeigo/status/1786386779203129605

More

•  Docs

[aralroca]

For the web components part: The actual problem is that it requires a transpilation process, since JSX is not the "native" form of web components. So, there are two alternatives:

Alternative 1:

• Get a list of all web components (names) in the test preload
• After rendering, search in the DOM if each of the web components exists.
• Transpile the web components that are found and avoid repetitions.

Alternative 2:

• Compile all the web components in the test preload.
• After rendering, load the build script of the web components.

The first alternative has an added cost in each test, since it searches in the DOM which of the elements are web components, while the second alternative has an initial cost of starting the tests, although later it will not add so much latency in each test.

After considering the options, I'd recommend going with Alternative 2. This choice involves compiling all the web components in the test preload and then loading the build script of the web components after rendering. While Alternative 1 might seem simpler initially, it incurs added costs in each test as it searches in the DOM for web components and transpiles them if found, potentially leading to increased latency.

In technical terms, Alternative 2 offers better performance efficiency by front-loading the compilation process, thereby reducing the overhead during test execution. Although it incurs an initial cost in starting the tests due to preloading, it results in lower latency in subsequent tests since the web components are already compiled and ready to use. This approach optimizes the testing workflow by minimizing runtime overhead and enhancing overall test execution speed.

Maybe also I can take advantage to think a solution to #117 issue