cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5216 from kcne/teaspoon-v2

Browse source 
Re-enable JavaScript unit tests using Teaspoon
This commit is contained in:
Andy Allan 2024-10-16 16:55:33 +01:00 • committed by GitHub
commit 96984421ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 318 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.github/workflows/tests.yml vendored
View file

@ -58,8 +58,12 @@ jobs:
run: bundle exec bin/yarn install
- name: Compile assets
run: bundle exec rails assets:precompile
- name: Create tmp/pids directory
run: mkdir -p tmp/pids
- name: Run tests
run: bundle exec rails test:all
- name: Run javascript tests
run: bundle exec teaspoon
- name: Report completion to Coveralls
uses: coverallsapp/github-action@v2.3.2
with:

6
CONTRIBUTING.md
View file

@ -43,6 +43,12 @@ You can run the existing test suite with:
bundle exec rails test:all
```
You can run javascript tests with:
```
bundle exec teaspoon
```
You can view test coverage statistics by browsing the `coverage` directory.
The tests are automatically run on Pull Requests and other commits via github

2
Gemfile
View file

@ -183,6 +183,8 @@ end
group :development, :test do
gem "annotate"
gem "teaspoon"
gem "teaspoon-mocha", "~> 2.3.3"
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
gem "debug", :require => "debug/prelude"

6
Gemfile.lock
View file

@ -614,6 +614,10 @@ GEM
stringio (3.1.1)
strong_migrations (1.8.0)
activerecord (>= 5.2)
teaspoon (1.2.2)
railties (>= 3.2.5)
teaspoon-mocha (2.3.3)
teaspoon (>= 1.0.0)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
terser (1.2.4)
@ -748,6 +752,8 @@ DEPENDENCIES
simplecov-lcov
sprockets-exporters_pack
strong_migrations (< 2.0.0)
teaspoon
teaspoon-mocha (~> 2.3.3)
terser
turbo-rails
unicode-display_width

12
config/eslint.js
View file

@ -122,6 +122,18 @@ module.exports = [
"yoda": "error"
}
},
{
// Additional configuration for test files
files: ["test/**/*.js"],
languageOptions: {
globals: {
...globals.mocha,
expect: "readonly",
assert: "readonly",
should: "readonly"
}
}
},
{
files: ["config/eslint.js"],
languageOptions: {

98
test/javascripts/osm_test.js
View file

@ -1,5 +1,5 @@
//= require jquery
//= require jquery.cookie/jquery.cookie
//= require js-cookie/dist/js.cookie
//= require osm
//= require leaflet/dist/leaflet-src
//= require leaflet.osm
@ -10,15 +10,15 @@
describe("OSM", function () {
describe(".apiUrl", function () {
it("returns a URL for a way", function () {
expect(OSM.apiUrl({type: "way", id: 10})).to.eq("/api/0.6/way/10/full");
expect(OSM.apiUrl({ type: "way", id: 10 })).to.eq("/api/0.6/way/10/full");
});
it("returns a URL for a node", function () {
expect(OSM.apiUrl({type: "node", id: 10})).to.eq("/api/0.6/node/10");
expect(OSM.apiUrl({ type: "node", id: 10 })).to.eq("/api/0.6/node/10");
});
it("returns a URL for a specific version", function () {
expect(OSM.apiUrl({type: "node", id: 10, version: 2})).to.eq("/api/0.6/node/10/2");
expect(OSM.apiUrl({ type: "node", id: 10, version: 2 })).to.eq("/api/0.6/node/10/2");
});
});
@ -51,15 +51,15 @@ describe("OSM", function () {
it("parses object params", function () {
var params = OSM.mapParams("?node=1");
expect(params).to.have.property("object");
expect(params.object).to.eql({type: "node", id: 1});
expect(params.object).to.eql({ type: "node", id: 1 });
params = OSM.mapParams("?way=1");
expect(params).to.have.property("object");
expect(params.object).to.eql({type: "way", id: 1});
expect(params.object).to.eql({ type: "way", id: 1 });
params = OSM.mapParams("?relation=1");
expect(params).to.have.property("object");
expect(params.object).to.eql({type: "relation", id: 1});
expect(params.object).to.eql({ type: "relation", id: 1 });
});
it("parses bbox params", function () {
@ -85,21 +85,21 @@ describe("OSM", function () {
it("parses lat/lon/zoom from the hash", function () {
document.location.hash = "#map=16/57.6247/-3.6845";
params = OSM.mapParams("?");
const params = OSM.mapParams("?");
expect(params).to.have.property("lat", 57.6247);
expect(params).to.have.property("lon", -3.6845);
expect(params).to.have.property("zoom", 16);
});
it("sets lat/lon from OSM.home", function () {
OSM.home = {lat: 57.6247, lon: -3.6845};
OSM.home = { lat: 57.6247, lon: -3.6845 };
var params = OSM.mapParams("?");
expect(params).to.have.property("lat", 57.6247);
expect(params).to.have.property("lon", -3.6845);
});
it("sets bbox from OSM.location", function () {
OSM.location = {minlon: -3.6845, minlat: 57.6247, maxlon: -3.7845, maxlat: 57.7247};
OSM.location = { minlon: -3.6845, minlat: 57.6247, maxlon: -3.7845, maxlat: 57.7247 };
var expected = L.latLngBounds([57.6247, -3.6845], [57.7247, -3.7845]);
var params = OSM.mapParams("?");
expect(params).to.have.property("bounds").deep.equal(expected);
@ -134,7 +134,7 @@ describe("OSM", function () {
params = OSM.mapParams("?");
expect(params).to.have.property("layers", "C");
document.location.hash = "#map=5/57.6247/-3.6845&layers=M"
document.location.hash = "#map=5/57.6247/-3.6845&layers=M";
params = OSM.mapParams("?");
expect(params).to.have.property("layers", "M");
});
@ -156,66 +156,75 @@ describe("OSM", function () {
describe(".formatHash", function () {
it("formats lat/lon/zoom params", function () {
var args = { center: L.latLng(57.6247, -3.6845), zoom: 9 };
expect(OSM.formatHash(args)).to.eq("#map=9/57.6247/-3.6845");
expect(OSM.formatHash(args)).to.eq("#map=9/57.625/-3.685");
});
it("respects zoomPrecision", function () {
var args = { center: L.latLng(57.6247, -3.6845), zoom: 5 };
expect(OSM.formatHash(args)).to.eq("#map=5/57.625/-3.685");
expect(OSM.formatHash(args)).to.eq("#map=5/57.62/-3.68");
args = { center: L.latLng(57.6247, -3.6845), zoom: 9 };
expect(OSM.formatHash(args)).to.eq("#map=9/57.6247/-3.6845");
expect(OSM.formatHash(args)).to.eq("#map=9/57.625/-3.685");
args = { center: L.latLng(57.6247, -3.6845), zoom: 12 };
expect(OSM.formatHash(args)).to.eq("#map=12/57.6247/-3.6845");
});
it("formats layers params", function () {
var args = { center: L.latLng(57.6247, -3.6845), zoom: 9, layers: "C" };
expect(OSM.formatHash(args)).to.eq("#map=9/57.6247/-3.6845&layers=C");
expect(OSM.formatHash(args)).to.eq("#map=9/57.625/-3.685&layers=C");
});
it("ignores default layers", function () {
var args = { center: L.latLng(57.6247, -3.6845), zoom: 9, layers: "M" };
expect(OSM.formatHash(args)).to.eq("#map=9/57.6247/-3.6845");
expect(OSM.formatHash(args)).to.eq("#map=9/57.625/-3.685");
});
});
describe(".zoomPrecision", function () {
it("suggests 0 digits for z0-1", function () {
expect(OSM.zoomPrecision(0)).to.eq(0);
expect(OSM.zoomPrecision(1)).to.eq(0);
});
it("suggests 1 digit for z2", function () {
describe(".zoomPrecision", function () {
it("suggests 1 digit for z0-2", function () {
expect(OSM.zoomPrecision(0)).to.eq(1);
expect(OSM.zoomPrecision(1)).to.eq(1);
expect(OSM.zoomPrecision(2)).to.eq(1);
});
it("suggests 2 digits for z3-4", function () {
it("suggests 2 digits for z3-6", function () {
expect(OSM.zoomPrecision(3)).to.eq(2);
expect(OSM.zoomPrecision(4)).to.eq(2);
expect(OSM.zoomPrecision(5)).to.eq(2);
expect(OSM.zoomPrecision(6)).to.eq(2);
});
it("suggests 3 digits for z5-8", function () {
expect(OSM.zoomPrecision(5)).to.eq(3);
expect(OSM.zoomPrecision(6)).to.eq(3);
it("suggests 3 digits for z7-9", function () {
expect(OSM.zoomPrecision(7)).to.eq(3);
expect(OSM.zoomPrecision(8)).to.eq(3);
expect(OSM.zoomPrecision(9)).to.eq(3);
});
it("suggests 4 digits for z9-16", function () {
expect(OSM.zoomPrecision(9)).to.eq(4);
it("suggests 4 digits for z10-12", function () {
expect(OSM.zoomPrecision(10)).to.eq(4);
expect(OSM.zoomPrecision(11)).to.eq(4);
expect(OSM.zoomPrecision(12)).to.eq(4);
expect(OSM.zoomPrecision(13)).to.eq(4);
expect(OSM.zoomPrecision(14)).to.eq(4);
expect(OSM.zoomPrecision(15)).to.eq(4);
expect(OSM.zoomPrecision(16)).to.eq(4);
});
it("suggests 5 digits for z17-20", function () {
expect(OSM.zoomPrecision(17)).to.eq(5);
expect(OSM.zoomPrecision(18)).to.eq(5);
expect(OSM.zoomPrecision(19)).to.eq(5);
expect(OSM.zoomPrecision(20)).to.eq(5);
it("suggests 5 digits for z13-16", function () {
expect(OSM.zoomPrecision(13)).to.eq(5);
expect(OSM.zoomPrecision(14)).to.eq(5);
expect(OSM.zoomPrecision(15)).to.eq(5);
expect(OSM.zoomPrecision(16)).to.eq(5);
});
it("suggests 6 digits for z17-19", function () {
expect(OSM.zoomPrecision(17)).to.eq(6);
expect(OSM.zoomPrecision(18)).to.eq(6);
expect(OSM.zoomPrecision(19)).to.eq(6);
});
it("suggests 7 digits for z20", function () {
expect(OSM.zoomPrecision(20)).to.eq(7);
});
});
@ -224,24 +233,25 @@ describe("OSM", function () {
$("body").html($("<div id='map'>"));
var map = new L.OSM.Map("map", { center: [57.6247, -3.6845], zoom: 9 });
map.updateLayers("");
expect(OSM.locationCookie(map)).to.eq("-3.6845|57.6247|9|M");
expect(OSM.locationCookie(map)).to.eq("-3.685|57.625|9|M");
});
it("respects zoomPrecision", function () {
$("body").html($("<div id='map'>"));
var map = new L.OSM.Map("map", { center: [57.6247, -3.6845], zoom: 9 });
map.updateLayers("");
expect(OSM.locationCookie(map)).to.eq("-3.6845|57.6247|9|M");
map.setZoom(5);
expect(OSM.locationCookie(map)).to.eq("-3.685|57.625|5|M");
expect(OSM.locationCookie(map)).to.eq("-3.685|57.625|9|M");
// map.setZoom() doesn't update the zoom level for some reason
// using map._zoom here to update the zoom level manually
map._zoom = 5;
expect(OSM.locationCookie(map)).to.eq("-3.68|57.62|5|M");
});
});
describe(".distance", function () {
it("computes distance between points", function () {
var latlng1 = L.latLng(51.76712,-0.00484),
latlng2 = L.latLng(51.7675159, -0.0078329);
var latlng1 = L.latLng(51.76712, -0.00484),
latlng2 = L.latLng(51.7675159, -0.0078329);
expect(OSM.distance(latlng1, latlng2)).to.be.closeTo(210.664, 0.005);
expect(OSM.distance(latlng2, latlng1)).to.be.closeTo(210.664, 0.005);

41
test/javascripts/test_helper.js Normal file
View file

@ -0,0 +1,41 @@
/* eslint-disable */
// Teaspoon includes some support files, but you can use anything from your own support path too.
// require support/expect
// require support/sinon
//= require support/chai
//= require support/chai-jq-0.0.7
// require support/your-support-file
//
// PhantomJS (Teaspoons default driver) doesn't have support for Function.prototype.bind, which has caused confusion.
// Use this polyfill to avoid the confusion.
//= require support/phantomjs-shims
//
// You can require your own javascript files here. By default this will include everything in application, however you
// may get better load performance if you require the specific files that are being used in the spec that tests them.
//= require application
//
// Deferring execution
// If you're using CommonJS, RequireJS or some other asynchronous library you can defer execution. Call
// Teaspoon.execute() after everything has been loaded. Simple example of a timeout:
//
// Teaspoon.defer = true
// setTimeout(Teaspoon.execute, 1000)
//
// Matching files
// By default Teaspoon will look for files that match _spec.{js,js.coffee,.coffee}. Add a filename_spec.js file in your
// spec path and it'll be included in the default suite automatically. If you want to customize suites, check out the
// configuration in teaspoon_env.rb
//
// Manifest
// If you'd rather require your spec files manually (to control order for instance) you can disable the suite matcher in
// the configuration and use this file as a manifest.
//
// For more information: http://github.com/modeset/teaspoon
//
// Chai
// If you're using Chai, you'll probably want to initialize your preferred assertion style. You can read more about Chai
// at: http://chaijs.com/guide/styles
//
window.assert = chai.assert;
window.expect = chai.expect;
window.should = chai.should();

193
test/teaspoon_env.rb Normal file
View file

@ -0,0 +1,193 @@
Teaspoon.configure do |config|
# Determines where the Teaspoon routes will be mounted. Changing this to "/jasmine" would allow you to browse to
# `http://localhost:3000/jasmine` to run your tests.
config.mount_at = "/teaspoon"
# Specifies the root where Teaspoon will look for files. If you're testing an engine using a dummy application it can
# be useful to set this to your engines root (e.g. `Teaspoon::Engine.root`).
# Note: Defaults to `Rails.root` if nil.
config.root = nil
# Paths that will be appended to the Rails assets paths
# Note: Relative to `config.root`.
config.asset_paths = ["test/javascripts", "test/javascripts/stylesheets"]
# Fixtures are rendered through a controller, which allows using HAML, RABL/JBuilder, etc. Files in these paths will
# be rendered as fixtures.
config.fixture_paths = ["test/javascripts/fixtures"]
# SUITES
#
# You can modify the default suite configuration and create new suites here. Suites are isolated from one another.
#
# When defining a suite you can provide a name and a block. If the name is left blank, :default is assumed. You can
# omit various directives and the ones defined in the default suite will be used.
#
# To run a specific suite
# - in the browser: http://localhost/teaspoon/[suite_name]
# - with the rake task: rake teaspoon suite=[suite_name]
# - with the cli: teaspoon --suite=[suite_name]
config.suite do |suite|
# Specify the framework you would like to use. This allows you to select versions, and will do some basic setup for
# you -- which you can override with the directives below. This should be specified first, as it can override other
# directives.
# Note: If no version is specified, the latest is assumed.
#
# Versions: 1.10.0, 1.17.1, 1.18.2, 1.19.0, 2.0.1, 2.1.0, 2.2.4, 2.2.5, 2.3.3
suite.use_framework :mocha, "2.3.3"
# Specify a file matcher as a regular expression and all matching files will be loaded when the suite is run. These
# files need to be within an asset path. You can add asset paths using the `config.asset_paths`.
suite.matcher = "{test/javascripts,app/assets}/**/*_test.{js,js.coffee,coffee,es6,js.es6}"
# Load additional JS files, but requiring them in your spec helper is the preferred way to do this.
# suite.javascripts = []
# You can include your own stylesheets if you want to change how Teaspoon looks.
# Note: Spec related CSS can and should be loaded using fixtures.
# suite.stylesheets = ["teaspoon"]
# This suites spec helper, which can require additional support files. This file is loaded before any of your test
# files are loaded.
suite.helper = "test_helper"
# Partial to be rendered in the head tag of the runner. You can use the provided ones or define your own by creating
# a `_boot.html.erb` in your fixtures path, and adjust the config to `"/boot"` for instance.
#
# Available: boot, boot_require_js
suite.boot_partial = "boot"
# Partial to be rendered in the body tag of the runner. You can define your own to create a custom body structure.
suite.body_partial = "body"
# Hooks allow you to use `Teaspoon.hook("fixtures")` before, after, or during your spec run. This will make a
# synchronous Ajax request to the server that will call all of the blocks you've defined for that hook name.
# suite.hook :fixtures, &proc{}
# Determine whether specs loaded into the test harness should be embedded as individual script tags or concatenated
# into a single file. Similar to Rails' asset `debug: true` and `config.assets.debug = true` options. By default,
# Teaspoon expands all assets to provide more valuable stack traces that reference individual source files.
# suite.expand_assets = true
# Non-.js file extensions Teaspoon should consider JavaScript files
# suite.js_extensions = [/(\.js)?.coffee/, /(\.js)?.es6/, ".es6.js"]
end
# Example suite. Since we're just filtering to files already within the root test/javascripts, these files will also
# be run in the default suite -- but can be focused into a more specific suite.
# config.suite :targeted do |suite|
# suite.matcher = "spec/javascripts/targeted/*_spec.{js,js.coffee,coffee}"
# end
# CONSOLE RUNNER SPECIFIC
#
# These configuration directives are applicable only when running via the rake task or command line interface. These
# directives can be overridden using the command line interface arguments or with ENV variables when using the rake
# task.
#
# Command Line Interface:
# teaspoon --driver=phantomjs --server-port=31337 --fail-fast=true --format=junit --suite=my_suite /spec/file_spec.js
#
# Rake:
# teaspoon DRIVER=phantomjs SERVER_PORT=31337 FAIL_FAST=true FORMATTERS=junit suite=my_suite
# Specify which headless driver to use. Supports PhantomJS, Selenium Webdriver and BrowserStack Webdriver.
#
# Available: :phantomjs, :selenium, :browserstack
# PhantomJS: https://github.com/jejacks0n/teaspoon/wiki/Using-PhantomJS
# Selenium Webdriver: https://github.com/jejacks0n/teaspoon/wiki/Using-Selenium-WebDriver
# BrowserStack Webdriver: https://github.com/jejacks0n/teaspoon/wiki/Using-BrowserStack-WebDriver
# Capybara Webkit: https://github.com/jejacks0n/teaspoon/wiki/Using-Capybara-Webkit
require "selenium-webdriver"
config.driver = :selenium
config.driver_options = {
:client_driver => :firefox,
:selenium_options => {
:options => Selenium::WebDriver::Firefox::Options.new(:args => ["-headless"])
}
}
# Specify additional options for the driver.
#
# PhantomJS: https://github.com/jejacks0n/teaspoon/wiki/Using-PhantomJS
# Selenium Webdriver: https://github.com/jejacks0n/teaspoon/wiki/Using-Selenium-WebDriver
# BrowserStack Webdriver: https://github.com/jejacks0n/teaspoon/wiki/Using-BrowserStack-WebDriver
# Capybara Webkit: https://github.com/jejacks0n/teaspoon/wiki/Using-Capybara-Webkit
# config.driver_options = nil
# Specify the timeout for the driver. Specs are expected to complete within this time frame or the run will be
# considered a failure. This is to avoid issues that can arise where tests stall.
# config.driver_timeout = 180
# Specify a server to use with Rack (e.g. thin, mongrel). If nil is provided Rack::Server is used.
# config.server = nil
# Specify a host to run on a specific host, otherwise Teaspoon will use 127.0.0.1.
# config.server_host = nil
# Specify a port to run on a specific port, otherwise Teaspoon will use a random available port.
# config.server_port = nil
# Timeout for starting the server in seconds. If your server is slow to start you may have to bump this, or you may
# want to lower this if you know it shouldn't take long to start.
# config.server_timeout = 20
# Force Teaspoon to fail immediately after a failing suite. Can be useful to make Teaspoon fail early if you have
# several suites, but in environments like CI this may not be desirable.
# config.fail_fast = true
# Specify the formatters to use when outputting the results.
# Note: Output files can be specified by using `"junit>/path/to/output.xml"`.
#
# Available: :dot, :clean, :documentation, :json, :junit, :pride, :rspec_html, :snowday, :swayze_or_oprah, :tap, :tap_y, :teamcity
# config.formatters = [:dot]
# Specify if you want color output from the formatters.
# config.color = true
# Teaspoon pipes all console[log/debug/error] to $stdout. This is useful to catch places where you've forgotten to
# remove them, but in verbose applications this may not be desirable.
# config.suppress_log = false
# COVERAGE REPORTS / THRESHOLD ASSERTIONS
#
# Coverage reports requires Istanbul (https://github.com/gotwarlost/istanbul) to add instrumentation to your code and
# display coverage statistics.
#
# Coverage configurations are similar to suites. You can define several, and use different ones under different
# conditions.
#
# To run with a specific coverage configuration
# - with the rake task: rake teaspoon USE_COVERAGE=[coverage_name]
# - with the cli: teaspoon --coverage=[coverage_name]
# Specify that you always want a coverage configuration to be used. Otherwise, specify that you want coverage
# on the CLI.
# Set this to "true" or the name of your coverage config.
# config.use_coverage = nil
# You can have multiple coverage configs by passing a name to config.coverage.
# e.g. config.coverage :ci do |coverage|
# The default coverage config name is :default.
config.coverage do |coverage|
# Which coverage reports Istanbul should generate. Correlates directly to what Istanbul supports.
#
# Available: text-summary, text, html, lcov, lcovonly, cobertura, teamcity
# coverage.reports = ["text-summary", "html"]
# The path that the coverage should be written to - when there's an artifact to write to disk.
# Note: Relative to `config.root`.
# coverage.output_path = "coverage"
# Assets to be ignored when generating coverage reports. Accepts an array of filenames or regular expressions. The
# default excludes assets from vendor, gems and support libraries.
# coverage.ignore = [%r{/lib/ruby/gems/}, %r{/vendor/assets/}, %r{/support/}, %r{/(.+)_helper.}]
# Various thresholds requirements can be defined, and those thresholds will be checked at the end of a run. If any
# aren't met the run will fail with a message. Thresholds can be defined as a percentage (0-100), or nil.
# coverage.statements = nil
# coverage.functions = nil
# coverage.branches = nil
# coverage.lines = nil
end
end