privatebin-mirror/js/test/DiscussionViewer.js

'use strict';
const common = require('../common');
const fc = require('fast-check');

describe('DiscussionViewer', function () {
    describe('handleNotification, prepareNewDiscussion, addComment, finishDiscussion, getReplyMessage, getReplyNickname, getReplyCommentId & highlightComment', function () {
        this.timeout(30000);

        it('displays & hides comments as requested', () => {
            fc.assert(fc.property(
                fc.array(
                    fc.record({
                        idArray: fc.array(common.fcAlnumString(), {minLength: 1}),
                        parentidArray: fc.array(common.fcAlnumString(), {minLength: 1}),
                        data: fc.string(),
                        meta: fc.record({
                            nickname: fc.string(),
                            postdate: fc.nat(),
                            vizhash: fc.string()
                        })
                    })
                ),
                fc.nat(),
                fc.boolean(),
                fc.string(),
                fc.string(),
                fc.constantFrom('loading', 'danger', 'other'),
                fc.string({minLength: 1}),
                function (comments, commentKey, fadeOut, nickname, message, alertType, alert) {
                    var clean = globalThis.cleanup(),
                        results = [];
                    PrivateBin.Model.reset();
                    PrivateBin.Helper.reset();
                    document.body.innerHTML = (
                        '<div id="status" class="hidden"></div>' +
                        '<div id="errormessage" class="hidden"></div>' +
                        `<div id="discussion">
	<h4>Discussion</h4>
	<div id="commentcontainer"></div>
</div>
<div id="templates">
	<article id="commenttemplate" class="comment">
		<div class="commentmeta">
			<span class="nickname">name</span>
			<span class="commentdate">0000-00-00</span>
		</div>
		<div class="commentdata">c</div>
		<button class="btn btn-default btn-sm">Reply</button>
	</article>
	<p id="commenttailtemplate" class="comment">
		<button class="btn btn-default btn-sm">Add comment</button>
	</p>
	<div id="replytemplate" class="reply hidden">
		<input type="text" id="nickname" class="form-control" title="Optional nickname…"
			placeholder="Optional nickname…" />
		<textarea id="replymessage" class="replymessage form-control" cols="80" rows="7"></textarea>
		<br />
		<div id="replystatus" role="alert" class="statusmessage hidden alert">
			<span class="glyphicon" aria-hidden="true"></span>
		</div>
		<button id="replybutton" class="btn btn-default btn-sm">Post comment</button>
	</div>
</div>
`
                    );
                    PrivateBin.Model.init();
                    PrivateBin.Alert.init();
                    PrivateBin.DiscussionViewer.init();
                    results.push(
                        !document.getElementById('discussion').classList.contains('hidden')
                    );
                    PrivateBin.DiscussionViewer.prepareNewDiscussion();
                    results.push(
                        document.getElementById('discussion').classList.contains('hidden')
                    );
                    comments.forEach(function (comment) {
                        comment.id = comment.idArray.join('');
                        comment.parentid = comment.parentidArray.join('');
                        comment.getCreated = function() { return comment.meta.postdate; };
                        comment.getIcon = function() { return comment.meta.vizhash; };
                        PrivateBin.DiscussionViewer.addComment(comment, comment.data, comment.meta.nickname);
                    });
                    results.push(
                        document.getElementById('discussion').classList.contains('hidden')
                    );
                    PrivateBin.DiscussionViewer.finishDiscussion();
                    results.push(
                        !document.getElementById('discussion').classList.contains('hidden') &&
                        comments.length + 1 >= document.getElementById('commentcontainer').children.length
                    );
                    if (comments.length > 0) {
                        if (commentKey >= comments.length) {
                            commentKey = commentKey % comments.length;
                        }
                        PrivateBin.DiscussionViewer.highlightComment(comments[commentKey].id, fadeOut);
                        results.push(
                            document.getElementById('comment_' + comments[commentKey].id).classList.contains('highlight')
                        );
                    }
                    // clicking "Add comment" button should open the reply form
                    document.getElementById('commentcontainer').querySelector('button').click();
                    results.push(
                        document.getElementById('reply') !== null &&
                        !document.getElementById('reply').classList.contains('hidden')
                    );
                    document.querySelector('#reply #nickname').value = nickname;
                    document.querySelector('#reply #replymessage').value = message;
                    PrivateBin.DiscussionViewer.getReplyCommentId();
                    results.push(
                        PrivateBin.DiscussionViewer.getReplyNickname() === document.querySelector('#reply #nickname').value &&
                        PrivateBin.DiscussionViewer.getReplyMessage() === document.querySelector('#reply #replymessage').value
                    );
                    var notificationResult = PrivateBin.DiscussionViewer.handleNotification(alertType === 'other' ? alert : alertType);
                    if (alertType === 'loading') {
                        results.push(notificationResult === false);
                    } else {
                        results.push(
                            alertType === 'danger' ? (
                                notificationResult.classList.contains('alert-danger') &&
                                !notificationResult.classList.contains('alert-info')
                            ) : (
                                !notificationResult.classList.contains('alert-danger') &&
                                notificationResult.classList.contains('alert-info')
                            )
                        );
                    }
                    clean();
                    return results.every(element => element);
                }
            ));
        });
    });
});