additional test coverage

test/dummy/app/javascript/controllers/content_controller.js

@@ -3,8 +3,8 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["message"]
 
-  accepted({params: { newMessage }}) {
-    this.messageTarget.innerHTML = newMessage || 'Confirm Accepted'
+  accepted() {
+    this.messageTarget.innerHTML = 'Confirm Accepted'
   }
 
   rejected() {

test/dummy/app/views/confirms/custom.html.slim

@@ -1,5 +1,5 @@
 = render 'custom_confirm'
-.container.flex.flex-col.gap-md data-controller="content" data-action="confirm:accepted@document->content#accepted confirm:rejected@document->content#rejected" data-content-new-message-param="A confirm has been accepted"
+.container.flex.flex-col.gap-md data-controller="content" data-action="confirm:accepted@document->content#accepted confirm:rejected@document->content#rejected"
   h1 data-testid="header" data-content-target="message" Custom Confirm Test
   .full-width.flex.justify-center.gap-lg.margin-top-xl
     = tag.button 'Custom Message', type: :button, class: 'btn-delete btn--large', data: { action: 'confirm#perform', confirm_message_param: 'Custom Message Param' }

test/dummy/app/views/confirms/dialog.html.slim

@@ -1,5 +1,5 @@
 = render 'dialog_confirm'
-.container.flex.flex-col.gap-md data-controller="content" data-action="confirm:accepted@document->content#accepted confirm:rejected@document->content#rejected" data-content-new-message-param="A confirm has been accepted"
+.container.flex.flex-col.gap-md data-controller="content" data-action="confirm:accepted@document->content#accepted confirm:rejected@document->content#rejected"
   h1 data-testid="header" data-content-target="message" Manual Confirm Test
   .full-width.flex.justify-center.gap-lg.margin-top-xl
     = tag.button 'Custom Message', type: :button, class: 'btn-delete btn--large', data: { action: 'confirm#perform', confirm_message_param: 'Custom Message Param' }

test/dummy/app/views/confirms/div.html.slim

@@ -1,5 +1,5 @@
 = render 'confirm'
-.container.flex.flex-col.gap-md data-controller="content" data-action="confirm:accepted@document->content#accepted confirm:rejected@document->content#rejected" data-content-new-message-param="A confirm has been accepted"
+.container.flex.flex-col.gap-md data-controller="content" data-action="confirm:accepted@document->content#accepted confirm:rejected@document->content#rejected"
   h1 data-testid="header" data-content-target="message" Manual Confirm Test
   .full-width.flex.justify-center.gap-lg.margin-top-xl
     = tag.button 'Custom Message', type: :button, class: 'btn-delete btn--large', data: { action: 'confirm#perform', confirm_message_param: 'Custom Message Param' }

test/system/direct.spec.js

@@ -5,21 +5,52 @@ test.describe('direct invocation', () => {
   test ('direct invocation with a message', async ({ page }) => {
     await page.goto('localhost:3000/confirms/div')
 
-    const dialog = page.locator('#confirm')
-    const title = page.locator('#confirm-title')
+    const header = page.getByTestId('header');
+    const dialog = page.getByTestId('confirm')
+    const dialogTitle = page.locator('#confirm-title')
+    const defaultContent = await dialog.textContent() || ''
 
     page.evaluate(`
-      const confirm = new window.TurboConfirm()
-      confirm.confirm('My custom message')
+      const tc = new TurboConfirm()
+      tc.confirm('My custom message').then(response => {
+        if (response) {
+          document.querySelector('[data-testid="header"]').innerHTML = 'Direct Confirm Accepted'
+        } else {
+          document.querySelector('[data-testid="header"]').innerHTML = 'Direct Confirm Rejected'
+        }
+      })
     `)
 
     await expect(dialog).toBeVisible()
-    await expect(title).toContainText('My custom message')
+    await expect(dialog).not.toContainText(defaultContent)
+    await expect(dialogTitle).toContainText('My custom message')
 
-    await page.locator('#confirm-accept', {hasText: "Yes, I'm Sure"}).click()
+    await dialog.getByText("Cancel").click()
 
     await expect(dialog).not.toBeVisible()
-    await expect(title).toContainText('Are you sure?')
+    await expect(dialog).toContainText(defaultContent)
+    await expect(header).toContainText('Direct Confirm Rejected')
+
+    page.evaluate(`
+      const tc = new TurboConfirm()
+      tc.confirm('A different message').then(response => {
+        if (response) {
+          document.querySelector('[data-testid="header"]').innerHTML = 'Direct Confirm Accepted'
+        } else {
+          document.querySelector('[data-testid="header"]').innerHTML = 'Direct Confirm Rejected'
+        }
+      })
+    `)
+
+    await expect(dialog).toBeVisible()
+    await expect(dialog).not.toContainText(defaultContent)
+    await expect(dialogTitle).toContainText('A different message')
+
+    await dialog.getByText("Yes, I'm Sure").click()
+
+    await expect(dialog).not.toBeVisible()
+    await expect(dialog).toContainText(defaultContent)
+    await expect(header).toContainText('Direct Confirm Accepted')
   })
 })
 

test/system/stimulus.spec.js

@@ -8,6 +8,7 @@ test.describe('Stimulus Controller Integration', () => {
     const header = page.getByTestId('header');
     const button = page.getByText('Custom Message');
     const dialog = page.getByTestId('confirm');
+    const defaultContent = await dialog.textContent() || '';
     const customMessage = await button.getAttribute('data-confirm-message-param') || '';
 
     await expect(header).toContainText('Manual Confirm Test');
@@ -16,20 +17,35 @@ test.describe('Stimulus Controller Integration', () => {
     await button.click();
 
     await expect(dialog).toBeVisible();
+    await expect(dialog).not.toContainText(defaultContent);
+    await expect(dialog).toContainText(customMessage);
+
+    await dialog.getByText("Cancel").click();
+
+    await expect(dialog).not.toBeVisible();
+    await expect(dialog).toContainText(defaultContent);
+    await expect(header).toContainText('Confirm Rejected');
+
+    await button.click();
+
+    await expect(dialog).toBeVisible();
+    await expect(dialog).not.toContainText(defaultContent);
     await expect(dialog).toContainText(customMessage);
 
     await dialog.getByText("Yes, I'm Sure").click();
 
     await expect(dialog).not.toBeVisible();
-    await expect(header).toContainText('A confirm has been accepted');
+    await expect(dialog).toContainText(defaultContent);
+    await expect(header).toContainText('Confirm Accepted');
   })
 
   test('non-form button with dialog based confirm', async ({ page }) => {
     await page.goto('localhost:3000/confirms/dialog');
 
     const header = page.getByTestId('header');
-    const button = page.getByText('Custom Message');
+    const button = page.getByRole('button', { name: 'Custom Message' });
     const dialog = page.getByTestId('confirm');
+    const defaultContent = await dialog.textContent() || '';
     const customMessage = await button.getAttribute('data-confirm-message-param') || '';
 
     await expect(header).toContainText('Manual Confirm Test');
@@ -38,14 +54,38 @@ test.describe('Stimulus Controller Integration', () => {
     await button.click();
 
     await expect(dialog).toHaveAttribute('open');
+    await expect(dialog).not.toContainText(defaultContent);
+    await expect(dialog).toContainText(customMessage);
+
+    await dialog.getByText("Cancel").click();
+
+    await expect(dialog).not.toHaveAttribute('open');
+    await expect(dialog).toContainText(defaultContent);
+    await expect(header).toContainText('Confirm Rejected');
+
+    await button.click();
+
+    await expect(dialog).toHaveAttribute('open');
+    await expect(dialog).not.toContainText(defaultContent);
     await expect(dialog).toContainText(customMessage);
 
     await dialog.getByText("Yes, I'm Sure").click();
 
     await expect(dialog).not.toHaveAttribute('open');
-    await expect(header).toContainText('A confirm has been accepted');
-  })
+    await expect(dialog).toContainText(defaultContent);
+    await expect(header).toContainText('Confirm Accepted');
+
+    await button.click();
 
-  // TODO: dialog element escape key press to cancel
-  // custom config
+    await expect(dialog).toHaveAttribute('open');
+    await expect(dialog).not.toContainText(defaultContent);
+    await expect(dialog).toContainText(customMessage);
+
+    await page.keyboard.press('Escape');
+
+    await expect(dialog).not.toHaveAttribute('open');
+    await expect(dialog).toContainText(defaultContent);
+    await expect(header).toContainText('Confirm Rejected');
+  })
+  // TODO: custom config
 })