chore: update Svelte tests to be more Testing Library-y (#2174)

Author: crutchcorn

packages/svelte-form/tests/array-swap.svelte

@@ -12,9 +12,9 @@
 
 <form.Field name="test" mode="array">
   {#snippet children(field)}
-    <div id="val">{JSON.stringify(field.state.value)}</div>
+    <div data-testid="val">{JSON.stringify(field.state.value)}</div>
     <button
-      id="swap"
+      data-testid="swap"
       type="button"
       onclick={() => form.swapFieldValues('test', 0, 1)}
     >

packages/svelte-form/tests/array.svelte

@@ -12,8 +12,8 @@
 
 <form.Field name="test" mode="array">
   {#snippet children(field)}
-    <div id="val">{JSON.stringify(field.state.value)}</div>
-    <button id="push" type="button" onclick={() => field.pushValue('b')}>
+    <div data-testid="val">{JSON.stringify(field.state.value)}</div>
+    <button data-testid="push" type="button" onclick={() => field.pushValue('b')}>
       push
     </button>
   {/snippet}

packages/svelte-form/tests/array.test.ts

@@ -8,18 +8,18 @@ const user = userEvent.setup()
 
 describe('Svelte Field array mode', () => {
   it('should support array mode', async () => {
-    const { container } = render(TestForm)
-    expect(container.querySelector('#val')!.textContent).toBe('["a"]')
-    await user.click(container.querySelector<HTMLButtonElement>('#push')!)
-    expect(container.querySelector('#val')!.textContent).toBe('["a","b"]')
+    const { getByTestId, getByRole } = render(TestForm)
+    expect(getByTestId('val')).toHaveTextContent('["a"]')
+    await user.click(getByRole('button', { name: 'push' }))
+    expect(getByTestId('val')).toHaveTextContent('["a","b"]')
   })
 })
 
 describe('Svelte Field array mode swapFieldValues', () => {
   it('should rerender on swapFieldValues even when length is unchanged', async () => {
-    const { container } = render(SwapForm)
-    expect(container.querySelector('#val')!.textContent).toBe('["a","b"]')
-    await user.click(container.querySelector<HTMLButtonElement>('#swap')!)
-    expect(container.querySelector('#val')!.textContent).toBe('["b","a"]')
+    const { getByTestId, getByRole } = render(SwapForm)
+    expect(getByTestId('val')).toHaveTextContent('["a","b"]')
+    await user.click(getByRole('button', { name: 'swap' }))
+    expect(getByTestId('val')).toHaveTextContent('["b","a"]')
   })
 })

packages/svelte-form/tests/large.svelte

@@ -39,4 +39,4 @@
   </form.AppField>
 </form>
 
-<pre>{JSON.stringify(formState.current, null, 2)}</pre>
+<pre data-testid="form-state">{JSON.stringify(formState.current, null, 2)}</pre>

packages/svelte-form/tests/large.test.ts

@@ -7,19 +7,17 @@ const user = userEvent.setup()
 
 describe('Svelte Tests', () => {
   it('should have initial values', () => {
-    const { container } = render(TestForm)
-    expect(container.querySelector<HTMLInputElement>('#firstName')).toHaveValue(
-      getSampleData().firstName,
-    )
+    const { getByLabelText } = render(TestForm)
+    expect(getByLabelText('First name')).toHaveValue(getSampleData().firstName)
   })
 
   it('should mirror user input', async () => {
-    const { container } = render(TestForm)
-    const firstName = container.querySelector<HTMLInputElement>('#firstName')!
+    const { getByLabelText, getByTestId } = render(TestForm)
+    const firstName = getByLabelText('First name')
     const firstNameValue = 'Jobs'
     await user.type(firstName, firstNameValue)
 
-    const form = JSON.parse(container.querySelector('pre')!.textContent!)
+    const form = JSON.parse(getByTestId('form-state').textContent!)
     expect(form.values.firstName).toBe(
       getSampleData().firstName + firstNameValue,
     )

packages/svelte-form/tests/simple.svelte

@@ -121,4 +121,4 @@
   Change Sample Data
 </button>
 
-<pre>{JSON.stringify(formState.current, null, 2)}</pre>
+<pre data-testid="form-state">{JSON.stringify(formState.current, null, 2)}</pre>

packages/svelte-form/tests/simple.test.ts

@@ -7,57 +7,51 @@ const user = userEvent.setup()
 
 describe('Svelte Tests', () => {
   it('should have initial values', () => {
-    const { container } = render(TestForm)
-    expect(container.querySelector<HTMLInputElement>('#firstName')).toHaveValue(
-      getSampleData().firstName,
-    )
-    expect(container.querySelector<HTMLInputElement>('#lastName')).toHaveValue(
-      getSampleData().lastName,
-    )
+    const { getByLabelText } = render(TestForm)
+    expect(getByLabelText('First Name')).toHaveValue(getSampleData().firstName)
+    expect(getByLabelText('Last Name')).toHaveValue(getSampleData().lastName)
   })
 
   it('should change initial values when defaults update', async () => {
-    const { container } = render(TestForm)
-    await user.click(container.querySelector<HTMLButtonElement>('#change')!)
+    const { getByLabelText, getByRole } = render(TestForm)
+    await user.click(getByRole('button', { name: 'Change Sample Data' }))
 
-    expect(container.querySelector<HTMLInputElement>('#firstName')).toHaveValue(
-      getSampleData().firstName,
-    )
+    expect(getByLabelText('First Name')).toHaveValue(getSampleData().firstName)
     expect(getSampleData().firstName).toBe('Julian')
   })
 
   it('should mirror user input', async () => {
-    const { container } = render(TestForm)
-    const lastName = container.querySelector<HTMLInputElement>('#lastName')!
+    const { getByLabelText, getByTestId } = render(TestForm)
+    const lastName = getByLabelText('Last Name')
     const lastNameValue = 'Jobs'
     await user.type(lastName, lastNameValue)
 
-    const form = JSON.parse(container.querySelector('pre')!.textContent!)
+    const form = JSON.parse(getByTestId('form-state').textContent!)
     expect(form.values.lastName).toBe(lastNameValue)
   })
 
   it('Reset form to initial value', async () => {
-    const { container } = render(TestForm)
-    const firstName = container.querySelector<HTMLInputElement>('#firstName')!
+    const { getByLabelText, getByRole } = render(TestForm)
+    const firstName = getByLabelText('First Name')
     await user.type(firstName, '-Joseph')
 
     expect(firstName).toHaveValue(getSampleData().firstName + '-Joseph')
 
-    await user.click(container.querySelector<HTMLButtonElement>('#reset')!)
+    await user.click(getByRole('button', { name: 'Reset' }))
     expect(firstName).toHaveValue(getSampleData().firstName)
   })
 
   it('should display validation', async () => {
-    const { container } = render(TestForm)
-    const lastName = container.querySelector<HTMLInputElement>('#lastName')!
+    const { getByLabelText, getByText, queryByText } = render(TestForm)
+    const lastName = getByLabelText('Last Name')
     const lastNameValue = 'Jo'
     await user.type(lastName, lastNameValue)
     expect(lastName).toHaveValue('Jo')
-    expect(container.querySelector('em')?.textContent).toBe('Not long enough')
+    expect(getByText('Not long enough')).toBeInTheDocument()
 
     await user.type(lastName, lastNameValue)
 
     expect(lastName.getAttribute('error-text')).toBeFalsy()
-    expect(container.querySelector('em')).not.toBeInTheDocument()
+    expect(queryByText('Not long enough')).not.toBeInTheDocument()
   })
 })