@capillarytech/creatives-library 9.0.61-alpha.3 → 9.0.62

package/v2Containers/Email/tests/index.test.js

@@ -0,0 +1,597 @@
+import React from 'react';
+import _ from 'lodash';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { Email } from '../index';
+import { sanitizeFileName, exportEmailTemplateHtml } from '../../../utils/downloadFile';
+import { response as initialSchemaResponse } from '../initialSchema';
+import FormBuilder from '../../../v2Components/FormBuilder';
+import { EXPORT_HTML_LABEL_ID, DISPLAY_NONE } from '../../../constants/unified';
+
+jest.mock('../../../utils/downloadFile', () => ({
+  sanitizeFileName: jest.fn((name) => (name || 'template').replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'template'),
+  exportEmailTemplateHtml: jest.fn(),
+  getExportHtmlDisabledTooltip: jest.fn((isEditMode, isContentLocked) => {
+    if (!isEditMode) return 'Export while creating not supported';
+    if (isContentLocked) return 'Email edited and Export HTML not supported in active session now';
+    return '';
+  }),
+}));
+
+jest.mock('@capillarytech/cap-ui-library', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-library'),
+  CapNotification: { error: jest.fn(), success: jest.fn(), warning: jest.fn() },
+}));
+
+// hasSupportCKEditor is a real feature-flag check (Auth.hasFeatureAccess) that returns
+// false when auth isn't initialized (as in tests) - mock it so drag-drop/CKEditor-switch
+// scenarios can be driven explicitly instead of always taking the "unsupported" branch.
+jest.mock('../../../utils/common', () => ({
+  ...jest.requireActual('../../../utils/common'),
+  hasSupportCKEditor: jest.fn(),
+}));
+
+// eslint-disable-next-line global-require
+const { hasSupportCKEditor } = require('../../../utils/common');
+
+// eslint-disable-next-line global-require
+const CapNotification = require('@capillarytech/cap-ui-library').CapNotification;
+
+describe('Email container', () => {
+  const emailDefinition = initialSchemaResponse.metaEntities[0].definition;
+
+  const buildProps = (overrides = {}) => ({
+    params: {},
+    location: { query: {}, pathname: '/email' },
+    templateData: null,
+    isFullMode: false,
+    editor: undefined,
+    getDefaultTags: undefined,
+    currentOrgDetails: { basic_details: { base_language: 'en', languages: {} } },
+    Templates: {},
+    Email: {},
+    metaEntities: {},
+    injectedTags: {},
+    tags: [],
+    selectedOfferDetails: [],
+    actions: {
+      getTemplateDetails: jest.fn(),
+      getCmsSetting: jest.fn(),
+      clearStoreValues: jest.fn(),
+      clearCRUDResponse: jest.fn(),
+      getCmsData: jest.fn(),
+      createTemplate: jest.fn(),
+      resetCmsData: jest.fn(),
+    },
+    templatesActions: {
+      resetTemplateData: jest.fn(),
+      resetUploadData: jest.fn(),
+    },
+    globalActions: {
+      fetchSchemaForEntity: jest.fn(),
+      addMessageToQueue: jest.fn(),
+    },
+    intl: {
+      formatMessage: (msg) => (msg && (msg.defaultMessage || msg.id)) || '',
+      formatDate: jest.fn(),
+      formatTime: jest.fn(),
+      formatRelative: jest.fn(),
+      formatNumber: jest.fn(),
+      formatPlural: jest.fn(),
+      formatHTMLMessage: jest.fn(),
+      now: jest.fn(),
+    },
+    router: {},
+    setIsLoadingContent: jest.fn(),
+    showTemplateName: jest.fn(),
+    ...overrides,
+  });
+
+  const renderEmail = (overrides = {}) => shallowWithIntl(<Email {...buildProps(overrides)} />);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // jest config sets resetMocks: true, wiping the default implementation baked into
+    // the jest.mock(...) factory before every test - re-establish it here.
+    sanitizeFileName.mockImplementation(
+      (name) => (name || 'template').replace(/[^a-zA-Z0-9-_ ]/g, '').trim() || 'template'
+    );
+    hasSupportCKEditor.mockReturnValue(false);
+  });
+
+  describe('exportHtml', () => {
+    it('shows an error and does not call the shared helper when templateDetails is empty', () => {
+      const wrapper = renderEmail({ Email: { templateDetails: {} } });
+
+      wrapper.instance().exportHtml();
+
+      expect(CapNotification.error).toHaveBeenCalled();
+      expect(exportEmailTemplateHtml).not.toHaveBeenCalled();
+    });
+
+    it('shows an error and does not call the shared helper when Export HTML is content-locked', () => {
+      const wrapper = renderEmail({ Email: { templateDetails: { name: 'My Template' } } });
+      wrapper.setState({ exportHtmlContentLocked: true });
+
+      wrapper.instance().exportHtml();
+
+      expect(CapNotification.error).toHaveBeenCalled();
+      expect(exportEmailTemplateHtml).not.toHaveBeenCalled();
+    });
+
+    it('delegates to the shared exportEmailTemplateHtml helper with a sanitized filename and the base language', () => {
+      const templateDetails = { name: 'My Template', versions: { base: { en: { 'template-content': '<p>hi</p>' } } } };
+      const wrapper = renderEmail({ Email: { templateDetails } });
+      exportEmailTemplateHtml.mockResolvedValue();
+
+      wrapper.instance().exportHtml();
+
+      expect(exportEmailTemplateHtml).toHaveBeenCalledWith(templateDetails, 'My Template.html', 'en');
+    });
+
+    it('shows an error notification when the shared helper rejects', async () => {
+      const templateDetails = { name: 'My Template', versions: { base: {} } };
+      const wrapper = renderEmail({ Email: { templateDetails } });
+      exportEmailTemplateHtml.mockRejectedValue(new Error('export failed'));
+
+      wrapper.instance().exportHtml();
+      await Promise.resolve().then(() => {}).then(() => {});
+
+      expect(CapNotification.error).toHaveBeenCalled();
+    });
+  });
+
+  describe('handleBeeContentChange', () => {
+    it('locks Export HTML on the base-language tab once content changes', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({
+        currentTab: 1,
+        formData: { 0: { activeTab: 'en' } },
+        exportHtmlContentLocked: false,
+      });
+
+      wrapper.instance().handleBeeContentChange();
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(true);
+    });
+
+    it('does nothing when the active tab is not the base language', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({
+        currentTab: 1,
+        formData: { 0: { activeTab: 'fr' } },
+        exportHtmlContentLocked: false,
+      });
+
+      wrapper.instance().handleBeeContentChange();
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(false);
+    });
+
+    it('is a no-op once already locked', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({
+        currentTab: 1,
+        formData: { 0: { activeTab: 'en' } },
+        exportHtmlContentLocked: true,
+      });
+      const setStateSpy = jest.spyOn(wrapper.instance(), 'setState');
+
+      wrapper.instance().handleBeeContentChange();
+
+      expect(setStateSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('onChange (CKEditor content change)', () => {
+    const makeEvt = (html) => ({ editor: { getData: () => html } });
+
+    it('locks Export HTML when the base-language CKEditor content diverges from the captured baseline', () => {
+      const wrapper = renderEmail();
+      wrapper.instance().originalBaseTemplateContent = '<p>Original</p>';
+      wrapper.setState({
+        currentTab: 1,
+        exportHtmlContentLocked: false,
+        formData: {
+          0: { activeTab: 'en', en: { is_drag_drop: false, 'template-content': '<p>Original</p>' } },
+          base: { tabKey: 'k1', en: {} },
+        },
+      });
+      wrapper.setState((prev) => ({ formData: { ...prev.formData, 0: { ...prev.formData[0], tabKey: 'k1' } } }));
+
+      wrapper.instance().onChange(makeEvt('<p>Changed</p>'));
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(true);
+      expect(wrapper.state('formData')[0].en['template-content']).toBe('<p>Changed</p>');
+    });
+
+    it('does not lock Export HTML when the new content equals the captured baseline (no genuine edit)', () => {
+      const wrapper = renderEmail();
+      wrapper.instance().originalBaseTemplateContent = '<p>Same</p>';
+      wrapper.setState({
+        currentTab: 1,
+        exportHtmlContentLocked: false,
+        formData: {
+          0: { activeTab: 'en', en: { is_drag_drop: false, 'template-content': '<p>Same</p>' } },
+          base: { en: {} },
+        },
+      });
+
+      wrapper.instance().onChange(makeEvt('<p>Same</p>'));
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(false);
+    });
+
+    it('ignores Bee (drag-drop) tabs - onChange only reacts to CKEditor content', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({
+        currentTab: 1,
+        exportHtmlContentLocked: false,
+        formData: {
+          0: { activeTab: 'en', en: { is_drag_drop: true, 'template-content': '<p>Original</p>' } },
+          base: { en: {} },
+        },
+      });
+
+      wrapper.instance().onChange(makeEvt('<p>Changed</p>'));
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(false);
+    });
+  });
+
+  describe('lockExportHtml', () => {
+    it('sets exportHtmlContentLocked and disables the export-html-label menu item in the schema', () => {
+      const wrapper = renderEmail();
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+      wrapper.setState({ schema });
+
+      wrapper.instance().lockExportHtml();
+
+      expect(wrapper.state('exportHtmlContentLocked')).toBe(true);
+      const col = wrapper.state('schema').containers[0].tabBarExtraContent.sections[0].inputFields[0].cols
+        .find((c) => c.id === 'tab-options-popover');
+      const exportLabel = col.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === EXPORT_HTML_LABEL_ID);
+      expect(exportLabel.style).toMatchObject({ opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' });
+    });
+
+    it('does not touch inactive containers', () => {
+      const wrapper = renderEmail();
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = false;
+      wrapper.setState({ schema });
+
+      wrapper.instance().lockExportHtml();
+
+      const col = wrapper.state('schema').containers[0].tabBarExtraContent.sections[0].inputFields[0].cols
+        .find((c) => c.id === 'tab-options-popover');
+      const exportLabel = col.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === EXPORT_HTML_LABEL_ID);
+      expect(exportLabel.style.display).toBe('');
+      expect(exportLabel.style.opacity).toBeUndefined();
+    });
+  });
+
+  describe('injectEvents (tab-options-popover export-html-label visual state)', () => {
+    const getExportLabel = (schema) => {
+      const container = schema.containers.find((c) => c.isActive) || schema.containers[0];
+      const col = container.tabBarExtraContent.sections[0].inputFields[0].cols
+        .find((c) => c.id === 'tab-options-popover');
+      return col.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === EXPORT_HTML_LABEL_ID);
+    };
+
+    it('renders export-html-label as enabled when editing and not content-locked', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({ isEdit: true, exportHtmlContentLocked: false });
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+
+      const result = wrapper.instance().injectEvents(schema);
+
+      const exportLabel = getExportLabel(result);
+      expect(exportLabel.style).toMatchObject({ opacity: 1, cursor: 'pointer', pointerEvents: 'auto' });
+    });
+
+    it('renders export-html-label as disabled when content-locked', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({ isEdit: true, exportHtmlContentLocked: true });
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+
+      const result = wrapper.instance().injectEvents(schema);
+
+      const exportLabel = getExportLabel(result);
+      expect(exportLabel.style).toMatchObject({ opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' });
+    });
+
+    it('renders export-html-label as disabled when not in edit mode (create flow)', () => {
+      const wrapper = renderEmail();
+      wrapper.setState({ isEdit: false, exportHtmlContentLocked: false });
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+
+      const result = wrapper.instance().injectEvents(schema);
+
+      const exportLabel = getExportLabel(result);
+      expect(exportLabel.style).toMatchObject({ opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' });
+    });
+  });
+
+  describe('render(): FormBuilder receives the Bee content-change/lock wiring', () => {
+    it('passes handleBeeContentChange and the current exportHtmlContentLocked flag to FormBuilder', () => {
+      const wrapper = renderEmail();
+      const schema = _.cloneDeep(emailDefinition);
+      wrapper.setState({
+        schema,
+        exportHtmlContentLocked: true,
+        formData: { 0: { activeTab: 'en', tabKey: 'k1' } },
+      });
+
+      const formBuilder = wrapper.find(FormBuilder);
+      expect(formBuilder.exists()).toBe(true);
+      expect(formBuilder.prop('onContentChange')).toBe(wrapper.instance().handleBeeContentChange);
+      expect(formBuilder.prop('exportHtmlLocked')).toBe(true);
+    });
+
+    it('reflects exportHtmlLocked=false when Export HTML is not content-locked', () => {
+      const wrapper = renderEmail();
+      const schema = _.cloneDeep(emailDefinition);
+      wrapper.setState({
+        schema,
+        exportHtmlContentLocked: false,
+        formData: { 0: { activeTab: 'en', tabKey: 'k1' } },
+      });
+
+      expect(wrapper.find(FormBuilder).prop('exportHtmlLocked')).toBe(false);
+    });
+  });
+
+  describe('removeStandAlone (tab-options-popover visibility outside full mode)', () => {
+    const getSwitchEditorLabel = (schema) => {
+      const cols = schema.containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const popoverCol = cols.find((c) => c.id === 'tab-options-popover');
+      return popoverCol.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === 'switch-editor-label');
+    };
+
+    it('hides add-language-button and switch-editor-label when not in full mode', () => {
+      const wrapper = renderEmail({ isFullMode: false });
+      const result = wrapper.instance().removeStandAlone(_.cloneDeep(emailDefinition));
+
+      const cols = result.containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const addLangCol = cols.find((c) => c.id === 'add-language-button');
+      expect(addLangCol.colStyle.display).toBe(DISPLAY_NONE);
+      expect(getSwitchEditorLabel(result).style.display).toBe(DISPLAY_NONE);
+    });
+
+    it('leaves add-language-button untouched in full mode', () => {
+      const wrapper = renderEmail({ isFullMode: true });
+      const result = wrapper.instance().removeStandAlone(_.cloneDeep(emailDefinition));
+
+      const cols = result.containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const addLangCol = cols.find((c) => c.id === 'add-language-button');
+      expect(addLangCol.colStyle.display).toBe('');
+    });
+  });
+
+  describe('handleEdmSave (mode === "switchEditor")', () => {
+    it('permanently hides the switch-editor-label once switched from Bee to CKEditor', () => {
+      const wrapper = renderEmail();
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+      wrapper.setState({
+        mode: 'switchEditor',
+        currentTab: 1,
+        schema,
+        formData: {
+          0: { activeTab: 'en', selectedLanguages: ['en'], en: { id: 'drag1' } },
+          base: { activeTab: 'en' },
+        },
+      });
+
+      wrapper.instance().handleEdmSave();
+
+      expect(wrapper.instance().props.actions.getCmsData).toHaveBeenCalled();
+      const cols = wrapper.state('schema').containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const popoverCol = cols.find((c) => c.id === 'tab-options-popover');
+      const switchLabel = popoverCol.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === 'switch-editor-label');
+      expect(switchLabel.style.display).toBe(DISPLAY_NONE);
+    });
+  });
+
+  describe('getBEEData (Bee editor save callback)', () => {
+    it('captures the Bee content into formData and permanently hides switch-editor-label', () => {
+      const wrapper = renderEmail();
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+      wrapper.setState({
+        currentTab: 1,
+        schema,
+        formData: {
+          0: { activeTab: 'en', selectedLanguages: ['en'], en: {} },
+          base: { en: {} },
+        },
+      });
+
+      wrapper.instance().getBEEData('{"page":{}}', '<html>bee content</html>');
+
+      expect(wrapper.state('formData')[0].en['template-content']).toBe('<html>bee content</html>');
+      expect(wrapper.state('formData')[0].en.is_drag_drop).toBe(false);
+      const cols = wrapper.state('schema').containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const popoverCol = cols.find((c) => c.id === 'tab-options-popover');
+      const switchLabel = popoverCol.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === 'switch-editor-label');
+      expect(switchLabel.style.display).toBe(DISPLAY_NONE);
+    });
+  });
+
+  describe('componentWillReceiveProps: originalBaseTemplateContent baseline capture (lines 471-477)', () => {
+    it('captures the base-language template content exactly once when templateDetails first arrives in edit mode', () => {
+      const wrapper = renderEmail({
+        Templates: {},
+        Email: {},
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+      });
+      wrapper.setState({ isEdit: true, formData: { 'template-name': '' } });
+      const instance = wrapper.instance();
+      expect(instance.originalContentCaptured).toBe(false);
+
+      const templateDetails = { versions: { base: { en: { 'template-content': '<p>Baseline</p>' } } } };
+      instance.componentWillReceiveProps({
+        ...wrapper.props(),
+        Templates: {},
+        Email: { templateDetails },
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+        isGetFormData: false,
+        location: { query: {} },
+      });
+
+      expect(instance.originalContentCaptured).toBe(true);
+      expect(instance.originalBaseTemplateContent).toBe('<p>Baseline</p>');
+    });
+
+    it('does not overwrite the baseline on a subsequent call (only captured once)', () => {
+      const wrapper = renderEmail({
+        Templates: {},
+        Email: {},
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+      });
+      wrapper.setState({ isEdit: true, formData: { 'template-name': '' } });
+      const instance = wrapper.instance();
+      instance.originalContentCaptured = true;
+      instance.originalBaseTemplateContent = '<p>First</p>';
+
+      const templateDetails = { versions: { base: { en: { 'template-content': '<p>Second</p>' } } } };
+      instance.componentWillReceiveProps({
+        ...wrapper.props(),
+        Templates: {},
+        Email: { templateDetails },
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+        isGetFormData: false,
+        location: { query: {} },
+      });
+
+      expect(instance.originalBaseTemplateContent).toBe('<p>First</p>');
+    });
+
+    it('uses the incoming (nextProps) base language, not the stale current-props one, when both arrive together', () => {
+      // this.props.currentOrgDetails is stale/unset (as it would be before org details load);
+      // nextProps carries the real base language in the same update as templateDetails.
+      const wrapper = renderEmail({
+        Templates: {},
+        Email: {},
+        currentOrgDetails: { basic_details: {} },
+      });
+      wrapper.setState({ isEdit: true, formData: { 'template-name': '' } });
+      const instance = wrapper.instance();
+
+      const templateDetails = {
+        versions: {
+          base: {
+            fr: { 'template-content': '<p>Contenu français</p>' },
+            en: { 'template-content': '<p>English content</p>' },
+          },
+        },
+      };
+      instance.componentWillReceiveProps({
+        ...wrapper.props(),
+        Templates: {},
+        Email: { templateDetails },
+        currentOrgDetails: { basic_details: { base_language: 'fr' } },
+        isGetFormData: false,
+        location: { query: {} },
+      });
+
+      expect(instance.originalBaseTemplateContent).toBe('<p>Contenu français</p>');
+    });
+  });
+
+  describe('componentWillReceiveProps: BEE init insert-image/switch-editor/tab-option-icon visibility (lines 538-551)', () => {
+    it('shows the switch-editor-label and hides insert-image when the BEE template is drag-drop enabled', () => {
+      hasSupportCKEditor.mockReturnValue(true);
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+      const wrapper = renderEmail({
+        Templates: {},
+        Email: {},
+        isFullMode: true,
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+      });
+      wrapper.setState({
+        schema,
+        formData: {
+          0: { activeTab: 'en', selectedLanguages: ['en'], en: {} },
+          base: { en: {} },
+        },
+      });
+      const instance = wrapper.instance();
+
+      instance.componentWillReceiveProps({
+        ...wrapper.props(),
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+        Templates: {},
+        Email: {
+          CmsSettings: { langId: 'en', isDragDrop: true, tokenData: 'tok', uuid: 'uuid-1', type: 'BEE_PLUGIN' },
+        },
+        isGetFormData: false,
+        location: { query: {} },
+      });
+
+      const cols = wrapper.state('schema').containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const insertImageCol = cols.find((c) => c.id === 'insert-image');
+      expect(insertImageCol.style.display).toBe(DISPLAY_NONE);
+      const popoverCol = cols.find((c) => c.id === 'tab-options-popover');
+      const switchLabel = popoverCol.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === 'switch-editor-label');
+      expect(switchLabel.style.display).toBe('');
+    });
+
+    it('hides insert-image visibility toggle when the BEE template is not drag-drop (CKEditor content)', () => {
+      const schema = _.cloneDeep(emailDefinition);
+      schema.containers[0].isActive = true;
+      const wrapper = renderEmail({
+        Templates: {},
+        Email: {},
+        isFullMode: true,
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+      });
+      wrapper.setState({
+        schema,
+        formData: {
+          0: { activeTab: 'en', selectedLanguages: ['en'], en: {} },
+          base: { en: {} },
+        },
+      });
+      const instance = wrapper.instance();
+
+      instance.componentWillReceiveProps({
+        ...wrapper.props(),
+        currentOrgDetails: { basic_details: { base_language: 'en' } },
+        Templates: {},
+        Email: {
+          CmsSettings: { langId: 'en', isDragDrop: false, htmlContent: encodeURIComponent('<p>ck content</p>') },
+        },
+        isGetFormData: false,
+        location: { query: {} },
+      });
+
+      const cols = wrapper.state('schema').containers[0].tabBarExtraContent.sections[0].inputFields[0].cols;
+      const insertImageCol = cols.find((c) => c.id === 'insert-image');
+      expect(insertImageCol.style.display).toBe('');
+      const popoverCol = cols.find((c) => c.id === 'tab-options-popover');
+      const switchLabel = popoverCol.content.sections[0].inputFields
+        .map((f) => f.cols[0])
+        .find((c) => c.id === 'switch-editor-label');
+      expect(switchLabel.style.display).toBe(DISPLAY_NONE);
+    });
+  });
+});