Skip to content

Instantly share code, notes, and snippets.

@baldurbjarnason

baldurbjarnason/Makefile

Last active September 28, 2021 12:51
Show Gist options
  • Save baldurbjarnason/536a651600f87de1a6867e39fc8a4f6d to your computer and use it in GitHub Desktop.
Save baldurbjarnason/536a651600f87de1a6867e39fc8a4f6d to your computer and use it in GitHub Desktop.
Download ZIP
node-less frontend testing using Firefox and TAP
Raw
README.md

Frontend unit testing without building, node, or npm

I've been experimenting with frontend web development without node.js. Since you can install esbuild or deno as standalone executables in your project, building without node or npm is quite doable.

The missing part of it has been running unit tests (end-to-end testing is likely to require more heavy duty frameworks).

This gist consists of three parts.

  1. An index.html page that loads zora which is a TAP-outputting testing library.
  2. A bash script (originally from https://gitlab.com/esr/tapview) which serves as a TAP test reporter
  3. A Makefile which launches firefox with a new profile, that outputs console.log calls to stdout (and therefore zora's TAP output to stdout), filters out lines that don't come from console.log, cleans each line up, and pipes to tapview.

Hey presto! You have an in-browser testing tool that doesn't require any building, node installation, or npm.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello!!!</h1>
<script type="module">
import { test } from "https://unpkg.com/zora@latest/dist/index.js";
test(`hello from zora`, ({ ok }) => {
ok(true, "it worked");
});
window.close();
</script>
</body>
</html>
Raw
Makefile
.PHONY:test
test:
rm -rf ./my-profile; mkdir ./my-profile && echo "user_pref('devtools.console.stdout.content', true);user_pref('dom.allow_scripts_to_close_windows', true);user_pref('datareporting.policy.firstRunURL', '');" > ./my-profile/user.js && firefox --headless -profile ./my-profile -no-remote `pwd`/index.html | sed -n "/console.log: /p" | sed -e 's/console.log: "//' -e 's/"$$//' | ./tapview
Raw
tapview
#! /bin/sh
# tapview - a TAP (Test Anything Protocol) viewer in pure POSIX shell
#
# Copyright by Eric S. Raymond
#
# This code is intended to be embedded in your project. The author
# grants permission for it to be distributed under the prevailing
# license of your project if you choose, provided that license is
# OSD-compliant; otherwise the following SPDX tag incorporates a
# license by reference.
#
# SPDX-License-Identifier: BSD-2-Clause
#
# This is version 1.1
# A newer version may be available at https://gitlab.com/esr/tapview
#
# POSIX allows but does not mandate that -n suppresses emission of a
# trailing newline in echo. Thus, some shell builtin echos don't do
# that. Cope gracefully.
# shellcheck disable=SC2039
if [ "$(echo -n "a"; echo "b")" != "ab" ]
then
ECHO="echo"
elif [ "$(/bin/echo -n "a"; /bin/echo "b")" = "ab" ]
then
ECHO="/bin/echo"
else
echo "tapview: bailing out, your echo lacks -n support."
exit 3
fi
OK="."
FAIL="F"
SKIP="s"
TODO_NOT_OK="x"
TODO_OK="u"
ship_char() {
# shellcheck disable=SC2039
"${ECHO}" -n "$1"
}
ship_line() {
report="${report}${1}\n"
}
testcount=0
failcount=0
skipcount=0
todocount=0
test_before_plan=no
test_after_plan=no
expect=""
status=0
report=""
failreport=""
IFS=""
state=start
while read -r line
do
if expr "$line" : "Bail out!" >/dev/null
then
ship_line "$line"
status=2
break
fi
if expr "$line" : '1\.\.[0-9][0-9]*' >/dev/null
then
if [ "$expect" != "" ]
then
if [ "${testcount}" -gt 0 ]
then
echo ""
fi
ship_line "Cannot have more than one plan line."
echo "${report}"
exit 1
fi
if expr "$line" : ".* *SKIP" >/dev/null || expr "$line" : ".* *skip" >/dev/null
then
ship_line "$line"
echo "${report}"
exit 1 # Not specified in the standard whether this should exit 1 or 0
fi
expect=$(expr "$line" : '1\.\.\([0-9][0-9]*\)')
continue
fi
if expr "$line" : "ok" >/dev/null
then
testcount=$((testcount + 1))
if [ "$expect" = "" ]
then
test_before_plan=yes
else
test_after_plan=yes
fi
if expr "$line" : ".*# *TODO" >/dev/null || expr "$line" : ".*# *todo" >/dev/null
then
ship_char ${TODO_OK}
ship_line "$line"
todocount=$((todocount + 1))
elif expr "$line" : ".*# *SKIP" >/dev/null || expr "$line" : ".*# *skip" >/dev/null
then
ship_char ${SKIP}
ship_line "$line"
skipcount=$((skipcount + 1))
else
ship_char ${OK}
fi
state=ok
continue
fi
if expr "$line" : "not ok" >/dev/null
then
testcount=$((testcount + 1))
if [ "$expect" = "" ]
then
test_before_plan=yes
else
test_after_plan=yes
fi
if expr "$line" : ".*# *SKIP" >/dev/null || expr "$line" : ".*# *skip" >/dev/null
then
ship_char "${SKIP}"
state=ok
skipcount=$((skipcount + 1))
continue
fi
if expr "$line" : ".*# *TODO" >/dev/null || expr "$line" : ".*# *todo" >/dev/null
then
ship_char ${TODO_NOT_OK}
state=ok
todocount=$((todocount + 1))
continue
fi
ship_char "${FAIL}"
ship_line "$line"
state=not_ok
failcount=$((failcount + 1))
status=1
continue
fi
# shellcheck disable=SC2166
if [ "${state}" = "yaml" ]
then
ship_line "$line"
if expr "$line" : '[ ]*\.\.\.' >/dev/null
then
state=ok
fi
elif expr "$line" : "[ ]*---" >/dev/null
then
ship_line "$line"
state=yaml
fi
done
/bin/echo ""
if [ -z "$expect" ]
then
ship_line "Missing a plan."
status=1
elif [ "$test_before_plan" = "yes" ] && [ "$test_after_plan" = "yes" ]
then
ship_line "A plan line may only be placed before or after all tests."
status=1
elif [ "${expect}" -gt "${testcount}" ]
then
ship_line "Expected ${expect} tests but only ${testcount} ran."
status=1
elif [ "${expect}" -lt "${testcount}" ]
then
ship_line "Expected ${expect} tests but ${testcount} ran."
status=1
fi
report="${report}${testcount} tests"
failreport="${failcount} failures"
if [ "$todocount" != 0 ]
then
report="${report}, ${todocount} TODOs"
fi
if [ "$skipcount" != 0 ]
then
report="${report}, ${skipcount} SKIPs"
fi
tput setaf 2; echo "${report}."
tput setaf 1; echo "${failreport}."
exit "${status}"
# end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment