{"library":"shallow-render","title":"Shallow Rendering Utility for Angular","description":"shallow-render is an Angular testing utility designed to simplify unit testing of components by providing shallow rendering and easy mocking capabilities. It aims to reduce the boilerplate often associated with Angular's native TestBed. The current stable version is 20.0.0, which aligns with Angular v20. The library generally releases new major versions in lockstep with Angular's major releases, ensuring compatibility. Its key differentiator is a more streamlined API that allows developers to focus specifically on the component under test without needing to declare all its deep dependencies or resort to `NO_ERRORS_SCHEMA`, simplifying test setup and maintenance. The project is actively seeking additional maintainers, indicating a potential future shift in its maintenance model, though it remains updated with new Angular versions by the current maintainer.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install shallow-render"],"cli":null},"imports":["import { Shallow } from 'shallow-render';","import { ShallowRenderOptions } from 'shallow-render';","import { ShallowRenderResult } from 'shallow-render';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Shallow } from 'shallow-render';\nimport { ColorLinkComponent } from './color-link.component';\nimport { MyModule } from './my.module'; // Or declare component directly for standalone\n\ndescribe('ColorLinkComponent', () => {\n  let shallow: Shallow<ColorLinkComponent>;\n\n  beforeEach(() => {\n    // Initialize Shallow with the component to test and its containing NgModule or standalone declarations\n    shallow = new Shallow(ColorLinkComponent, MyModule);\n  });\n\n  it('renders a link with the name of the color', async () => {\n    // Render the component with specific inputs (bind)\n    const { find } = await shallow.render({ bind: { color: 'Blue' } });\n\n    // Assert the rendered content using a CSS selector\n    expect(find('a').nativeElement.textContent).toBe('Blue');\n  });\n\n  it('emits color when clicked', async () => {\n    // Render the component and capture element and outputs\n    const { element, outputs } = await shallow.render({ bind: { color: 'Red' } });\n    \n    // Simulate a click event on the component's root element\n    element.click();\n\n    // Assert that the specified output event was emitted with the correct value\n    expect(outputs.handleClick.emit).toHaveBeenCalledWith('Red');\n  });\n});","lang":"typescript","description":"This example demonstrates how to set up `shallow-render` for an Angular component, render it with specific inputs, assert its rendered DOM content using selectors, and verify event outputs when a user interaction occurs.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}