@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.vue

@@ -60,6 +60,7 @@
         :styles="content[styleName]"
         :label="field.label"
         :fields="field.fields"
+        :item-fields="field.itemFields"
         :options-convertor="field.optionsConvertor"
         :value-convertor="field.valueConvertor"
         :variant="variant"
@@ -114,6 +115,7 @@ import ShapeField from '../shape-field/ShapeField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
 import TestimonialItemsField from '../testimonial-items-field/TestimonialItemsField.vue';
 import TextItemsField from '../text-items-field/TextItemsField.vue';
+import ListItemsField from '../list-items-field/ListItemsField.vue';
 import SliderField from '../slider-field/SliderField.vue';
 import PageDropdownField from '../page-dropdown-field/PageDropdownField.vue';
 import PersonalisationOverrideField from '../personalisation-override-field/PersonalisationOverrideField.vue';
@@ -153,6 +155,7 @@ export default {
     'color-replacements-field': ColorReplacementsField,
     'testimonial-items-field': TestimonialItemsField,
     'text-items-field': TextItemsField,
+    'list-items-field': ListItemsField,
     'product-config-option-field': ProductConfigOptionField,
     FieldSubHeader,
     Toggle,

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

@@ -39,8 +39,13 @@ export default defineComponent({
       required: false,
       default: true,
     },
+    deleteLabel: {
+      type: String,
+      required: false,
+      default: 'Delete payment option',
+    },
   },
-  emits: ['items-change', 'items-delete', 'itemsEdit'],
+  emits: ['items-change', 'items-delete', 'itemsEdit', 'item-toggle'],
   data: () => ({
     itemStates: {} as Record<number, ItemFieldState>,
   }),
@@ -88,6 +93,11 @@ export default defineComponent({
   methods: {
     toggleCollapsed(index: number) {
       this.itemStates[index].isCollapsed = !this.itemStates[index].isCollapsed;
+      this.$emit('item-toggle', index, this.itemStates[index].isCollapsed);
+    },
+    expand(index: number): void {
+      this.itemStates[index] = { index, isCollapsed: false };
+      this.$emit('item-toggle', index, false);
     },
     onDelete(index: number): void {
       this.$emit('items-delete', index);

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

@@ -7,7 +7,10 @@
       :disabled="!isDraggable"
     >
       <template #item="{ element, index }">
-        <li :key="`items-${element.item.id}-${index}`">
+        <li
+          :key="`items-${element.item.id}-${index}`"
+          data-test-items-field-row
+        >
           <div
             class="tw-mb-2 tw-bg-grayscale-200 tw-p-4 tw-rounded-md tw-border tw-border-grayscale-400 tw-border-solid"
           >
@@ -49,14 +52,17 @@
               </div>
               <button
                 class="tw-bg-transparent tw-border-none tw-cursor-pointer tw-object-center tw-p-0 tw-text-grayscale-600 hover:tw-text-primary-500 tw-transition-colors tw-duration-300 tw-ease-out"
+                data-test-items-field-delete
                 @click="onDelete(index)"
               >
-                <span class="tw-sr-only">Delete payment option</span>
+                <span class="tw-sr-only">{{ deleteLabel }}</span>
                 <Icon name="delete" size="sm" />
               </button>
               <div
                 v-if="canCollapse"
                 class="tw-bg-transparent tw-border-none tw-text-grayscale-600 tw-cursor-pointer tw-ml-2"
+                data-test-items-field-toggle
+                :data-test-collapsed="element.state.isCollapsed"
                 @click="toggleCollapsed(index)"
               >
                 <Icon

package/src/shared/content-settings/components/list-items-field/ListItemsField.test.ts

@@ -0,0 +1,429 @@
+import { vi } from 'vitest';
+import { defineComponent } from 'vue';
+import { flushPromises, mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import ListItemsField from './ListItemsField.vue';
+import ItemsField from '../items-field/ItemsField.vue';
+import { useUiContentSettingsStore } from '../../store/content-settings-store';
+import { TextInput } from '@designcrowd/fe-shared-lib';
+import type { ListItemFieldSchema } from '@brand-page-maker/models/content-settings-configs';
+
+vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  contentSettingsTr: (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+}));
+
+const itemFields: ListItemFieldSchema[] = [
+  {
+    key: 'question',
+    kind: 'text',
+    title: 'Question',
+    defaultValue: () => 'New question?',
+  },
+  {
+    key: 'answer',
+    kind: 'textarea',
+    title: 'Answer',
+    defaultValue: () => 'Add the answer here.',
+  },
+];
+
+const makeItems = (count: number) =>
+  Array.from({ length: count }, (_v, i) => ({
+    id: `q${i + 1}`,
+    question: `Question ${i + 1}`,
+    answer: `Answer ${i + 1}`,
+  }));
+
+const mountField = (
+  count: number,
+  maxLength = 6,
+  extraProps: Record<string, unknown> = {},
+) =>
+  mount(ListItemsField, {
+    props: {
+      id: 'faq-1',
+      name: 'items',
+      value: makeItems(count),
+      content: { id: 'faq-1', type: 'faq-section' } as any,
+      itemFields,
+      maxLength,
+      ...extraProps,
+    },
+    global: {
+      stubs: { TextareaField: TextareaFieldStub, TextStyleField: true },
+    },
+  });
+
+// Declares the editor's props so the test can read what the list binds.
+const TextareaFieldStub = defineComponent({
+  name: 'TextareaField',
+  props: {
+    id: { type: String, default: '' },
+    name: { type: String, default: '' },
+    value: { type: [String, Object], default: '' },
+    styles: { type: Object, default: undefined },
+    itemStyleTarget: { type: Object, default: undefined },
+    maxLength: { type: Number, default: undefined },
+    showRichTextEditor: { type: Boolean, default: false },
+  },
+  emits: ['update:modelValue'],
+  template: '<div />',
+});
+
+const richItemFields: ListItemFieldSchema[] = itemFields.map((schema) => ({
+  ...schema,
+  styleKey: `${schema.key}Style`,
+  defaultStyle: () => ({ textStyleType: 'headings' as const }),
+  maxLength: schema.key === 'question' ? 200 : 1000,
+}));
+
+const styledItems = (count: number) =>
+  makeItems(count).map((item, i) => ({
+    ...item,
+    questionStyle: {
+      textStyleType: 'headings' as const,
+      fontSize: `${i + 1}em`,
+    },
+    answerStyle: { textStyleType: 'paragraphs' as const },
+  }));
+
+const boldDoc = (text: string) => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [{ type: 'text', text, marks: [{ type: 'bold' }] }],
+    },
+  ],
+});
+
+const openFirstRow = async (wrapper: ReturnType<typeof mountField>) => {
+  (wrapper.findComponent(ItemsField).vm as any).expand(0);
+  await wrapper.vm.$nextTick();
+};
+
+const lastEmitted = (wrapper: ReturnType<typeof mountField>): any => {
+  const events = wrapper.emitted('update:modelValue') ?? [];
+
+  return events[events.length - 1]?.[0];
+};
+
+const addButton = (wrapper: ReturnType<typeof mountField>) =>
+  wrapper.find('[data-test-list-items-add]');
+
+describe('ListItemsField', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('adds a new item at the end with the schema defaults, and opens it', async () => {
+    const wrapper = mountField(5);
+
+    await addButton(wrapper).trigger('click');
+    await flushPromises();
+
+    const value = lastEmitted(wrapper).value;
+
+    expect(value).toHaveLength(6);
+    expect(value[5]).toMatchObject({
+      question: 'New question?',
+      answer: 'Add the answer here.',
+    });
+    expect(value[5].id).toEqual(expect.any(String));
+    expect(useUiContentSettingsStore().activeItemIdByContentId['faq-1']).toBe(
+      value[5].id,
+    );
+  });
+
+  test('at the cap the add button is disabled and says so', () => {
+    const wrapper = mountField(6);
+
+    expect(addButton(wrapper).attributes('disabled')).toBeDefined();
+    expect(addButton(wrapper).text()).toBe('listItemsMaxReached:{"max":6}');
+  });
+
+  test('below the cap the add button reads "add item"', () => {
+    expect(addButton(mountField(3)).text()).toBe('listItemsAddItem');
+  });
+
+  test('delete emits a new array without the item', async () => {
+    const wrapper = mountField(3);
+    const original = wrapper.props('value');
+
+    wrapper.findComponent(ItemsField).vm.$emit('items-delete', 1);
+    await flushPromises();
+
+    const value = lastEmitted(wrapper).value;
+
+    expect(value.map((item: any) => item.id)).toEqual(['q1', 'q3']);
+    expect(value).not.toBe(original);
+  });
+
+  test('reorder emits the new order as a new array', async () => {
+    const wrapper = mountField(3);
+    const reordered = [...makeItems(3)].reverse();
+
+    wrapper.findComponent(ItemsField).vm.$emit('items-change', reordered);
+    await flushPromises();
+
+    const value = lastEmitted(wrapper).value;
+
+    expect(value.map((item: any) => item.id)).toEqual(['q3', 'q2', 'q1']);
+    expect(value).not.toBe(reordered);
+  });
+
+  test('typing is debounced into one emit', async () => {
+    vi.useFakeTimers();
+    const wrapper = mountField(2);
+
+    (wrapper.findComponent(ItemsField).vm as any).expand(0);
+    await wrapper.vm.$nextTick();
+
+    const question = wrapper.findComponent(TextInput);
+
+    question.vm.$emit('update:modelValue', 'Wh');
+    question.vm.$emit('update:modelValue', 'What?');
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    vi.advanceTimersByTime(300);
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(lastEmitted(wrapper).value[0].question).toBe('What?');
+    vi.useRealTimers();
+  });
+
+  // Saved plain text is escaped, like every section text field; the renderer
+  // outputs it as HTML.
+  test('plain text is stored encoded, like a section text field', async () => {
+    vi.useFakeTimers();
+    const wrapper = mountField(1);
+
+    await openFirstRow(wrapper);
+    wrapper
+      .findComponent(TextInput)
+      .vm.$emit('update:modelValue', 'Press <Enter> & go');
+    vi.advanceTimersByTime(300);
+
+    expect(lastEmitted(wrapper).value[0].question).toBe(
+      'Press &lt;Enter&gt; &amp; go',
+    );
+    vi.useRealTimers();
+  });
+
+  test('labels each row with its question', () => {
+    const labels = mountField(2)
+      .findAll('[data-test-list-item-label]')
+      .map((label) => label.text());
+
+    expect(labels).toEqual(['Question 1', 'Question 2']);
+  });
+
+  test('announces a generic delete label, not "payment option"', () => {
+    const html = mountField(1).html();
+
+    expect(html).toContain('listItemsDeleteLabel');
+    expect(html).not.toContain('Delete payment option');
+  });
+
+  test('opening a row marks it as the active item', async () => {
+    const wrapper = mountField(3);
+
+    wrapper.findComponent(ItemsField).vm.$emit('item-toggle', 2, false);
+    await flushPromises();
+
+    expect(useUiContentSettingsStore().activeItemIdByContentId['faq-1']).toBe(
+      'q3',
+    );
+  });
+
+  describe('rich-text item fields', () => {
+    const mountRich = (showRichTextEditor: boolean, count = 2) =>
+      mountField(count, 6, {
+        itemFields: richItemFields,
+        showRichTextEditor,
+        value: styledItems(count),
+      });
+
+    test("use the section-title editor, bound to the item's own style", async () => {
+      const wrapper = mountRich(true);
+
+      (wrapper.findComponent(ItemsField).vm as any).expand(1);
+      await wrapper.vm.$nextTick();
+
+      const editors = wrapper.findAllComponents(TextareaFieldStub);
+
+      expect(
+        editors.map((e) => [
+          e.props('name'),
+          e.props('showRichTextEditor'),
+          e.props('maxLength'),
+          e.props('itemStyleTarget'),
+        ]),
+      ).toEqual([
+        [
+          'question',
+          true,
+          200,
+          { itemsField: 'items', index: 1, styleField: 'questionStyle' },
+        ],
+        [
+          'answer',
+          true,
+          1000,
+          { itemsField: 'items', index: 1, styleField: 'answerStyle' },
+        ],
+      ]);
+      expect(editors[0].props('styles')).toEqual(
+        styledItems(2)[1].questionStyle,
+      );
+      expect(wrapper.findComponent(TextInput).exists()).toBe(false);
+    });
+
+    test('without rich text: plain inputs plus a font-style control per styled text', async () => {
+      const wrapper = mountRich(false);
+
+      await openFirstRow(wrapper);
+
+      // The section fields' plain inputs: TextField for the question, a plain TextareaField for the answer.
+      expect(wrapper.findComponent(TextInput).exists()).toBe(true);
+      expect(
+        wrapper
+          .findAllComponents(TextareaFieldStub)
+          .map((e) => [e.props('name'), e.props('showRichTextEditor')]),
+      ).toEqual([['answer', false]]);
+      expect(
+        wrapper.findAllComponents({ name: 'TextStyleField' }),
+      ).toHaveLength(2);
+    });
+
+    test('an editor write replaces that field and emits at once', async () => {
+      const wrapper = mountRich(true);
+
+      await openFirstRow(wrapper);
+
+      wrapper
+        .findAllComponents(TextareaFieldStub)[1]
+        .vm.$emit('update:modelValue', {
+          id: 'faq-1',
+          name: 'answer',
+          value: boldDoc('Bold answer'),
+        });
+      await flushPromises();
+
+      const payload = lastEmitted(wrapper);
+
+      expect(payload.value[0].answer).toEqual(boldDoc('Bold answer'));
+      expect(payload.value[1]).toEqual(styledItems(2)[1]);
+      expect(payload.isHydrationWrite).toBeUndefined();
+    });
+
+    test("the editor's mount-time rewrite is passed on as a hydration write", async () => {
+      const wrapper = mountRich(true);
+
+      await openFirstRow(wrapper);
+
+      wrapper
+        .findAllComponents(TextareaFieldStub)[0]
+        .vm.$emit('update:modelValue', {
+          id: 'faq-1',
+          name: 'question',
+          value: boldDoc('Question 1'),
+          isHydrationWrite: true,
+        });
+      await flushPromises();
+
+      expect(lastEmitted(wrapper).isHydrationWrite).toBe(true);
+    });
+
+    test("a toolbar style write to the store reaches the item's editor", async () => {
+      const wrapper = mountRich(true);
+
+      await openFirstRow(wrapper);
+
+      const value = styledItems(2);
+
+      value[0].questionStyle = { ...value[0].questionStyle, fontSize: '3em' };
+      await wrapper.setProps({ value });
+
+      expect(
+        wrapper.findAllComponents(TextareaFieldStub)[0].props('styles'),
+      ).toMatchObject({ fontSize: '3em' });
+    });
+
+    test("a new item copies the last item's styles, as separate objects", async () => {
+      const wrapper = mountRich(false);
+
+      await addButton(wrapper).trigger('click');
+      await flushPromises();
+
+      const value = lastEmitted(wrapper).value;
+      const added = value[2];
+
+      expect(added.questionStyle).toEqual(value[1].questionStyle);
+      expect(added.questionStyle).not.toBe(value[1].questionStyle);
+      expect(added.answerStyle).toEqual(value[1].answerStyle);
+      expect(added.question).toBe('New question?');
+    });
+
+    test('the first item ever added takes the default style', async () => {
+      const wrapper = mountField(0, 6, {
+        itemFields: richItemFields,
+        showRichTextEditor: false,
+        value: [],
+      });
+
+      await addButton(wrapper).trigger('click');
+      await flushPromises();
+
+      expect(lastEmitted(wrapper).value[0].questionStyle).toEqual({
+        textStyleType: 'headings',
+      });
+    });
+
+    test('with rich text, a new item starts as a document styled by its linked role', async () => {
+      const wrapper = mountRich(true);
+
+      await addButton(wrapper).trigger('click');
+      await flushPromises();
+
+      const added = lastEmitted(wrapper).value[2];
+
+      expect(added.question.type).toBe('doc');
+      expect(JSON.stringify(added.question)).toContain('New question?');
+    });
+
+    // After a colour strategy the linked style carries its own colour; a new item
+    // must bake that colour, not the linked global one, or it stands out.
+    test("a new rich-text item bakes the copied style's own colour", async () => {
+      const value = styledItems(2).map((item) => ({
+        ...item,
+        questionStyle: { ...item.questionStyle, color: 'var(--palette-3)' },
+      }));
+      const wrapper = mountField(2, 6, {
+        itemFields: richItemFields,
+        showRichTextEditor: true,
+        value,
+      });
+
+      await addButton(wrapper).trigger('click');
+      await flushPromises();
+
+      expect(JSON.stringify(lastEmitted(wrapper).value[2].question)).toContain(
+        'palette-3',
+      );
+    });
+
+    test('labels a row by the plain text of a rich-text question', () => {
+      const wrapper = mountField(1, 6, {
+        itemFields: richItemFields,
+        showRichTextEditor: true,
+        value: [{ ...styledItems(1)[0], question: boldDoc('Rich question') }],
+      });
+
+      expect(wrapper.find('[data-test-list-item-label]').text()).toBe(
+        'Rich question',
+      );
+    });
+  });
+});