Advanced tooling for Wagtail development
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.githooks
backstop
examples Add gh-pages examples Nov 25, 2017
.editorconfig
.eslintignore
.gitignore
.nvmrc
.prettierignore Add linting and git hooks Nov 22, 2017
.travis.yml
README.md Document git hook usable with Wagtail for linting, tests Aug 26, 2017
budget.json
docker-compose.yml
package-lock.json
package.json
prettier.config.js Add linting and git hooks Nov 22, 2017
sitespeed-urls.txt
sitespeedio.json

README.md

wagtail-dev-tooling

Advanced tooling for Wagtail development. See example reports.

Check out Awesome Wagtail for more awesome packages and resources from the Wagtail community.

Installation

# Get the code from the repository.
git clone git@github.com:thibaudcolas/wagtail-dev-tooling.git
cd wagtail-dev-tooling
# Install dependencies.
nvm install
npm install
# Configure environment variables.
# touch .env
# Configure Wagtail user session ID to use.
# Get this value by logging into the Wagtail admin of your site, then
# use the developer tools to insect the cookies, to find "sessionid".
# echo "WAGTAIL_SESSIONID=yoursessionid" >> .env

UI regression tests

# 1. Create UI regression reference.
npm run regression:reference
# 2. Run UI regression tests.
npm run regression:test
# 3. Open UI regression report.
npm run regression:open

Web performance audits

# 1. Start the containers with graphite and grafana.
docker-compose up -d
# 2. Run the performance tests.
npm run performance:test
# 3. Open UI performance report.
npm run performance:open
# 4. Tear down the containers when you've had enough.
docker-compose stop

Git hooks

Pre-commit hook to add within Wagtail at .git/hooks/pre-commit:

#!/usr/bin/env bash

command_exists () {
    type "$1" &> /dev/null ;
}

# Fail on first line that fails.
set -e

# Check if this is the initial commit
if git rev-parse --verify HEAD >/dev/null 2>&1
then
    against=HEAD
else
    against=4b825dc642cb6eb9a060e54bf8d69288fbee4904
fi

# Use git diff-index to check for whitespace errors
if ! git diff-index --check --cached $against
then
    echo "Aborting commit due to whitespace errors."
    exit 1
fi

STAGED=$(git --no-pager diff --name-only --cached --diff-filter=ACM)
JS_STAGED=$(grep .js$ <<< "$STAGED" || true)
SCSS_STAGED=$(grep .scss$ <<< "$STAGED" || true)
PY_STAGED=$(grep .py$ <<< "$STAGED" || true)

if [ -n "$JS_STAGED" ];
then
    ./node_modules/.bin/eslint $JS_STAGED
fi

if [ -n "$SCSS_STAGED" ];
then
    ./node_modules/.bin/stylelint $SCSS_STAGED
fi

if [ -n "$PY_STAGED" ];
then
    if command_exists flake8;
    then
        flake8 $PY_STAGED
    else
        printf "\`flake8\` is missing. The following Python files couldn't be linted:\n$PY_STAGED\n\nMake sure to install the correct Python version as defined in \`.python-version\` and the linting dependencies \`pip install -r requirements/lint.txt\`."
        exit 1
    fi
fi

if [ -n "$JS_STAGED" ];
then
    npm run test:unit:coverage --silent
fi

Examples

BackstopJS UI regression report

BackstopJS UI regression report

Grafana dashboard displaying web performance metrics

Grafana dashboard displaying web performance metrics

Sitespeed performance budget output

Sitespeed performance budget output

Sitespeed performance metrics

Sitespeed performance metrics

Sitespeed page load waterfall chart

Sitespeed page load waterfall chart

Documentation