From: Andy Allan Date: Wed, 16 Oct 2024 15:55:33 +0000 (+0100) Subject: Merge pull request #5216 from kcne/teaspoon-v2 X-Git-Tag: live~73 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/96984421ad914a86f61d172301fad952df60536c?hp=b0ffe17cec6fdd9bb27c1e8a3deb37f46d2d37bf Merge pull request #5216 from kcne/teaspoon-v2 Re-enable JavaScript unit tests using Teaspoon --- diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 55e6671bf..e5c9efa11 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -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: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a3252807a..2571b9345 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 diff --git a/Gemfile b/Gemfile index a2387771a..277346b83 100644 --- a/Gemfile +++ b/Gemfile @@ -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" diff --git a/Gemfile.lock b/Gemfile.lock index ffbb95eb9..4de807dcb 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -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 diff --git a/config/eslint.js b/config/eslint.js index a52b1e63f..fac9d555b 100644 --- a/config/eslint.js +++ b/config/eslint.js @@ -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: { diff --git a/test/javascripts/osm_test.js b/test/javascripts/osm_test.js index ad4cc7b9f..045094314 100644 --- a/test/javascripts/osm_test.js +++ b/test/javascripts/osm_test.js @@ -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($("
")); 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($("
")); 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); diff --git a/test/javascripts/test_helper.js b/test/javascripts/test_helper.js new file mode 100644 index 000000000..879b6861b --- /dev/null +++ b/test/javascripts/test_helper.js @@ -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(); diff --git a/test/teaspoon_env.rb b/test/teaspoon_env.rb new file mode 100644 index 000000000..8a9dc001f --- /dev/null +++ b/test/teaspoon_env.rb @@ -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