mirror of https://github.com/artf/grapesjs.git
danstarns
2 years ago
5 changed files with 368 additions and 1 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,103 @@ |
|||
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'; |
|||
|
|||
async function getComments() { |
|||
const url = 'https://jsonplaceholder.typicode.com/posts/1/comments'; |
|||
const response = await fetch(url, { |
|||
method: 'GET', |
|||
}); |
|||
|
|||
if (!response.ok) { |
|||
throw new Error('Failed to fetch comments'); |
|||
} |
|||
|
|||
return response.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 = await getComments(); |
|||
const dataSource: DataSourceProps = { |
|||
id: 'comments', |
|||
records: comments, |
|||
}; |
|||
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