NEXT Implement Svelte component unit tests #2968
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@Hugos68 is attempting to deploy a commit to the Skeleton Labs Team on Vercel. A member of the Team first needs to authorize it. |
endigo9740
changed the title
|
@Hugos68 I can't tag you as a reviewer, but I'd welcome a review from you if you have time this weekend! |
| <script lang="ts"> | ||
| import { Accordion } from '$lib/index.js'; | ||
| let { childProps = {} } = $props(); | ||
| let chilPropsSpread = childProps ?? {}; |
There was a problem hiding this comment.
Any reason why you keep creating these xSpread props? This won't be reactive so we should watch out for that aswell.
There was a problem hiding this comment.
Yeah I mean to bring this up before all the issues today - when you try to spread the fallback {} there's a type error with Svelte check. This was the only way I was able to work around it. I'm open to suggestions. Just revert the change and run pnpm check to see what I mean.
| it(`Correctly applies the \`${prop}\` prop`, () => { | ||
| const value = 'bg-green-500'; | ||
| render(AccordionTest, { childProps: { [prop]: value } }); | ||
| const component = screen.getAllByTestId(testId)[0]; |
There was a problem hiding this comment.
This should be getByTestId right?
There was a problem hiding this comment.
There's multiple instances of the child components in Accordion.test.svelte. This queries them all, but then we can narrow this down by index. This is useful for some components like Segment Controllers and Tabs, where we can select between the first or second child, which might be active/inactive/etc.
getByTestId would probably be equivalent for grabbing the first instance on the page. But I like the explicit that we're selecting on of many.
| } | ||
| }); | ||
|
|
||
| describe('NavRail > NavTile', () => { |
There was a problem hiding this comment.
Instead of NavRail > NavTile you can do this:
describe('NavRail', () => {
// The tests for `NavRail`
describe('NavTile', () => {
});
});Nesting describes will then add those arrows in the console output and group them nicely.
There was a problem hiding this comment.
I suppose that's true, but I liked all the Tile tests next to one another. Either works for me tbh.
| import { describe, expect, it } from 'vitest'; | ||
| import { render, screen } from '@testing-library/svelte'; | ||
|
|
||
| // import { mockSnippet } from '$lib/internal/test-utils.js'; |
There was a problem hiding this comment.
Commented import, can be removed
| import type { Snippet } from 'svelte'; | ||
|
|
||
| /** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */ | ||
| export function mockSnippet(key: string): Snippet<[]> { |
There was a problem hiding this comment.
No critique, just wanted to say this is really cool!
Linked Issue
Closes #2363
Description
Checklist
Please read and apply all contribution requirements.
docs/,feature/,chore/,bugfix/nextbranch (NEVERdevormaster)pnpm checkin the root of the monorepopnpm formatin the root of the monorepopnpm lintin the root of the monorepopnpm testin the root of the monorepo/packageprojects, please supply a ChangesetChangsets
View our documentation to learn more about Changesets. To create a Changeset:
pnpm changesetand follow the prompts