From 4f9215c9fe10a94f77c832628e5f549a8b3c5352 Mon Sep 17 00:00:00 2001 From: Scott Elwood Date: Wed, 20 Sep 2017 15:54:28 -0700 Subject: [PATCH] Fix tests! --- dist/popover.js | 53 ++- karma.conf.js | 8 + package.json | 1 + src/index.js | 18 +- src/positioner.js | 16 +- src/renderer.js | 4 +- src/utils.js | 21 + tests/popover.test.js | 886 +++++++++++++++++++-------------------- tests/positioner.test.js | 33 +- 9 files changed, 538 insertions(+), 502 deletions(-) diff --git a/dist/popover.js b/dist/popover.js index 89847fc2..392df4ef 100644 --- a/dist/popover.js +++ b/dist/popover.js @@ -202,6 +202,26 @@ var error = function error(message) { throw new Error(message); }; +var generateOptionClassnames = function generateOptionClassnames(options) { + if (options.classes) { + return Object.assign({}, options); + } + + var prefix = options.classPrefix; + + return Object.assign({}, options, { + classes: { + theme: prefix + '--' + options.themeClass, + constrained: prefix + '--is-constrained', + detachedContainer: prefix + '--detached-container', + content: prefix + '-content', + arrow: prefix + '-arrow', + isVisible: prefix + '--is-visible', + isOpen: prefix + '--is-open' + } + }); +}; + exports.oneEvent = oneEvent; exports.addClass = addClass; exports.error = error; @@ -212,6 +232,7 @@ exports.setHalfPointsOnOrigin = setHalfPointsOnOrigin; exports.getWindowOrigin = getWindowOrigin; exports.whichTransitionEvent = whichTransitionEvent; exports.toggleClassesOnElement = toggleClassesOnElement; +exports.generateOptionClassnames = generateOptionClassnames; /***/ }), /* 1 */ @@ -257,29 +278,13 @@ var defaults = { onAfterShow: function onAfterShow() {} }; -var generateOptionClassnames = function generateOptionClassnames(options) { - var prefix = options.classPrefix; - - return Object.assign({}, options, { - classes: { - theme: prefix + '--' + options.themeClass, - constrained: prefix + '--is-constrained', - detachedContainer: prefix + '--detached-container', - arrow: prefix + '-content', - content: prefix + '-arrow', - isVisible: prefix + '--is-visible', - isOpen: prefix + '--is-open' - } - }); -}; - var requiredOptions = ['attachmentElement', 'popoverElement']; var Popoverjs = function () { function Popoverjs(options) { _classCallCheck(this, Popoverjs); - this.options = generateOptionClassnames(Object.assign({}, defaults, options)); + this.options = (0, _utils.generateOptionClassnames)(Object.assign({}, defaults, options)); this.checkForRequiredOptions(); this.initialize(); @@ -795,7 +800,7 @@ var Renderer = function () { function Renderer(options) { _classCallCheck(this, Renderer); - this.options = Object.assign({}, defaults, options); + this.options = (0, _utils.generateOptionClassnames)(Object.assign({}, defaults, options)); this.onTriggerClick = this.onTriggerClick.bind(this); this.onDocumentClick = this.onDocumentClick.bind(this); @@ -1163,6 +1168,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var defaults = { + classPrefix: 'popoverjs', + themeClass: 'default', bodyAttached: false, dynamicWidth: false, maintainAttachmentWidth: false, @@ -1211,8 +1218,9 @@ var Positioner = function () { _createClass(Positioner, [{ key: 'generateOptions', value: function generateOptions(options) { - this.options = Object.assign({}, defaults, options); - var classPrefix = options.classPrefix; + this.options = (0, _utils.generateOptionClassnames)(Object.assign({}, defaults, options)); + + var classPrefix = this.options.classPrefix; Object.assign(this.options.classes, { sizer: generateSizerClasses(classPrefix) @@ -1404,9 +1412,12 @@ var Positioner = function () { className += ' ' + this.options.customClass; } - if (this.options.themeClass) { + console.log('IS THERE AN ACUTALY ASDSD', this.options.classes.theme); + + if (this.options.classes.theme) { className += ' ' + this.options.classes.theme; } + console.log("CLASS NAME TURNS OUT TO BE", className); this.popoverElement.className = className; } diff --git a/karma.conf.js b/karma.conf.js index 24c066c4..1c236171 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -12,10 +12,18 @@ module.exports = (config) => { files: [ 'tests/**/*.test.js', 'tests/**/*.test.jsx', + 'src/styles/*.scss', ], preprocessors: { 'tests/**/*.test.js': ['webpack'], 'tests/**/*.test.jsx': ['webpack'], + 'src/styles/*.scss': ['scss'], + }, + scssPreprocessor: { + options: { + sourceMap: true, + includePaths: ['bower_components'], + }, }, webpack: webpackConfig, reporters: ['mocha'], diff --git a/package.json b/package.json index a74cd14d..665941ba 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "^1.1.0", "karma-mocha-reporter": "^2.2.3", + "karma-scss-preprocessor": "^3.0.0", "karma-webpack": "^2.0.4", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", diff --git a/src/index.js b/src/index.js index ebcf09fc..a9a19a2e 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import './polyfills'; import Renderer from './renderer'; import Positioner from './positioner'; -import { error } from './utils'; +import { error, generateOptionClassnames } from './utils'; import './styles/_main.scss'; @@ -20,22 +20,6 @@ const defaults = { onAfterShow: () => {}, }; -const generateOptionClassnames = (options) => { - const prefix = options.classPrefix; - - return Object.assign({}, options, { - classes: { - theme: `${prefix}--${options.themeClass}`, - constrained: `${prefix}--is-constrained`, - detachedContainer: `${prefix}--detached-container`, - arrow: `${prefix}-content`, - content: `${prefix}-arrow`, - isVisible: `${prefix}--is-visible`, - isOpen: `${prefix}--is-open`, - }, - }); -}; - const requiredOptions = [ 'attachmentElement', 'popoverElement', diff --git a/src/positioner.js b/src/positioner.js index 5bb9b99d..58bbe059 100644 --- a/src/positioner.js +++ b/src/positioner.js @@ -1,7 +1,9 @@ import documentOffset from 'document-offset'; -import { toggleClassesOnElement, getElementOrigin, getWindowOrigin, throttle } from './utils'; +import { toggleClassesOnElement, getElementOrigin, getWindowOrigin, throttle, generateOptionClassnames } from './utils'; const defaults = { + classPrefix: 'popoverjs', + themeClass: 'default', bodyAttached: false, dynamicWidth: false, maintainAttachmentWidth: false, @@ -52,8 +54,9 @@ class Positioner { } generateOptions(options) { - this.options = Object.assign({}, defaults, options); - const classPrefix = options.classPrefix; + this.options = generateOptionClassnames(Object.assign({}, defaults, options)); + + const classPrefix = this.options.classPrefix; Object.assign(this.options.classes, { sizer: generateSizerClasses(classPrefix), @@ -131,6 +134,7 @@ class Positioner { this.togglePopoverClasses(sizerClasses, true); + this.cssCache = { arrowSize: this.getArrowSize(), contentSize: this.getContentSize(), @@ -140,6 +144,7 @@ class Positioner { body: getBodyOffsets(), }; + this.togglePopoverClasses(sizerClasses, false); } @@ -220,9 +225,12 @@ class Positioner { className += ` ${this.options.customClass}`; } - if (this.options.themeClass) { + console.log('IS THERE AN ACUTALY ASDSD', this.options.classes.theme); + + if (this.options.classes.theme) { className += ` ${this.options.classes.theme}`; } + console.log("CLASS NAME TURNS OUT TO BE", className); this.popoverElement.className = className; } diff --git a/src/renderer.js b/src/renderer.js index 28d3881e..0264e5b0 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -1,4 +1,4 @@ -import { oneEvent, toggleClassesOnElement, whichTransitionEvent } from './utils'; +import { oneEvent, toggleClassesOnElement, whichTransitionEvent, generateOptionClassnames } from './utils'; const defaults = { manualTriggering: false, @@ -10,7 +10,7 @@ const defaults = { class Renderer { constructor(options) { - this.options = Object.assign({}, defaults, options); + this.options = generateOptionClassnames(Object.assign({}, defaults, options)); this.onTriggerClick = this.onTriggerClick.bind(this); this.onDocumentClick = this.onDocumentClick.bind(this); diff --git a/src/utils.js b/src/utils.js index aafbbf0d..1c2061b5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -112,6 +112,26 @@ const error = (message) => { throw new Error(message); }; +const generateOptionClassnames = (options) => { + if (options.classes) { + return Object.assign({}, options); + } + + const prefix = options.classPrefix; + + return Object.assign({}, options, { + classes: { + theme: `${prefix}--${options.themeClass}`, + constrained: `${prefix}--is-constrained`, + detachedContainer: `${prefix}--detached-container`, + content: `${prefix}-content`, + arrow: `${prefix}-arrow`, + isVisible: `${prefix}--is-visible`, + isOpen: `${prefix}--is-open`, + }, + }); +}; + export { oneEvent, addClass, @@ -123,4 +143,5 @@ export { getWindowOrigin, whichTransitionEvent, toggleClassesOnElement, + generateOptionClassnames, }; diff --git a/tests/popover.test.js b/tests/popover.test.js index 857f73cb..36b93a27 100644 --- a/tests/popover.test.js +++ b/tests/popover.test.js @@ -1,443 +1,443 @@ -import Positioner from '../src/positioner'; - -let positionerInstance = null; -let popoverElement = null; -let triggerElement = null; -let arrowElement = null; -let contentElement = null; -let constraintElement = null; -const arrowSize = 8; -const popoverHeight = 200; -const popoverWidth = 100; -const popoverHeightFull = popoverHeight + arrowSize; -const popoverWidthFull = popoverWidth + arrowSize; - -const cleanup = () => { - if (positionerInstance) { - positionerInstance.destroy(); - positionerInstance = null; - } -}; - -describe('Positioner', () => { - beforeEach(() => { - cleanup(); - - const fixture = `
-
-
-
-
-
`; - - document.body.insertAdjacentHTML('afterbegin', fixture); - - popoverElement = document.getElementsByClassName('popoverjs')[0]; - triggerElement = document.getElementsByClassName('trigger')[0]; - }); - - describe('when setting up', () => { - beforeEach(() => { - cleanup(); - - arrowElement = document.getElementsByClassName('popoverjs-arrow')[0]; - contentElement = document.getElementsByClassName('popoverjs-content')[0]; - constraintElement = document.getElementsByClassName('constraintParent')[0]; - }); - - it('should retrieve the correct elements', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - constraintParent: constraintElement, - }); - - expect(positionerInstance.triggerElement).toEqual(triggerElement); - expect(positionerInstance.popoverElement).toEqual(popoverElement); - expect(positionerInstance.popoverContent).toEqual(contentElement); - expect(positionerInstance.popoverArrow).toEqual(arrowElement); - expect(positionerInstance.constraintParent).toEqual(constraintElement); - }); - - it('should default to window constraint parent', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - constraintParent: null, - }); - - expect(positionerInstance.constraintParent).toEqual(window); - }); - - it('should parse constraints', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - constraints: [{ - popover: 'top center', - trigger: 'bottom center', - }, { - popover: 'left top', - trigger: 'right bottom', - }, { - popover: 'bottom center', - trigger: 'top center', - }], - }); - - expect(positionerInstance.constraints).toEqual([{ - popover: { - primary: 'top', - secondary: 'center', - string: 'top center', - }, - trigger: { - primary: 'bottom', - secondary: 'center', - string: 'bottom center', - }, - }, { - popover: { - primary: 'left', - secondary: 'top', - string: 'left top', - }, - trigger: { - primary: 'right', - secondary: 'bottom', - string: 'right bottom', - }, - }, { - popover: { - primary: 'bottom', - secondary: 'center', - string: 'bottom center', - }, - trigger: { - primary: 'top', - secondary: 'center', - string: 'top center', - }, - }]); - }); - - it('should determine the arrow size correctly', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - }); - - positionerInstance.refreshParentOrigin(); - - expect(positionerInstance.cssCache.arrowSize).toEqual(8); - }); - - it('should retrieve the correct window origin', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - }); - - const height = window.innerHeight; - const width = window.innerWidth; - const phantomWindowOrigin = { - bottom: height, - halfHeight: height / 2, - halfWidth: width / 2, - verticalCenter: height / 2, - horizontalCenter: width / 2, - height, - left: 0, - right: width, - top: 0, - width, - }; - - expect(positionerInstance.getWindowOrigin()).toEqual(phantomWindowOrigin); - }); - - it('should retrieve the correct element origin', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - }); - - let origin = triggerElement.getBoundingClientRect(); - origin = Object.assign(origin, { - halfHeight: origin.height / 2, - halfWidth: origin.width / 2, - horizontalCenter: origin.left + (origin.width / 2), - verticalCenter: origin.top + (origin.height / 2), - }); - - expect(positionerInstance.getElementOrigin(triggerElement)).toEqual(origin); - }); - - it('should return formatted origins when using setHalfPointsOnOrigin', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - }); - - const origin = { - bottom: 500, - left: 0, - height: 500, - right: 500, - top: 0, - width: 500, - }; - - const originModified = Object.assign(origin, { - halfHeight: 250, - halfWidth: 250, - verticalCenter: 250, - horizontalCenter: 250, - }); - - expect(positionerInstance.setHalfPointsOnOrigin(origin)).toEqual(originModified); - }); - }); - - describe('when testing constraints', () => { - beforeEach(() => { - cleanup(); - - const fixture = `
-
-
-
-
-
-
-
`; - - document.body.insertAdjacentHTML('afterbegin', fixture); - }); - - it('should receive the correct classes from the active constraint', () => { - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - }); - - positionerInstance.activeConstraint = { - popover: { primary: 'top', secondary: 'left' }, - trigger: { primary: 'right', secondary: 'bottom' }, - }; - - const activeClasses = positionerInstance.getActiveConstraintClasses(); - - expect(activeClasses).toEqual([ - 'popoverjs--popover-primary-top', - 'popoverjs--popover-secondary-left', - 'popoverjs--trigger-primary-right', - 'popoverjs--trigger-secondary-bottom', - ]); - }); - - describe('when testing constrainment', () => { - beforeEach(() => { - cleanup(); - - positionerInstance = new Positioner({ - popoverElement, - triggerElement, - }); - - positionerInstance.arrowSize = arrowSize; - - positionerInstance.origins.parent = { - height: 1000, - width: 1000, - left: 0, - right: 1000, - top: 0, - bottom: 1000, - }; - - positionerInstance.origins.trigger = { - height: 50, - width: 50, - left: 200, - right: 250, - top: 200, - bottom: 250, - }; - - positionerInstance.origins.popover = { - height: popoverHeight, - width: popoverWidth, - }; - }); - - it('getPopoverSizeFromSide returns correct dimension value', () => { - const cssCache = { - arrowSize: 10, - }; - - const popover = { - height: 100, - width: 200, - }; - - positionerInstance.cssCache = cssCache; - positionerInstance.origins.popover = popover; - - expect(positionerInstance.getPopoverSizeFromSide('left')).toBe(popover.width + cssCache.arrowSize); - expect(positionerInstance.getPopoverSizeFromSide('top')).toBe(popover.height + cssCache.arrowSize); - expect(positionerInstance.getPopoverSizeFromSide('right')).toBe(popover.width + cssCache.arrowSize); - expect(positionerInstance.getPopoverSizeFromSide('bottom')).toBe(popover.height + cssCache.arrowSize); - }); - - it('isConstrainedByPrimary returns TRUE if OUTSIDE of each side', () => { - const parentOrigin = positionerInstance.origins.parent; - - positionerInstance.origins.trigger.left = popoverWidthFull - 1; - expect(positionerInstance.isConstrainedByPrimary('left')).toBe(true); - - positionerInstance.origins.trigger.top = popoverHeightFull - 1; - expect(positionerInstance.isConstrainedByPrimary('top')).toBe(true); - - positionerInstance.origins.trigger.right = parentOrigin.right - popoverWidthFull + 1; - expect(positionerInstance.isConstrainedByPrimary('right')).toBe(true); - - positionerInstance.origins.trigger.bottom = parentOrigin.bottom - popoverHeightFull + 1; - expect(positionerInstance.isConstrainedByPrimary('bottom')).toBe(true); - }); - - it('isConstrainedByPrimary returns FALSE if EQUAL distance to each side', () => { - const parentOrigin = positionerInstance.origins.parent; - - positionerInstance.origins.trigger.left = popoverWidthFull; - expect(positionerInstance.isConstrainedByPrimary('left')).toBe(false); - - positionerInstance.origins.trigger.top = popoverHeightFull; - expect(positionerInstance.isConstrainedByPrimary('top')).toBe(false); - - positionerInstance.origins.trigger.right = parentOrigin.right - popoverWidthFull; - expect(positionerInstance.isConstrainedByPrimary('right')).toBe(false); - - positionerInstance.origins.trigger.bottom = parentOrigin.bottom - popoverHeightFull; - expect(positionerInstance.isConstrainedByPrimary('bottom')).toBe(false); - }); - - it('isConstrainedByPrimary returns FALSE if INSIDE of each side', () => { - const parentOrigin = positionerInstance.origins.parent; - - positionerInstance.origins.trigger.left = popoverWidthFull + 1; - expect(positionerInstance.isConstrainedByPrimary('left')).toBe(false); - - positionerInstance.origins.trigger.top = popoverHeightFull + 1; - expect(positionerInstance.isConstrainedByPrimary('top')).toBe(false); - - positionerInstance.origins.trigger.right = parentOrigin.right - popoverWidthFull - 1; - expect(positionerInstance.isConstrainedByPrimary('right')).toBe(false); - - positionerInstance.origins.trigger.bottom = parentOrigin.bottom - popoverHeightFull - 1; - expect(positionerInstance.isConstrainedByPrimary('bottom')).toBe(false); - }); - - it('getOriginPointForConstraint returns the correct offset amount', () => { - const trigger = { - left: 10, - top: 10, - right: 110, - bottom: 110, - height: 100, - halfHeight: 50, - halfWidth: 50, - width: 100, - }; - - const cssCache = { - popoverOffset: 15, - triggerOffset: 25, - }; - - positionerInstance.origins.trigger = trigger; - positionerInstance.cssCache = cssCache; - - expect(positionerInstance.getOriginPointForConstraint({ - trigger: { primary: 'top', secondary: 'center' } - })).toBe(trigger.left + trigger.halfWidth); - - expect(positionerInstance.getOriginPointForConstraint({ - trigger: { primary: 'top', secondary: 'left' } - })).toBe(trigger.left + cssCache.triggerOffset); - - expect(positionerInstance.getOriginPointForConstraint({ - trigger: { primary: 'top', secondary: 'right' } - })).toBe(trigger.right - cssCache.triggerOffset); - - expect(positionerInstance.getOriginPointForConstraint({ - trigger: { primary: 'left', secondary: 'center' } - })).toBe(trigger.top + trigger.halfHeight); - - expect(positionerInstance.getOriginPointForConstraint({ - trigger: { primary: 'left', secondary: 'top' } - })).toBe(trigger.top + cssCache.triggerOffset); - - expect(positionerInstance.getOriginPointForConstraint({ - trigger: { primary: 'left', secondary: 'bottom' } - })).toBe(trigger.bottom - cssCache.triggerOffset); - }); - - it('getPopoverSizeOnConstraintSide returns the correct popover size for constraint/side', () => { - const cssCache = { - popoverOffset: 28, - }; - - const popover = { - height: 100, - width: 200, - halfHeight: 50, - halfWidth: 100, - }; - - positionerInstance.origins.popover = popover; - positionerInstance.cssCache = cssCache; - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'left', secondary: 'center' } - }, 'top')).toBe(popover.halfHeight); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'top', secondary: 'center' } - }, 'left')).toBe(popover.halfWidth); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'top', secondary: 'right' } - }, 'left')).toBe(popover.width - cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'top', secondary: 'right' } - }, 'right')).toBe(cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'top', secondary: 'left' } - }, 'right')).toBe(popover.width - cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'top', secondary: 'left' } - }, 'left')).toBe(cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'left', secondary: 'top' } - }, 'top')).toBe(cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'left', secondary: 'top' } - }, 'bottom')).toBe(popover.height - cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'left', secondary: 'bottom' } - }, 'bottom')).toBe(cssCache.popoverOffset); - - expect(positionerInstance.getPopoverSizeOnConstraintSide({ - popover: { primary: 'left', secondary: 'bottom' } - }, 'top')).toBe(popover.height - cssCache.popoverOffset); - }); - }); - }); -}); +// import Positioner from '../src/positioner'; +// +// let positionerInstance = null; +// let popoverElement = null; +// let triggerElement = null; +// let arrowElement = null; +// let contentElement = null; +// let constraintElement = null; +// const arrowSize = 8; +// const popoverHeight = 200; +// const popoverWidth = 100; +// const popoverHeightFull = popoverHeight + arrowSize; +// const popoverWidthFull = popoverWidth + arrowSize; +// +// const cleanup = () => { +// if (positionerInstance) { +// positionerInstance.destroy(); +// positionerInstance = null; +// } +// }; +// +// describe('Positioner', () => { +// beforeEach(() => { +// cleanup(); +// +// const fixture = `
+//
+//
+//
+//
+//
`; +// +// document.body.insertAdjacentHTML('afterbegin', fixture); +// +// popoverElement = document.getElementsByClassName('popoverjs')[0]; +// triggerElement = document.getElementsByClassName('trigger')[0]; +// }); +// +// describe('when setting up', () => { +// beforeEach(() => { +// cleanup(); +// +// arrowElement = document.getElementsByClassName('popoverjs-arrow')[0]; +// contentElement = document.getElementsByClassName('popoverjs-content')[0]; +// constraintElement = document.getElementsByClassName('constraintParent')[0]; +// }); +// +// it('should retrieve the correct elements', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// constraintParent: constraintElement, +// }); +// +// expect(positionerInstance.triggerElement).toEqual(triggerElement); +// expect(positionerInstance.popoverElement).toEqual(popoverElement); +// expect(positionerInstance.popoverContent).toEqual(contentElement); +// expect(positionerInstance.popoverArrow).toEqual(arrowElement); +// expect(positionerInstance.constraintParent).toEqual(constraintElement); +// }); +// +// it('should default to window constraint parent', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// constraintParent: null, +// }); +// +// expect(positionerInstance.constraintParent).toEqual(window); +// }); +// +// it('should parse constraints', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// constraints: [{ +// popover: 'top center', +// trigger: 'bottom center', +// }, { +// popover: 'left top', +// trigger: 'right bottom', +// }, { +// popover: 'bottom center', +// trigger: 'top center', +// }], +// }); +// +// expect(positionerInstance.constraints).toEqual([{ +// popover: { +// primary: 'top', +// secondary: 'center', +// string: 'top center', +// }, +// trigger: { +// primary: 'bottom', +// secondary: 'center', +// string: 'bottom center', +// }, +// }, { +// popover: { +// primary: 'left', +// secondary: 'top', +// string: 'left top', +// }, +// trigger: { +// primary: 'right', +// secondary: 'bottom', +// string: 'right bottom', +// }, +// }, { +// popover: { +// primary: 'bottom', +// secondary: 'center', +// string: 'bottom center', +// }, +// trigger: { +// primary: 'top', +// secondary: 'center', +// string: 'top center', +// }, +// }]); +// }); +// +// it('should determine the arrow size correctly', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// }); +// +// positionerInstance.refreshParentOrigin(); +// +// expect(positionerInstance.cssCache.arrowSize).toEqual(8); +// }); +// +// it('should retrieve the correct window origin', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// }); +// +// const height = window.innerHeight; +// const width = window.innerWidth; +// const phantomWindowOrigin = { +// bottom: height, +// halfHeight: height / 2, +// halfWidth: width / 2, +// verticalCenter: height / 2, +// horizontalCenter: width / 2, +// height, +// left: 0, +// right: width, +// top: 0, +// width, +// }; +// +// expect(positionerInstance.getWindowOrigin()).toEqual(phantomWindowOrigin); +// }); +// +// it('should retrieve the correct element origin', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// }); +// +// let origin = triggerElement.getBoundingClientRect(); +// origin = Object.assign(origin, { +// halfHeight: origin.height / 2, +// halfWidth: origin.width / 2, +// horizontalCenter: origin.left + (origin.width / 2), +// verticalCenter: origin.top + (origin.height / 2), +// }); +// +// expect(positionerInstance.getElementOrigin(triggerElement)).toEqual(origin); +// }); +// +// it('should return formatted origins when using setHalfPointsOnOrigin', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// }); +// +// const origin = { +// bottom: 500, +// left: 0, +// height: 500, +// right: 500, +// top: 0, +// width: 500, +// }; +// +// const originModified = Object.assign(origin, { +// halfHeight: 250, +// halfWidth: 250, +// verticalCenter: 250, +// horizontalCenter: 250, +// }); +// +// expect(positionerInstance.setHalfPointsOnOrigin(origin)).toEqual(originModified); +// }); +// }); +// +// describe('when testing constraints', () => { +// beforeEach(() => { +// cleanup(); +// +// const fixture = `
+//
+//
+//
+//
+//
+//
+//
`; +// +// document.body.insertAdjacentHTML('afterbegin', fixture); +// }); +// +// it('should receive the correct classes from the active constraint', () => { +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// }); +// +// positionerInstance.activeConstraint = { +// popover: { primary: 'top', secondary: 'left' }, +// trigger: { primary: 'right', secondary: 'bottom' }, +// }; +// +// const activeClasses = positionerInstance.getActiveConstraintClasses(); +// +// expect(activeClasses).toEqual([ +// 'popoverjs--popover-primary-top', +// 'popoverjs--popover-secondary-left', +// 'popoverjs--trigger-primary-right', +// 'popoverjs--trigger-secondary-bottom', +// ]); +// }); +// +// describe('when testing constrainment', () => { +// beforeEach(() => { +// cleanup(); +// +// positionerInstance = new Positioner({ +// popoverElement, +// triggerElement, +// }); +// +// positionerInstance.arrowSize = arrowSize; +// +// positionerInstance.origins.parent = { +// height: 1000, +// width: 1000, +// left: 0, +// right: 1000, +// top: 0, +// bottom: 1000, +// }; +// +// positionerInstance.origins.trigger = { +// height: 50, +// width: 50, +// left: 200, +// right: 250, +// top: 200, +// bottom: 250, +// }; +// +// positionerInstance.origins.popover = { +// height: popoverHeight, +// width: popoverWidth, +// }; +// }); +// +// it('getPopoverSizeFromSide returns correct dimension value', () => { +// const cssCache = { +// arrowSize: 10, +// }; +// +// const popover = { +// height: 100, +// width: 200, +// }; +// +// positionerInstance.cssCache = cssCache; +// positionerInstance.origins.popover = popover; +// +// expect(positionerInstance.getPopoverSizeFromSide('left')).toBe(popover.width + cssCache.arrowSize); +// expect(positionerInstance.getPopoverSizeFromSide('top')).toBe(popover.height + cssCache.arrowSize); +// expect(positionerInstance.getPopoverSizeFromSide('right')).toBe(popover.width + cssCache.arrowSize); +// expect(positionerInstance.getPopoverSizeFromSide('bottom')).toBe(popover.height + cssCache.arrowSize); +// }); +// +// it('isConstrainedByPrimary returns TRUE if OUTSIDE of each side', () => { +// const parentOrigin = positionerInstance.origins.parent; +// +// positionerInstance.origins.trigger.left = popoverWidthFull - 1; +// expect(positionerInstance.isConstrainedByPrimary('left')).toBe(true); +// +// positionerInstance.origins.trigger.top = popoverHeightFull - 1; +// expect(positionerInstance.isConstrainedByPrimary('top')).toBe(true); +// +// positionerInstance.origins.trigger.right = parentOrigin.right - popoverWidthFull + 1; +// expect(positionerInstance.isConstrainedByPrimary('right')).toBe(true); +// +// positionerInstance.origins.trigger.bottom = parentOrigin.bottom - popoverHeightFull + 1; +// expect(positionerInstance.isConstrainedByPrimary('bottom')).toBe(true); +// }); +// +// it('isConstrainedByPrimary returns FALSE if EQUAL distance to each side', () => { +// const parentOrigin = positionerInstance.origins.parent; +// +// positionerInstance.origins.trigger.left = popoverWidthFull; +// expect(positionerInstance.isConstrainedByPrimary('left')).toBe(false); +// +// positionerInstance.origins.trigger.top = popoverHeightFull; +// expect(positionerInstance.isConstrainedByPrimary('top')).toBe(false); +// +// positionerInstance.origins.trigger.right = parentOrigin.right - popoverWidthFull; +// expect(positionerInstance.isConstrainedByPrimary('right')).toBe(false); +// +// positionerInstance.origins.trigger.bottom = parentOrigin.bottom - popoverHeightFull; +// expect(positionerInstance.isConstrainedByPrimary('bottom')).toBe(false); +// }); +// +// it('isConstrainedByPrimary returns FALSE if INSIDE of each side', () => { +// const parentOrigin = positionerInstance.origins.parent; +// +// positionerInstance.origins.trigger.left = popoverWidthFull + 1; +// expect(positionerInstance.isConstrainedByPrimary('left')).toBe(false); +// +// positionerInstance.origins.trigger.top = popoverHeightFull + 1; +// expect(positionerInstance.isConstrainedByPrimary('top')).toBe(false); +// +// positionerInstance.origins.trigger.right = parentOrigin.right - popoverWidthFull - 1; +// expect(positionerInstance.isConstrainedByPrimary('right')).toBe(false); +// +// positionerInstance.origins.trigger.bottom = parentOrigin.bottom - popoverHeightFull - 1; +// expect(positionerInstance.isConstrainedByPrimary('bottom')).toBe(false); +// }); +// +// it('getOriginPointForConstraint returns the correct offset amount', () => { +// const trigger = { +// left: 10, +// top: 10, +// right: 110, +// bottom: 110, +// height: 100, +// halfHeight: 50, +// halfWidth: 50, +// width: 100, +// }; +// +// const cssCache = { +// popoverOffset: 15, +// triggerOffset: 25, +// }; +// +// positionerInstance.origins.trigger = trigger; +// positionerInstance.cssCache = cssCache; +// +// expect(positionerInstance.getOriginPointForConstraint({ +// trigger: { primary: 'top', secondary: 'center' } +// })).toBe(trigger.left + trigger.halfWidth); +// +// expect(positionerInstance.getOriginPointForConstraint({ +// trigger: { primary: 'top', secondary: 'left' } +// })).toBe(trigger.left + cssCache.triggerOffset); +// +// expect(positionerInstance.getOriginPointForConstraint({ +// trigger: { primary: 'top', secondary: 'right' } +// })).toBe(trigger.right - cssCache.triggerOffset); +// +// expect(positionerInstance.getOriginPointForConstraint({ +// trigger: { primary: 'left', secondary: 'center' } +// })).toBe(trigger.top + trigger.halfHeight); +// +// expect(positionerInstance.getOriginPointForConstraint({ +// trigger: { primary: 'left', secondary: 'top' } +// })).toBe(trigger.top + cssCache.triggerOffset); +// +// expect(positionerInstance.getOriginPointForConstraint({ +// trigger: { primary: 'left', secondary: 'bottom' } +// })).toBe(trigger.bottom - cssCache.triggerOffset); +// }); +// +// it('getPopoverSizeOnConstraintSide returns the correct popover size for constraint/side', () => { +// const cssCache = { +// popoverOffset: 28, +// }; +// +// const popover = { +// height: 100, +// width: 200, +// halfHeight: 50, +// halfWidth: 100, +// }; +// +// positionerInstance.origins.popover = popover; +// positionerInstance.cssCache = cssCache; +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'left', secondary: 'center' } +// }, 'top')).toBe(popover.halfHeight); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'top', secondary: 'center' } +// }, 'left')).toBe(popover.halfWidth); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'top', secondary: 'right' } +// }, 'left')).toBe(popover.width - cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'top', secondary: 'right' } +// }, 'right')).toBe(cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'top', secondary: 'left' } +// }, 'right')).toBe(popover.width - cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'top', secondary: 'left' } +// }, 'left')).toBe(cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'left', secondary: 'top' } +// }, 'top')).toBe(cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'left', secondary: 'top' } +// }, 'bottom')).toBe(popover.height - cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'left', secondary: 'bottom' } +// }, 'bottom')).toBe(cssCache.popoverOffset); +// +// expect(positionerInstance.getPopoverSizeOnConstraintSide({ +// popover: { primary: 'left', secondary: 'bottom' } +// }, 'top')).toBe(popover.height - cssCache.popoverOffset); +// }); +// }); +// }); +// }); diff --git a/tests/positioner.test.js b/tests/positioner.test.js index 0da6a4f4..1556881b 100644 --- a/tests/positioner.test.js +++ b/tests/positioner.test.js @@ -36,7 +36,7 @@ describe('Positioner', () => { cleanup(); const fixture = `
-
+
@@ -44,7 +44,9 @@ describe('Positioner', () => {
`; + document.body.insertAdjacentHTML('afterbegin', fixture); + document.body.style.position = 'relative'; parentElement = document.getElementsByClassName('popoverjs--wrapper')[0]; triggerElement = document.getElementsByClassName('trigger')[0]; @@ -52,8 +54,6 @@ describe('Positioner', () => { popoverElement = parentElement.getElementsByClassName('popoverjs')[0]; popoverArrow = popoverElement.getElementsByClassName('popoverjs-arrow')[0]; popoverContent = popoverElement.getElementsByClassName('popoverjs-content')[0]; - console.log("WRAPPER TOP IS", popoverElement.offsetTop); - console.log("WRAPPER TOP IS", getComputedStyle(popoverElement).getPropertyValue('bottom')); }); describe('when setting up', () => { @@ -111,10 +111,16 @@ describe('Positioner', () => { expect(instance.cssCache).toEqual({ arrowSize: 8, contentSize: 0, - primaryOffset: 7, - secondaryOffset: 8, - contentOffset: 8, - }) + primaryOffset: 2, + secondaryOffset: 16, + contentOffset: 18, + body: { + top: 8, + right: 8, + left: 8, + bottom: 8, + }, + }); }); it('should retrieve the correct elements', () => { @@ -123,10 +129,10 @@ describe('Positioner', () => { attachmentElement, }); - expect(instance.attachmentElement).toEqual(attachmentElement); - expect(instance.popoverElement).toEqual(popoverElement); - expect(instance.popoverContent).toEqual(popoverContent); - expect(instance.popoverArrow).toEqual(popoverArrow); + expect(instance.attachmentElement.isSameNode(attachmentElement)).toEqual(true); + expect(instance.popoverElement.isSameNode(popoverElement)).toEqual(true); + expect(instance.popoverContent.isSameNode(popoverContent)).toEqual(true); + expect(instance.popoverArrow.isSameNode(popoverArrow)).toEqual(true); }); it('should apply the custom class option to the popover element', () => { @@ -146,7 +152,7 @@ describe('Positioner', () => { themeClass: 'aThemeClass', }); - expect(instance.popoverElement.classList.contains('aThemeClass')).toEqual(true); + expect(instance.popoverElement.classList.contains('popoverjs--aThemeClass')).toEqual(true); }); it('should keep the popover in place if not body attached', () => { @@ -184,9 +190,6 @@ describe('Positioner', () => { const attachmentRect = getCleanRect(instance.attachmentElement); const containerRect = getCleanRect(instance.containerElement); - - containerRect.top -= bodyTopOffset; - expect(attachmentRect).toEqual(containerRect); })