diff --git a/.changeset/khaki-papayas-knock.md b/.changeset/khaki-papayas-knock.md new file mode 100644 index 000000000000..29ee5ce05ea2 --- /dev/null +++ b/.changeset/khaki-papayas-knock.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Fixes a case where rewriting would conflict with the actions internal middleware diff --git a/packages/astro/e2e/actions-blog.test.js b/packages/astro/e2e/actions-blog.test.js index 1fc794279645..fe4660b817b1 100644 --- a/packages/astro/e2e/actions-blog.test.js +++ b/packages/astro/e2e/actions-blog.test.js @@ -26,30 +26,68 @@ test.describe('Astro Actions - Blog', () => { test('Comment action - validation error', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/blog/first-post/')); - const authorInput = page.locator('input[name="author"]'); - const bodyInput = page.locator('textarea[name="body"]'); + const form = page.getByTestId('client'); + const authorInput = form.locator('input[name="author"]'); + const bodyInput = form.locator('textarea[name="body"]'); await authorInput.fill('Ben'); await bodyInput.fill('Too short'); - const submitButton = page.getByLabel('Post comment'); + const submitButton = form.getByRole('button'); await submitButton.click(); - await expect(page.locator('p[data-error="body"]')).toBeVisible(); + await expect(form.locator('p[data-error="body"]')).toBeVisible(); + }); + + + test('Comment action - progressive fallback validation error', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/blog/first-post/')); + + const form = page.getByTestId('progressive-fallback'); + const authorInput = form.locator('input[name="author"]'); + const bodyInput = form.locator('textarea[name="body"]'); + + await authorInput.fill('Ben'); + await bodyInput.fill('Too short'); + + const submitButton = form.getByRole('button'); + await submitButton.click(); + + await expect(form.locator('p[data-error="body"]')).toBeVisible(); + }); + +test('Comment action - progressive fallback success', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/blog/first-post/')); + + const form = page.getByTestId('progressive-fallback'); + const authorInput = form.locator('input[name="author"]'); + const bodyInput = form.locator('textarea[name="body"]'); + + const body = 'Fallback - This should be long enough.'; + await authorInput.fill('Ben'); + await bodyInput.fill(body); + + const submitButton = form.getByRole('button'); + await submitButton.click(); + + const comments = page.getByTestId('server-comments'); + await expect(comments).toBeVisible(); + await expect(comments).toContainText(body); }); test('Comment action - custom error', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/blog/first-post/?commentPostIdOverride=bogus')); - const authorInput = page.locator('input[name="author"]'); - const bodyInput = page.locator('textarea[name="body"]'); + const form = page.getByTestId('client'); + const authorInput = form.locator('input[name="author"]'); + const bodyInput = form.locator('textarea[name="body"]'); await authorInput.fill('Ben'); await bodyInput.fill('This should be long enough.'); - const submitButton = page.getByLabel('Post comment'); + const submitButton = form.getByRole('button'); await submitButton.click(); - const unexpectedError = page.locator('p[data-error="unexpected"]'); + const unexpectedError = form.locator('p[data-error="unexpected"]'); await expect(unexpectedError).toBeVisible(); await expect(unexpectedError).toContainText('NOT_FOUND: Post not found'); }); @@ -57,18 +95,19 @@ test.describe('Astro Actions - Blog', () => { test('Comment action - success', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/blog/first-post/')); - const authorInput = page.locator('input[name="author"]'); - const bodyInput = page.locator('textarea[name="body"]'); + const form = page.getByTestId('client'); + const authorInput = form.locator('input[name="author"]'); + const bodyInput = form.locator('textarea[name="body"]'); - const body = 'This should be long enough.'; + const body = 'Client: This should be long enough.'; await authorInput.fill('Ben'); await bodyInput.fill(body); - const submitButton = page.getByLabel('Post comment'); + const submitButton = form.getByRole('button'); await submitButton.click(); - const comment = await page.getByTestId('comment'); - await expect(comment).toBeVisible(); - await expect(comment).toContainText(body); + const comments = page.getByTestId('client-comments'); + await expect(comments).toBeVisible(); + await expect(comments).toContainText(body); }); }); diff --git a/packages/astro/e2e/fixtures/actions-blog/src/components/BaseHead.astro b/packages/astro/e2e/fixtures/actions-blog/src/components/BaseHead.astro index 344124012bbf..5a2114003d5d 100644 --- a/packages/astro/e2e/fixtures/actions-blog/src/components/BaseHead.astro +++ b/packages/astro/e2e/fixtures/actions-blog/src/components/BaseHead.astro @@ -20,10 +20,6 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; - - - - diff --git a/packages/astro/e2e/fixtures/actions-blog/src/components/PostComment.tsx b/packages/astro/e2e/fixtures/actions-blog/src/components/PostComment.tsx index 87d2154893da..f73d152e12bf 100644 --- a/packages/astro/e2e/fixtures/actions-blog/src/components/PostComment.tsx +++ b/packages/astro/e2e/fixtures/actions-blog/src/components/PostComment.tsx @@ -16,6 +16,7 @@ export function PostComment({ <>
{ e.preventDefault(); const form = e.target as HTMLFormElement; @@ -34,7 +35,7 @@ export function PostComment({ {unexpectedError &&

{unexpectedError}

} -