From 0cd6374c215cf772ad8ff29fe9067a904fb2c05a Mon Sep 17 00:00:00 2001
From: Daniel Starns <danielstarns@hotmail.com>
Date: Sat, 31 Aug 2024 01:03:34 -0700
Subject: [PATCH] refactor: reuse test setup for data sources (#6099)

---
 test/common.ts                                | 24 +++++++++++++++++
 test/specs/data_sources/index.ts              | 26 +++----------------
 .../model/ComponentDataVariable.ts            | 24 +++--------------
 .../data_sources/model/StyleDataVariable.ts   | 20 ++------------
 .../data_sources/model/TraitDataVariable.ts   | 20 ++------------
 test/specs/data_sources/serialization.ts      | 20 ++------------
 test/specs/data_sources/transformers.ts       | 24 +++--------------
 7 files changed, 42 insertions(+), 116 deletions(-)

diff --git a/test/common.ts b/test/common.ts
index 52c45ac13..538bce3b7 100644
--- a/test/common.ts
+++ b/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 };
+}
diff --git a/test/specs/data_sources/index.ts b/test/specs/data_sources/index.ts
index e8c0f5d83..2289d8e03 100644
--- a/test/specs/data_sources/index.ts
+++ b/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(() => {
diff --git a/test/specs/data_sources/model/ComponentDataVariable.ts b/test/specs/data_sources/model/ComponentDataVariable.ts
index b6e1a0b1b..c36f56026 100644
--- a/test/specs/data_sources/model/ComponentDataVariable.ts
+++ b/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(() => {
diff --git a/test/specs/data_sources/model/StyleDataVariable.ts b/test/specs/data_sources/model/StyleDataVariable.ts
index c9dd11177..ba273d83c 100644
--- a/test/specs/data_sources/model/StyleDataVariable.ts
+++ b/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(() => {
diff --git a/test/specs/data_sources/model/TraitDataVariable.ts b/test/specs/data_sources/model/TraitDataVariable.ts
index d660aada0..55b1cbb72 100644
--- a/test/specs/data_sources/model/TraitDataVariable.ts
+++ b/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(() => {
diff --git a/test/specs/data_sources/serialization.ts b/test/specs/data_sources/serialization.ts
index 6c60179a5..9322214df 100644
--- a/test/specs/data_sources/serialization.ts
+++ b/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);
diff --git a/test/specs/data_sources/transformers.ts b/test/specs/data_sources/transformers.ts
index a8c780fe1..24ecc7b9b 100644
--- a/test/specs/data_sources/transformers.ts
+++ b/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(() => {