chore: component testing (#177)

# Changes

- Adds unit tests for all components and blocks

# Associated issue

None

# How to test

1. Open project in editor
2. Run in terminal `npm ci`
3. Run `npm run test`
4. All tests should run.

# Checklist

- [x] I have performed a self-review of my own code
- [x] I have made sure that my PR is easy to review (not too big,
includes comments)
- [x] I have made updated relevant documentation files (in project
README, docs/, etc)
- [x] I have added a decision log entry if the change affects the
architecture or changes a significant technology
- [x] I have notified a reviewer

<!-- Please strike through and check off all items that do not apply
(rather than removing them) -->

---------

Co-authored-by: wesselsmit <wrsmit00@gmail.com>
Co-authored-by: Jasper Moelker <jasper@voorhoede.nl>
Co-authored-by: Jurgen Beliën <info@jurgenbelien.nl>
Co-authored-by: Wessel Smit <45405413+WesselSmit@users.noreply.github.com>

config/plop/templates/block/Block.astro.hbs

@@ -1,8 +1,8 @@
 ---
 import type { {{ pascalCase name }}Fragment } from '@lib/types/datocms';
 
-interface Props {
-block: {{ pascalCase name }}Fragment
+export interface Props {
+    block: {{ pascalCase name }}Fragment
 }
 const { block } = Astro.props;
 ---

config/plop/templates/block/Block.test.hbs

@@ -0,0 +1,17 @@
+import { renderToFragment } from '@lib/renderer';
+import { describe, expect, test } from 'vitest';
+import {{ pascalCase name }}, { type Props } from './{{ pascalCase name }}.astro';
+
+describe('{{ pascalCase name }}', () => {
+  test('Block is rendered', async () => {
+    const fragment = await renderToFragment<Props>({{ pascalCase name }}, {
+        props: {
+            block: {}
+        }
+    });
+
+    expect(fragment).toBeTruthy();
+  });
+
+  // Add more tests here
+});

config/plop/templates/component/Component.test.hbs

@@ -0,0 +1,14 @@
+import { renderToFragment } from '@lib/renderer';
+import { describe, expect, test } from 'vitest';
+import {{ pascalCase name }} from './{{ pascalCase name }}.astro';
+
+
+describe('{{ pascalCase name }}', () => {
+  test('Component is rendered', async () => {
+    const fragment = await renderToFragment({{ pascalCase name }});
+
+    expect(fragment).toBeTruthy();
+  });
+
+  // Add more tests here
+});