@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/models/content-settings.test.ts

@@ -0,0 +1,708 @@
+import { beforeAll, describe, it, expect } from 'vitest';
+import {
+  createInitialBannerSectionContent,
+  createInitialProfileContent,
+  createInitialTextContent,
+  createInitialMailingListContent,
+  createInitialContactFormContent,
+  createInitialBookingSectionContent,
+  createInitialImagesSectionContent,
+  createInitialTestimonialSectionContent,
+  createInitialAboutSectionContent,
+  createInitialSocialLinksContent,
+  createInitialShapesSectionContent,
+  createInitialShopContent,
+  createInitialRequestPaymentContent,
+  createInitialSupportMeContent,
+  createInitialBrandPage,
+  applyBlankSiteTextRoles,
+} from './content-settings';
+import { migrateBrandPageModel } from '@brand-page/utils/migration.util';
+import {
+  pickTypography,
+  TEXT_STYLE_CASCADE_PROPS,
+} from '@shared/text-role-typography.util';
+import { applyTextContrast } from '@brand-page/utils/container-text-color.util';
+import { authorContentRteFields } from '@brand-page-maker/utils/rte-authoring.util';
+import * as contentFactories from './content-settings';
+import { isTiptapDocument } from '@brand-page-maker/utils';
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import {
+  BRAND_PAGE_TYPES,
+  CANONICAL_TEXT_STYLE_TYPES,
+  CONTENT_TEXT_STYLE_PROPERTY_KEYS,
+  PageStyles,
+  TEXT_STYLE_TYPES,
+  type BrandPageType,
+  type ContentType,
+} from '@brand-page';
+import { CONTENT_SETTINGS_CONFIGS } from '@brand-page-maker/constants';
+
+/**
+ * BP-5969 — RTE fields are authored as Tiptap docs at their SOURCE (the factory), never plain
+ * strings a later step converts. The factory emits STRUCTURE only; colour + role typography are
+ * baked by the init step (applyTextContrast + authorContentRteFields). Empty fields are empty docs,
+ * not strings — so no plain-string ever exists for an editor to convert.
+ *
+ * (The default copy comes from `contentSettingsTr`, which returns '' without loaded bundles, so
+ * these assert the doc SHAPE — `rteDoc`'s text handling is covered in rte-render.util.test.ts and
+ * the real copy is verified live.)
+ */
+const opts = {
+  userState: { emailAddress: 'test@example.com' },
+  brandPageType: 'brandSite',
+} as any;
+
+// A created content's text styles by field name, plus each text-items entry; shared by the
+// canonical-role sweep and the starting-role pin below.
+const stylesOf = (
+  content: Record<string, unknown>,
+): [string, Record<string, string>][] => {
+  const styles = Object.keys(CONTENT_TEXT_STYLE_PROPERTY_KEYS)
+    .filter((key) => content[key])
+    .map((key): [string, Record<string, string>] => [
+      key,
+      content[key] as Record<string, string>,
+    ]);
+  const itemStyles = Array.isArray(content.textItems)
+    ? content.textItems.map(
+        (
+          item: { textStyle: Record<string, string> },
+          index,
+        ): [string, Record<string, string>] => [
+          `textItems[${index}]`,
+          item.textStyle,
+        ],
+      )
+    : [];
+
+  return [...styles, ...itemStyles];
+};
+
+// The add-content panel's own steps after the factory (`addItemByType`): applyTextContrast bakes
+// colour, authorContentRteFields bakes RTE typography marks. Shared by the own-typography sweep and
+// the starting-role pin below.
+const addContent = (
+  brandPageType: BrandPageType,
+  make: () => unknown,
+): Record<string, unknown> => {
+  const content = make() as Record<string, unknown>;
+  const styles = new PageStyles();
+
+  applyTextContrast(content as never, styles, brandPageType);
+  authorContentRteFields(content as never, styles.textStyles.textStyleOptions);
+
+  return content;
+};
+
+// Every RTE factory and the RTE text fields it must emit as docs (shop/request-payment/support-me
+// included — BP-5969 restored them to RTE).
+const RTE_FACTORIES: [string, () => unknown, string[]][] = [
+  [
+    'banner-section',
+    () => createInitialBannerSectionContent(opts),
+    ['title', 'description'],
+  ],
+  [
+    'profile',
+    () => createInitialProfileContent(opts),
+    ['name', 'title', 'description'],
+  ],
+  ['mailing-list', () => createInitialMailingListContent(opts), ['title']],
+  [
+    'contact-form',
+    () => createInitialContactFormContent(opts),
+    ['title', 'description', 'successMessage'],
+  ],
+  [
+    'booking-section',
+    () => createInitialBookingSectionContent(opts),
+    ['title', 'description'],
+  ],
+  [
+    'images-section',
+    () => createInitialImagesSectionContent(opts),
+    ['title', 'description'],
+  ],
+  [
+    'testimonial-section',
+    () => createInitialTestimonialSectionContent(opts),
+    ['title'],
+  ],
+  [
+    'about-section',
+    () => createInitialAboutSectionContent(opts),
+    ['title', 'paragraph'],
+  ],
+  ['social-links', () => createInitialSocialLinksContent(opts), ['title']],
+  [
+    'shapes-section',
+    () => createInitialShapesSectionContent(opts),
+    ['title', 'description'],
+  ],
+  // BP-5969: shop/request-payment/support-me restored to RTE (they were RTE on develop).
+  [
+    'shop-section',
+    () => createInitialShopContent(opts),
+    ['title', 'description'],
+  ],
+  [
+    'request-payment',
+    () => createInitialRequestPaymentContent(opts),
+    ['title', 'description'],
+  ],
+  [
+    'support-me',
+    () => createInitialSupportMeContent(opts),
+    ['title', 'description'],
+  ],
+];
+
+describe('RTE factories — every RTE text field is authored as a doc', () => {
+  it.each(RTE_FACTORIES)(
+    '%s emits its RTE fields as Tiptap docs',
+    (_type, make, fields) => {
+      const content = make() as Record<string, unknown>;
+
+      for (const field of fields) {
+        expect(isTiptapDocument(content[field])).toBe(true);
+      }
+    },
+  );
+
+  it('text section (brandPage) emits its `text` as a doc', () => {
+    const content = createInitialTextContent({
+      brandPageType: 'default',
+    } as any);
+
+    expect(isTiptapDocument(content.text)).toBe(true);
+  });
+
+  it('text section (brandSite) emits every textItems[].text as a doc', () => {
+    const content = createInitialTextContent({
+      brandPageType: 'brandSite',
+    } as any);
+
+    expect(content.textItems?.length).toBeGreaterThan(0);
+    expect(content.textItems?.every((i) => isTiptapDocument(i.text))).toBe(
+      true,
+    );
+  });
+});
+
+describe('createInitialBannerSectionContent — RTE source detail', () => {
+  const firstBlock = (doc: unknown) =>
+    (doc as { content?: { type?: string; content?: unknown[] }[] })
+      .content?.[0];
+
+  it('emits the empty description as an empty-paragraph doc (no text run)', () => {
+    const content = createInitialBannerSectionContent(opts);
+    const block = firstBlock(content.description);
+
+    expect(block?.type).toBe('paragraph');
+    expect(block?.content ?? []).toHaveLength(0);
+  });
+
+  it('does not pre-bake colour/typography marks (the init layer does that)', () => {
+    const content = createInitialBannerSectionContent(opts);
+    const run = (
+      firstBlock(content.title) as
+        | { content?: { marks?: unknown[] }[] }
+        | undefined
+    )?.content?.[0];
+
+    expect(run?.marks ?? []).toHaveLength(0);
+  });
+});
+
+// Every text a factory creates is linked to one of the ten roles at birth, so nothing new needs the
+// reconnect, and saves no typography of its own, so every role edit reaches it. The two button
+// factories are curried by their content type, and capitalise their translated title, so they need
+// the bundles loaded.
+describe('content factories — every created text starts on a canonical role with no typography of its own', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  const CURRIED_FACTORIES: Record<string, (options: typeof opts) => unknown> = {
+    createInitialButtonContent: (options) =>
+      contentFactories.createInitialButtonContent(
+        'website' as ContentType,
+        '',
+        options,
+      )(),
+    createInitialGeneralLinkContent: (options) =>
+      contentFactories.createInitialGeneralLinkContent(
+        'general-link' as ContentType,
+        '',
+        options,
+      )(),
+  };
+
+  const factories = Object.entries(contentFactories).filter(
+    ([name, value]) =>
+      /^createInitial\w+Content$/.test(name) && typeof value === 'function',
+  ) as [string, (options: typeof opts) => unknown][];
+
+  const cases = factories.flatMap(([name, factory]) =>
+    Object.values(BRAND_PAGE_TYPES).map(
+      (
+        brandPageType: BrandPageType,
+      ): [string, BrandPageType, () => unknown] => [
+        name,
+        brandPageType,
+        () => (CURRIED_FACTORIES[name] ?? factory)({ ...opts, brandPageType }),
+      ],
+    ),
+  );
+
+  const rolesOf = (content: Record<string, unknown>): unknown[] =>
+    stylesOf(content).map(([, style]) => style.textStyleType);
+
+  type RteNode = {
+    marks?: { type: string; attrs?: Record<string, unknown> }[];
+    content?: RteNode[];
+  };
+
+  // A run may reference its role (`var(--role-…)`); a literal value would be a value of its own.
+  const literalRunTypography = (node: RteNode, found: string[] = []) => {
+    for (const mark of node.marks ?? []) {
+      for (const prop of TEXT_STYLE_CASCADE_PROPS) {
+        const value = mark.attrs?.[prop];
+
+        if (value && !String(value).startsWith('var(')) {
+          found.push(`${prop}: ${value}`);
+        }
+      }
+    }
+
+    node.content?.forEach((child) => literalRunTypography(child, found));
+
+    return found;
+  };
+
+  const ownTypographyAfterAdding = (
+    brandPageType: BrandPageType,
+    make: () => unknown,
+  ): string[] => {
+    const content = addContent(brandPageType, make);
+
+    const own = stylesOf(content).flatMap(([key, style]) =>
+      Object.entries(pickTypography(style)).map(
+        ([prop, value]) => `${key}.${prop}: ${value}`,
+      ),
+    );
+    const docs = [
+      ...Object.entries(content),
+      ...(Array.isArray(content.textItems)
+        ? content.textItems.map(
+            (item: { text: unknown }, index): [string, unknown] => [
+              `textItems[${index}].text`,
+              item.text,
+            ],
+          )
+        : []),
+    ].filter(([, value]) => isTiptapDocument(value));
+
+    return [
+      ...own,
+      ...docs.flatMap(([key, doc]) =>
+        literalRunTypography(doc as RteNode).map((run) => `${key} run ${run}`),
+      ),
+    ];
+  };
+
+  it('sweeps every exported createInitial*Content factory', () => {
+    expect(factories.length).toBeGreaterThanOrEqual(22);
+  });
+
+  it.each(cases)(
+    '%s (%s) starts on a canonical role',
+    (_name, _brandPageType, make) => {
+      const content = make() as Record<string, unknown>;
+
+      for (const role of rolesOf(content)) {
+        expect(CANONICAL_TEXT_STYLE_TYPES).toContain(role);
+      }
+    },
+  );
+
+  it.each(cases)(
+    '%s (%s) saves no typography of its own once added',
+    (_name, brandPageType, make) => {
+      expect(ownTypographyAfterAdding(brandPageType, make)).toEqual([]);
+    },
+  );
+
+  it('a new brand.site text block saves no size on its first text item', () => {
+    expect(
+      ownTypographyAfterAdding(BRAND_PAGE_TYPES.brandSite, () =>
+        createInitialTextContent({
+          ...opts,
+          brandPageType: BRAND_PAGE_TYPES.brandSite,
+        }),
+      ),
+    ).toEqual([]);
+  });
+});
+
+// The payment and shop checkout success messages are their own rich text, so each starts on
+// Paragraph 2 with no overrides.
+describe('payment factories — the success message has its own role', () => {
+  it.each(
+    [
+      ['request-payment', createInitialRequestPaymentContent],
+      ['support-me', createInitialSupportMeContent],
+      ['shop-section', createInitialShopContent],
+    ].flatMap(([type, factory]) =>
+      Object.values(BRAND_PAGE_TYPES).map(
+        (brandPageType): [string, BrandPageType, typeof factory] => [
+          type as string,
+          brandPageType,
+          factory,
+        ],
+      ),
+    ),
+  )(
+    '%s (%s) success message starts on Paragraph 2',
+    (_type, brandPageType, factory) => {
+      const content = (factory as (options: typeof opts) => unknown)({
+        ...opts,
+        brandPageType,
+      }) as Record<string, unknown>;
+
+      expect(content.successMessageStyle).toEqual({
+        textStyleType: 'paragraph2',
+      });
+    },
+  );
+});
+
+// A blank site has no version, so every migration runs on it: migration-01 forces line heights and
+// migration-22 keeps the retired look as the header and footer text's own values. The Save Contact
+// label (brand.contact only) joins the same pass: migration-22 seeds it with typography of its own
+// too. The maker then puts every one of those texts on its role with no typography of its own.
+describe('applyBlankSiteTextRoles', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  it.each([true, false])(
+    'the Save Contact label starts on Button text with nothing of its own (saving enabled: %s)',
+    async (isSavingEnabled) => {
+      // The blank model has no profile section, so the label isn't shown either way —
+      // `applyBlankSiteTextRoles` still runs on it, so a later profile add finds it already on its role.
+      const { brandPageModel } = await migrateBrandPageModel(
+        createInitialBrandPage(BRAND_PAGE_TYPES.brandContact),
+        { isUserDraft: true, isServerRender: false },
+      );
+
+      brandPageModel.saveContactSettings!.isSavingEnabled = isSavingEnabled;
+
+      applyBlankSiteTextRoles(brandPageModel);
+
+      const buttonTextStyle =
+        brandPageModel.saveContactSettings!.buttonTextStyle!;
+
+      expect(buttonTextStyle.textStyleType).toBe('button');
+      expect(pickTypography(buttonTextStyle)).toEqual({});
+    },
+  );
+
+  // Every object outside `styles.textStyles` (the role definitions, which keep the four retired
+  // option slots) that carries a `textStyleType` or any typography of its own — walked across the
+  // whole model. A text added to the blank site later with no role and no row here fails this walk.
+  const stylesInModel = (
+    model: unknown,
+  ): [string, Record<string, string>][] => {
+    const found: [string, Record<string, string>][] = [];
+
+    const walk = (node: unknown, path: string): void => {
+      if (!node || typeof node !== 'object') return;
+
+      if (Array.isArray(node)) {
+        node.forEach((item, index) => walk(item, `${path}[${index}]`));
+
+        return;
+      }
+
+      if (path === 'styles.textStyles') return;
+
+      const record = node as Record<string, unknown>;
+
+      if (
+        'textStyleType' in record ||
+        TEXT_STYLE_CASCADE_PROPS.some((prop) => prop in record)
+      ) {
+        found.push([path, record as Record<string, string>]);
+      }
+
+      for (const [key, value] of Object.entries(record)) {
+        walk(value, path ? `${path}.${key}` : key);
+      }
+    };
+
+    walk(model, '');
+
+    return found;
+  };
+
+  it.each(Object.values(BRAND_PAGE_TYPES))(
+    'every text on a migrated blank %s site is on a role with nothing of its own',
+    async (type) => {
+      const { brandPageModel } = await migrateBrandPageModel(
+        createInitialBrandPage(type),
+        { isUserDraft: true, isServerRender: false },
+      );
+
+      applyBlankSiteTextRoles(brandPageModel);
+
+      const expectedRoles: Record<string, string> = {
+        'pageHeaderDesktop.navigation.defaultButtonStyle': 'paragraph1',
+        'pageHeaderMobile.navigation.defaultButtonStyle': 'paragraph1',
+        'pageHeaderDesktop.navigation.hamburgerMenuStyle.defaultButtonStyle':
+          'button',
+        'pageHeaderMobile.navigation.hamburgerMenuStyle.defaultButtonStyle':
+          'button',
+        'pageFooterDesktop.copyrightStyle': 'paragraph2',
+        'pageFooterMobile.copyrightStyle': 'paragraph2',
+        ...(type === BRAND_PAGE_TYPES.brandContact
+          ? { 'saveContactSettings.buttonTextStyle': 'button' }
+          : {}),
+      };
+
+      const found = stylesInModel(brandPageModel);
+
+      expect(found.map(([path]) => path).sort()).toEqual(
+        Object.keys(expectedRoles).sort(),
+      );
+
+      for (const [path, style] of found) {
+        expect(style.textStyleType).toBe(expectedRoles[path]);
+        expect(pickTypography(style)).toEqual({});
+      }
+
+      // The walk above checks only the role and that no cascade property survives; this pins the
+      // copyright's exact migrated shape, so a change to what it keeps (alignment, colour) is caught.
+      for (const footer of [
+        brandPageModel.pageFooterDesktop,
+        brandPageModel.pageFooterMobile,
+      ]) {
+        expect(footer.copyrightStyle).toEqual({
+          textStyleType: 'paragraph2',
+          textAlign: 'center',
+          color: expect.any(String),
+        });
+      }
+    },
+  );
+
+  it('keeps colour, alignment and borders', () => {
+    const model = createInitialBrandPage(BRAND_PAGE_TYPES.brandContact);
+    const { navigation } = model.pageHeaderDesktop;
+
+    model.pageFooterDesktop.copyrightStyle = {
+      textStyleType: 'paragraph1',
+      fontSize: '1em',
+      letterSpacing: '0',
+      lineHeight: '1.3',
+      color: 'var(--palette-0)',
+      textAlign: 'left',
+    };
+    navigation.defaultButtonStyle = {
+      ...navigation.defaultButtonStyle,
+      color: 'var(--palette-1)',
+    };
+    model.saveContactSettings = {
+      isSavingEnabled: true,
+      hideBranding: false,
+      buttonTextStyle: {
+        textStyleType: TEXT_STYLE_TYPES.buttons,
+        color: 'var(--palette-2)',
+        lineHeight: '1.5',
+      },
+    };
+
+    applyBlankSiteTextRoles(model);
+
+    expect(model.pageFooterDesktop.copyrightStyle).toEqual({
+      textStyleType: 'paragraph2',
+      color: 'var(--palette-0)',
+      textAlign: 'left',
+    });
+    expect(model.pageHeaderDesktop.navigation.defaultButtonStyle).toMatchObject(
+      {
+        color: 'var(--palette-1)',
+        borderBottomWidth: '0px',
+        textAlign: 'center',
+      },
+    );
+    expect(model.saveContactSettings.buttonTextStyle).toEqual({
+      textStyleType: 'button',
+      color: 'var(--palette-2)',
+    });
+
+    // brand.site: migration-22 seeds Save Contact only on brand.contact, so a blank site with none
+    // stays with none.
+    const noSaveContact = createInitialBrandPage(BRAND_PAGE_TYPES.brandSite);
+
+    applyBlankSiteTextRoles(noSaveContact);
+
+    expect(noSaveContact.saveContactSettings).toBeUndefined();
+  });
+});
+
+// R2 (D1 — decided: keep today's starting-role map, no field moves; James Joung, 2026-09-30). The
+// map pins roles only; the own-typography sweep above covers typography. A deliberate move is a
+// product decision: change this map on purpose, never to silence a red run.
+describe('add content — every text starts on its pinned role', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  const STARTING_ROLES: Record<ContentType, Record<string, string>> = {
+    logo: {},
+    'general-link': { titleStyle: TEXT_STYLE_TYPES.button },
+    profile: {
+      nameStyle: TEXT_STYLE_TYPES.heading5,
+      titleStyle: TEXT_STYLE_TYPES.paragraph2,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    website: { titleStyle: TEXT_STYLE_TYPES.button },
+    email: { titleStyle: TEXT_STYLE_TYPES.button },
+    phone: { titleStyle: TEXT_STYLE_TYPES.button },
+    text: { textStyle: TEXT_STYLE_TYPES.paragraph2 },
+    image: {},
+    'images-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      headingStyle: TEXT_STYLE_TYPES.heading5,
+      paragraphStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+    },
+    'image-gallery': {},
+    video: {},
+    map: {},
+    'mailing-list': {
+      titleStyle: TEXT_STYLE_TYPES.heading5,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+    },
+    facebook: { titleStyle: TEXT_STYLE_TYPES.button },
+    x: { titleStyle: TEXT_STYLE_TYPES.button },
+    instagram: { titleStyle: TEXT_STYLE_TYPES.button },
+    youtube: { titleStyle: TEXT_STYLE_TYPES.button },
+    linkedin: { titleStyle: TEXT_STYLE_TYPES.button },
+    pinterest: { titleStyle: TEXT_STYLE_TYPES.button },
+    twitch: { titleStyle: TEXT_STYLE_TYPES.button },
+    tiktok: { titleStyle: TEXT_STYLE_TYPES.button },
+    'support-me': {
+      titleStyle: TEXT_STYLE_TYPES.heading5,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      headingStyle: TEXT_STYLE_TYPES.paragraph2,
+      itemTextStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+      successMessageStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'request-payment': {
+      titleStyle: TEXT_STYLE_TYPES.paragraph2,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      itemTextStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+      successMessageStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'contact-form': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+      successMessageStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'banner-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+    },
+    'testimonial-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      testimonialStyle: TEXT_STYLE_TYPES.heading5,
+      nameStyle: TEXT_STYLE_TYPES.paragraph2,
+      positionStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'about-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      paragraphStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'social-links': { titleStyle: TEXT_STYLE_TYPES.heading4 },
+    'divider-section': {},
+    'shapes-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      headingStyle: TEXT_STYLE_TYPES.heading5,
+      paragraphStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'shop-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      itemTextStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+      successMessageStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
+    'booking-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      buttonTextStyle: TEXT_STYLE_TYPES.button,
+    },
+  };
+
+  // Mirrors getEnabledContentSettingsConfigs's website-type filter (the feature-flag term left out,
+  // so the pin covers every website type regardless of flags).
+  const offeredOn = (
+    config: { brandPageType?: string | BrandPageType[] },
+    type: BrandPageType,
+  ): boolean =>
+    config.brandPageType === undefined
+      ? true
+      : Array.isArray(config.brandPageType)
+        ? config.brandPageType.includes(type)
+        : config.brandPageType === type;
+
+  const configs = CONTENT_SETTINGS_CONFIGS();
+
+  const cases = Object.entries(configs).flatMap(([type, config]) =>
+    Object.values(BRAND_PAGE_TYPES)
+      .filter((brandPageType) => offeredOn(config, brandPageType))
+      .map((brandPageType): [ContentType, BrandPageType, typeof config] => [
+        type as ContentType,
+        brandPageType,
+        config,
+      ]),
+  );
+
+  it.each(cases)(
+    '%s (%s) starts on its pinned role',
+    (type, brandPageType, config) => {
+      const content = addContent(brandPageType, () =>
+        config.createInitialContent({ ...opts, brandPageType }),
+      );
+
+      const found = Object.fromEntries(
+        stylesOf(content).map(([field, style]) => [field, style.textStyleType]),
+      );
+      // brand.site's text block starts with one item; page/contact's doesn't (`createInitialTextContent`).
+      const expected =
+        type === 'text' && brandPageType === BRAND_PAGE_TYPES.brandSite
+          ? {
+              ...STARTING_ROLES.text,
+              'textItems[0]': TEXT_STYLE_TYPES.paragraph2,
+            }
+          : STARTING_ROLES[type];
+
+      expect(found).toStrictEqual(expected);
+    },
+  );
+
+  it('pins every add-content type', () => {
+    expect(Object.keys(STARTING_ROLES).sort()).toEqual(
+      Object.keys(configs).sort(),
+    );
+  });
+});