@designcrowd/library.brand-page 6.2.8 → 6.2.10

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -351,13 +351,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("@brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -647,13 +647,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -5083,13 +5083,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("@brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4434,13 +4434,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("@brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -554,13 +554,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/side-bar/components/SideBar.mixin.d.ts

@@ -344,13 +344,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -852,13 +852,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.8",
+  "version": "6.2.10",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.test.ts

@@ -0,0 +1,323 @@
+import { mount, DOMWrapper } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { TextInput, Textarea } from '@designcrowd/fe-shared-lib';
+import BrandPageSettings from './BrandPageSettings.vue';
+import SeoPageSettings from '../seo-settings/SeoPageSettings.vue';
+import SensitiveContent from '../sensitive-content/SensitiveContent.vue';
+import ImageField from '@shared/content-settings/components/image-field/ImageField.vue';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerStore,
+} from '@brand-page-maker/stores';
+import { SENSITIVE_CONTENT_TYPES } from '@brand-page';
+
+// CollapsiblePanel is imported directly in a `<script setup>` template, so
+// `global.stubs` can't intercept it by name (no `resolveComponent` call is
+// emitted for it). It starts collapsed and unmounts its slot when collapsed
+// (maker-settings-panels.md), so open every panel for real by clicking its
+// header, the same way ColorStrategyPanel.test.ts does.
+const mountSettings = async () => {
+  const wrapper = mount(BrandPageSettings);
+
+  for (const header of wrapper.findAll(
+    '[data-component="collapsible-panel"] > div',
+  )) {
+    await header.trigger('click');
+  }
+
+  return wrapper;
+};
+
+type Wrapper = Awaited<ReturnType<typeof mountSettings>>;
+
+const radios = (wrapper: Wrapper) =>
+  wrapper.findAll('input[type="radio"][name="sensitiveContent"]');
+
+// GoogleAnalytics and SocialShare each render their own TextInput in a
+// DIFFERENT collapsible panel, so scope to the panel holding the SEO
+// Textarea (unique to SeoPageSettings) to find the SEO title input alone.
+const seoTitleInput = (wrapper: Wrapper) => {
+  const textarea = wrapper.findComponent(Textarea);
+
+  if (!textarea.exists()) return undefined;
+
+  const panel = textarea.element.closest(
+    '[data-component="collapsible-panel"]',
+  ) as HTMLElement;
+
+  const input = new DOMWrapper(panel).findComponent(TextInput);
+
+  return input.exists() ? input : undefined;
+};
+
+// The Sensitive Content panel is the only rendered panel with these radios;
+// its Update button is the nearest one in the same collapsible panel.
+const sensitiveContentUpdateButton = (wrapper: Wrapper) => {
+  const panel = radios(wrapper)[0].element.closest(
+    '[data-component="collapsible-panel"]',
+  ) as HTMLElement;
+
+  return new DOMWrapper(panel).find('button');
+};
+
+const faviconField = (wrapper: Wrapper) =>
+  wrapper
+    .findAllComponents(ImageField)
+    .find((field) => field.props('name') === 'favicon');
+
+describe('BrandPageSettings — SEO and Sensitive Content before the first save', () => {
+  let containerStore: ReturnType<typeof useBrandPageContainerStore>;
+  let brandPageMakerStore: ReturnType<typeof useBrandPageMakerStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+
+    containerStore = useBrandPageContainerStore();
+    brandPageMakerStore = useBrandPageMakerStore();
+  });
+
+  test.each([
+    ['post-purchase, never saved', {}],
+    ['pre-purchase, never saved', { isPrePurchase: true }],
+    ['saved site', { designDraftToken: 'draft-123' }],
+  ])(
+    'shows both settings (%s)',
+    async (_case: string, flags: Record<string, boolean | string>) => {
+      Object.assign(containerStore, flags);
+
+      const wrapper = await mountSettings();
+
+      expect(seoTitleInput(wrapper)).toBeDefined();
+      expect(wrapper.findComponent(Textarea).exists()).toBe(true);
+      expect(wrapper.find('[data-test-btn-update-seo-settings]').exists()).toBe(
+        true,
+      );
+      expect(radios(wrapper)).toHaveLength(4);
+      expect(faviconField(wrapper)).toBeDefined();
+    },
+  );
+
+  test('disabled while saving', async () => {
+    // isPublishing disables both panels' Update buttons and inputs, and blocks
+    // a row click from changing the choice already made — the same as isSaving.
+    const publishingWrapper = await mountSettings();
+
+    // Dirty both panels first — an already-disabled (clean) button can't
+    // distinguish "isPublishing disables it" from "it was never enabled".
+    await seoTitleInput(publishingWrapper)!.find('input').setValue('A title');
+    await new DOMWrapper(
+      radios(publishingWrapper)[1].element.parentElement!,
+    ).trigger('click');
+
+    containerStore.isPublishing = true;
+    await publishingWrapper.vm.$nextTick();
+
+    expect(
+      sensitiveContentUpdateButton(publishingWrapper).attributes('disabled'),
+    ).toBeDefined();
+    expect(radios(publishingWrapper)[0].attributes('disabled')).toBeDefined();
+    expect(
+      publishingWrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeDefined();
+    expect(seoTitleInput(publishingWrapper)!.props('disabled')).toBe(true);
+    expect(publishingWrapper.findComponent(Textarea).props('disabled')).toBe(
+      true,
+    );
+
+    // A click on a different row must not change the choice already made
+    // above while a publish is in flight.
+    await new DOMWrapper(
+      radios(publishingWrapper)[2].element.parentElement!,
+    ).trigger('click');
+    expect(
+      (radios(publishingWrapper)[1].element as HTMLInputElement).checked,
+    ).toBe(true);
+
+    containerStore.isPublishing = false;
+
+    // isSaving disables both panels' Update buttons and inputs, and blocks a
+    // row click from changing the choice already made.
+    const wrapper = await mountSettings();
+
+    // Dirty both panels first — an already-disabled (clean) button can't
+    // distinguish "isSaving disables it" from "it was never enabled". The
+    // radio's own state changes only through the row's `@click` handler, not
+    // a native `change`, so click the row rather than `setValue` the input.
+    await seoTitleInput(wrapper)!.find('input').setValue('A title');
+    await new DOMWrapper(radios(wrapper)[1].element.parentElement!).trigger(
+      'click',
+    );
+
+    expect(
+      sensitiveContentUpdateButton(wrapper).attributes('disabled'),
+    ).toBeUndefined();
+    expect(
+      wrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeUndefined();
+
+    containerStore.isSaving = true;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      sensitiveContentUpdateButton(wrapper).attributes('disabled'),
+    ).toBeDefined();
+    expect(radios(wrapper)[0].attributes('disabled')).toBeDefined();
+    expect(
+      wrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeDefined();
+    expect(seoTitleInput(wrapper)!.props('disabled')).toBe(true);
+    expect(wrapper.findComponent(Textarea).props('disabled')).toBe(true);
+
+    // A click on a different row must not change the choice already made
+    // above while a save is in flight.
+    await new DOMWrapper(radios(wrapper)[2].element.parentElement!).trigger(
+      'click',
+    );
+    expect((radios(wrapper)[1].element as HTMLInputElement).checked).toBe(true);
+
+    containerStore.isSaving = false;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      sensitiveContentUpdateButton(wrapper).attributes('disabled'),
+    ).toBeUndefined();
+    expect(radios(wrapper)[0].attributes('disabled')).toBeUndefined();
+    expect(
+      wrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeUndefined();
+    expect(seoTitleInput(wrapper)!.props('disabled')).toBe(false);
+    expect(wrapper.findComponent(Textarea).props('disabled')).toBe(false);
+  });
+
+  test('Manage page', async () => {
+    containerStore.isSaving = true;
+    vi.spyOn(brandPageMakerStore, 'updateBrandPageSettings').mockResolvedValue(
+      undefined,
+    );
+    vi.spyOn(
+      brandPageMakerStore,
+      'updateSensitiveContentSettings',
+    ).mockResolvedValue(undefined);
+
+    const seoWrapper = mount(SeoPageSettings, { props: { isMaker: false } });
+
+    await seoWrapper.find('input').setValue('New title');
+    const seoUpdateButton = seoWrapper.find(
+      '[data-test-btn-update-seo-settings]',
+    );
+
+    expect(seoUpdateButton.attributes('disabled')).toBeUndefined();
+
+    await seoUpdateButton.trigger('click');
+    await seoWrapper.vm.$nextTick();
+
+    expect(brandPageMakerStore.updateBrandPageSettings).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'New title' }),
+    );
+
+    const sensitiveWrapper = mount(SensitiveContent, {
+      props: { isMaker: false, value: SENSITIVE_CONTENT_TYPES.off },
+    });
+    const sensitiveRadios = sensitiveWrapper.findAll(
+      'input[type="radio"][name="sensitiveContent"]',
+    );
+
+    expect(sensitiveRadios[1].attributes('disabled')).toBeUndefined();
+
+    // The radio has no v-model/@change of its own — a real click lands on
+    // the row's wrapping div, same as SensitiveContent's own click handler.
+    await new DOMWrapper(sensitiveRadios[1].element.parentElement!).trigger(
+      'click',
+    );
+    await sensitiveWrapper.vm.$nextTick();
+
+    const sensitiveUpdateButton = sensitiveWrapper.find('button');
+
+    expect(sensitiveUpdateButton.attributes('disabled')).toBeUndefined();
+
+    await sensitiveUpdateButton.trigger('click');
+    await sensitiveWrapper.vm.$nextTick();
+
+    expect(
+      brandPageMakerStore.updateSensitiveContentSettings,
+    ).toHaveBeenCalledWith({
+      sensitiveContent: SENSITIVE_CONTENT_TYPES.plus18,
+      shouldRefresh: true,
+    });
+
+    // isPublishing is the maker's own in-flight state (set by
+    // ManageBrandPageContainer's onPublishClicked) — it must not lock the
+    // Manage page's radios either.
+    containerStore.isPublishing = true;
+    await sensitiveWrapper.vm.$nextTick();
+
+    expect(sensitiveRadios[2].attributes('disabled')).toBeUndefined();
+
+    await new DOMWrapper(sensitiveRadios[2].element.parentElement!).trigger(
+      'click',
+    );
+    await sensitiveWrapper.vm.$nextTick();
+
+    expect((sensitiveRadios[2].element as HTMLInputElement).checked).toBe(true);
+  });
+
+  test('SEO inputs stay editable on the Manage page while publishing', async () => {
+    // The Manage form is dirty when the store's title or description differs
+    // from the props, so match them to start clean.
+    containerStore.brandPageTitle = 'Old title';
+    containerStore.brandPageDescription = 'Old description';
+    containerStore.isPublishing = true;
+
+    const wrapper = mount(SeoPageSettings, {
+      props: {
+        isMaker: false,
+        pageTitle: 'Old title',
+        pageDescription: 'Old description',
+      },
+    });
+    const titleInput = wrapper.findComponent(TextInput);
+    const descriptionInput = wrapper.findComponent(Textarea);
+
+    expect(titleInput.props('disabled')).toBe(false);
+    expect(descriptionInput.props('disabled')).toBe(false);
+
+    await titleInput.find('input').setValue('New title');
+    await descriptionInput.find('textarea').setValue('New description');
+
+    expect(titleInput.props('modelValue')).toBe('New title');
+    expect(descriptionInput.props('modelValue')).toBe('New description');
+
+    const updateButton = wrapper.find('[data-test-btn-update-seo-settings]');
+
+    // The Update button keeps its unscoped isPublishing gate from develop;
+    // the form started clean, so releasing it shows the typing made it dirty.
+    expect(updateButton.attributes('disabled')).toBeDefined();
+
+    containerStore.isPublishing = false;
+    await wrapper.vm.$nextTick();
+
+    expect(updateButton.attributes('disabled')).toBeUndefined();
+  });
+
+  test('admin template editor', async () => {
+    containerStore.isAdminMaker = true;
+
+    const wrapper = await mountSettings();
+
+    expect(wrapper.find('[data-test-btn-update-seo-settings]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.findComponent(Textarea).exists()).toBe(false);
+    expect(radios(wrapper)).toHaveLength(0);
+    expect(faviconField(wrapper)).toBeDefined();
+  });
+});

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.vue

@@ -31,14 +31,14 @@
           :is-collapsed="true"
         >
           <PageSettings
-            v-if="designDraftToken"
+            v-if="!isAdminMaker"
             :is-maker="true"
             @update-settings="onUpdateSettings"
           />
           <div
             class="tw-border-0 tw-border-solid tw-border-grayscale-400 tw-mt-6"
             :class="{
-              'tw-border-t tw-py-8': designDraftToken,
+              'tw-border-t tw-py-8': !isAdminMaker,
             }"
           >
             <h3 class="tw-text-left tw-font-bold tw-mb-2">
@@ -117,7 +117,7 @@
           </div>
         </CollapsiblePanel>
         <CollapsiblePanel
-          v-if="designDraftToken"
+          v-if="!isAdminMaker"
           data-component="collapsible-panel"
           :title="commonTr('sensitiveContent')"
           :is-collapsed="true"

package/src/brand-page-maker/components/color-picker/BpColorPicker.stories.ts

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 import ColorPickerV2 from './BpColorPickerV2.vue';
 import ColorModeSelect from './components/ColorModeSelect.vue';
 import GradientTypeSelector from './components/GradientTypeSelector.vue';
@@ -7,6 +8,15 @@ import GradientColorSlider from './components/GradientColorSlider.vue';
 export default {
   title: 'Components/BpColorPicker',
   component: ColorPickerV2,
+  // All of this file's stories render labels looked up via colorPickerTr; with
+  // i18next 25, t() returns undefined before setLocaleAsync runs. A meta-level
+  // loader awaits it once for every story, including BpColorPickerV2Sample's
+  // ColorModeSelect/GradientTypeSelector rendered inside the popup.
+  loaders: [
+    async ({ globals }) => {
+      await setLocaleAsync(globals.locale);
+    },
+  ],
 };
 
 export const ColorModeSelectComponent = () => {

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.mixin.ts

@@ -7,11 +7,11 @@ export const COLOR_PICKER_MODE = {
 
 export const COLOR_PICKER_MODE_OPTIONS = [
   {
-    displayName: 'Solid Color',
+    labelKey: 'colorModeSolid',
     value: COLOR_PICKER_MODE.SOLID,
   },
   {
-    displayName: 'Gradient Color',
+    labelKey: 'colorModeGradient',
     value: COLOR_PICKER_MODE.GRADIENT,
   },
 ];

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.test.ts

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import i18next from 'i18next';
+import { describe, expect, test } from 'vitest';
+import {
+  setLocaleAsync,
+  supportedLocales,
+  type LocaleTypes,
+} from '@src/composables/useTranslate';
+import ColorModeSelect from './ColorModeSelect.vue';
+import en from '@src/shared/color-picker/components/i18n/color-picker.json';
+import deDE from '@src/shared/color-picker/components/i18n/color-picker.de-DE.json';
+import esES from '@src/shared/color-picker/components/i18n/color-picker.es-ES.json';
+import frCA from '@src/shared/color-picker/components/i18n/color-picker.fr-CA.json';
+import frFR from '@src/shared/color-picker/components/i18n/color-picker.fr-FR.json';
+import ptBR from '@src/shared/color-picker/components/i18n/color-picker.pt-BR.json';
+import ptPT from '@src/shared/color-picker/components/i18n/color-picker.pt-PT.json';
+
+// Expected values come from the locale files, not literals, so Smartling's
+// rewrite of the wording can't turn these tests red.
+const localeFiles: Record<LocaleTypes, typeof en> = {
+  'en-US': en,
+  'de-DE': deDE,
+  'es-ES': esES,
+  'fr-CA': frCA,
+  'fr-FR': frFR,
+  'pt-BR': ptBR,
+  'pt-PT': ptPT,
+};
+
+const stringsFor = (locale: LocaleTypes): (typeof en)['colorPicker'] =>
+  localeFiles[locale].colorPicker;
+
+const NON_ENGLISH_LOCALES = supportedLocales.filter(
+  (locale) => locale !== 'en-US',
+);
+
+// See RecaptchaDisclosure.vue.test.ts: the shared i18next singleton only takes
+// the language from `setLocaleAsync` on its first call.
+const useLocale = async (locale: string): Promise<void> => {
+  await setLocaleAsync(locale as LocaleTypes);
+  await i18next.changeLanguage(locale);
+};
+
+const optionTexts = (wrapper: ReturnType<typeof mount>): string[] =>
+  wrapper.findAll('option').map((option) => option.text());
+
+const mountSelect = (modelValue?: string): ReturnType<typeof mount> =>
+  mount(ColorModeSelect, { props: { modelValue } });
+
+describe('ColorModeSelect', () => {
+  test.each(NON_ENGLISH_LOCALES)(
+    'dropdown options use the %s locale file',
+    async (locale) => {
+      await useLocale(locale);
+
+      const wrapper = mountSelect();
+
+      expect(optionTexts(wrapper)).toEqual([
+        stringsFor(locale).colorModeSolid,
+        stringsFor(locale).colorModeGradient,
+      ]);
+      optionTexts(wrapper).forEach((text) => {
+        expect(text).not.toMatch(/^colorPicker\./);
+      });
+    },
+  );
+
+  test('English dropdown options read word for word', async () => {
+    await useLocale('en-US');
+
+    const wrapper = mountSelect();
+
+    expect(optionTexts(wrapper)).toEqual(['Solid Color', 'Gradient Color']);
+  });
+
+  // A key missing from one locale file renders as its key path on the site;
+  // the shared test singleton would hide it behind the en-US fallback.
+  test.each(supportedLocales)(
+    'every locale file defines the colour-mode keys: %s',
+    (locale) => {
+      (['colorModeSolid', 'colorModeGradient'] as const).forEach((key) => {
+        const value = stringsFor(locale)[key];
+
+        expect(typeof value, `${locale} › ${key}`).toBe('string');
+        expect(value.trim(), `${locale} › ${key}`).not.toBe('');
+      });
+    },
+  );
+
+  test('a gradient colour opens on the translated gradient option', async () => {
+    await useLocale('de-DE');
+
+    const wrapper = mountSelect('gradient');
+    const select = wrapper.find('select');
+
+    expect((select.element as HTMLSelectElement).value).toBe('gradient');
+    expect(wrapper.find('option:checked').text()).toBe(
+      stringsFor('de-DE').colorModeGradient,
+    );
+  });
+
+  test('picking an option emits the same value as today', async () => {
+    await useLocale('de-DE');
+
+    const wrapper = mountSelect('solid');
+    const select = wrapper.find('select');
+
+    await select.setValue('gradient');
+    await select.setValue('solid');
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['gradient'],
+      ['solid'],
+    ]);
+  });
+});