fix: remove id reas# data sources (#6132)

* fix: remove id reas# data sources * refactor: remove external deps in test
GrapesJS · Oct 10, 2024 · d74c3f1 · d74c3f1
1 parent 05ada9e
commit d74c3f1
Show file tree

Hide file tree

Showing 5 changed files with 398 additions and 2 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -41,11 +41,13 @@
   },
   "devDependencies": {
     "@types/markdown-it": "14.1.2",
+    "@types/pretty": "^2.0.3",
     "grapesjs-cli": "workspace:^",
     "jest-environment-jsdom": "29.7.0",
     "jsdom": "24.1.1",
     "npm-run-all": "4.1.5",
     "postcss": "8",
+    "pretty": "2.0.0",
     "sass": "1.42.1",
     "whatwg-fetch": "3.6.20"
   },

diff --git a/packages/core/src/data_sources/index.ts b/packages/core/src/data_sources/index.ts
@@ -101,7 +101,6 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
       acc[ds.id] = ds.records.reduce((accR, dr, i) => {
         const dataRecord = dr;
 
-        accR[i] = dataRecord.attributes;
         accR[dataRecord.id || i] = dataRecord.attributes;
 
         return accR;

diff --git a/packages/core/test/specs/data_sources/__snapshots__/jsonplaceholder.ts.snap b/packages/core/test/specs/data_sources/__snapshots__/jsonplaceholder.ts.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JsonPlaceholder Usage should render a list of comments from jsonplaceholder api 1`] = `
+"<body>
+  <div>
+    <h4>
+      <div>id labore ex et quam laborum</div>
+    </h4>
+    <p>
+    <div>1</div>
+    </p>
+    <p>
+    <div>laudantium enim quasi est quidem magnam voluptate ipsam eos
+      tempora quo necessitatibus
+      dolor quam autem quasi
+      reiciendis et nam sapiente accusantium</div>
+    </p>
+  </div>
+  <div>
+    <h4>
+      <div>quo vero reiciendis velit similique earum</div>
+    </h4>
+    <p>
+    <div>2</div>
+    </p>
+    <p>
+    <div>est natus enim nihil est dolore omnis voluptatem numquam
+      et omnis occaecati quod ullam at
+      voluptatem error expedita pariatur
+      nihil sint nostrum voluptatem reiciendis et</div>
+    </p>
+  </div>
+  <div>
+    <h4>
+      <div>odio adipisci rerum aut animi</div>
+    </h4>
+    <p>
+    <div>3</div>
+    </p>
+    <p>
+    <div>quia molestiae reprehenderit quasi aspernatur
+      aut expedita occaecati aliquam eveniet laudantium
+      omnis quibusdam delectus saepe quia accusamus maiores nam est
+      cum et ducimus et vero voluptates excepturi deleniti ratione</div>
+    </p>
+  </div>
+  <div>
+    <h4>
+      <div>alias odio sit</div>
+    </h4>
+    <p>
+    <div>4</div>
+    </p>
+    <p>
+    <div>non et atque
+      occaecati deserunt quas accusantium unde odit nobis qui voluptatem
+      quia voluptas consequuntur itaque dolor
+      et qui rerum deleniti ut occaecati</div>
+    </p>
+  </div>
+  <div>
+    <h4>
+      <div>vero eaque aliquid doloribus et culpa</div>
+    </h4>
+    <p>
+    <div>5</div>
+    </p>
+    <p>
+    <div>harum non quasi et ratione
+      tempore iure ex voluptates in ratione
+      harum architecto fugit inventore cupiditate
+      voluptates magni quo et</div>
+    </p>
+  </div>
+</body>"
+`;
diff --git a/packages/core/test/specs/data_sources/jsonplaceholder.ts b/packages/core/test/specs/data_sources/jsonplaceholder.ts
@@ -0,0 +1,132 @@
+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';
+import htmlFormat from 'pretty';
+
+function getComments() {
+  const json = [
+    {
+      postId: 1,
+      id: 1,
+      name: 'id labore ex et quam laborum',
+      email: 'Eliseo@gardner.biz',
+      body: 'laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium',
+    },
+    {
+      postId: 1,
+      id: 2,
+      name: 'quo vero reiciendis velit similique earum',
+      email: 'Jayne_Kuhic@sydney.com',
+      body: 'est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et',
+    },
+    {
+      postId: 1,
+      id: 3,
+      name: 'odio adipisci rerum aut animi',
+      email: 'Nikita@garfield.biz',
+      body: 'quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione',
+    },
+    {
+      postId: 1,
+      id: 4,
+      name: 'alias odio sit',
+      email: 'Lew@alysha.tv',
+      body: 'non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati',
+    },
+    {
+      postId: 1,
+      id: 5,
+      name: 'vero eaque aliquid doloribus et culpa',
+      email: 'Hayden@althea.biz',
+      body: 'harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et',
+    },
+  ];
+
+  return json;
+}
+
+// Comment https://github.com/GrapesJS/grapesjs/discussions/5956#discussioncomment-10559499
+describe('JsonPlaceholder Usage', () => {
+  let em: EditorModel;
+  let dsm: DataSourceManager;
+  let cmpRoot: ComponentWrapper;
+
+  beforeEach(() => {
+    ({ em, dsm, cmpRoot } = setupTestEditor());
+  });
+
+  afterEach(() => {
+    em.destroy();
+  });
+
+  test('should render a list of comments from jsonplaceholder api', async () => {
+    const comments = getComments();
+    const dataSource: DataSourceProps = {
+      id: 'comments',
+      records: comments as any,
+    };
+    dsm.add(dataSource);
+
+    dsm
+      .get('comments')
+      .getRecords()
+      .forEach((record) => {
+        cmpRoot.append({
+          tagName: 'div',
+          components: [
+            {
+              tagName: 'h4',
+              components: [
+                {
+                  type: DataVariableType,
+                  defaultValue: 'default',
+                  path: `comments.${record?.id}.name`,
+                },
+              ],
+            },
+            {
+              tagName: 'p',
+              components: [
+                {
+                  type: DataVariableType,
+                  defaultValue: 'default',
+                  path: `comments.${record?.id}.id`,
+                },
+              ],
+            },
+            {
+              tagName: 'p',
+              components: [
+                {
+                  type: DataVariableType,
+                  defaultValue: 'default',
+                  path: `comments.${record?.id}.body`,
+                },
+              ],
+            },
+          ],
+        });
+      });
+
+    const html = cmpRoot.toHTML();
+    expect(htmlFormat(html)).toMatchSnapshot();
+
+    const components = cmpRoot.components();
+    expect(components.length).toBe(comments.length);
+
+    components.forEach((cmp, i) => {
+      expect(cmp.get('components')?.length).toBe(3);
+      const record = comments[i];
+      const title = cmp.get('components')?.at(0);
+      const id = cmp.get('components')?.at(1);
+      const body = cmp.get('components')?.at(2);
+
+      expect(title?.getInnerHTML()).toContain(record.name);
+      expect(id?.getInnerHTML()).toContain(record.id.toString());
+      expect(body?.getInnerHTML()).toContain(record.body);
+    });
+  });
+});