@designcrowd/library.brand-page 6.2.5 → 6.2.6

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

@@ -8,8 +8,102 @@ import { FabricRenderClient } from '../../../clients/fabric-render-client';
 const mockFabricClientInstance = {
   getLogoSvgUrlByLogoImageAsync: vi.fn(),
   getLogoSvgUrlByLogoTemplateImageAsync: vi.fn(),
+  getLogoDimensionsByLogoImageAsync: vi.fn(),
+  getLogoDimensionsByLogoTemplateImageAsync: vi.fn(),
 };
 
+const expectNoDrawingRequest = () => {
+  expect(
+    mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync,
+  ).not.toHaveBeenCalled();
+  expect(
+    mockFabricClientInstance.getLogoSvgUrlByLogoTemplateImageAsync,
+  ).not.toHaveBeenCalled();
+};
+
+type Size = { width?: number; height?: number } | undefined;
+
+// The drawing and size-only lookups answer alike, so these pins hold before and after the switch (R3).
+const answerBoth = (
+  template: (token: string) => Size,
+  draft: (token: string) => Size,
+) => {
+  const withData = (size: Size) =>
+    size && { data: 'data:image/svg+xml;base64,', ...size };
+
+  mockFabricClientInstance.getLogoDimensionsByLogoTemplateImageAsync.mockImplementation(
+    async ({ logoTemplateToken }) => template(logoTemplateToken),
+  );
+  mockFabricClientInstance.getLogoDimensionsByLogoImageAsync.mockImplementation(
+    async ({ logoDraftToken }) => draft(logoDraftToken),
+  );
+  mockFabricClientInstance.getLogoSvgUrlByLogoTemplateImageAsync.mockImplementation(
+    async ({ logoTemplateToken }) => withData(template(logoTemplateToken)),
+  );
+  mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync.mockImplementation(
+    async ({ logoDraftToken }) => withData(draft(logoDraftToken)),
+  );
+};
+
+const sizeFor = (token: string): Size =>
+  token.endsWith('-wide')
+    ? { width: 300, height: 100 }
+    : { width: 100, height: 300 };
+
+// Two pages of logo contents: a template on the first, a draft on the second.
+const createTwoPageData = (brandPageType: string) =>
+  createTestBrandPageData({
+    brandPageType,
+    pages: [
+      {
+        title: 'Home',
+        slug: 'home',
+        contents: [
+          {
+            id: '1',
+            type: 'logo',
+            logoTemplateImage: {
+              logoTemplateToken: 'template-wide',
+              logoTemplateText: 'Acme',
+              logoTemplateVersion: 3,
+            },
+            logoImageWidth: '12rem',
+            logoImageHeight: '9rem',
+            isLogoVisible: true,
+            backgroundStyle: {},
+          },
+        ],
+      },
+      {
+        title: 'About',
+        slug: 'about',
+        contents: [
+          {
+            id: '2',
+            type: 'logo',
+            logoImage: { logoDraftToken: 'draft-tall', logoVariation: 1 },
+            logoImageWidth: '9rem',
+            logoImageHeight: '10rem',
+            isLogoVisible: true,
+            backgroundStyle: {},
+          },
+        ],
+      },
+    ],
+  });
+
+const logoSizes = (result: MigrationData) =>
+  result.brandPageModel.pages.map((page) => {
+    const logo = page.contents[0] as LogoContent;
+
+    return [logo.logoImageWidth, logo.logoImageHeight];
+  });
+
+const ORIGINAL_SIZES = [
+  ['12rem', '9rem'],
+  ['9rem', '10rem'],
+];
+
 // Mock FabricRenderClient
 vi.mock('../../../clients/fabric-render-client', () => ({
   FabricRenderClient: {
@@ -101,11 +195,12 @@ describe('migration08', () => {
     const migrationData = createMigrationData(brandPageData);
 
     // Mock the fabric client response
-    mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync.mockResolvedValue({
-      width: 120,
-      height: 80,
-      data: 'test-svg-data',
-    });
+    mockFabricClientInstance.getLogoDimensionsByLogoImageAsync.mockResolvedValue(
+      {
+        width: 120,
+        height: 80,
+      },
+    );
 
     const result = await migration08(migrationData, {
       isServerRender: false,
@@ -114,11 +209,12 @@ describe('migration08', () => {
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(
-      mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync,
+      mockFabricClientInstance.getLogoDimensionsByLogoImageAsync,
     ).toHaveBeenCalledWith({
       logoDraftToken: 'test-token',
       logoVariation: 0,
     });
+    expectNoDrawingRequest();
   });
 
   test('should skip brandSite type (brandSite does not have logo content)', async () => {
@@ -170,11 +266,12 @@ describe('migration08', () => {
 
     // Fabric client should not have been called
     expect(
-      mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync,
+      mockFabricClientInstance.getLogoDimensionsByLogoImageAsync,
     ).not.toHaveBeenCalled();
     expect(
-      mockFabricClientInstance.getLogoSvgUrlByLogoTemplateImageAsync,
+      mockFabricClientInstance.getLogoDimensionsByLogoTemplateImageAsync,
     ).not.toHaveBeenCalled();
+    expectNoDrawingRequest();
   });
 
   test('should handle brandContact type with logo content', async () => {
@@ -206,6 +303,13 @@ describe('migration08', () => {
     });
 
     expect(result.useOldLogoRenderSize).toBe(false);
+    expect(
+      mockFabricClientInstance.getLogoDimensionsByLogoImageAsync,
+    ).toHaveBeenCalledWith({
+      logoDraftToken: 'test-token',
+      logoVariation: 0,
+    });
+    expectNoDrawingRequest();
   });
 
   test('should handle multiple pages with logo content', async () => {
@@ -249,13 +353,12 @@ describe('migration08', () => {
     // Mock the fabric client response
     const mockFabricClient = FabricRenderClient.getInstance();
 
-    vi.mocked(mockFabricClient.getLogoSvgUrlByLogoImageAsync).mockResolvedValue(
-      {
-        width: 120,
-        height: 80,
-        data: 'test-svg-data',
-      },
-    );
+    vi.mocked(
+      mockFabricClient.getLogoDimensionsByLogoImageAsync,
+    ).mockResolvedValue({
+      width: 120,
+      height: 80,
+    });
 
     const result = await migration08(migrationData, {
       isServerRender: false,
@@ -264,8 +367,9 @@ describe('migration08', () => {
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(
-      mockFabricClient.getLogoSvgUrlByLogoImageAsync,
+      mockFabricClient.getLogoDimensionsByLogoImageAsync,
     ).toHaveBeenCalledTimes(2);
+    expectNoDrawingRequest();
   });
 
   test('should handle logo content without logo tokens', async () => {
@@ -305,6 +409,13 @@ describe('migration08', () => {
       (result.brandPageModel.pages[0].contents[0] as LogoContent)
         .logoImageWidth,
     ).toBe('15rem');
+    expect(
+      mockFabricClientInstance.getLogoDimensionsByLogoImageAsync,
+    ).not.toHaveBeenCalled();
+    expect(
+      mockFabricClientInstance.getLogoDimensionsByLogoTemplateImageAsync,
+    ).not.toHaveBeenCalled();
+    expectNoDrawingRequest();
   });
 
   test('should handle logo template images', async () => {
@@ -334,11 +445,10 @@ describe('migration08', () => {
     const mockFabricClient = FabricRenderClient.getInstance();
 
     vi.mocked(
-      mockFabricClient.getLogoSvgUrlByLogoTemplateImageAsync,
+      mockFabricClient.getLogoDimensionsByLogoTemplateImageAsync,
     ).mockResolvedValue({
       width: 200,
       height: 100,
-      data: 'test-template-svg-data',
     });
 
     const _result = await migration08(migrationData, {
@@ -347,10 +457,11 @@ describe('migration08', () => {
     });
 
     expect(
-      mockFabricClient.getLogoSvgUrlByLogoTemplateImageAsync,
+      mockFabricClient.getLogoDimensionsByLogoTemplateImageAsync,
     ).toHaveBeenCalledWith({
       logoTemplateToken: 'template-token',
     });
+    expectNoDrawingRequest();
   });
 
   test('should handle error gracefully', async () => {
@@ -379,9 +490,9 @@ describe('migration08', () => {
     // Mock the fabric client to throw an error
     const mockFabricClient = FabricRenderClient.getInstance();
 
-    vi.mocked(mockFabricClient.getLogoSvgUrlByLogoImageAsync).mockRejectedValue(
-      new Error('API Error'),
-    );
+    vi.mocked(
+      mockFabricClient.getLogoDimensionsByLogoImageAsync,
+    ).mockRejectedValue(new Error('API Error'));
 
     const result = await migration08(migrationData, {
       isServerRender: false,
@@ -423,4 +534,52 @@ describe('migration08', () => {
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(result.brandPageModel.pages[0].contents.length).toBe(2);
   });
+
+  test.each([BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact])(
+    'same sizes: pins each %s logo content from the reply',
+    async (brandPageType) => {
+      answerBoth(sizeFor, sizeFor);
+
+      const result = await migration08(
+        createMigrationData(createTwoPageData(brandPageType)),
+        { isServerRender: false, isUserDraft: false },
+      );
+
+      expect(result.useOldLogoRenderSize).toBe(false);
+      expect(logoSizes(result)).toEqual([
+        ['4rem', '4rem'],
+        ['10rem', '10rem'],
+      ]);
+    },
+  );
+
+  test('not OK: an empty reply leaves every size unchanged', async () => {
+    answerBoth(
+      () => undefined,
+      () => undefined,
+    );
+
+    const result = await migration08(
+      createMigrationData(createTwoPageData(BRAND_PAGE_TYPES.default)),
+      { isServerRender: false, isUserDraft: false },
+    );
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(logoSizes(result)).toEqual(ORIGINAL_SIZES);
+  });
+
+  test('missing size: a zero or absent dimension leaves every size unchanged', async () => {
+    answerBoth(
+      () => ({ width: 0, height: 100 }),
+      () => ({ width: 120 }),
+    );
+
+    const result = await migration08(
+      createMigrationData(createTwoPageData(BRAND_PAGE_TYPES.default)),
+      { isServerRender: false, isUserDraft: false },
+    );
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(logoSizes(result)).toEqual(ORIGINAL_SIZES);
+  });
 });

package/src/brand-page/utils/migration/migration-08.ts

@@ -45,10 +45,11 @@ export const migration08 = async (
       });
     });
 
+    // Size-only lookups, by recorded exception: 0031-released-logo-size-migrations-may-use-a-size-only-address.md
     const logoDataPromises = logoContents.map(async ({ content }) => {
       if (content.logoTemplateImage?.logoTemplateToken) {
         const logoData =
-          await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(
+          await fabricClient.getLogoDimensionsByLogoTemplateImageAsync(
             content.logoTemplateImage,
           );
 
@@ -56,7 +57,7 @@ export const migration08 = async (
       }
 
       if (content.logoImage?.logoDraftToken) {
-        const logoData = await fabricClient.getLogoSvgUrlByLogoImageAsync({
+        const logoData = await fabricClient.getLogoDimensionsByLogoImageAsync({
           logoDraftToken: content.logoImage.logoDraftToken,
           logoVariation: content.logoImage.logoVariation,
         });

package/src/clients/fabric-render-client.test.ts

@@ -0,0 +1,198 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { FabricRenderClient } from './fabric-render-client';
+
+const BASE_URL = 'https://fabric.test';
+
+const TEMPLATE_IMAGE = {
+  logoTemplateToken: 'template-token',
+  logoTemplateText: 'A & B',
+  logoTemplateVersion: 3,
+  layout: 'stacked',
+};
+
+const LOGO_IMAGE = {
+  logoDraftToken: 'draft-token',
+  logoVariation: 2,
+  logoLastUpdate: '99',
+};
+
+const jsonReply = (body: unknown, status = 200) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+// A size request goes to the drawing address plus `/dimensions`, with the drawing's query minus outputFormat.
+const expectSizeRequestFor = (requested: unknown, drawingUrl: string) => {
+  const size = new URL(String(requested));
+  const drawing = new URL(drawingUrl);
+
+  drawing.searchParams.delete('outputFormat');
+
+  expect(`${size.origin}${size.pathname}`).toBe(
+    `${drawing.origin}${drawing.pathname}/dimensions`,
+  );
+  expect([...size.searchParams]).toEqual([...drawing.searchParams]);
+};
+
+const createClient = (): FabricRenderClient => {
+  FabricRenderClient.overrideInstance(undefined);
+  FabricRenderClient.setInstance({ baseUrl: BASE_URL });
+
+  return FabricRenderClient.getInstance();
+};
+
+describe('FabricRenderClient logo lookups', () => {
+  let client: FabricRenderClient;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    client = createClient();
+    fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    FabricRenderClient.overrideInstance(undefined);
+  });
+
+  describe('drawing requests unchanged', () => {
+    test('the template drawing still fetches base64svgjson and returns data, width and height', async () => {
+      fetchMock.mockResolvedValue(
+        jsonReply({ data: 'data:svg', width: 300, height: 100 }),
+      );
+
+      const result =
+        await client.getLogoSvgUrlByLogoTemplateImageAsync(TEMPLATE_IMAGE);
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(fetchMock).toHaveBeenCalledWith(
+        `${BASE_URL}/asset/logotemplate/brand-page/template-token?dimensionsType=preview_image_transparent_no_buffer&outputFormat=base64svgjson&logoTemplateVersion=3&text=A%20%26%20B&layout=stacked`,
+      );
+      expect(result).toEqual({ data: 'data:svg', width: 300, height: 100 });
+    });
+
+    test('the draft drawing still fetches base64svgjson and returns data, width and height', async () => {
+      fetchMock.mockResolvedValue(
+        jsonReply({ data: 'data:svg', width: 100, height: 300 }),
+      );
+
+      const result = await client.getLogoSvgUrlByLogoImageAsync(LOGO_IMAGE);
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(fetchMock).toHaveBeenCalledWith(
+        `${BASE_URL}/asset/logodraft/brand-page/draft-token?v=99&outputFormat=base64svgjson&dimensionsType=preview_image_transparent_no_buffer&variation=icontransparentbackgroundonly`,
+      );
+      expect(result).toEqual({ data: 'data:svg', width: 100, height: 300 });
+    });
+  });
+
+  test('template size request: asks the /dimensions companion and returns only width and height', async () => {
+    fetchMock.mockResolvedValue(jsonReply({ width: 300, height: 100 }));
+
+    const result =
+      await client.getLogoDimensionsByLogoTemplateImageAsync(TEMPLATE_IMAGE);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(String(fetchMock.mock.calls[0][0])).toMatch(
+      `${BASE_URL}/asset/logotemplate/brand-page/template-token/dimensions?`,
+    );
+    expectSizeRequestFor(
+      fetchMock.mock.calls[0][0],
+      client.getLogoTemplateUrlByLogoTemplateImage(
+        TEMPLATE_IMAGE,
+        'base64svgjson',
+      ),
+    );
+    expect(result).toStrictEqual({ width: 300, height: 100 });
+  });
+
+  test('draft size request: asks the /dimensions companion and returns only width and height', async () => {
+    fetchMock.mockResolvedValue(jsonReply({ width: 100, height: 300 }));
+
+    const result = await client.getLogoDimensionsByLogoImageAsync(LOGO_IMAGE);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(String(fetchMock.mock.calls[0][0])).toMatch(
+      `${BASE_URL}/asset/logodraft/brand-page/draft-token/dimensions?`,
+    );
+    expectSizeRequestFor(
+      fetchMock.mock.calls[0][0],
+      client.getLogoVariationUrlByLogoImage(LOGO_IMAGE, 'base64svgjson') ?? '',
+    );
+    expect(result).toStrictEqual({ width: 100, height: 300 });
+  });
+
+  test('not deployed: a 404 from the companion answers undefined after one request, never the drawing', async () => {
+    fetchMock.mockImplementation(async () => jsonReply({}, 404));
+
+    await expect(
+      client.getLogoDimensionsByLogoTemplateImageAsync(TEMPLATE_IMAGE),
+    ).resolves.toBeUndefined();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    await expect(
+      client.getLogoDimensionsByLogoImageAsync(LOGO_IMAGE),
+    ).resolves.toBeUndefined();
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(
+      fetchMock.mock.calls.every(
+        ([url]) =>
+          new URL(String(url)).pathname.endsWith('/dimensions') &&
+          !String(url).includes('outputFormat'),
+      ),
+    ).toBe(true);
+  });
+
+  describe('no logo reference', () => {
+    test('an empty draft token answers undefined without a request', async () => {
+      await expect(
+        client.getLogoDimensionsByLogoImageAsync({
+          logoDraftToken: '',
+          logoVariation: 0,
+        }),
+      ).resolves.toBeUndefined();
+      expect(fetchMock).not.toHaveBeenCalled();
+    });
+
+    test('an undefined logo image throws a TypeError, as its drawing twin does', async () => {
+      const missing = undefined as unknown as typeof LOGO_IMAGE;
+
+      await expect(
+        client.getLogoDimensionsByLogoImageAsync(missing),
+      ).rejects.toBeInstanceOf(TypeError);
+      await expect(
+        client.getLogoSvgUrlByLogoImageAsync(missing),
+      ).rejects.toBeInstanceOf(TypeError);
+      expect(fetchMock).not.toHaveBeenCalled();
+    });
+  });
+
+  test('unreadable reply: a 200 PNG rejects after one request, with no fallback to the drawing', async () => {
+    fetchMock.mockImplementation(
+      async () =>
+        new Response(new Uint8Array([0x89, 0x50, 0x4e, 0x47]), {
+          status: 200,
+          headers: { 'Content-Type': 'image/png' },
+        }),
+    );
+
+    await expect(
+      client.getLogoDimensionsByLogoTemplateImageAsync(TEMPLATE_IMAGE),
+    ).rejects.toThrow();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    await expect(
+      client.getLogoDimensionsByLogoImageAsync(LOGO_IMAGE),
+    ).rejects.toThrow();
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(
+      fetchMock.mock.calls.every(
+        ([url]) =>
+          new URL(String(url)).pathname.endsWith('/dimensions') &&
+          !String(url).includes('outputFormat'),
+      ),
+    ).toBe(true);
+  });
+});

package/src/clients/fabric-render-client.ts

@@ -317,4 +317,89 @@ export class FabricRenderClient {
 
     return { data, width, height };
   }
+
+  // Released migrations 07/08 call the two size methods: 0031-released-logo-size-migrations-may-use-a-size-only-address.md
+  async getLogoDimensionsByLogoTemplateImageAsync(logoTemplateImage: {
+    logoTemplateToken: string;
+    logoTemplateText: string;
+    logoTemplateVersion: number;
+    layout?: string;
+  }): Promise<{ width: number; height: number } | undefined> {
+    return this.fetchLogoDimensionsAsync(
+      this.getLogoTemplateDimensionsUrl(logoTemplateImage),
+    );
+  }
+
+  async getLogoDimensionsByLogoImageAsync(logoImage: {
+    logoDraftToken: string;
+    logoVariation: number;
+    logoLastUpdate?: string;
+  }): Promise<{ width: number; height: number } | undefined> {
+    return this.fetchLogoDimensionsAsync(
+      this.getLogoDraftDimensionsUrl(logoImage),
+    );
+  }
+
+  // Each brand-page address has a size-only companion at `/dimensions`, which reads only what these two builders send.
+  // extract if this grows: this repeats getLogoTemplateUrlByLogoTemplateImage's query.
+  private getLogoTemplateDimensionsUrl(logoTemplateImage: {
+    logoTemplateToken: string;
+    logoTemplateText: string;
+    logoTemplateVersion: number;
+    layout?: string;
+  }): string {
+    const url = `${this.baseUrl}/asset/logotemplate/brand-page/${logoTemplateImage.logoTemplateToken}/dimensions?dimensionsType=preview_image_transparent_no_buffer&logoTemplateVersion=${logoTemplateImage.logoTemplateVersion}&text=${encodeURIComponent(logoTemplateImage.logoTemplateText)}`;
+
+    return logoTemplateImage.layout
+      ? `${url}&layout=${logoTemplateImage.layout}`
+      : url;
+  }
+
+  private getLogoDraftDimensionsUrl(logoImage: {
+    logoDraftToken: string;
+    logoVariation: number;
+    logoLastUpdate?: string;
+  }): string | undefined {
+    if (!logoImage.logoDraftToken) {
+      console.warn('getLogoDraftDimensionsUrl: invalid logo draft token');
+
+      return undefined;
+    }
+
+    const definition =
+      LogoVariationDefinitions[
+        typeof logoImage.logoVariation === 'number'
+          ? logoImage.logoVariation
+          : 0
+      ];
+
+    if (!definition) {
+      return undefined;
+    }
+
+    const variationQuery = Object.entries(definition)
+      .map(([key, value]) => `${key}=${value}`)
+      .join('&');
+
+    return `${this.baseUrl}/asset/logodraft/brand-page/${logoImage.logoDraftToken}/dimensions?v=${logoImage.logoLastUpdate || ''}&${variationQuery}`;
+  }
+
+  // extract if this grows: the four logo JSON fetches repeat this shape.
+  private async fetchLogoDimensionsAsync(
+    url: string | undefined,
+  ): Promise<{ width: number; height: number } | undefined> {
+    if (!url) {
+      return undefined;
+    }
+
+    const response = await fetch(url);
+
+    if (response.status !== 200) {
+      return undefined;
+    }
+
+    const { width, height } = await response.json();
+
+    return { width, height };
+  }
 }