* Use iframe for connect sidecar * Modify css of lefthand sidebar * Add proper sidecar markup * Update tests
61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import { h } from 'preact';
|
|
import render from 'preact-render-to-json';
|
|
import { deep } from 'preact-render-spy';
|
|
import fetch from 'jest-fetch-mock';
|
|
import Article from '../article';
|
|
|
|
global.fetch = fetch;
|
|
|
|
function flushPromises() {
|
|
return new Promise(resolve => setImmediate(resolve));
|
|
}
|
|
|
|
const sampleResponse = JSON.stringify({
|
|
current_user: { id: 10000 },
|
|
article_reaction_counts: [
|
|
{ category: 'like', count: 150 },
|
|
{ category: 'readinglist', count: 17 },
|
|
{ category: 'unicorn', count: 48 },
|
|
],
|
|
reactions: [
|
|
{
|
|
id: 10000,
|
|
user_id: 10000,
|
|
reactable_id: 10000,
|
|
reactable_type: 'Article',
|
|
category: 'like',
|
|
points: 1.0,
|
|
created_at: '2018-10-30T20:34:01.503Z',
|
|
updated_at: '2018-10-30T20:34:01.503Z',
|
|
},
|
|
],
|
|
});
|
|
|
|
const userArticle = {
|
|
type_of: 'article',
|
|
path: '/princesscarolyn/your-approval-means-nothing-to-me-42640',
|
|
};
|
|
|
|
const getArticle = () => <Article resource={userArticle} />;
|
|
|
|
describe('<Article />', () => {
|
|
it('should load article', async () => {
|
|
const tree = render(getArticle());
|
|
await flushPromises();
|
|
expect(tree).toMatchSnapshot();
|
|
});
|
|
|
|
it('should have the proper elements, attributes and values', async () => {
|
|
await fetch.mockResponseOnce(sampleResponse);
|
|
const context = deep(getArticle(), { depth: 2 });
|
|
await flushPromises();
|
|
|
|
// checks that article details are placed at their appropriate elements
|
|
expect(context.find('.activechatchannel__activeArticle').exists()).toEqual(
|
|
true,
|
|
);
|
|
expect(
|
|
context.find('iframe').exists(),
|
|
).toEqual(true);
|
|
});
|
|
});
|