mirror of https://github.com/artf/grapesjs.git
Browse Source
* fix: remove id reassign in data sources * refactor: remove external deps in testpull/6206/head
Daniel Starns
2 years ago
committed by
GitHub
GitHub
5 changed files with 398 additions and 2 deletions
@ -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>" |
|||
`; |
|||
@ -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…
Reference in new issue