Test against DOM

Author: MattIPv4

package.json

@@ -41,6 +41,7 @@
     "express": "^4.17.1",
     "express-minify": "^1.0.0",
     "i18n": "^0.8.3",
+    "jsdom": "^16.0.0",
     "kill-port": "^1.6.0",
     "knex": "^0.19.4",
     "lighthouse": "^5.2.0",

test/Routes/Lists.js

@@ -1,38 +1,60 @@
-const { describe, it, expect, request, db, locale, checks, auth } = require('../base');
+const { describe, it, expect, request, db, locale, checks, auth, dom } = require('../base');
 
 describe('/lists', () => {
     describe('GET', () => {
-        const test = () => request().get('/lists');
-        it('returns an OK status code', done => {
-            test().end((err, res) => {
-                expect(res).to.have.status(200);
+        let res, page;
+        before('fetch the page', done => {
+            request().get('/lists').end((_, r) => {
+                res = r;
+                page = dom(r);
                 done();
             });
         });
+        it('returns an OK status code', done => {
+            expect(res).to.have.status(200);
+            done();
+        });
         it('has the correct page title', done => {
-            test().end((err, res) => {
-                expect(res).to.be.html;
-                checks.title(res, `All Bot Lists - ${locale('site_name')} - ${locale('short_desc')}`);
-                done();
-            });
+            checks.title(res, `All Bot Lists - ${locale('site_name')} - ${locale('short_desc')}`);
+            done();
         });
-        it('renders the expected content', done => {
-            db.select('name', 'url').from('lists').where({ display: true, defunct: false }).then(lists => {
-                test().end((err, res) => {
-                    expect(res).to.be.html;
 
-                    // Confirm header
-                    expect(res.text).to.include('All Bot Lists');
-
-                    // Confirm footer stats
-                    expect(res.text).to.include(`${locale('site_name')} - Bot List Stats`);
+        describe('renders the expected content', () => {
+            it('has the correct title', done => {
+                expect(res.text).to.include('All Bot Lists');
+                done();
+            });
+            it('has the stats footer', done => {
+                const footer = page.querySelector(".hero.card .hero-body.hero-stats.card-body");
+                expect(footer).to.exist;
+                expect(footer.innerHTML).to.include(`${locale('site_name')} - Bot List Stats`);
+                done();
+            });
 
-                    // Confirm list cards
-                    lists.forEach(list => {
+            describe('contains the list cards', () => {
+                let listCards;
+                before('fetch list cards', done => {
+                    db.select('id', 'name', 'url').from('lists').where({ display: true, defunct: false }).then(lists => {
+                        listCards = lists;
+                        done();
+                    });
+                });
+                it('has the list names', done => {
+                    listCards.forEach(list => {
                         expect(res.text).to.include(list.name);
+                    });
+                    done();
+                });
+                it('has the list urls', done => {
+                    listCards.forEach(list => {
                         expect(res.text).to.include(list.url);
                     });
-
+                    done();
+                });
+                it('has the list information button', done => {
+                    listCards.forEach(list => {
+                        expect(page.querySelector(`.card a.button[href="/lists/${list.id}"]`)).to.exist;
+                    });
                     done();
                 });
             });

test/base.js

@@ -5,9 +5,12 @@ const checks = require('./helpers/checks');
 const auth = require('./helpers/auth');
 const request = require('./helpers/request');
 const { ratelimitBypass, resetRatelimits } = require('./helpers/ratelimits');
+const dom = require('./helpers/dom');
 const { describe, it } = require('mocha');
 const chai = require('chai');
-const expect = chai.expect;
+const { expect } = require('chai');
+const chaiHttp = require('chai-http');
+chai.use(chaiHttp);
 
 const compareObjectProps = (a, b) => {
     const missing = [];
@@ -43,5 +46,6 @@ module.exports = {
     locale,
     checks,
     auth,
+    dom,
     compareObjects
 };

test/helpers/dom.js

@@ -0,0 +1,6 @@
+const jsdom = require("jsdom");
+const { JSDOM } = jsdom;
+
+module.exports = res => {
+    return (new JSDOM(res.text)).window.document;
+};

test/helpers/request.js

@@ -1,8 +1,6 @@
 const config = require('../../config');
 const { asAnon } = require('./auth');
 const chai = require('chai');
-const chaiHttp = require('chai-http');
-chai.use(chaiHttp);
 
 const target = `${config.baseURL}:${config.port}`;
 const base = () => chai.request(target);