Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: remove id reassign in data sources #6132

Merged
merged 3 commits into from
Oct 10, 2024
Merged

fix: remove id reassign in data sources #6132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05eb518
fix: remove id reassign in data sources
danstarns Sep 8, 2024
675e78d
Merge branch 'dev' into datasources-json-api
danstarns Oct 9, 2024
a6aa3c1
refactor: remove external deps in test
danstarns Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
1 change: 0 additions & 1 deletion packages/core/src/data_sources/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
76 changes: 76 additions & 0 deletions packages/core/test/specs/data_sources/__snapshots__/jsonplaceholder.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
artf marked this conversation as resolved.
Show resolved Hide resolved
</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>"
`;
132 changes: 132 additions & 0 deletions packages/core/test/specs/data_sources/jsonplaceholder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
Loading