windycoys/js/reply-to-comment.spec.js

import ReplyToComment from './reply-to-comment';

const commentHtml = `
<div class="comment">
  <div class="comment__head">
    <div class="comment__avatar"></div>
    <div class="comment__metadata">
      <span class="comment__author">Mr Smith</span>
      <span class="comment__date">21st September, 2018 at 15:36</span>
    </div>
  </div>
  <div class="comment__body">This is a comment.</div>
  <div class="comment__foot">
    <a class="comment__reply" data-comment-author="Mr Smith" data-comment-id="1234" href="?replytocom=1234#respond">
      <span class="comment__reply-text">Reply</span>
    </a>
    <div class="comment__inline-reply"></div>
  </div>
</div>`;

const formHtml = `
<div class="comments__foot">
  <div id="respond" class="comment-respond">
    <h3 id="reply-title" class="comment-respond__title">
      <span class="comment-respond__title-text">
        Leave a Reply
      </span>
      <div class="comment-respond__cancel">
        <a rel="nofollow" id="cancel-comment-reply-link" href="#respond">Cancel reply</a>
      </div>
    </h3>
    <form action="/wp-comments-post.php" method="post" id="commentform" class="comment-respond__form">
      <p class="comment-respond__notes">Your email address will not be published.</p>
      <label class="comment-respond__label" for="comment">Comment</label>
      <textarea class="comment-respond__input" id="comment" name="comment" cols="25" rows="8" aria-required="true"></textarea>
      <div class="comment-respond__item">
        <label class="comment-respond__label" for="author">Name</label>
        <input class="comment-respond__input" id="author" name="author" type="text" value="" size="30">
      </div>
      <div class="comment-respond__item">
        <label class="comment-respond__label" for="email">Email</label>
        <input class="comment-respond__input id="email" name="email" type="text" value="" size="30">
      </div>
      <div class="comment-respond__item">
        <label class="comment-respond__label" for="url">Website</label>
        <input class="comment-respond__input" id="url" name="url" type="text" value="" size="30">
      </div>
      <p class="form-submit">
        <input name="submit" type="submit" id="submit" class="comment-respond__submit" value="Post Comment">
        <input type="hidden" name="comment_post_ID" value="2683" id="comment_post_ID">
        <input type="hidden" name="comment_parent" id="comment_parent" value="0">
      </p>
      <p style="display: none;">
        <input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="123456789">
      </p>
      <input type="hidden" id="ak_js" name="ak_js" value="987654321">
    </form>
  </div>
</div>
`;

let comments;
let form;
let links;
let inlineReply;

beforeEach(() => {
  document.body.innerHTML = `${commentHtml}${formHtml}`;
  form = document.querySelector('.comments__foot');
  links = document.querySelectorAll('.comment__reply');
  inlineReply = document.querySelector('.comment__inline-reply');
  comments = new ReplyToComment({ form, links });
});

describe('ReplyToComment', () => {
  it('Should initialise', () => {
    expect(comments.form).toBeInstanceOf(HTMLDivElement);
    expect(comments.links).toBeInstanceOf(Array);
  });

  it('Should fail to initialise if form is missing', () => {
    expect(new ReplyToComment()).toEqual({});
  });

  it('Should fail to initialise if there are no links', () => {
    expect(new ReplyToComment({
      form: document.querySelector('#respond'),
    })).toEqual({});
    expect(new ReplyToComment({
      form: document.querySelector('#respond'),
      links: document.querySelectorAll('.no-links-here'),
    })).toEqual({});
  });

  it('Should remove the form from the DOM when a reply link is clicked', () => {
    const event = new Event('click');
    comments.handleLinkClick(event, links[0]);
    expect(form.innerHTML).toEqual('');
  });

  it('Should hide the link when it is clicked', () => {
    const event = new Event('click');
    comments.handleLinkClick(event, links[0]);
    expect(links[0].classList.contains('is-hidden')).toBe(true);
  });

  it('Should insert the form into the inline reply container', () => {
    comments.insertForm(inlineReply);
    const inlineForm = inlineReply.querySelectorAll('form');
    expect(inlineForm.length).toEqual(1);
  });

  it('Should update the comment_parent hidden element', () => {
    comments.insertForm(inlineReply, '123', 'Mr Smith');
    const { value } = inlineReply.querySelector('#comment_parent');
    expect(value).toEqual('123');
  });

  it('Should add a cancel link to the inline form', () => {
    comments.insertForm(inlineReply);
    const el = inlineReply.querySelector('#cancel-comment-reply-link');
    expect(el.style.display).toEqual('inline-block');
  });

  it('Should restore the reply link when the cancel link is clicked', () => {
    const event = new Event('click');
    comments.insertForm(inlineReply);
    comments.handleCancelClick(event, inlineReply);
    expect(links[0].classList.contains('is-hidden')).toBe(false);
  });

  it('Should remove the inline form when the cancel link is clicked', () => {
    const event = new Event('click');
    comments.insertForm(inlineReply);
    comments.handleCancelClick(event, inlineReply);
    expect(inlineReply.innerHTML).toEqual('');
  });
});