From d789574f274764cdbcd9b51901e412afadbd9c90 Mon Sep 17 00:00:00 2001 From: Paul Cochrane Date: Sun, 1 Dec 2019 21:22:12 +0100 Subject: [PATCH 1/5] Rename 'test' target to 'lint' ... because this is a better description of what this build target does and frees up the 'test' target to be used for running tests. --- .travis.yml | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index ec91ac5..694bc82 100644 --- a/.travis.yml +++ b/.travis.yml @@ -14,4 +14,4 @@ install: - yarn install --no-lockfile script: - - yarn test + - yarn lint diff --git a/package.json b/package.json index 15896df..52b58b2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "url": "https://github.com/turbo87/sidebar-v2.git" }, "scripts": { - "test": "gulp lint" + "lint": "gulp lint" }, "devDependencies": { "gulp": "~4.0.0", From f21bdf2a97ec60c6b37543be1c1f0e00cfc47b98 Mon Sep 17 00:00:00 2001 From: Paul Cochrane Date: Sun, 1 Dec 2019 21:55:01 +0100 Subject: [PATCH 2/5] Add basic tests of Sidebar with OpenLayers These tests currently only work in OL3. Unfortunately I couldn't get the tests to work in OL4-6 yet but hope these can be added over time (there are issues with the `canvas` element in `node` that I've not yet worked out). The openlayers module is explicitly left out of the devDependencies because I think it's more likely that the continuous integration environment will install the relevant OL version and then run the test suite; hence it's not necessary to tie down developers with a particular OL version as part of development. I've chosen to use "jest" as the testing framework here since it seems to be the most popular testing framework currently and it's used by other OpenLayers-related projects such as ol-contextmenu. Also note that it was necessary to load the OpenLayers module explicitly within the sidebar-v2 module itself so that OpenLayers was available for the code running the tests. Since the loading code only runs if node/jsdom are available, it doesn't have an influence on the main of code which runs in the browser. --- .gitignore | 3 ++- jest.config.js | 7 +++++++ js/ol3-sidebar.js | 7 +++++++ package.json | 4 +++- tests/sidebar-ol.test.js | 34 ++++++++++++++++++++++++++++++++++ 5 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 jest.config.js create mode 100644 tests/sidebar-ol.test.js diff --git a/.gitignore b/.gitignore index 4375ad4..5f57d60 100644 --- a/.gitignore +++ b/.gitignore @@ -14,5 +14,6 @@ results npm-debug.log node_modules +coverage dist -build \ No newline at end of file +build diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..dd4b2e7 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,7 @@ +module.exports = { + // Automatically clear mock calls and instances between every test + clearMocks: true, + + // The directory where Jest should output its coverage files + coverageDirectory: "coverage", +}; diff --git a/js/ol3-sidebar.js b/js/ol3-sidebar.js index fc0fae2..cdb73ef 100644 --- a/js/ol3-sidebar.js +++ b/js/ol3-sidebar.js @@ -1,3 +1,10 @@ +// detect jsdom environment +// borrowed from: https://github.com/jsdom/jsdom/issues/1537 +var ol; +if (navigator.userAgent.includes("Node.js") || navigator.userAgent.includes("jsdom")) { + ol = require('openlayers'); +} + ol.control.Sidebar = function (settings) { var defaults = { diff --git a/package.json b/package.json index 52b58b2..1ae03d9 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "url": "https://github.com/turbo87/sidebar-v2.git" }, "scripts": { - "lint": "gulp lint" + "lint": "gulp lint", + "test": "jest" }, "devDependencies": { "gulp": "~4.0.0", @@ -35,6 +36,7 @@ "gulp-sass": "^3.1.0", "gulp-uglify": "~3.0.0", "gulp-zip": "~4.0.0", + "jest": "^24.9.0", "jshint": "^2.9.5" } } diff --git a/tests/sidebar-ol.test.js b/tests/sidebar-ol.test.js new file mode 100644 index 0000000..91ff91a --- /dev/null +++ b/tests/sidebar-ol.test.js @@ -0,0 +1,34 @@ +// work around jsdom canvas issue in jest +HTMLCanvasElement.prototype.getContext = jest.fn() + +var ol = require('openlayers'); +var Sidebar = require('../js/ol3-sidebar'); + +describe('Simple sidebar object instantiation', function() { + beforeEach(function() { + document.body.innerHTML = + '' + + ''; + }); + + test('Sidebar object minimal instantiation', function() { + var sidebar = new ol.control.Sidebar({ element: 'sidebar' }); + + expect(sidebar).toBeTruthy(); + }); + + test('Sidebar constructor sets position option', function() { + var sidebar = new ol.control.Sidebar({ + element: 'sidebar', + position: 'right' + }); + + expect(sidebar._options.position).toBe('right'); + }); +}); + From 20ee27c86bbe8e468c5291499ee3cf37fdfab23a Mon Sep 17 00:00:00 2001 From: Paul Cochrane Date: Sun, 1 Dec 2019 22:53:04 +0100 Subject: [PATCH 3/5] Test sidebar configurations ... at least ones which are different to the absolute bare-bones config. --- tests/sidebar-ol.test.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/tests/sidebar-ol.test.js b/tests/sidebar-ol.test.js index 91ff91a..61a10b1 100644 --- a/tests/sidebar-ol.test.js +++ b/tests/sidebar-ol.test.js @@ -32,3 +32,26 @@ describe('Simple sidebar object instantiation', function() { }); }); +describe('Check sidebar configurations', function() { + test('Minimal sidebar structure contains expected elements', function() { + document.body.innerHTML = + '' + + ''; + var sidebar = new ol.control.Sidebar({ element: 'sidebar' }); + + expect(sidebar._tabitems.length).toBe(1); + expect(sidebar._panes.length).toBe(1); + expect(sidebar._closeButtons.length).toBe(1); + }); +}); From d8589536349d2b185b424a85ae9c4c548486aca5 Mon Sep 17 00:00:00 2001 From: Paul Cochrane Date: Sun, 1 Dec 2019 22:53:35 +0100 Subject: [PATCH 4/5] Add basic tests of Sidebar API --- tests/sidebar-ol.test.js | 67 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/tests/sidebar-ol.test.js b/tests/sidebar-ol.test.js index 61a10b1..da2e63c 100644 --- a/tests/sidebar-ol.test.js +++ b/tests/sidebar-ol.test.js @@ -55,3 +55,70 @@ describe('Check sidebar configurations', function() { expect(sidebar._closeButtons.length).toBe(1); }); }); + +describe('Check sidebar API', function() { + var map, sidebar; + + beforeEach(function() { + document.body.innerHTML = + '' + + ''; + map = new ol.Map({ + target: 'map', + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + view: new ol.View({ + center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'), + zoom: 4 + }) + }); + sidebar = new ol.control.Sidebar({ element: 'sidebar' }); + }); + + test('Sidebar control gets added to map', function() { + var numControlsBefore = map.getControls().getArray().length; + map.addControl(sidebar); + var numControlsAfter = map.getControls().getArray().length; + + expect(numControlsAfter - numControlsBefore).toBe(1); + }); + + test('Sidebar is not collapsed when opened', function() { + map.addControl(sidebar); + sidebar.open(); + var sidebarDivClass = document.getElementById('sidebar').getAttribute('class'); + + expect(sidebarDivClass).not.toContain('collapsed'); + }); + + test('Sidebar is collapsed after being closed', function() { + map.addControl(sidebar); + var sidebarDivClass = document.getElementById('sidebar').getAttribute('class'); + + expect(sidebarDivClass).toContain('collapsed'); + + sidebar.open(); + + sidebarDivClass = document.getElementById('sidebar').getAttribute('class'); + expect(sidebarDivClass).not.toContain('collapsed'); + + sidebar.close(); + + sidebarDivClass = document.getElementById('sidebar').getAttribute('class'); + expect(sidebarDivClass).toContain('collapsed'); + }); +}); From 787b63638a31a5da67904b583768a0b9c00a3799 Mon Sep 17 00:00:00 2001 From: Paul Cochrane Date: Sun, 1 Dec 2019 22:56:53 +0100 Subject: [PATCH 5/5] Run test suite on Travis-CI --- .travis.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 694bc82..9cc931e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,6 +12,8 @@ before_install: install: - yarn install --no-lockfile + - yarn add openlayers@^3 script: - yarn lint + - yarn test