Build out the testing code

[aarongustafson]

• Determine the best way to handle tests (rendered Liquid vs method)
• Determine testing framework
• Write tests
• Add JavaScript tests

[ashmaroli]

I'd like to help with this ticket by using Cucumber based tests.
@aarongustafson can you provide me with some sample scenarios..?
For example, what to expect when I use the fixture site and some of the webmentions tags..?

[aarongustafson]

@ashmaroli Thank you! I’d be happy to, but honestly I’m a little unsure where to begin. The easy stuff would probably be testing things like webmentions_head and webmentions_js.

webmentions_head

By default, it only includes one variable from the config:

webmentions:
  username: YOUR_USERNAME

This would result in the following string:

<link rel="dns-prefetch" href="https://webmention.io"><link rel="preconnect" href="https://webmention.io"><link rel="preconnect" href="ws://webmention.io:8080"><link rel="pingback" href="https://webmention.io/YOUR_USERNAME/xmlrpc"><link rel="webmention" href="https://webmention.io/YOUR_USERNAME/webmention">

If the page includes a redirect_from key in the front matter (string or array), that gets added too. Here’s an example from my blog:

layout: post
title: "A Grand Experiment"
date: 2014-07-07 20:46:48 -0400
comments: true
tags: [blogging, "web design", "this site"]
description: So, a mere three years after my old “life blog” stopped working, I decided to scrap it and start fresh.
redirect_from: /notebook/2014/a-grand-experiment/

In the final generated markup, this is the output:

<link rel="dns-prefetch" href="https://webmention.io"><link rel="preconnect" href="https://webmention.io"><link rel="preconnect" href="ws://webmention.io:8080"><meta property="webmention:redirected_from" content="https://www.aaron-gustafson.com/notebook/2014/a-grand-experiment/"><link rel="pingback" href="https://webmention.io/aaron-gustafson.com/xmlrpc"><link rel="webmention" href="https://webmention.io/aaron-gustafson.com/webmention">

Note: multiple redirections would be comma-separated in the “webmention:redirected_from” meta tag. Also my configured username is “aaron-gustafson.com”.

webmention_js

This one has a few configuration options at the site level:

webmentions:
  js: false

If this is in play, the tag will return an empty string.

The primary purpose of this tag is to include the JavaScript related to real-time updates of your webmentions and a series of templates for the different webmention types. This is where it gets a little tricky. By default (no config), all of the default templates will be used and it will look like this:

<script src="/js/JekyllWebmentionIO.js" async></script>
<template style="display:none" id="webmention-bookmarks"><div class="webmentions webmentions--bookmarks">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <div class="webmention__content p-content">
            {{ webmention.content }}
          </div>
          <div class="webmention__meta">
            {% if webmention.author %}
              <a class="webmention__author h-card u-url" href="{{ webmention.author.url }}">{{ webmention.author.name }}</a>
            {% endif %}
            {% if webmention.pubdate and webmention.url %}on{% endif %}
            {% if webmention.pubdate %}
              <a class="webmention__source u-url" href="{{ webmention.url }}">
                <time class="webmention__pubdate dt-published" datetime="{{ webmention.pubdate | date: '%FT%T%:z' }}">{{ webmention.pubdate | date: '%d %B %Y' }}</time>
              </a>
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No bookmarks were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-likes"><div class="webmentions webmentions--likes">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <div class="webmention__author p-author h-card">
            <a class="u-url" href="{{ webmention.author.url }}">
              <img class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="" title="{{ webmention.author.name }}">
            </a>
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No likes were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-links"><div class="webmentions webmentions--links">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <div class="webmention__content p-content">
            {{ webmention.content }}
          </div>
          <div class="webmention__meta">
            {% if webmention.author %}
              <a class="webmention__author h-card u-url" href="{{ webmention.author.url }}">{{ webmention.author.name }}</a>
            {% endif %}
            {% if webmention.pubdate and webmention.url %}on{% endif %}
            {% if webmention.pubdate %}
              <a class="webmention__source u-url" href="{{ webmention.url }}">
                <time class="webmention__pubdate dt-published" datetime="{{ webmention.pubdate | date: '%FT%T%:z' }}">{{ webmention.pubdate | date: '%d %B %Y' }}</time>
              </a>
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No links were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-posts"><div class="webmentions webmentions--posts">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <a class="webmention__title webmention__source u-url" href="{{ webmention.url }}">{{ webmention.title }}</a>
          <div class="webmention__meta">
            {% if webmention.pubdate %}
              <time class="webmention__pubdate dt-published" datetime="{{ webmention.pubdate | date: '%FT%T%:z' }}">{{ webmention.pubdate | date: '%d %B %Y' }}</time>
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No posts were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-replies"><div class="webmentions webmentions--replies">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <div class="webmention__content p-content">
            {{ webmention.content }}
          </div>
          <div class="webmention__meta">
            {% if webmention.author %}
              <a class="webmention__author h-card u-url" href="{{ webmention.author.url }}">
                {% if webmention.author.photo %}
                  <img class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="" title="{{ webmention.author.name }}">
                {% endif %}
                <b class="p-name">{{ webmention.author.name }}</b>
              </a>
            {% endif %}
            {% if webmention.pubdate and webmention.author %}on{% endif %}
            {% if webmention.pubdate %}
              <a class="webmention__source u-url" href="{{ webmention.url }}">
                <time class="webmention__pubdate dt-published" datetime="{{ webmention.pubdate | date: '%FT%T%:z' }}">{{ webmention.pubdate | date: '%d %B %Y' }}</time>
              </a>
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No replies were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-reposts"><div class="webmentions webmentions--reposts">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <div class="webmention__author p-author h-card">
            <a class="u-url" href="{{ webmention.author.url }}">
              <img class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="" title="{{ webmention.author.name }}">
            </a>
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No reposts were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-rsvps"><div class="webmentions webmentions--rsvps">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
          <div class="webmention__author p-author h-card">
            <a class="u-url" href="{{ webmention.author.url }}">
              <img class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="Avatar for {{ webmention.author.name }}" title="{{ webmention.author.name }}">
              <b class="p-name">{{ webmention.author.name }}</b>
              {{ webmention.content }}
            </a>
          </div>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No RSVPs were found.</p>
  {% endif %}
</div></template><template style="display:none" id="webmention-count">{% capture webmention_types %}{{ types | join: ',' }}{% endcapture %}
<span class="webmention-count"{% unless webmention_types=="" %} data-webmention-types="{{ webmention_types }}"{% endunless %}>{{ count }}</span></template><template style="display:none" id="webmention-webmentions"><div class="webmentions">
  {% if webmentions.size > 0 %}
    <ol class="webmentions__list">
      {% for webmention in webmentions %}
        <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}}">
          <article class="h-cite
            {% unless webmention.author %}webmention--no-author{% endunless %}
            {% unless webmention.author.photo %}webmention--no-photo{% endunless %}
            {% if webmention.source == 'twitter' %}webmention--author-starts{% endif %}
            ">
            {% if webmention.author %}
              <div class="webmention__author p-author h-card">
                <a class="u-url" href="{{ webmention.author.url }}">
                  {% if webmention.author.photo %}
                    <img class="webmention__author__photo u-photo" src="{{ webmention.author.photo }}" alt="" title="{{ webmention.author.name }}">
                  {% endif %}
                  <b class="p-name">{{ webmention.author.name }}</b>
                </a>
              </div>
            {% endif %}

            <div class="webmention__content p-content">
              {% if webmention.content %}
                {{ webmention.content }}
              {% else %}
                {{ webmention.title }}
              {% endif %}
            </div>
            
            <div class="webmention__meta">
              {% if webmention.pubdate %}
                <time class="webmention__pubdate dt-published"
                      datetime="{{ webmention.pubdate | date: '%FT%T%:z' }}">{{ webmention.pubdate | date: '%d %B %Y' }}</time>
              {% endif %}
              {% if webmention.pubdate and webmention.url %}|{% endif %}
              {% if webmention.url %}
                <a class="webmention__source u-url" href="{{ webmention.url }}">Permalink</a>
              {% endif %}
            </div>
          </article>
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="webmentions__not-found">No webmentions were found.</p>
  {% endif %}
</div>
{% include test-include.html %}</template>

Basically, it will build that leading script tag and then loop the template types and generate a template element for each (with full liquid markup inside).

If the webmentions.js.deploy is set to “false” (which someone might do if they want to bundle the JS with other code via a build tool), the script element is left out.

If the webmentions.js.destination is set, a string, the path in the script element will adjust accordingly:

webmentions:
  js:
    destination: /j/

<script src="/j/JekyllWebmentionIO.js" async></script>

There is also a source key which tells the generator whether it should place a copy of the created JS file in your source folder.

---

From there, things get a little more complicated. You probably have way more knowledge than I do around how to create post fixtures, but I am happy to work with you to build out those tests once I have a good sense of how to do it.

[DirtyF]

Isn't this partially fixed by #103 ?

[ashmaroli]

@DirtyF I kept it open just in case someone comes along and contributes a bit of RSpec or Minitest if they wanted to..

[aarongustafson]

Yeah, it may be worth adding some testing around the JavaScript code too (eventually)