refactor: reuse test setup for data sources (#6099)

test/common.ts

@@ -1,2 +1,26 @@
+import Editor from '../src/editor';
+
 // DocEl + Head + Wrapper
 export const DEFAULT_CMPS = 3;
+
+export function setupTestEditor() {
+  const editor = new Editor({
+    mediaCondition: 'max-width',
+    avoidInlineStyle: true,
+  });
+  const em = editor.getModel();
+  const dsm = em.DataSources;
+  document.body.innerHTML = '<div id="fixtures"></div>';
+  const { Pages, Components } = em;
+  Pages.onLoad();
+  const cmpRoot = Components.getWrapper()!;
+  const View = Components.getType('wrapper')!.view;
+  const wrapperEl = new View({
+    model: cmpRoot,
+    config: { ...cmpRoot.config, em },
+  });
+  wrapperEl.render();
+  const fixtures = document.body.querySelector('#fixtures')!;
+  fixtures.appendChild(wrapperEl.el);
+  return { editor, em, dsm, cmpRoot, fixtures: fixtures as HTMLElement };
+}

test/specs/data_sources/index.ts

@@ -1,13 +1,11 @@
-import Editor from '../../../src/editor/model/Editor';
 import DataSourceManager from '../../../src/data_sources';
-import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
 import { DataSourceProps } from '../../../src/data_sources/types';
+import { setupTestEditor } from '../../common';
+import EditorModel from '../../../src/editor/model/Editor';
 
 describe('DataSourceManager', () => {
-  let em: Editor;
+  let em: EditorModel;
   let dsm: DataSourceManager;
-  let fixtures: HTMLElement;
-  let cmpRoot: ComponentWrapper;
   const dsTest: DataSourceProps = {
     id: 'ds1',
     records: [
@@ -20,23 +18,7 @@ describe('DataSourceManager', () => {
   const addDataSource = () => dsm.add(dsTest);
 
   beforeEach(() => {
-    em = new Editor({
-      mediaCondition: 'max-width',
-      avoidInlineStyle: true,
-    });
-    dsm = em.DataSources;
-    document.body.innerHTML = '<div id="fixtures"></div>';
-    const { Pages, Components } = em;
-    Pages.onLoad();
-    cmpRoot = Components.getWrapper()!;
-    const View = Components.getType('wrapper')!.view;
-    const wrapperEl = new View({
-      model: cmpRoot,
-      config: { ...cmpRoot.config, em },
-    });
-    wrapperEl.render();
-    fixtures = document.body.querySelector('#fixtures')!;
-    fixtures.appendChild(wrapperEl.el);
+    ({ em, dsm } = setupTestEditor());
   });
 
   afterEach(() => {

test/specs/data_sources/model/ComponentDataVariable.ts

@@ -1,33 +1,17 @@
-import Editor from '../../../../src/editor/model/Editor';
 import DataSourceManager from '../../../../src/data_sources';
 import ComponentWrapper from '../../../../src/dom_components/model/ComponentWrapper';
 import { DataVariableType } from '../../../../src/data_sources/model/DataVariable';
 import { DataSourceProps } from '../../../../src/data_sources/types';
+import { setupTestEditor } from '../../../common';
+import EditorModel from '../../../../src/editor/model/Editor';
 
 describe('ComponentDataVariable', () => {
-  let em: Editor;
+  let em: EditorModel;
   let dsm: DataSourceManager;
-  let fixtures: HTMLElement;
   let cmpRoot: ComponentWrapper;
 
   beforeEach(() => {
-    em = new Editor({
-      mediaCondition: 'max-width',
-      avoidInlineStyle: true,
-    });
-    dsm = em.DataSources;
-    document.body.innerHTML = '<div id="fixtures"></div>';
-    const { Pages, Components } = em;
-    Pages.onLoad();
-    cmpRoot = Components.getWrapper()!;
-    const View = Components.getType('wrapper')!.view;
-    const wrapperEl = new View({
-      model: cmpRoot,
-      config: { ...cmpRoot.config, em },
-    });
-    wrapperEl.render();
-    fixtures = document.body.querySelector('#fixtures')!;
-    fixtures.appendChild(wrapperEl.el);
+    ({ em, dsm, cmpRoot } = setupTestEditor());
   });
 
   afterEach(() => {

test/specs/data_sources/model/StyleDataVariable.ts

@@ -3,31 +3,15 @@ import DataSourceManager from '../../../../src/data_sources';
 import ComponentWrapper from '../../../../src/dom_components/model/ComponentWrapper';
 import { DataVariableType } from '../../../../src/data_sources/model/DataVariable';
 import { DataSourceProps } from '../../../../src/data_sources/types';
+import { setupTestEditor } from '../../../common';
 
 describe('StyleDataVariable', () => {
   let em: Editor;
   let dsm: DataSourceManager;
-  let fixtures: HTMLElement;
   let cmpRoot: ComponentWrapper;
 
   beforeEach(() => {
-    em = new Editor({
-      mediaCondition: 'max-width',
-      avoidInlineStyle: true,
-    });
-    dsm = em.DataSources;
-    document.body.innerHTML = '<div id="fixtures"></div>';
-    const { Pages, Components } = em;
-    Pages.onLoad();
-    cmpRoot = Components.getWrapper()!;
-    const View = Components.getType('wrapper')!.view;
-    const wrapperEl = new View({
-      model: cmpRoot,
-      config: { ...cmpRoot.config, em },
-    });
-    wrapperEl.render();
-    fixtures = document.body.querySelector('#fixtures')!;
-    fixtures.appendChild(wrapperEl.el);
+    ({ em, dsm, cmpRoot } = setupTestEditor());
   });
 
   afterEach(() => {

test/specs/data_sources/model/TraitDataVariable.ts

@@ -3,31 +3,15 @@ import DataSourceManager from '../../../../src/data_sources';
 import ComponentWrapper from '../../../../src/dom_components/model/ComponentWrapper';
 import { DataVariableType } from '../../../../src/data_sources/model/DataVariable';
 import { DataSourceProps } from '../../../../src/data_sources/types';
+import { setupTestEditor } from '../../../common';
 
 describe('TraitDataVariable', () => {
   let em: Editor;
   let dsm: DataSourceManager;
-  let fixtures: HTMLElement;
   let cmpRoot: ComponentWrapper;
 
   beforeEach(() => {
-    em = new Editor({
-      mediaCondition: 'max-width',
-      avoidInlineStyle: true,
-    });
-    dsm = em.DataSources;
-    document.body.innerHTML = '<div id="fixtures"></div>';
-    const { Pages, Components } = em;
-    Pages.onLoad();
-    cmpRoot = Components.getWrapper()!;
-    const View = Components.getType('wrapper')!.view;
-    const wrapperEl = new View({
-      model: cmpRoot,
-      config: { ...cmpRoot.config, em },
-    });
-    wrapperEl.render();
-    fixtures = document.body.querySelector('#fixtures')!;
-    fixtures.appendChild(wrapperEl.el);
+    ({ em, dsm, cmpRoot } = setupTestEditor());
   });
 
   afterEach(() => {

test/specs/data_sources/serialization.ts

@@ -5,6 +5,7 @@ import { DataVariableType } from '../../../src/data_sources/model/DataVariable';
 import EditorModel from '../../../src/editor/model/Editor';
 import { ProjectData } from '../../../src/storage_manager';
 import { DataSourceProps } from '../../../src/data_sources/types';
+import { setupTestEditor } from '../../common';
 
 // Filter out the unique ids and selectors replaced with 'data-variable-id'
 // Makes the snapshot more stable
@@ -61,24 +62,7 @@ describe('DataSource Serialization', () => {
   };
 
   beforeEach(() => {
-    editor = new Editor({
-      mediaCondition: 'max-width',
-      avoidInlineStyle: true,
-    });
-    em = editor.getModel();
-    dsm = em.DataSources;
-    document.body.innerHTML = '<div id="fixtures"></div>';
-    const { Pages, Components } = em;
-    Pages.onLoad();
-    cmpRoot = Components.getWrapper()!;
-    const View = Components.getType('wrapper')!.view;
-    const wrapperEl = new View({
-      model: cmpRoot,
-      config: { ...cmpRoot.config, em },
-    });
-    wrapperEl.render();
-    fixtures = document.body.querySelector('#fixtures')!;
-    fixtures.appendChild(wrapperEl.el);
+    ({ editor, em, dsm, cmpRoot, fixtures } = setupTestEditor());
 
     dsm.add(componentDataSource);
     dsm.add(styleDataSource);

test/specs/data_sources/transformers.ts

@@ -1,33 +1,17 @@
-import Editor from '../../../src/editor/model/Editor';
 import DataSourceManager from '../../../src/data_sources';
 import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
 import { DataVariableType } from '../../../src/data_sources/model/DataVariable';
 import { DataSourceProps } from '../../../src/data_sources/types';
+import { setupTestEditor } from '../../common';
+import EditorModel from '../../../src/editor/model/Editor';
 
 describe('DataSource Transformers', () => {
-  let em: Editor;
+  let em: EditorModel;
   let dsm: DataSourceManager;
-  let fixtures: HTMLElement;
   let cmpRoot: ComponentWrapper;
 
   beforeEach(() => {
-    em = new Editor({
-      mediaCondition: 'max-width',
-      avoidInlineStyle: true,
-    });
-    dsm = em.DataSources;
-    document.body.innerHTML = '<div id="fixtures"></div>';
-    const { Pages, Components } = em;
-    Pages.onLoad();
-    cmpRoot = Components.getWrapper()!;
-    const View = Components.getType('wrapper')!.view;
-    const wrapperEl = new View({
-      model: cmpRoot,
-      config: { ...cmpRoot.config, em },
-    });
-    wrapperEl.render();
-    fixtures = document.body.querySelector('#fixtures')!;
-    fixtures.appendChild(wrapperEl.el);
+    ({ em, dsm, cmpRoot } = setupTestEditor());
   });
 
   afterEach(() => {