-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Test Setup #103
Comments
We've experienced some issues with routing in recent Astro releases. So maybe it's good to have some of our tests covering this. And probably good practice to start adding tests to our Individual blocks, components and partials may be easier to test once Astro container API is available. |
Possible setup to test components. Focus on how to, not what we should and shouldn't test.
import { expect, test } from 'vitest';
import { renderToFragment, renderToString } from '@lib/renderer';
import Image from './Image.astro';
// test using rendered component as a string:
test('Image ...', async () => {
const result = await renderToString(Image, {
props: {
image: {
url: 'https://example.com/image.jpg',
alt: 'An image',
// title: 'A title',
}
},
});
expect(result).toContain(' alt="An image"');
expect(result).toContain(' loading="lazy"');
expect(result).not.toContain('<figcaption ');
expect(result).not.toContain('</figcaption>');
});
// test using rendered component as a document fragment with DOM methods:
test('Image fragment', async () => {
const fragment = await renderToFragment(Image, {
props: {
image: {
url: 'https://example.com/image.jpg',
alt: 'An image',
// title: 'A title',
}
},
});
expect(fragment.querySelector('img')?.getAttribute('alt')).toEqual('An image');
expect(fragment.querySelector('figcaption')).toBeNull();
});
import type { ContainerRenderOptions } from 'astro/container';
import type { AstroComponentFactory } from 'astro/runtime/server/index.d.ts';
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { JSDOM } from 'jsdom';
export async function renderToString(
component: AstroComponentFactory,
options?: ContainerRenderOptions
): Promise<string> {
const container = await AstroContainer.create();
return container.renderToString(component, options);
}
export async function renderToFragment(
component: AstroComponentFactory,
options?: ContainerRenderOptions
): Promise<DocumentFragment> {
const container = await AstroContainer.create();
const result = await container.renderToString(component, options);
return JSDOM.fragment(result);
} |
# Changes <!-- example: - Fixes wrong color in button - Adds a new page --> - adds `test` and `unit-test` scripts - adds unit tests for `i18n` lib function - adds a `vitest.config.ts` so we can configure the testing suite - adds new deps needed for testing - adds `unit-tests` step to github action CI so we test each commit to the repo from now on - uses the `github actions reporter` to enable formatting and highlighting of testing output in the CI pipeline - adds documentation for testing setup - fixes the following issues in the i18n lib function: - interpolation did not work in the `t` function - params and language props were not supported in `t` function # Associated issue Part of #103 # How to test - verify that the tests in the CI were succesful # 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) -->
<!-- example: - Fixes wrong color in button - Adds a new page --> - adds `test` and `unit-test` scripts - adds unit tests for `i18n` lib function - adds a `vitest.config.ts` so we can configure the testing suite - adds new deps needed for testing - adds `unit-tests` step to github action CI so we test each commit to the repo from now on - uses the `github actions reporter` to enable formatting and highlighting of testing output in the CI pipeline - adds documentation for testing setup - fixes the following issues in the i18n lib function: - interpolation did not work in the `t` function - params and language props were not supported in `t` function Part of #103 - verify that the tests in the CI were succesful - [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) -->
User story
As a developer,
I want a test setup and test coverage,
so I can author code without worrying about regression.
Checklist
src/lib/
functions with Vitest; use filesystem & request mocking where needed.src/blocks/
andsrc/components/
(where relevant) with Astro container + Vitestsrc/pages/
with Playwright (focus on critical features only) and Playwright Axe for accessibility testing.package.json
with atest:unit
andtest:e2e
.npm run create
scripts (see plopfile)The text was updated successfully, but these errors were encountered: