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/.travis.yml b/.travis.yml index ec91ac5..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 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 15896df..1ae03d9 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "url": "https://github.com/turbo87/sidebar-v2.git" }, "scripts": { - "test": "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..da2e63c --- /dev/null +++ b/tests/sidebar-ol.test.js @@ -0,0 +1,124 @@ +// 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'); + }); +}); + +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); + }); +}); + +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'); + }); +});