From fd21a88d52277da83008a53da51c083f0ce002ee Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Thu, 11 Aug 2022 16:40:04 +0200 Subject: [PATCH] Added first basic comments test --- apps/comments-ui/src/App.js | 48 +++--------- apps/comments-ui/src/App.test.js | 74 ++++++++++++++++++- .../comments-ui/src/components/CommentsBox.js | 2 +- apps/comments-ui/src/components/Frame.js | 4 +- apps/comments-ui/src/utils/api.js | 14 +--- apps/comments-ui/src/utils/helpers.js | 8 -- 6 files changed, 85 insertions(+), 65 deletions(-) diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js index 92288df633..b7385043cd 100644 --- a/apps/comments-ui/src/App.js +++ b/apps/comments-ui/src/App.js @@ -1,8 +1,7 @@ import Frame from './components/Frame'; -import * as Sentry from '@sentry/react'; import React from 'react'; import ActionHandler from './actions'; -import {createPopupNotification,isSentryEventAllowed} from './utils/helpers'; +import {createPopupNotification} from './utils/helpers'; import AppContext from './AppContext'; import {hasMode} from './utils/check-mode'; import setupGhostApi from './utils/api'; @@ -21,20 +20,14 @@ function AuthFrame({adminUrl, onLoad}) { function CommentsBoxContainer({done, appVersion}) { return ( - + ); } function SentryErrorBoundary({dsn, children}) { - if (dsn) { - return ( - - {children} - - ); - } + // todo: add Sentry.ErrorBoundary wrapper if Sentry is enabled return ( <> {children} @@ -68,11 +61,10 @@ export default class App extends React.Component { async initSetup() { try { // Fetch data from API, links, preview, dev sources - const {site, member} = await this.fetchApiData(); + const {member} = await this.fetchApiData(); const {comments, pagination, count} = await this.fetchComments(); const state = { - site, member, action: 'init:success', initStatus: 'success', @@ -159,10 +151,10 @@ export default class App extends React.Component { try { this.GhostApi = this.props.api || setupGhostApi({siteUrl, apiUrl, apiKey}); - const {site, member} = await this.GhostApi.init(); + const {member} = await this.GhostApi.init(); - this.setupSentry({site}); - return {site, member}; + this.setupSentry(); + return {member}; } catch (e) { if (hasMode(['dev', 'test'], {customSiteUrl})) { return {}; @@ -254,30 +246,8 @@ export default class App extends React.Component { } /** Setup Sentry */ - setupSentry({site}) { - if (hasMode(['test'])) { - return null; - } - const {portal_sentry: portalSentry, portal_version: portalVersion, version: ghostVersion} = site; - const appVersion = process.env.REACT_APP_VERSION || portalVersion; - const releaseTag = `comments@${appVersion}|ghost@${ghostVersion}`; - if (portalSentry && portalSentry.dsn) { - Sentry.init({ - dsn: portalSentry.dsn, - environment: portalSentry.env || 'development', - release: releaseTag, - beforeSend: (event) => { - if (isSentryEventAllowed({event})) { - return event; - } - return null; - }, - allowUrls: [ - /https?:\/\/((www)\.)?unpkg\.com\/@tryghost\/comments/, - /https?:\/\/((cdn)\.)?jsdelivr\.net\/npm\/@tryghost\/comments/ - ] - }); - } + setupSentry() { + // Not implemented yet } /**Get final App level context from App state*/ diff --git a/apps/comments-ui/src/App.test.js b/apps/comments-ui/src/App.test.js index 7c8b5c45b7..e9f8c3baf1 100644 --- a/apps/comments-ui/src/App.test.js +++ b/apps/comments-ui/src/App.test.js @@ -1,8 +1,78 @@ -import {render} from '@testing-library/react'; +import {render, within} from '@testing-library/react'; import App from './App'; +import {ROOT_DIV_ID} from './utils/constants'; -test('renders the auth frame', () => { +/*test('renders the auth frame', () => { const {container} = render(); const iframeElement = container.querySelector('iframe[data-frame="admin-auth"]'); expect(iframeElement).toBeInTheDocument(); +});*/ + +describe('Dark mode', () => { + it.todo('uses dark mode when container has a dark background'); + it.todo('uses light mode when container has a light background'); + it.todo('uses custom mode when custom mode has been passed as a property'); +}); + +describe('Comments', () => { + it('renders comments', async () => { + const postId = 'my-post'; + const member = null; + const api = { + init: async () => { + return { + member + }; + }, + comments: { + count: async () => { + return { + [postId]: 1 + }; + }, + browse: async () => { + return { + comments: [ + { + id: 'test', + html: '

This is a comment body

', + replies: [], + count: { + replies: 0, + likes: 0 + }, + liked: false, + created_at: '2022-08-11T09:26:34.000Z', + edited_at: null, + member: { + avatar_image: '', + bio: 'Hello world codoof', + id: '62d6c6564a14e6a4b5e97c43', + name: 'dtt2', + uuid: '613e9667-4fa2-4ff4-aa62-507220103d41' + }, + status: 'published' + } + ], + meta: { + pagination: { + total: 1, + next: null, + prev: null, + page: 1 + } + } + }; + } + } + }; + const stylesUrl = ''; + const {container} = render(
); + + const iframeElement = container.querySelector('iframe[title="comments-box"]'); + expect(iframeElement).toBeInTheDocument(); + const iframeDocument = iframeElement.contentDocument; + const commentBody = await within(iframeDocument).findByText(/This is a comment body/i); + expect(commentBody).toBeInTheDocument(); + }); }); diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js index b49e9df97f..bff84d886b 100644 --- a/apps/comments-ui/src/components/CommentsBox.js +++ b/apps/comments-ui/src/components/CommentsBox.js @@ -81,7 +81,7 @@ const CommentsBoxContent = (props) => { <> -
+
{commentsElements}
diff --git a/apps/comments-ui/src/components/Frame.js b/apps/comments-ui/src/components/Frame.js index 4edfa83351..db1bca770e 100644 --- a/apps/comments-ui/src/components/Frame.js +++ b/apps/comments-ui/src/components/Frame.js @@ -49,7 +49,7 @@ const Frame = ({ }); }; - const [cssLoaded, setCssLoaded] = useState(false); + const [cssLoaded, setCssLoaded] = useState(!stylesUrl); const onLoadCSS = () => { setCssLoaded(true); @@ -57,7 +57,7 @@ const Frame = ({ const head = ( <> - + {stylesUrl ? : null}