create-nextblock 0.16.4 → 0.17.0

package/templates/nextblock-template/lib/editor/dynamic-extensions.tsx

@@ -1,193 +1,193 @@
-'use client';
-
-import { ReactNodeViewRenderer, NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
-import { Textarea } from '@nextblock-cms/ui';
-import { Input } from '@nextblock-cms/ui';
-import { Label } from '@nextblock-cms/ui';
-import type { CustomBlockField } from '@nextblock-cms/utils';
-
-import {
-  createDynamicCustomBlockExtension,
-  createDynamicCustomBlockExtensions as createDynamicCustomBlockCoreExtensions,
-  type DynamicCustomBlockEditorDefinition,
-} from './dynamic-extension-core';
-import {
-  DBRelationSelect,
-  type DBRelationValue,
-} from '../../app/cms/custom-blocks/components/DBRelationSelect';
-import {
-  ImageR2Picker,
-  type ImageR2Value,
-} from '../../app/cms/custom-blocks/components/ImageR2Picker';
-
-export type { DynamicCustomBlockEditorDefinition } from './dynamic-extension-core';
-export {
-  buildDynamicCustomBlockInsertContent,
-  getDynamicCustomBlockAttributeNames,
-  getDynamicCustomBlockNodeName,
-} from './dynamic-extension-core';
-
-function isImageR2Value(value: unknown): ImageR2Value | null {
-  if (!value || typeof value !== 'object') {
-    return null;
-  }
-
-  const candidate = value as Partial<ImageR2Value>;
-  return typeof candidate.url === 'string' && typeof candidate.object_key === 'string'
-    ? (candidate as ImageR2Value)
-    : null;
-}
-
-function getStringValue(value: unknown) {
-  return typeof value === 'string' ? value : '';
-}
-
-function getRelationValue(value: unknown, multiple?: boolean): DBRelationValue {
-  if (multiple) {
-    return Array.isArray(value) ? value.map((entry) => String(entry)) : [];
-  }
-
-  return value === null || value === undefined || value === '' ? null : String(value);
-}
-
-function FieldControl({
-  field,
-  node,
-  updateAttributes,
-}: {
-  field: CustomBlockField;
-  node: NodeViewProps['node'];
-  updateAttributes: NodeViewProps['updateAttributes'];
-}) {
-  const fieldValue = node.attrs[field.key];
-  const fieldId = `dynamic-custom-block-${node.attrs.customBlockSlug}-${field.key}`;
-
-  if (field.type === 'rich-text') {
-    return (
-      <div className="space-y-1">
-        <Label htmlFor={fieldId} className="text-xs font-medium">
-          {field.label}
-        </Label>
-        <Textarea
-          id={fieldId}
-          value={getStringValue(fieldValue)}
-          onChange={(event) => updateAttributes({ [field.key]: event.target.value })}
-          placeholder={field.placeholder}
-          className="min-h-24 text-sm"
-        />
-      </div>
-    );
-  }
-
-  if (field.type === 'image_r2') {
-    return (
-      <div className="space-y-1">
-        <Label className="text-xs font-medium">{field.label}</Label>
-        <ImageR2Picker
-          accept={field.accept}
-          maxBytes={field.max_bytes}
-          value={isImageR2Value(fieldValue)}
-          onChange={(value) => updateAttributes({ [field.key]: value })}
-        />
-      </div>
-    );
-  }
-
-  if (field.type === 'db_relation') {
-    return (
-      <div className="space-y-1">
-        <Label className="text-xs font-medium">{field.label}</Label>
-        <DBRelationSelect
-          displayColumn={field.display_column}
-          filters={field.filters}
-          multiple={field.multiple}
-          onChange={(value) => updateAttributes({ [field.key]: value })}
-          table={field.table}
-          value={getRelationValue(fieldValue, field.multiple)}
-          valueColumn={field.value_column}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1">
-      <Label htmlFor={fieldId} className="text-xs font-medium">
-        {field.label}
-      </Label>
-      <Input
-        id={fieldId}
-        value={getStringValue(fieldValue)}
-        onChange={(event) => updateAttributes({ [field.key]: event.target.value })}
-        placeholder={field.placeholder}
-        className="h-9"
-      />
-    </div>
-  );
-}
-
-function DynamicCustomBlockNodeView({
-  definition,
-  node,
-  selected,
-  updateAttributes,
-}: NodeViewProps & { definition: DynamicCustomBlockEditorDefinition }) {
-  return (
-    <NodeViewWrapper
-      data-drag-handle
-      className={[
-        'my-4 rounded-md border bg-background text-foreground shadow-sm',
-        selected ? 'ring-2 ring-primary ring-offset-2' : '',
-      ].join(' ')}
-    >
-      <div contentEditable={false} className="border-b bg-muted/40 px-3 py-2">
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold">{definition.name}</p>
-            <p className="truncate font-mono text-[11px] text-muted-foreground">
-              {node.attrs.customBlockSlug}
-            </p>
-          </div>
-          <span className="rounded border bg-background px-2 py-1 text-[11px] uppercase text-muted-foreground">
-            Custom block
-          </span>
-        </div>
-      </div>
-
-      <div contentEditable={false} className="grid gap-3 p-3 md:grid-cols-2">
-        {definition.fields.map((field) => (
-          <FieldControl
-            key={field.key}
-            field={field}
-            node={node}
-            updateAttributes={updateAttributes}
-          />
-        ))}
-      </div>
-
-      <NodeViewContent className="min-h-12 border-t px-3 py-3 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0" />
-    </NodeViewWrapper>
-  );
-}
-
-export function createDynamicCustomBlockExtensions(
-  definitions: DynamicCustomBlockEditorDefinition[]
-) {
-  return createDynamicCustomBlockCoreExtensions(definitions, {
-    nodeViewRenderer: (definition) =>
-      ReactNodeViewRenderer((props) => (
-        <DynamicCustomBlockNodeView {...props} definition={definition} />
-      )),
-  });
-}
-
-export function createDynamicCustomBlockExtensionWithNodeView(
-  definition: DynamicCustomBlockEditorDefinition
-) {
-  return createDynamicCustomBlockExtension(definition, {
-    nodeViewRenderer: () =>
-      ReactNodeViewRenderer((props) => (
-        <DynamicCustomBlockNodeView {...props} definition={definition} />
-      )),
-  });
-}
+'use client';
+
+import { ReactNodeViewRenderer, NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
+import { Textarea } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import type { CustomBlockField } from '@nextblock-cms/utils';
+
+import {
+  createDynamicCustomBlockExtension,
+  createDynamicCustomBlockExtensions as createDynamicCustomBlockCoreExtensions,
+  type DynamicCustomBlockEditorDefinition,
+} from './dynamic-extension-core';
+import {
+  DBRelationSelect,
+  type DBRelationValue,
+} from '../../app/cms/custom-blocks/components/DBRelationSelect';
+import {
+  ImageR2Picker,
+  type ImageR2Value,
+} from '../../app/cms/custom-blocks/components/ImageR2Picker';
+
+export type { DynamicCustomBlockEditorDefinition } from './dynamic-extension-core';
+export {
+  buildDynamicCustomBlockInsertContent,
+  getDynamicCustomBlockAttributeNames,
+  getDynamicCustomBlockNodeName,
+} from './dynamic-extension-core';
+
+function isImageR2Value(value: unknown): ImageR2Value | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+
+  const candidate = value as Partial<ImageR2Value>;
+  return typeof candidate.url === 'string' && typeof candidate.object_key === 'string'
+    ? (candidate as ImageR2Value)
+    : null;
+}
+
+function getStringValue(value: unknown) {
+  return typeof value === 'string' ? value : '';
+}
+
+function getRelationValue(value: unknown, multiple?: boolean): DBRelationValue {
+  if (multiple) {
+    return Array.isArray(value) ? value.map((entry) => String(entry)) : [];
+  }
+
+  return value === null || value === undefined || value === '' ? null : String(value);
+}
+
+function FieldControl({
+  field,
+  node,
+  updateAttributes,
+}: {
+  field: CustomBlockField;
+  node: NodeViewProps['node'];
+  updateAttributes: NodeViewProps['updateAttributes'];
+}) {
+  const fieldValue = node.attrs[field.key];
+  const fieldId = `dynamic-custom-block-${node.attrs.customBlockSlug}-${field.key}`;
+
+  if (field.type === 'rich-text') {
+    return (
+      <div className="space-y-1">
+        <Label htmlFor={fieldId} className="text-xs font-medium">
+          {field.label}
+        </Label>
+        <Textarea
+          id={fieldId}
+          value={getStringValue(fieldValue)}
+          onChange={(event) => updateAttributes({ [field.key]: event.target.value })}
+          placeholder={field.placeholder}
+          className="min-h-24 text-sm"
+        />
+      </div>
+    );
+  }
+
+  if (field.type === 'image_r2') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-xs font-medium">{field.label}</Label>
+        <ImageR2Picker
+          accept={field.accept}
+          maxBytes={field.max_bytes}
+          value={isImageR2Value(fieldValue)}
+          onChange={(value) => updateAttributes({ [field.key]: value })}
+        />
+      </div>
+    );
+  }
+
+  if (field.type === 'db_relation') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-xs font-medium">{field.label}</Label>
+        <DBRelationSelect
+          displayColumn={field.display_column}
+          filters={field.filters}
+          multiple={field.multiple}
+          onChange={(value) => updateAttributes({ [field.key]: value })}
+          table={field.table}
+          value={getRelationValue(fieldValue, field.multiple)}
+          valueColumn={field.value_column}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <Label htmlFor={fieldId} className="text-xs font-medium">
+        {field.label}
+      </Label>
+      <Input
+        id={fieldId}
+        value={getStringValue(fieldValue)}
+        onChange={(event) => updateAttributes({ [field.key]: event.target.value })}
+        placeholder={field.placeholder}
+        className="h-9"
+      />
+    </div>
+  );
+}
+
+function DynamicCustomBlockNodeView({
+  definition,
+  node,
+  selected,
+  updateAttributes,
+}: NodeViewProps & { definition: DynamicCustomBlockEditorDefinition }) {
+  return (
+    <NodeViewWrapper
+      data-drag-handle
+      className={[
+        'my-4 rounded-md border bg-background text-foreground shadow-sm',
+        selected ? 'ring-2 ring-primary ring-offset-2' : '',
+      ].join(' ')}
+    >
+      <div contentEditable={false} className="border-b bg-muted/40 px-3 py-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold">{definition.name}</p>
+            <p className="truncate font-mono text-[11px] text-muted-foreground">
+              {node.attrs.customBlockSlug}
+            </p>
+          </div>
+          <span className="rounded border bg-background px-2 py-1 text-[11px] uppercase text-muted-foreground">
+            Custom block
+          </span>
+        </div>
+      </div>
+
+      <div contentEditable={false} className="grid gap-3 p-3 md:grid-cols-2">
+        {definition.fields.map((field) => (
+          <FieldControl
+            key={field.key}
+            field={field}
+            node={node}
+            updateAttributes={updateAttributes}
+          />
+        ))}
+      </div>
+
+      <NodeViewContent className="min-h-12 border-t px-3 py-3 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0" />
+    </NodeViewWrapper>
+  );
+}
+
+export function createDynamicCustomBlockExtensions(
+  definitions: DynamicCustomBlockEditorDefinition[]
+) {
+  return createDynamicCustomBlockCoreExtensions(definitions, {
+    nodeViewRenderer: (definition) =>
+      ReactNodeViewRenderer((props) => (
+        <DynamicCustomBlockNodeView {...props} definition={definition} />
+      )),
+  });
+}
+
+export function createDynamicCustomBlockExtensionWithNodeView(
+  definition: DynamicCustomBlockEditorDefinition
+) {
+  return createDynamicCustomBlockExtension(definition, {
+    nodeViewRenderer: () =>
+      ReactNodeViewRenderer((props) => (
+        <DynamicCustomBlockNodeView {...props} definition={definition} />
+      )),
+  });
+}

package/templates/nextblock-template/lib/email/branding-format.test.ts

@@ -1,133 +1,133 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-  EMAIL_BRAND_HEADER_TOKEN,
-  applyEmailBranding,
-  pickEmailLogoObjectKey,
-  renderEmailBrandHeader,
-} from './branding-format';
-
-describe('renderEmailBrandHeader', () => {
-  it('renders an email-safe logo img capped at width 150 when a logo is set', () => {
-    const html = renderEmailBrandHeader({
-      logoUrl: 'https://cdn.example.com/logo.png',
-      siteName: 'Acme Co',
-    });
-    expect(html).toContain('<img');
-    expect(html).toContain('src="https://cdn.example.com/logo.png"');
-    expect(html).toContain('width="150"');
-    expect(html).toContain('alt="Acme Co"');
-    // width is also pinned in the inline style so clients that ignore the attribute obey it.
-    expect(html).toContain('width:150px');
-  });
-
-  it('falls back to a text banner with the site name and no image when logo is null', () => {
-    const html = renderEmailBrandHeader({ logoUrl: null, siteName: 'Acme Co' });
-    expect(html).not.toContain('<img');
-    expect(html).toContain('Acme Co');
-  });
-
-  it('falls back to the text banner when the logo url is an empty string', () => {
-    const html = renderEmailBrandHeader({ logoUrl: '', siteName: 'Acme Co' });
-    expect(html).not.toContain('<img');
-    expect(html).toContain('Acme Co');
-  });
-
-  it('html-escapes the site name and logo url to prevent attribute/markup breakout', () => {
-    const html = renderEmailBrandHeader({
-      logoUrl: 'https://x.test/a"onerror="alert(1)',
-      siteName: 'A & B "Co" <script>',
-    });
-    expect(html).toContain('A &amp; B &quot;Co&quot; &lt;script&gt;');
-    expect(html).not.toContain('onerror="alert(1)"');
-    expect(html).toContain('&quot;onerror=&quot;');
-  });
-});
-
-describe('applyEmailBranding', () => {
-  it('replaces the brand-header token with the rendered logo header', () => {
-    const out = applyEmailBranding(`<div>${EMAIL_BRAND_HEADER_TOKEN}<p>Hi</p></div>`, {
-      logoUrl: 'https://cdn.example.com/logo.png',
-      siteName: 'Acme Co',
-    });
-    expect(out).not.toContain(EMAIL_BRAND_HEADER_TOKEN);
-    expect(out).toContain('src="https://cdn.example.com/logo.png"');
-    expect(out).toContain('<p>Hi</p>');
-  });
-
-  it('replaces every occurrence of the token', () => {
-    const out = applyEmailBranding(
-      `${EMAIL_BRAND_HEADER_TOKEN}|${EMAIL_BRAND_HEADER_TOKEN}`,
-      { logoUrl: null, siteName: 'Acme Co' },
-    );
-    expect(out).not.toContain(EMAIL_BRAND_HEADER_TOKEN);
-    expect(out.match(/Acme Co/g)?.length).toBe(2);
-  });
-
-  it('defensively swaps a stray hardcoded legacy NextBlock logo img for the tenant header', () => {
-    const legacy =
-      '<img src="https://nextblock.dev/images/nextblock-logo-small.webp" alt="Site logo" width="88" />';
-    const out = applyEmailBranding(`<td>${legacy}</td>`, {
-      logoUrl: 'https://cdn.example.com/logo.png',
-      siteName: 'Acme Co',
-    });
-    expect(out).not.toContain('nextblock-logo-small.webp');
-    expect(out).toContain('src="https://cdn.example.com/logo.png"');
-  });
-
-  it('swaps a stray legacy logo for the text banner when no tenant logo is set', () => {
-    const legacy =
-      '<img src="https://nextblock.dev/images/nextblock-logo-small.webp" alt="Site logo" width="88" />';
-    const out = applyEmailBranding(legacy, { logoUrl: null, siteName: 'Acme Co' });
-    expect(out).not.toContain('<img');
-    expect(out).toContain('Acme Co');
-  });
-
-  it('leaves an unrelated body untouched', () => {
-    const body = '<h2>New Form Submission</h2>';
-    expect(applyEmailBranding(body, { logoUrl: null, siteName: 'Acme Co' })).toBe(body);
-  });
-});
-
-describe('pickEmailLogoObjectKey', () => {
-  it('prefers the original_uploaded variant over the AVIF object_key', () => {
-    const media = {
-      object_key: 'uploads/logo_original.avif',
-      file_path: 'uploads/logo_original.avif',
-      variants: [
-        { objectKey: 'uploads/logo_large.avif', variantLabel: 'large_avif', fileType: 'image/avif' },
-        { objectKey: 'uploads/logo.png', variantLabel: 'original_uploaded', fileType: 'image/png' },
-        { objectKey: 'uploads/logo_original.avif', variantLabel: 'original_avif', fileType: 'image/avif' },
-      ],
-    };
-    expect(pickEmailLogoObjectKey(media)).toBe('uploads/logo.png');
-  });
-
-  it('falls back to object_key when there is no original_uploaded variant (seeded default)', () => {
-    const media = {
-      object_key: 'images/nextblock-logo-small.webp',
-      file_path: null,
-      variants: null,
-    };
-    expect(pickEmailLogoObjectKey(media)).toBe('images/nextblock-logo-small.webp');
-  });
-
-  it('falls back to file_path when object_key is missing', () => {
-    expect(
-      pickEmailLogoObjectKey({ object_key: null, file_path: 'uploads/legacy.png', variants: [] }),
-    ).toBe('uploads/legacy.png');
-  });
-
-  it('ignores an original_uploaded entry with a blank key and falls back', () => {
-    const media = {
-      object_key: 'uploads/logo_original.avif',
-      variants: [{ objectKey: '', variantLabel: 'original_uploaded' }],
-    };
-    expect(pickEmailLogoObjectKey(media)).toBe('uploads/logo_original.avif');
-  });
-
-  it('returns null when there is no media', () => {
-    expect(pickEmailLogoObjectKey(null)).toBeNull();
-    expect(pickEmailLogoObjectKey(undefined)).toBeNull();
-  });
-});
+import { describe, expect, it } from 'vitest';
+
+import {
+  EMAIL_BRAND_HEADER_TOKEN,
+  applyEmailBranding,
+  pickEmailLogoObjectKey,
+  renderEmailBrandHeader,
+} from './branding-format';
+
+describe('renderEmailBrandHeader', () => {
+  it('renders an email-safe logo img capped at width 150 when a logo is set', () => {
+    const html = renderEmailBrandHeader({
+      logoUrl: 'https://cdn.example.com/logo.png',
+      siteName: 'Acme Co',
+    });
+    expect(html).toContain('<img');
+    expect(html).toContain('src="https://cdn.example.com/logo.png"');
+    expect(html).toContain('width="150"');
+    expect(html).toContain('alt="Acme Co"');
+    // width is also pinned in the inline style so clients that ignore the attribute obey it.
+    expect(html).toContain('width:150px');
+  });
+
+  it('falls back to a text banner with the site name and no image when logo is null', () => {
+    const html = renderEmailBrandHeader({ logoUrl: null, siteName: 'Acme Co' });
+    expect(html).not.toContain('<img');
+    expect(html).toContain('Acme Co');
+  });
+
+  it('falls back to the text banner when the logo url is an empty string', () => {
+    const html = renderEmailBrandHeader({ logoUrl: '', siteName: 'Acme Co' });
+    expect(html).not.toContain('<img');
+    expect(html).toContain('Acme Co');
+  });
+
+  it('html-escapes the site name and logo url to prevent attribute/markup breakout', () => {
+    const html = renderEmailBrandHeader({
+      logoUrl: 'https://x.test/a"onerror="alert(1)',
+      siteName: 'A & B "Co" <script>',
+    });
+    expect(html).toContain('A &amp; B &quot;Co&quot; &lt;script&gt;');
+    expect(html).not.toContain('onerror="alert(1)"');
+    expect(html).toContain('&quot;onerror=&quot;');
+  });
+});
+
+describe('applyEmailBranding', () => {
+  it('replaces the brand-header token with the rendered logo header', () => {
+    const out = applyEmailBranding(`<div>${EMAIL_BRAND_HEADER_TOKEN}<p>Hi</p></div>`, {
+      logoUrl: 'https://cdn.example.com/logo.png',
+      siteName: 'Acme Co',
+    });
+    expect(out).not.toContain(EMAIL_BRAND_HEADER_TOKEN);
+    expect(out).toContain('src="https://cdn.example.com/logo.png"');
+    expect(out).toContain('<p>Hi</p>');
+  });
+
+  it('replaces every occurrence of the token', () => {
+    const out = applyEmailBranding(
+      `${EMAIL_BRAND_HEADER_TOKEN}|${EMAIL_BRAND_HEADER_TOKEN}`,
+      { logoUrl: null, siteName: 'Acme Co' },
+    );
+    expect(out).not.toContain(EMAIL_BRAND_HEADER_TOKEN);
+    expect(out.match(/Acme Co/g)?.length).toBe(2);
+  });
+
+  it('defensively swaps a stray hardcoded legacy NextBlock logo img for the tenant header', () => {
+    const legacy =
+      '<img src="https://nextblock.dev/images/nextblock-logo-small.webp" alt="Site logo" width="88" />';
+    const out = applyEmailBranding(`<td>${legacy}</td>`, {
+      logoUrl: 'https://cdn.example.com/logo.png',
+      siteName: 'Acme Co',
+    });
+    expect(out).not.toContain('nextblock-logo-small.webp');
+    expect(out).toContain('src="https://cdn.example.com/logo.png"');
+  });
+
+  it('swaps a stray legacy logo for the text banner when no tenant logo is set', () => {
+    const legacy =
+      '<img src="https://nextblock.dev/images/nextblock-logo-small.webp" alt="Site logo" width="88" />';
+    const out = applyEmailBranding(legacy, { logoUrl: null, siteName: 'Acme Co' });
+    expect(out).not.toContain('<img');
+    expect(out).toContain('Acme Co');
+  });
+
+  it('leaves an unrelated body untouched', () => {
+    const body = '<h2>New Form Submission</h2>';
+    expect(applyEmailBranding(body, { logoUrl: null, siteName: 'Acme Co' })).toBe(body);
+  });
+});
+
+describe('pickEmailLogoObjectKey', () => {
+  it('prefers the original_uploaded variant over the AVIF object_key', () => {
+    const media = {
+      object_key: 'uploads/logo_original.avif',
+      file_path: 'uploads/logo_original.avif',
+      variants: [
+        { objectKey: 'uploads/logo_large.avif', variantLabel: 'large_avif', fileType: 'image/avif' },
+        { objectKey: 'uploads/logo.png', variantLabel: 'original_uploaded', fileType: 'image/png' },
+        { objectKey: 'uploads/logo_original.avif', variantLabel: 'original_avif', fileType: 'image/avif' },
+      ],
+    };
+    expect(pickEmailLogoObjectKey(media)).toBe('uploads/logo.png');
+  });
+
+  it('falls back to object_key when there is no original_uploaded variant (seeded default)', () => {
+    const media = {
+      object_key: 'images/nextblock-logo-small.webp',
+      file_path: null,
+      variants: null,
+    };
+    expect(pickEmailLogoObjectKey(media)).toBe('images/nextblock-logo-small.webp');
+  });
+
+  it('falls back to file_path when object_key is missing', () => {
+    expect(
+      pickEmailLogoObjectKey({ object_key: null, file_path: 'uploads/legacy.png', variants: [] }),
+    ).toBe('uploads/legacy.png');
+  });
+
+  it('ignores an original_uploaded entry with a blank key and falls back', () => {
+    const media = {
+      object_key: 'uploads/logo_original.avif',
+      variants: [{ objectKey: '', variantLabel: 'original_uploaded' }],
+    };
+    expect(pickEmailLogoObjectKey(media)).toBe('uploads/logo_original.avif');
+  });
+
+  it('returns null when there is no media', () => {
+    expect(pickEmailLogoObjectKey(null)).toBeNull();
+    expect(pickEmailLogoObjectKey(undefined)).toBeNull();
+  });
+});