billymg

The following is presented for the consideration of the lords and ladies of tmsr.

Automated End-To-End Testing

Since mp-wp is a web application consisting of a frontend and a backend, my proposal is to handle testing via end-to-end tests run in the browser itself. This will unfortunately require the operator to run the tests on a toilet box as the browser automation tool, Selenium WebDriver runs on Java and will not work with earlier vintages of Firefox (I initially tested with version 54 of Firefox and found myself having to install version 60 to get anything working). However, I believe this to be an acceptable temporary trade-off for the following reasons:

• MP-WP is a gnarly mix of PHP, JavaScript, HTML, and CSS code. Unit tests can assert correctness of individual PHP and Javascript functions but one careless snip in a CSS file could result in a broken UI that no unit test would catch. End-to-end tests will not only insure against breakage from HTML/CSS changes, but will also allow for test coverage of critical code paths without first fully unwinding the codebase and fitting it into one's head.
• These e2e tests are intended to be temporary, and only remain while mp-wp sweats away the pounds. They can be abandoned completely once the codebase is in its desired minimal form.
• Only the tests need to be run on a polluted box, the requirements for running mp-wp are not affected.

I've put together a genesis patch that contains a small POC spec for the basic posting functionality in mp-wp. The spec is written as:

const { LoginPage, DashboardPage, PostsPage, EditPostPage } = require('../pages');

describe('Posts', () => {
  beforeAll(() => {
    const loginPage = new LoginPage();
    loginPage.navigate();
    loginPage.logIn();
  });

  afterAll(() => {
    const dashboardPage = new DashboardPage();
    dashboardPage.navigate();
    dashboardPage.logOut();
  });

  it('Can navigate to and display the Posts page', () => {
    const dashboardPage = new DashboardPage();
    dashboardPage.followNavLinkTo('Posts', 'Edit Posts');

    const postsPage = new PostsPage();

    expect(postsPage.pageTitle.isExisting()).toBe(true);
    expect(postsPage.postsTable.isExisting()).toBe(true);
  });

  it('Can create and publish a post', () => {
    const dashboardPage = new DashboardPage();
    dashboardPage.followNavSubMenuLinkTo('Posts', 'Add New', 'Add New Post');

    const postTitle = 'Bitcoin Declaration Of Sovereignty';
    const postBody = '<p>When in the course of human events, it becomes necessary for one person to dissolve the political bands which have connected them with the human herd, and to assume among the powers of the world the separate and equal station to which the laws of nature entitle them, a modicum of respect to their own intelligence requires that they should declare the causes which impel them to the separation.</p>';

    const editPostPage = new EditPostPage();
    editPostPage.editAndPublishPost({ postTitle, postBody });

    expect(editPostPage.page.$('#message*=Post published').isExisting()).toBe(true);

    dashboardPage.navigateToBlog();

    expect($(`a=${postTitle}`).isExisting()).toBe(true);
    expect($('.entry').getHTML(false).trim()).toEqual(postBody);
  });
});

Run the tests from the root of the project with:

./node_modules/\@wdio/cli/bin/wdio.js

This will execute the runner which will look for test files in tests/specs/ and run any it finds. This will look something like this, along with output in your console on the status of the test.

After the initial setup, writing the test didn't take very long. If this seems like a worthwhile enough approach I'll follow up with another post outlining the full set of tests to be written. After receiving input/feedback on the list, I'll proceed to write and publish the remaining tests as additional patches on this tree.

Patch and Signature

mp-wp-tests_genesis.vpatch
mp-wp-tests_genesis.vpatch.billymg.sig

Note: After pressing you will need to run npm install from the project directory in order to pull down just under 100mb of depshits in order for this to work. Comments welcome here or in #trilema.