Add action option string to be passed to toast showToast()

This partially implements the action option for showToast(),
as outlined in the explainer at
https://github.com/jackbsteinberg/std-toast/blob/32237007b068d690f39002d364367f3c097f1a97/README.md#showtoastmessage-options.
For now it only handles the string or undefined cases;
the Element case will be handled in a follow-up CL once the action setter is implemented.

BUG=972945

Change-Id: I82556801a6586c89cd506669f935488e049c47c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1684466
Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org>
Reviewed-by: Fergal Daly <fergal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676168}

third_party/blink/renderer/core/script/resources/layered_api/elements/toast/index.mjs

@@ -120,10 +120,23 @@ delete StdToastElement.prototype.attributeChangedCallback;
 delete StdToastElement.prototype.observedAttributes;
 delete StdToastElement.prototype.connectedCallback;
 
-export function showToast(message, options) {
+export function showToast(message, options = {}) {
   const toast = new StdToastElement(message);
+
+  const {action, ...showOptions} = options;
+  if (action !== undefined) {
+    const actionButton = document.createElement('button');
+
+    // Unlike String(), this performs the desired JavaScript ToString operation.
+    // https://gist.github.com/domenic/82adbe7edc4a33a70f42f255479cec39
+    actionButton.textContent = `${action}`;
+
+    actionButton.setAttribute('slot', 'action');
+    toast.appendChild(actionButton);
+  }
+
   document.body.append(toast);
-  toast.show(options);
+  toast.show(showOptions);
 
   return toast;
 }

third_party/blink/web_tests/external/wpt/std-toast/actions.html

@@ -8,7 +8,8 @@
 <main></main>
 
 <script type="module">
-import { testActionToast, testToastElement } from './resources/helpers.js';
+import { testActionToast, testToastElement, assertActionButtonOnToast } from './resources/helpers.js';
+import { showToast } from 'std:elements/toast';
 
 testActionToast((toast) => {
     assert_equals(toast.action.textContent, 'action');
@@ -28,5 +29,77 @@ testToastElement((toast) => {
         <button slot="action" id="second">second</button>`;
 
     assert_equals(toast.action, toast.querySelector('#first'));
-})
+}, 'toast action returns the first item with the action slot');
+
+test(() => {
+    const toast = showToast('Message', {action: 'action'});
+    const actionButton = toast.querySelector('button');
+
+    assertActionButtonOnToast(actionButton, toast);
+}, 'passing an action via showToast creates a button');
+
+test(() => {
+    const actionMarkup = '<b>strong text</b>';
+    const toast = showToast('Message', {action: actionMarkup});
+    const actionButton = toast.querySelector('button');
+
+    assert_equals(actionButton.textContent, actionMarkup);
+    assert_equals(toast.querySelector('b'), null);
+}, 'passing markup to the action option represents as text');
+
+test(() => {
+    const toast = document.createElement('std-toast');
+    toast.textContent = 'Message';
+    toast.show({action: 'action'});
+    const actionButton = toast.querySelector('button');
+
+    assert_equals(actionButton, null);
+}, 'passing action option to show does not create a button');
+
+test(() => {
+    const toast = showToast('Message', {action: null});
+    const actionButton = toast.querySelector('button');
+
+    assertActionButtonOnToast(actionButton, toast);
+    assert_equals(actionButton.textContent, 'null');
+}, 'passing non-string (null) as action option stringifies it and creates an action button');
+
+test(() => {
+    const toast = showToast('Message', {action: false});
+    const actionButton = toast.querySelector('button');
+
+    assertActionButtonOnToast(actionButton, toast);
+    assert_equals(actionButton.textContent, 'false');
+}, 'passing non-string (false) as action option stringifies it and creates an action button');
+
+test(() => {
+    const toast = showToast('Message', {action: 0});
+    const actionButton = toast.querySelector('button');
+
+    assertActionButtonOnToast(actionButton, toast);
+    assert_equals(actionButton.textContent, '0');
+}, 'passing non-string (0) as action option stringifies it and creates an action button');
+
+test(() => {
+    const toast = showToast('Message', {action: 1});
+    const actionButton = toast.querySelector('button');
+
+    assertActionButtonOnToast(actionButton, toast);
+    assert_equals(actionButton.textContent, '1');
+}, 'passing non-string (1) as action option stringifies it and creates an action button');
+
+test(() => {
+    const toast = showToast('Message', {action: {field: 'value'}});
+    const actionButton = toast.querySelector('button');
+
+    assertActionButtonOnToast(actionButton, toast);
+    assert_equals(actionButton.textContent, '[object Object]');
+}, 'passing non-string ({field: value}) as action option stringifies it and creates an action button');
+
+test(() => {
+    const toast = showToast('Message', {});
+    const actionButton = toast.querySelector('button');
+
+    assert_equals(actionButton, null);
+}, 'passing non-string (undefined) as action option does not create an action button');
 </script>

third_party/blink/web_tests/external/wpt/std-toast/resources/helpers.js

@@ -64,6 +64,12 @@ export const assertToastNotShown = (toast) => {
     assert_false(toast.open);
 };
 
+export const assertActionButtonOnToast = (action, toast) => {
+    assert_equals(toast.action, action);
+    assert_equals(action.getAttribute('slot'), 'action');
+    assert_equals(action, toast.querySelector('button'));
+};
+
 export class EventCollector {
     events = [];