feat: no need to pass the component as declaration with the component syntax

Author: timdeschryver

projects/testing-library/src/lib/models.ts

@@ -12,7 +12,7 @@ export interface RenderResult extends RenderResultQueries, FireObject {
 
 export interface RenderOptions<C, Q extends Queries = typeof queries> {
   detectChanges?: boolean;
-  declarations: any[];
+  declarations?: any[];
   providers?: any[];
   imports?: any[];
   schemas?: any[];

projects/testing-library/src/lib/testing-library.ts

@@ -28,10 +28,10 @@ export async function render<T>(
   }: RenderOptions<T>,
 ): Promise<RenderResult> {
   const isTemplate = typeof templateOrComponent === 'string';
-  const testComponent = isTemplate ? [wrapper] : [];
+  const componentDeclarations = isTemplate ? [wrapper] : [templateOrComponent];
 
   TestBed.configureTestingModule({
-    declarations: [...declarations, ...testComponent],
+    declarations: [...declarations, ...componentDeclarations],
     providers: [...providers],
     imports: [...imports],
     schemas: [...schemas],

projects/testing-library/tests/counter/counter.spec.ts

@@ -51,6 +51,20 @@ test('Counter actions via template syntax with parameters', async () => {
 });
 
 test('Counter actions via component syntax', async () => {
+  const { getByText, getByTestId, click } = await render(CounterComponent, {
+    declarations: [CounterComponent],
+  });
+
+  click(getByText('+'));
+  expect(getByText('Current Count: 1')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 1');
+
+  click(getByText('-'));
+  expect(getByText('Current Count: 0')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 0');
+});
+
+test('Counter actions via component syntax with parameters', async () => {
   const { getByText, getByTestId, click } = await render(CounterComponent, {
     declarations: [CounterComponent],
     componentProperties: {
@@ -67,16 +81,18 @@ test('Counter actions via component syntax', async () => {
   expect(getByTestId('count').textContent).toBe('Current Count: 10');
 });
 
-test('Counter actions via component syntax without parameters', async () => {
+test('Counter actions via component syntax without declaration', async () => {
   const { getByText, getByTestId, click } = await render(CounterComponent, {
-    declarations: [CounterComponent],
+    componentProperties: {
+      counter: 10,
+    },
   });
 
   click(getByText('+'));
-  expect(getByText('Current Count: 1')).toBeTruthy();
-  expect(getByTestId('count').textContent).toBe('Current Count: 1');
+  expect(getByText('Current Count: 11')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 11');
 
   click(getByText('-'));
-  expect(getByText('Current Count: 0')).toBeTruthy();
-  expect(getByTestId('count').textContent).toBe('Current Count: 0');
+  expect(getByText('Current Count: 10')).toBeTruthy();
+  expect(getByTestId('count').textContent).toBe('Current Count: 10');
 });