@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

package/src/brand-page/utils/migration/migration-23.test.ts

@@ -0,0 +1,712 @@
+import { describe, test, expect } from 'vitest';
+import { migration23 } from './migration-23';
+import { migrateBrandPageModel } from '../migration.util';
+import type { MigrationData } from '../migration.util';
+import {
+  BRAND_PAGE_TYPES,
+  HEADER_DISPLAY,
+  NAVIGATION_DISPLAY,
+  BrandPageModel,
+} from '../../';
+
+const makeRoute = (id: string, pageId: string, isHidden = false) => ({
+  id,
+  pageId,
+  pageSlug: pageId,
+  displayName: pageId,
+  isHidden,
+});
+
+const makeOrder = (routeId: string) => ({
+  routeId,
+  subRoutes: [] as unknown[],
+});
+
+// A 3-route nav (home, about, contact) — more than one visible order, so `isNavShown`.
+const threePageNav = () => ({
+  routes: [
+    makeRoute('route-home', 'page-home'),
+    makeRoute('route-about', 'page-about'),
+    makeRoute('route-contact', 'page-contact'),
+  ],
+  orders: [
+    makeOrder('route-home'),
+    makeOrder('route-about'),
+    makeOrder('route-contact'),
+  ],
+});
+
+const singlePageNav = () => ({
+  routes: [makeRoute('route-home', 'page-home')],
+  orders: [makeOrder('route-home')],
+});
+
+const makeLogoBlock = (overrides: Record<string, unknown> = {}) => ({
+  id: 'logo-block',
+  type: 'logo',
+  isLogoVisible: true,
+  backgroundStyle: { backgroundColor: 'var(--palette-1)' },
+  logoImage: { logoDraftToken: 'D', logoVariation: 2, logoLastUpdate: '' },
+  logoImageHeight: '12rem',
+  logoImageWidth: '12rem',
+  logoTemplateImage: null as unknown,
+  ...overrides,
+});
+
+const makeDividerBlock = () => ({ id: 'divider', type: 'divider' });
+const makeTextBlock = () => ({ id: 'text-1', type: 'text', textItems: [] });
+
+const makeHeader = (overrides: Record<string, unknown> = {}) => ({
+  displayStyle: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
+  navigation: {
+    displayType: NAVIGATION_DISPLAY.TAB_1,
+    renderAfterLogo: false,
+  },
+  isLogoVisible: false,
+  logoImage: { logoDraftToken: '', logoVariation: 0, logoLastUpdate: '' },
+  logoImageHeight: '6rem',
+  logoImageWidth: '6rem',
+  logoTemplateImage: undefined as unknown,
+  logoBackgroundStyle: undefined as unknown,
+  backgroundStyle: { backgroundColor: '#123456', backgroundOpacity: 100 },
+  ...overrides,
+});
+
+const bothViewportsAboveNav = () => ({
+  pageHeaderDesktop: makeHeader({
+    navigation: {
+      displayType: NAVIGATION_DISPLAY.TAB_1,
+      renderAfterLogo: true,
+    },
+  }),
+  pageHeaderMobile: makeHeader({
+    displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+    navigation: {
+      displayType: NAVIGATION_DISPLAY.TAB_1,
+      renderAfterLogo: true,
+    },
+  }),
+});
+
+const createModel = (overrides: Record<string, unknown> = {}) => ({
+  v: 22,
+  brandPageType: BRAND_PAGE_TYPES.default,
+  styles: {},
+  pages: [{ id: 'page-home', title: 'Home', contents: [] }],
+  nav: threePageNav(),
+  pageHeaderDesktop: makeHeader(),
+  pageHeaderMobile: makeHeader({
+    displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+  }),
+  ...overrides,
+});
+
+const migrate = async (brandPageModel: unknown) => {
+  const result = await migration23({
+    brandPageModel: brandPageModel as never,
+    useOldLogoRenderSize: false,
+  } as MigrationData);
+
+  return result.brandPageModel as never as ReturnType<typeof createModel>;
+};
+
+describe('migration23 — header logo migration', () => {
+  test('BP, 3 pages, setting on both viewports, home starts with a shown logo', async () => {
+    const homeLogo = makeLogoBlock({
+      logoImageHeight: '12rem',
+      logoImageWidth: '10rem',
+    });
+    const model = createModel({
+      pages: [
+        {
+          id: 'page-home',
+          title: 'Home',
+          contents: [homeLogo, makeTextBlock()],
+        },
+        { id: 'page-about', title: 'About', contents: [makeTextBlock()] },
+        { id: 'page-contact', title: 'Contact', contents: [makeTextBlock()] },
+      ],
+      ...bothViewportsAboveNav(),
+    });
+
+    const migrated = await migrate(model);
+
+    for (const header of [
+      migrated.pageHeaderDesktop,
+      migrated.pageHeaderMobile,
+    ]) {
+      expect(header.isLogoVisible).toBe(true);
+      expect(header.logoImage).toEqual({
+        logoDraftToken: 'D',
+        logoVariation: 2,
+        logoLastUpdate: '',
+      });
+      // Distinct height/width proves the two fields copy independently, not swapped.
+      expect(header.logoImageHeight).toBe('12rem');
+      expect(header.logoImageWidth).toBe('10rem');
+      expect(header.logoBackgroundStyle).toEqual({
+        backgroundColor: 'var(--palette-1)',
+      });
+      expect(header.logoTemplateImage).toBeUndefined();
+      expect(
+        (header.navigation as { renderAfterLogo?: boolean })['renderAfterLogo'],
+      ).toBeUndefined();
+    }
+
+    expect(migrated.pageHeaderDesktop.displayStyle).toBe(
+      HEADER_DISPLAY.DESKTOP_TAB_5,
+    );
+    expect(migrated.pageHeaderMobile.displayStyle).toBe(
+      HEADER_DISPLAY.MOBILE_TAB_1,
+    );
+    expect(migrated.pages[0].contents).toEqual([makeTextBlock()]);
+  });
+
+  test('setting on for desktop only — desktop shown, mobile hidden, home block kept', async () => {
+    const model = createModel({
+      pages: [
+        {
+          id: 'page-home',
+          title: 'Home',
+          contents: [makeLogoBlock()],
+        },
+        { id: 'page-about', title: 'About', contents: [] },
+        { id: 'page-contact', title: 'Contact', contents: [] },
+      ],
+      pageHeaderDesktop: makeHeader({
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: false,
+        },
+      }),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(migrated.pageHeaderDesktop.displayStyle).toBe(
+      HEADER_DISPLAY.DESKTOP_TAB_5,
+    );
+    expect(migrated.pageHeaderMobile.isLogoVisible).toBe(false);
+    expect(migrated.pageHeaderMobile.displayStyle).toBe(
+      HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+    );
+    // Not carried on both viewports, so the home block stays.
+    expect(migrated.pages[0].contents).toEqual([makeLogoBlock()]);
+  });
+
+  test('another page starts with a different logo, above the nav on both — removed, header holds home values', async () => {
+    const homeLogo = makeLogoBlock({ id: 'home-logo' });
+    const aboutLogo = makeLogoBlock({
+      id: 'about-logo',
+      logoImage: {
+        logoDraftToken: 'OTHER',
+        logoVariation: 5,
+        logoLastUpdate: '',
+      },
+      logoImageHeight: '20rem',
+      logoImageWidth: '20rem',
+      backgroundStyle: { backgroundColor: '#ffffff' },
+    });
+    const model = createModel({
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [homeLogo] },
+        { id: 'page-about', title: 'About', contents: [aboutLogo] },
+        { id: 'page-contact', title: 'Contact', contents: [] },
+      ],
+      ...bothViewportsAboveNav(),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pages[1].contents).toEqual([]);
+    expect(migrated.pageHeaderDesktop.logoImage).toEqual({
+      logoDraftToken: 'D',
+      logoVariation: 2,
+      logoLastUpdate: '',
+    });
+    expect(migrated.pageHeaderDesktop.logoBackgroundStyle).toEqual({
+      backgroundColor: 'var(--palette-1)',
+    });
+  });
+
+  test("a hidden home logo donates its own values, not another page's logo", async () => {
+    const homeLogo = makeLogoBlock({
+      isLogoVisible: false,
+      logoImage: {
+        logoDraftToken: 'HOME-HIDDEN',
+        logoVariation: 1,
+        logoLastUpdate: '',
+      },
+    });
+    const aboutLogo = makeLogoBlock({
+      id: 'about-logo',
+      logoImage: {
+        logoDraftToken: 'ABOUT',
+        logoVariation: 9,
+        logoLastUpdate: '',
+      },
+    });
+    const model = createModel({
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [homeLogo] },
+        { id: 'page-about', title: 'About', contents: [aboutLogo] },
+        { id: 'page-contact', title: 'Contact', contents: [] },
+      ],
+      ...bothViewportsAboveNav(),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(false);
+    expect(migrated.pageHeaderDesktop.logoImage).toEqual({
+      logoDraftToken: 'HOME-HIDDEN',
+      logoVariation: 1,
+      logoLastUpdate: '',
+    });
+  });
+
+  test('a nav with no orders falls back to pages[0], kept hidden', async () => {
+    const firstPageLogo = makeLogoBlock({
+      isLogoVisible: false,
+      logoImage: {
+        logoDraftToken: 'FIRST-PAGE',
+        logoVariation: 3,
+        logoLastUpdate: '',
+      },
+    });
+    const model = createModel({
+      nav: { routes: [], orders: [] },
+      pages: [
+        { id: 'page-first', title: 'First', contents: [firstPageLogo] },
+        { id: 'page-second', title: 'Second', contents: [makeTextBlock()] },
+      ],
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(false);
+    expect(migrated.pageHeaderDesktop.logoImage).toEqual({
+      logoDraftToken: 'FIRST-PAGE',
+      logoVariation: 3,
+      logoLastUpdate: '',
+    });
+  });
+
+  test('a stale header token with isLogoVisible true and no logo block anywhere is kept as-is', async () => {
+    const staleHeader = makeHeader({
+      isLogoVisible: true,
+      logoImage: {
+        logoDraftToken: 'STALE',
+        logoVariation: 9,
+        logoLastUpdate: '',
+      },
+      navigation: {
+        displayType: NAVIGATION_DISPLAY.TAB_1,
+        renderAfterLogo: true,
+      },
+    });
+    const model = createModel({
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [makeTextBlock()] },
+        { id: 'page-about', title: 'About', contents: [makeTextBlock()] },
+      ],
+      pageHeaderDesktop: staleHeader,
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(false);
+    expect(migrated.pageHeaderDesktop.logoImage).toEqual({
+      logoDraftToken: 'STALE',
+      logoVariation: 9,
+      logoLastUpdate: '',
+    });
+  });
+
+  test('single page, setting on, shown logo first — headers hidden, block kept', async () => {
+    const model = createModel({
+      pages: [{ id: 'page-home', title: 'Home', contents: [makeLogoBlock()] }],
+      // A hidden second route leaves only one visible top-level order with no visible
+      // sub-route, same as a true single-page nav: isNavShown is still false.
+      nav: {
+        routes: [
+          makeRoute('route-home', 'page-home'),
+          makeRoute('route-about', 'page-about', true),
+        ],
+        orders: [makeOrder('route-home'), makeOrder('route-about')],
+      },
+      pageHeaderDesktop: makeHeader({
+        displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(false);
+    // A single page's nav is never shown, so a stacked layout normalises to its
+    // centred no-logo twin even though the setting itself is on.
+    expect(migrated.pageHeaderDesktop.displayStyle).toBe(
+      HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
+    );
+    expect(migrated.pageHeaderMobile.isLogoVisible).toBe(false);
+    expect(migrated.pages[0].contents).toEqual([makeLogoBlock()]);
+  });
+
+  test('a single top-level page with a visible sub-page shows the nav — header shown, block removed', async () => {
+    const model = createModel({
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [makeLogoBlock()] },
+        { id: 'page-about', title: 'About', contents: [makeTextBlock()] },
+      ],
+      nav: {
+        routes: [
+          makeRoute('route-home', 'page-home'),
+          makeRoute('route-about', 'page-about'),
+        ],
+        orders: [
+          { routeId: 'route-home', subRoutes: [{ routeId: 'route-about' }] },
+        ],
+      },
+      ...bothViewportsAboveNav(),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(migrated.pageHeaderMobile.isLogoVisible).toBe(true);
+    expect(migrated.pages[0].contents).toEqual([]);
+  });
+
+  test('home starts with a divider; another page above on both — its block removed, headers hidden', async () => {
+    const aboutLogo = makeLogoBlock({ id: 'about-logo' });
+    const model = createModel({
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [makeDividerBlock()] },
+        { id: 'page-about', title: 'About', contents: [aboutLogo] },
+      ],
+      nav: {
+        routes: [
+          makeRoute('route-home', 'page-home'),
+          makeRoute('route-about', 'page-about'),
+        ],
+        orders: [makeOrder('route-home'), makeOrder('route-about')],
+      },
+      ...bothViewportsAboveNav(),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pages[1].contents).toEqual([]);
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(false);
+    expect(migrated.pageHeaderMobile.isLogoVisible).toBe(false);
+  });
+
+  test('hamburger on both viewports — only the inert header fields and a with-logo layout normalise', async () => {
+    const model = createModel({
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [makeLogoBlock()] },
+        { id: 'page-about', title: 'About', contents: [] },
+      ],
+      pageHeaderDesktop: makeHeader({
+        displayStyle: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+          renderAfterLogo: true,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+          renderAfterLogo: true,
+        },
+      }),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.displayStyle).toBe(
+      HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
+    );
+    expect(migrated.pageHeaderMobile.displayStyle).toBe(
+      HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
+    );
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(false);
+    expect(migrated.pageHeaderDesktop.logoImage).toEqual({
+      logoDraftToken: 'D',
+      logoVariation: 2,
+      logoLastUpdate: '',
+    });
+    // The hamburger exemption keeps every logo content block in place.
+    expect(migrated.pages[0].contents).toEqual([makeLogoBlock()]);
+  });
+
+  test('brand site: renderAfterLogo removed from both headers, everything else unchanged', async () => {
+    const model = createModel({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      pages: [{ id: 'page-home', title: 'Home', contents: [makeLogoBlock()] }],
+      pageHeaderDesktop: makeHeader({
+        logoBackgroundStyle: { backgroundColor: '#abcdef' },
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+        logoBackgroundStyle: { backgroundColor: '#abcdef' },
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+    });
+    const expected = JSON.parse(JSON.stringify(model));
+
+    delete expected.pageHeaderDesktop.navigation.renderAfterLogo;
+    delete expected.pageHeaderMobile.navigation.renderAfterLogo;
+
+    const migrated = await migrate(model);
+
+    expect(JSON.parse(JSON.stringify(migrated))).toEqual(expected);
+  });
+
+  test('header background colour clears to transparent, opacity kept', async () => {
+    const model = createModel({
+      pageHeaderDesktop: makeHeader({
+        backgroundStyle: { backgroundColor: '#123456', backgroundOpacity: 100 },
+      }),
+      pageHeaderMobile: makeHeader({
+        backgroundStyle: {
+          backgroundColor: 'var(--palette-2)',
+          backgroundOpacity: 60,
+        },
+      }),
+    });
+
+    const migrated = await migrate(model);
+
+    expect(migrated.pageHeaderDesktop.backgroundStyle).toEqual({
+      backgroundColor: 'transparent',
+      backgroundOpacity: 100,
+    });
+    expect(migrated.pageHeaderMobile.backgroundStyle).toEqual({
+      backgroundColor: 'transparent',
+      backgroundOpacity: 60,
+    });
+  });
+});
+
+describe('migration23 — from v0 (full migration chain)', () => {
+  test('a v0 BP with the legacy nav type and setting reaches the header-logo shape', async () => {
+    const legacyModel = {
+      v: 0,
+      brandPageType: BRAND_PAGE_TYPES.default,
+      styles: {},
+      pages: [
+        {
+          id: 'page-home',
+          title: 'Home',
+          contents: [makeLogoBlock({ logoImageUrl: 'https://x/d-2.png' })],
+        },
+      ],
+      nav: singlePageNav(),
+      pageHeaderDesktop: {
+        displayStyle: 'left-aligned',
+        isLogoVisible: true,
+        logoImageUrl: '',
+        logoImageHeight: '6rem',
+        logoImageWidth: '6rem',
+        backgroundStyle: {},
+        navigation: { displayType: 'tabs', renderAfterLogo: true },
+      },
+      pageHeaderMobile: {
+        displayStyle: 'left-aligned',
+        isLogoVisible: true,
+        logoImageUrl: '',
+        logoImageHeight: '6rem',
+        logoImageWidth: '6rem',
+        backgroundStyle: {},
+        navigation: { displayType: 'tabs', renderAfterLogo: true },
+      },
+      pageFooterDesktop: { displayStyle: 'justified', backgroundStyle: {} },
+      pageFooterMobile: { displayStyle: 'justified', backgroundStyle: {} },
+    };
+
+    const { brandPageModel } = await migrateBrandPageModel(
+      new BrandPageModel(legacyModel as never),
+      { isUserDraft: false, isServerRender: false },
+    );
+
+    expect(brandPageModel.v).toBe(23);
+    // Single page: nav is never shown, so the header logo ends up hidden — but it still
+    // carries the home page's logo block values, proving the whole chain reaches
+    // migration-23's header-logo shape from a pre-migration-01 record.
+    expect(brandPageModel.pageHeaderDesktop.isLogoVisible).toBe(false);
+    expect(brandPageModel.pageHeaderDesktop.logoImage.logoDraftToken).toBe('D');
+  });
+
+  test('a v22 model hydrated through the real NavigationStyles constructor still moves the logo (renderAfterLogo survives deserialization)', async () => {
+    // Unlike every other test above, this fixture is NOT handed to migration23 directly —
+    // it goes through `new BrandPageModel(...)`, so `renderAfterLogo` must survive
+    // `NavigationStyles`' own constructor (the deserialization boundary) to reach here at
+    // all. A multi-page nav is required: a single-page nav (as the from-v0 test above uses)
+    // never shows the logo regardless of this flag, so it can't tell a working
+    // carry-through from a broken one.
+    const legacyModel = {
+      v: 22,
+      brandPageType: BRAND_PAGE_TYPES.default,
+      styles: {},
+      pages: [
+        { id: 'page-home', title: 'Home', contents: [makeLogoBlock()] },
+        { id: 'page-about', title: 'About', contents: [] },
+        { id: 'page-contact', title: 'Contact', contents: [] },
+      ],
+      nav: threePageNav(),
+      pageHeaderDesktop: makeHeader({
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: true,
+        },
+      }),
+    };
+
+    const { brandPageModel } = await migrateBrandPageModel(
+      new BrandPageModel(legacyModel as never),
+      { isUserDraft: false, isServerRender: false },
+    );
+
+    expect(brandPageModel.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(brandPageModel.pageHeaderDesktop.displayStyle).toBe(
+      HEADER_DISPLAY.DESKTOP_TAB_5,
+    );
+    expect(brandPageModel.pageHeaderMobile.isLogoVisible).toBe(true);
+    expect(brandPageModel.pageHeaderMobile.displayStyle).toBe(
+      HEADER_DISPLAY.MOBILE_TAB_1,
+    );
+  });
+});
+
+// A template/create-draft load treats every tab viewport as above the nav, regardless of
+// the stored setting, so a new BP/BC site starts with its logo in the header.
+describe('migration23 — new sites', () => {
+  const migrateAsNewSite = async (brandPageModel: unknown) => {
+    const result = await migration23(
+      {
+        brandPageModel: brandPageModel as never,
+        useOldLogoRenderSize: false,
+      } as MigrationData,
+      { isUserDraft: false, isServerRender: false, isTemplate: true },
+    );
+
+    return result.brandPageModel as never as ReturnType<typeof createModel>;
+  };
+
+  test('a template whose home logo is stored below the nav still shows the header on both viewports, home block removed', async () => {
+    const model = createModel({
+      pages: [{ id: 'page-home', title: 'Home', contents: [makeLogoBlock()] }],
+      // Stored renderAfterLogo: false ("below the nav") — overridden for a template load.
+      pageHeaderDesktop: makeHeader({
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: false,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: false,
+        },
+      }),
+    });
+
+    const migrated = await migrateAsNewSite(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(migrated.pageHeaderMobile.isLogoVisible).toBe(true);
+    expect(migrated.pageHeaderDesktop.logoImage.logoDraftToken).toBe('D');
+    expect(migrated.pages[0].contents).toHaveLength(0);
+  });
+
+  test('a new single-page BP shows its header on both viewports, home block removed', async () => {
+    const model = createModel({
+      pages: [{ id: 'page-home', title: 'Home', contents: [makeLogoBlock()] }],
+      // A single page's nav is never shown — proving a template load no longer
+      // needs navShown to put the logo above the nav.
+      nav: singlePageNav(),
+      pageHeaderDesktop: makeHeader({
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: false,
+        },
+      }),
+      pageHeaderMobile: makeHeader({
+        displayStyle: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          renderAfterLogo: false,
+        },
+      }),
+    });
+
+    const migrated = await migrateAsNewSite(model);
+
+    expect(migrated.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(migrated.pageHeaderMobile.isLogoVisible).toBe(true);
+    expect(migrated.pages[0].contents).toHaveLength(0);
+  });
+
+  test('a template whose home logo block is hidden still shows the header on both viewports, home block removed; a template with no logo block still shows the header with its stored logo', async () => {
+    const hiddenLogoModel = createModel({
+      pages: [
+        {
+          id: 'page-home',
+          title: 'Home',
+          contents: [makeLogoBlock({ isLogoVisible: false })],
+        },
+      ],
+    });
+
+    const migratedHidden = await migrateAsNewSite(hiddenLogoModel);
+
+    expect(migratedHidden.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(migratedHidden.pageHeaderMobile.isLogoVisible).toBe(true);
+    expect(migratedHidden.pageHeaderDesktop.logoImage.logoDraftToken).toBe('D');
+    expect(migratedHidden.pages[0].contents).toHaveLength(0);
+
+    // The default model's home page has no logo block at all.
+    const migratedBlank = await migrateAsNewSite(createModel());
+
+    expect(migratedBlank.pageHeaderDesktop.isLogoVisible).toBe(true);
+    expect(migratedBlank.pageHeaderMobile.isLogoVisible).toBe(true);
+    expect(migratedBlank.pageHeaderDesktop.logoImage.logoDraftToken).toBe('');
+    expect(migratedBlank.pages[0].contents).toHaveLength(0);
+  });
+});