@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.test.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect, beforeEach } from 'vitest';
+import { describe, test, expect, beforeEach, vi } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import { createPinia, setActivePinia } from 'pinia';
 import ContentSettingsItemField from './ContentSettingsItemField.vue';
@@ -8,6 +8,13 @@ import {
   useBrandPageMakerUserStore,
 } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import TextField from '../text-field/TextField.vue';
+import { CONTENT_SETTINGS_CONFIGS } from '@brand-page-maker/constants/config-settings-constant';
+import {
+  createInitialRequestPaymentContent,
+  createInitialShopContent,
+  createInitialSupportMeContent,
+} from '@brand-page-maker/models';
 
 /**
  * BP-5886 regression: `isInline` and `showToggle` are two DIFFERENT layouts, and
@@ -118,6 +125,45 @@ describe('ContentSettingsItemField — RTE re-seed on colour strategy', () => {
     expect((wrapper.vm as any).richTextEditorKey).toBe(keyBefore + 1);
   });
 
+  // "Apply changes to all" resyncs the other editors but not the one it ran from, which has
+  // already relinked its own doc and must keep it (and its focus).
+  test('a resync bump that excepts this field leaves its editor mounted; another field still remounts', async () => {
+    const wrapper = mountField(TITLE_FIELD, 'banner-section', true);
+    const keyBefore = (wrapper.vm as any).richTextEditorKey;
+
+    useHistoryStore().markRteResync({ except: { id: 'c-1', name: 'title' } });
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).richTextEditorKey).toBe(keyBefore);
+
+    useHistoryStore().markRteResync({
+      except: { id: 'c-1', name: 'description' },
+    });
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).richTextEditorKey).toBe(keyBefore + 1);
+  });
+
+  // Watchers batch, so two resyncs in one tick reach the field as one; the one that didn't except it
+  // still needs its remount.
+  test('two resyncs in one tick remount the field unless both except it', async () => {
+    const wrapper = mountField(TITLE_FIELD, 'banner-section', true);
+    const keyBefore = (wrapper.vm as any).richTextEditorKey;
+    const self = { id: 'c-1', name: 'title' };
+
+    useHistoryStore().markRteResync();
+    useHistoryStore().markRteResync({ except: self });
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).richTextEditorKey).toBe(keyBefore + 1);
+
+    useHistoryStore().markRteResync({ except: self });
+    useHistoryStore().markRteResync({ except: self });
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).richTextEditorKey).toBe(keyBefore + 1);
+  });
+
   test('a resync bump does NOT remount a plain (non-RTE) field', async () => {
     // Same field, but the RTE feature is off, so it renders a plain textarea —
     // nothing anchored to a live editor, so no remount should be forced.
@@ -132,3 +178,84 @@ describe('ContentSettingsItemField — RTE re-seed on colour strategy', () => {
     expect((wrapper.vm as any).richTextEditorKey).toBe(keyBefore);
   });
 });
+
+/**
+ * A change to a `text-items` field can add a new item with no colour
+ * (`TextItemsField.addOption`), so the field-change handler must re-bake the section's
+ * contrast — the same lever as a `text-style` change. Without it a new brand-site text item
+ * renders uncoloured (the reported navy fallback).
+ */
+describe('ContentSettingsItemField — contrast re-bake on field change', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  const mountAndChange = (fieldType: string) => {
+    const store = useUiContentSettingsStore();
+
+    (store as any).items = [
+      { id: 'c-1', settings: { content: { type: 'text' }, fields: {} } },
+    ];
+
+    const rebake = vi
+      .spyOn(store as any, 'applyCardContrastToItem')
+      .mockImplementation(() => undefined);
+
+    vi.spyOn(store as any, 'updateItemValue').mockImplementation(
+      () => undefined,
+    );
+
+    const wrapper = shallowMount(ContentSettingsItemField as any, {
+      props: { id: 'c-1', field: { name: 'f', type: fieldType }, type: 'text' },
+    });
+
+    (wrapper.vm as any).onFieldChanged({ id: 'c-1', name: 'f', value: [] });
+
+    return rebake;
+  };
+
+  test('re-bakes after a text-items change', () => {
+    expect(mountAndChange('text-items')).toHaveBeenCalledWith({ id: 'c-1' });
+  });
+
+  test('re-bakes after a text-style change', () => {
+    expect(mountAndChange('text-style')).toHaveBeenCalledWith({ id: 'c-1' });
+  });
+
+  test('does not re-bake for an unrelated field type', () => {
+    expect(mountAndChange('textarea')).not.toHaveBeenCalled();
+  });
+});
+
+// The payment and shop checkout success message is its own rich text: its editor reads the
+// section's `successMessageStyle`, so the role dropdown shows that role, not an empty one.
+describe('ContentSettingsItemField — payment success message role', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  test.each([
+    ['request-payment', createInitialRequestPaymentContent],
+    ['support-me', createInitialSupportMeContent],
+    ['shop-section', createInitialShopContent],
+  ] as const)(
+    'a new %s hands the success message editor its own role',
+    (type, factory) => {
+      const content = factory();
+
+      (useUiContentSettingsStore() as any).items = [
+        { id: 'c-1', settings: { content } },
+      ];
+      useBrandPageMakerUserStore().features.canUseRichTextEditor = true;
+
+      const field = {
+        ...(CONTENT_SETTINGS_CONFIGS() as any)[type].fields.successMessage,
+        name: 'successMessage',
+      };
+      const wrapper = shallowMount(ContentSettingsItemField as any, {
+        props: { id: 'c-1', field, type },
+      });
+      // The stub drops the mixin-declared props, so they arrive as attrs.
+      const editor = wrapper.findComponent(TextField).vm.$attrs;
+
+      expect(editor['show-rich-text-editor']).toBe(true);
+      expect(editor.styles).toEqual({ textStyleType: 'paragraph2' });
+    },
+  );
+});

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.vue

@@ -28,6 +28,7 @@
                 'tw-w-16 tw-h-16': fieldType !== 'url',
                 'tw-w-11 tw-h-11 tw-my-2': fieldType === 'url',
               }"
+              data-test-tag="draggable-item-thumbnail"
               @click="replaceItemImage(index)"
             >
               <img

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.ts

@@ -38,7 +38,6 @@ import { pageStrategyAnchors } from '@shared/color-strategies/page-anchors';
 import type { StrategyAnchors } from '@shared/color-strategies/models';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 
 export default defineComponent({
@@ -54,7 +53,6 @@ export default defineComponent({
     const containerStore = useBrandPageContainerStore();
     const uiStore = useUiStore();
     const routeStore = useRouteStore();
-    const { externalEditor } = useExternalRichTextEditor();
 
     return {
       currentRoute: computed(() => routeStore.currentRoute),
@@ -71,7 +69,6 @@ export default defineComponent({
       canUseRichTextEditor: computed(
         () => userStore.features.canUseRichTextEditor,
       ),
-      externalEditor,
       contentSettingsStore,
     };
   },
@@ -354,7 +351,4 @@ export default defineComponent({
       });
     },
   },
-  beforeUnmount() {
-    if (this.externalEditor) this.externalEditor.destroy();
-  },
 });

package/src/shared/content-settings/components/logo-selection-field/LogoSelection.vue

@@ -230,6 +230,7 @@ const options = computed<ButtonGroupOption[]>(() => {
       isSelected: selectedOption.value === 0,
       iconName: `ban`,
       iconSize: 'sm',
+      dataAttribute: 'data-test-logo-selection-none',
     },
     {
       label: commonTr('logo'),
@@ -237,6 +238,7 @@ const options = computed<ButtonGroupOption[]>(() => {
       isSelected: selectedOption.value === 1,
       iconName: `bc-mast`,
       iconSize: 'sm',
+      dataAttribute: 'data-test-logo-selection-logo',
     },
     {
       label: commonTr('upload'),
@@ -244,6 +246,7 @@ const options = computed<ButtonGroupOption[]>(() => {
       isSelected: selectedOption.value === 2,
       iconName: `upload-arrow`,
       iconSize: 'sm',
+      dataAttribute: 'data-test-logo-selection-upload',
     },
   ];
 

package/src/shared/content-settings/components/logo-size-field/LogoSizeSlider.vue

@@ -5,12 +5,14 @@
       v-model="internalValue"
       :min="LOGO_SLIDER_MOBILE_MIN"
       :max="LOGO_SLIDER_MOBILE_MAX"
+      :slider-value-input-id="sliderValueInputId"
     />
     <Slider
       v-if="viewport === VIEWPORTS.desktop"
       v-model="internalValue"
       :min="LOGO_SLIDER_DESKTOP_MIN"
       :max="LOGO_SLIDER_DESKTOP_MAX"
+      :slider-value-input-id="sliderValueInputId"
     />
   </div>
 </template>
@@ -37,6 +39,7 @@ interface Data {
 interface Props {
   value: string | undefined;
   viewport: ViewportsType;
+  sliderValueInputId?: string;
 }
 
 const props = defineProps<Props>();

package/src/shared/content-settings/components/logo-size-field/LogoSizeSliderField.vue

@@ -3,6 +3,7 @@
     data-component="logo-size-slider-field"
     :value="logoHeight"
     :viewport="VIEWPORTS.desktop"
+    slider-value-input-id="logo-size-value-input"
     @on-change="onLogoSizeChanged"
   />
 </template>

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -23,6 +23,7 @@
           :name="name"
           :show-label-screen-reader-only="true"
           size="sm"
+          :attrs="{ 'data-test-tag': 'testimonial-text' }"
           :error="
             isEmpty[option.index] ||
             (options[option.index].testimonials &&

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.test.ts

@@ -27,20 +27,21 @@ const makeTextItem = (text: string): TextItem =>
   ({
     text,
     textStyle: {
-      fontSize: '16px',
       textAlign: 'left',
       textStyleType: 'paragraphs',
       applyAutoScale: true,
     },
   }) as TextItem;
 
-const mountHost = () =>
+const mountHost = (
+  value: TextItem[] = [makeTextItem('<p>one</p>'), makeTextItem('<p>two</p>')],
+) =>
   mount(TestHost, {
     props: {
       id: 'item-1',
       name: 'textItems',
       content: { id: 'item-1', type: 'text' } as Content,
-      value: [makeTextItem('<p>one</p>'), makeTextItem('<p>two</p>')],
+      value,
       isAdminMaker: false,
       logoTheme: {
         logoTextColor: '#000000',
@@ -147,3 +148,55 @@ describe('TextItemsField hydration burst flag', () => {
     }
   });
 });
+
+describe('TextItemsField add item', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('the first item starts on paragraph1 with no fixed size', () => {
+    const wrapper = mountHost([]);
+    const vm = wrapper.vm as unknown as {
+      addOption: () => void;
+      options: TextItem[];
+    };
+
+    vm.addOption();
+
+    expect(vm.options[vm.options.length - 1].textStyle).toEqual({
+      textStyleType: 'paragraph1',
+      textAlign: 'left',
+      applyAutoScale: true,
+    });
+  });
+
+  test("a later item inherits the previous item's role and alignment but not its overrides", () => {
+    const firstItem = makeTextItem('<p>one</p>');
+
+    firstItem.textStyle = {
+      textStyleType: 'heading3',
+      textAlign: 'center',
+      fontSize: '3em',
+    };
+    const secondItem = makeTextItem('<p>two</p>');
+
+    secondItem.textStyle = {
+      textStyleType: 'paragraph3',
+      textAlign: 'right',
+      fontSize: '0.75em',
+    };
+    const wrapper = mountHost([firstItem, secondItem]);
+    const vm = wrapper.vm as unknown as {
+      addOption: () => void;
+      options: TextItem[];
+    };
+
+    vm.addOption();
+
+    expect(vm.options[2].textStyle).toEqual({
+      textStyleType: 'paragraph3',
+      textAlign: 'right',
+      applyAutoScale: true,
+    });
+  });
+});

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.ts

@@ -8,12 +8,13 @@ import type {
   TextStyleDeclaration,
 } from '@brand-page/models';
 import {
-  FONT_SIZE_BODY,
+  CANONICAL_TEXT_STYLE_TYPES,
   MAX_LENGTH_ERROR_MESSAGE,
   MAX_TEXT_LENGTH,
   TEXT_EMPTY,
   TEXT_STYLE_TYPES,
 } from '@brand-page';
+import type { CanonicalTextStyleType } from '@brand-page';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
@@ -117,13 +118,19 @@ export default defineComponent({
     },
     addOption(): void {
       this.burstIsHydration = false;
+      const previousTextStyle = this.options.at(-1)?.textStyle;
+      const previousTextStyleType = previousTextStyle?.textStyleType;
+      const textStyleType = CANONICAL_TEXT_STYLE_TYPES.includes(
+        previousTextStyleType as CanonicalTextStyleType,
+      )
+        ? (previousTextStyleType as CanonicalTextStyleType)
+        : TEXT_STYLE_TYPES.paragraph1;
 
       this.options.push({
         text: '',
         textStyle: {
-          fontSize: FONT_SIZE_BODY,
-          textAlign: 'left',
-          textStyleType: TEXT_STYLE_TYPES.paragraphs,
+          textStyleType,
+          textAlign: previousTextStyle?.textAlign ?? 'left',
           applyAutoScale: true,
         },
       });