diff --git a/packages/svelte-form/tests/array-swap.svelte b/packages/svelte-form/tests/array-swap.svelte index 57604fc14..890e7e722 100644 --- a/packages/svelte-form/tests/array-swap.svelte +++ b/packages/svelte-form/tests/array-swap.svelte @@ -12,9 +12,9 @@ {#snippet children(field)} -
{JSON.stringify(field.state.value)}
+
{JSON.stringify(field.state.value)}
{/snippet} diff --git a/packages/svelte-form/tests/array.test.ts b/packages/svelte-form/tests/array.test.ts index 20f076677..2ecce8b61 100644 --- a/packages/svelte-form/tests/array.test.ts +++ b/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('#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('#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"]') }) }) diff --git a/packages/svelte-form/tests/large.svelte b/packages/svelte-form/tests/large.svelte index 30ee0f575..9cc4438e7 100644 --- a/packages/svelte-form/tests/large.svelte +++ b/packages/svelte-form/tests/large.svelte @@ -39,4 +39,4 @@ -
{JSON.stringify(formState.current, null, 2)}
+
{JSON.stringify(formState.current, null, 2)}
diff --git a/packages/svelte-form/tests/large.test.ts b/packages/svelte-form/tests/large.test.ts index 6d16e9c1c..0d7b2ab6e 100644 --- a/packages/svelte-form/tests/large.test.ts +++ b/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('#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('#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, ) diff --git a/packages/svelte-form/tests/simple.svelte b/packages/svelte-form/tests/simple.svelte index 147556ea0..966f587ac 100644 --- a/packages/svelte-form/tests/simple.svelte +++ b/packages/svelte-form/tests/simple.svelte @@ -121,4 +121,4 @@ Change Sample Data -
{JSON.stringify(formState.current, null, 2)}
+
{JSON.stringify(formState.current, null, 2)}
diff --git a/packages/svelte-form/tests/simple.test.ts b/packages/svelte-form/tests/simple.test.ts index deb947181..9280c234c 100644 --- a/packages/svelte-form/tests/simple.test.ts +++ b/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('#firstName')).toHaveValue( - getSampleData().firstName, - ) - expect(container.querySelector('#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('#change')!) + const { getByLabelText, getByRole } = render(TestForm) + await user.click(getByRole('button', { name: 'Change Sample Data' })) - expect(container.querySelector('#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('#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('#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('#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('#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() }) })