Add automated functional acceptance testing for Webshare with webship-js (Playwright + Cucumber-js), Drupal Canvas + Drupal CMS support, and MkDocs documentation
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3591899. -->
Reported by: [rajab natshah](https://www.drupal.org/user/1414312)
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<ul>
<li>The share rail rendered through three different paths (block, Drupal Canvas, custom Twig) without a single source of truth,<br>
so improvements had to be made in multiple places.</li>
<li>Enabling or disabling a platform did not invalidate the anonymous page cache — changes appeared stale until a manual cache<br>
rebuild.</li>
<li>The settings form id contained a dot (<code>webshare.config_form</code>), producing a malformed HTML id and breaking<br>
automation that targets the form by selector.</li>
<li>No automated coverage existed for Drupal CMS, where the Mercury theme delegates header and footer rendering to Drupal Canvas<br>
<code>page_region</code> entities instead of classic block layout.</li>
<li>The module had no reference documentation for site builders, administrators, or developers.</li>
</ul>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<ul>
<li><strong>Single render path:</strong> The block, the Drupal Canvas component, and a custom Twig embed all render the same<br>
<code>webshare:share</code> Single-Directory Component.</li>
<li><strong>Drupal Canvas integration:</strong> The SDC is auto-exposed to Canvas as <code>sdc.webshare.share</code> and<br>
exercised on Canvas pages, content templates, and page-region entities.</li>
<li><strong>Drupal CMS support:</strong> A dedicated test site and feature suite for the <code>drupal/cms</code> distribution on<br>
the Mercury theme, with the share rail placed in <code>mercury.header</code> and <code>mercury.footer</code> Canvas<br>
page-regions.</li>
<li><strong>Cache invalidation fix:</strong> The rail now carries the <code>webshare_platforms</code> cache tag; saving the<br>
settings form or adding, editing, or deleting a platform invalidates it — every cached page that contains the rail is refreshed<br>
automatically.</li>
<li><strong>Settings form fix:</strong> The form id is now <code>webshare_config_form</code> and the rendered HTML id is the<br>
clean <code>webshare-config-form</code>.</li>
<li><strong>BDD test suite:</strong> 82 webship-js scenarios / 472 steps covering both flavours — smoke, front-end rendering,<br>
all 13 platforms, accessibility, responsive layouts, admin form, platform add/edit/delete modal, access control, Canvas, and<br>
Drupal CMS. Pure browser-driven steps backed by a 281-entry named-selector registry.</li>
<li><strong>CI:</strong> Two GitLab browser-test jobs (Drupal Standard + Drupal CMS) plus validate-stage jobs (cspell, eslint,<br>
stylelint) reproducible locally through <code>gitlab-ci-local</code>.</li>
<li><strong>Documentation site:</strong> MkDocs Material site under <code>docs/</code> with Introduction, User, Administrator,<br>
Developer, and FAQ sections — builds cleanly under <code>mkdocs build --strict</code>.</li>
</ul>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<ul>
<li>✅ File an issue</li>
<li>✅ Addition/Change/Update/Fix</li>
<li>✅ Merge request, Patch, or Commit</li>
<li>✅ Testing to ensure no regression</li>
<li>✅ Automated unit testing coverage</li>
<li>✅ Automated functional testing coverage</li>
<li>➖ UX/UI designer responsibilities</li>
<li>➖ Readability</li>
<li>➖ Accessibility</li>
<li>➖ Performance</li>
<li>➖ Security</li>
<li>➖ Documentation</li>
<li>✅ Code review by maintainers</li>
<li>✅ Full testing and approval</li>
<li>✅ Credit contributors</li>
<li>✅ Review with the product owner</li>
<li>✅ Release notes snippet</li>
<li>✅ Release <a href="https://www.drupal.org/project/webshare/releases/2.0.0-alpha1">webshare-2.0.0-alpha1</a></li>
</ul>
<h3 id="summary-ui-changes">User interface changes</h3>
<ul>
<li>N/A</li>
</ul>
<h3 id="summary-api-changes">API changes</h3>
<ul>
<li>N/A</li>
</ul>
<h3 id="summary-data-model-changes">Data model changes</h3>
<ul>
<li>N/A</li>
</ul>
<h3 id="summary-release-notes">Release notes snippet</h3>
<ul>
<li>ci: <a href="https://www.drupal.org/i/3591899">#3591899</a> Add automated functional acceptance testing for Webshare with webship-js (Playwright + Cucumber-js), Drupal Canvas + Drupal CMS support, and MkDocs documentation</li>
</ul>
issue