Add playwright test

e2e/client/playwright/settings.metadata-editor-block.spec.ts

@@ -0,0 +1,33 @@
+import {test} from '@playwright/test';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test('creation and persistance of a custom block', async ({page}) => {
+    await restoreDatabaseSnapshot();
+    await page.goto('/#/settings/vocabularies');
+    await page.getByRole('button', {name: 'Custom blocks'}).click();
+    await page.getByRole('button', {name: 'Add New'}).click();
+
+    // Input sample data
+    await page.locator(s('vocabulary-edit-content', 'vocabulary-edit--id')).fill('test_vocabulary');
+    await page.locator(s('vocabulary-edit-content', 'vocabulary-edit-field--name')).fill('test_vocabulary');
+    await page.locator(s('vocabulary-edit-content', 'editor3')).getByRole('textbox').fill('test data');
+
+    // Add formatting options to template editor
+    await page.locator(s('vocabulary-edit-content', 'open-popover')).click();
+    await page.locator(s('tree-select-popover')).getByRole('button', {name: 'h2'}).click();
+    await page.locator(s('editor3')).getByText('test data').click();
+
+    // Apply formatting option to sample text data
+    await page.locator(s('editor3', 'formatting-option=H2')).click();
+
+    await page.locator(s('vocabulary-edit-footer')).getByRole('button', {name: 'Save'}).click();
+
+    // Edit custom block
+    await page.locator(s('vocabulary-item=test_vocabulary')).hover().then(async () => {
+        await page.locator(s('vocabulary-item=test_vocabulary', 'vocabulary-item--start-editing')).click();
+
+        // Remove formatting option
+        await page.locator(s('editor3', 'formatting-option=H2')).click();
+        await page.locator(s('vocabulary-edit-footer')).getByRole('button', {name: 'Save'}).click();
+    });
+});

scripts/apps/vocabularies/views/settings.html

@@ -10,7 +10,7 @@ <h2 class="sd-page__page-heading" translate>Metadata management</h2>
             </button>
         </div>
 
-        <div class="sd-page__header sd-page__header--white">
+        <div data-test-id="metadata-navigation" class="sd-page__header sd-page__header--white">
             <ul class="nav nav-tabs">
                 <li ng-class="{active: tab === 'vocabularies'}">
                     <button ng-click="tab = 'vocabularies'" translate>Vocabularies</button>

scripts/apps/vocabularies/views/vocabulary-config-modal.html

@@ -6,7 +6,7 @@ <h3 class="modal__heading" ng-show="vocabulary._id"><span translate>Edit</span>
             <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</span></h3>
             <a href="" class="icn-btn close-modal" ng-click="cancel()"><i class="icon-close-small"></i></a>
         </div>
-        <div class="modal__body modal__body--with-navigation">
+        <div class="modal__body modal__body--with-navigation" data-test-id="vocabulary-edit-content">
             <ul class="modal__navigation" ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                 <li ng-class="{'active': tab === 'general'}">
                     <button ng-click="setTab('general')" translate>General</button>
@@ -27,8 +27,16 @@ <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</spa
                             ng-class="{'sd-line-input--invalid': issues._id, 'sd-line-input--required': !vocabulary._id}"
                             ng-if="!vocabulary._links || !matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                             <label for="cv_id" class="sd-line-input__label" translate>ID</label>
-                            <input id="cv_id" class="sd-line-input__input" type="text" ng-model="vocabulary._id"
-                                ng-pattern="idRegex" ng-readonly="!!vocabulary._links" required>
+                            <input
+                                id="cv_id"
+                                class="sd-line-input__input"
+                                type="text"
+                                ng-model="vocabulary._id"
+                                ng-pattern="idRegex"
+                                ng-readonly="!!vocabulary._links"
+                                required
+                                data-test-id="vocabulary-edit--id"
+                            >
                             <div class="sd-line-input__message" ng-show="issues._id.unique || issues._id.deleted"
                                 translate>ID must be unique.</div>
                             <div class="sd-line-input__message" ng-show="issues._id.conflict" translate>ID conflicts
@@ -309,7 +317,7 @@ <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</spa
             </div>
         </div>
 
-        <div class="modal__footer">
+        <div class="modal__footer" data-test-id="vocabulary-edit-footer">
             <div class="button-group button-group--end button-group--comfort" role="group">
                 <button
                     id="cancel-edit-btn"

scripts/apps/vocabularies/views/vocabulary-config.html

@@ -63,6 +63,7 @@
                   class="sd-list-item sd-shadow--z1"
                   ng-repeat="vocabulary in getVocabulariesForTag(tag, tab) | orderBy:'display_name|translate' | filter: filterVocabulary track by vocabulary._id"
                   data-test-id="vocabulary-item"
+                  data-test-value="{{ vocabulary.display_name }}"
                 >
                     <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
                         <div class="sd-list-item__row">

scripts/core/editor3/components/toolbar/StyleButton.tsx

@@ -91,7 +91,16 @@ export default class StyleButton extends React.Component<IPropsStyleButton> {
                 onMouseDown={this.onToggle}
                 style={this.props.uiTheme == null ? undefined : {color: this.props.uiTheme.textColor}}
             >
-                {iconClass ? <i className={iconClass} /> : <b>{label}</b>}
+                {iconClass
+                    ? (
+                        <i
+                            data-test-id="formatting-option"
+                            data-test-value={styleTooltips[label]}
+                            className={iconClass}
+                        />
+                    )
+                    : <b>{label}</b>
+                }
             </span>
         );
     }