it('adds and removes event listeners to selectables', () => {
// Adding
const realAddEventListener = Element.prototype.addEventListener;
const addEventListenerSpy = sinon.spy();
Element.prototype.addEventListener = addEventListenerSpy;
const utils = new Utils(containerEl);
expect(utils.listeners.length).to.be(2);
expect(addEventListenerSpy.calledOn(selectableEls[0])).to.be(true);
expect(addEventListenerSpy.calledOn(selectableEls[1])).to.be(true);
const selectableEventAndHandler = addEventListenerSpy.args[0];
expect(selectableEventAndHandler[0]).to.be('click');
expect(selectableEventAndHandler[1]).to.be(utils.selectableHandler);
// Removing
const realRemoveEventListener = Element.prototype.removeEventListener;
const removeEventListenerSpy = sinon.spy();
Element.prototype.removeEventListener = removeEventListenerSpy;
utils.destroy();
expect(removeEventListenerSpy.calledOn(selectableEls[0])).to.be(true);
expect(removeEventListenerSpy.calledOn(selectableEls[1])).to.be(true);
expect(removeEventListenerSpy.calledWith(...selectableEventAndHandler)).to.be(true);
// Cleanup
Element.prototype.addEventListener = realAddEventListener;
Element.prototype.removeEventListener = realRemoveEventListener;
});
it('when destroyed, removes all event listeners which were added by the component', () => {
const realAddEventListener = document.addEventListener;
const addEventListenerSpy = sinon.spy();
document.addEventListener = addEventListenerSpy;
const scrollTracker = new ScrollTracker({element: document.querySelector('#test'), buckets: [25, 50, 75, 100], callback: () => {}});
const trackedElement = document;
expect(addEventListenerSpy.calledOnce).to.be.true;
expect(addEventListenerSpy.args[0][0]).to.equal('scroll');
expect(addEventListenerSpy.calledOn(trackedElement)).to.be.true;
const trackedElementEventAndHandler = addEventListenerSpy.args[0];
const realRemoveEventListener = document.removeEventListener;
const removeEventListenerSpy = sinon.spy();
document.removeEventListener = removeEventListenerSpy;
scrollTracker.destroy();
expect(removeEventListenerSpy.calledOnce).to.be.true;
expect(removeEventListenerSpy.args[0][0]).to.equal('scroll');
expect(removeEventListenerSpy.calledOn(trackedElement)).to.be.true;
expect(removeEventListenerSpy.calledWith(...trackedElementEventAndHandler)).to.be.true;
document.addEventListener = realAddEventListener;
document.removeEventListener = realRemoveEventListener;
});
it('increments', () => {
const increment = sinon.spy()
const decrement = sinon.spy()
const counter = mount(<Counter count={0} increment={increment} decrement={decrement}/>)
counter.find('button').at(1).simulate('click')
expect(increment.calledOnce).toEqual(true)
expect(decrement.calledOnce).toEqual(false)
})
it('shows the count', () => {
const increment = sinon.spy()
const decrement = sinon.spy()
const counter = mount(<Counter count={10} increment={increment} decrement={decrement}/>)
expect(counter.find('span').text()).toEqual('10')
expect(increment.calledOnce).toEqual(false)
expect(decrement.calledOnce).toEqual(false)
})
it('Should trigger unMount once for direct nested children', () => {
class B extends Component {
render() {
return <div>B</div>;
}
}
class C extends Component {
render() {
return <div>C</div>;
}
}
class D extends Component {
render() {
return <div>D</div>;
}
}
const Bspy = sinon.spy(B.prototype, 'componentWillUnmount');
const CSpy = sinon.spy(C.prototype, 'componentWillUnmount');
const DSpy = sinon.spy(D.prototype, 'componentWillUnmount');
const notCalled = sinon.assert.notCalled;
const calledOnce = sinon.assert.calledOnce;
render(<B />, container);
expect(container.innerHTML).to.equal('<div>B</div>');
notCalled(Bspy);
notCalled(CSpy);
notCalled(DSpy);
render(<C />, container);
expect(container.innerHTML).to.equal('<div>C</div>');
calledOnce(Bspy);
notCalled(CSpy);
notCalled(DSpy);
render(<D />, container);
expect(container.innerHTML).to.equal('<div>D</div>');
calledOnce(Bspy);
calledOnce(CSpy);
notCalled(DSpy);
render(<B />, container);
expect(container.innerHTML).to.equal('<div>B</div>');
calledOnce(Bspy);
calledOnce(CSpy);
calledOnce(DSpy);
});
it('fires events when scrolled past a bucket precentage threshold', (done) => {
const spy = sinon.spy();
new ScrollTracker({element: document.querySelector('#test'), buckets: [25, 50, 75, 100], callback: spy});
window.scrollBy(0, 2500);
setTimeout(() => {
expect(spy.calledOnce).to.be.true;
expect(spy.calledTwice).to.be.false;
window.scrollBy(0, 2500);
setTimeout(() => {
expect(spy.calledTwice).to.be.true;
expect(spy.args[1][0]).to.eql([25, 50]);
window.scrollBy(0, 2500);
setTimeout(() => {
expect(spy.calledThrice).to.be.true;
expect(spy.args[2][0]).to.eql([25, 50, 75]);
window.scrollBy(0, 2500);
setTimeout(() => {
expect(spy.callCount).to.equal(4);
expect(spy.args[3][0]).to.eql([25, 50, 75, 100]);
done();
}, 250);
}, 250);
}, 250);
}, 250);
});
it("removes the aria role from the toggleEl", () => {
let elSpy = sinon.spy(toggleEl, 'removeAttribute');
testToggle.destroy();
proclaim.isTrue(elSpy.calledWith('role'));
});
it("Adds an event listener to the trigger if one has been set", (done) => {
let openSpy = sinon.spy(Overlay.prototype, 'open');
let closeSpy = sinon.spy(Overlay.prototype, 'close');
document.getElementById('testTrigger').click();
proclaim.isFalse(openSpy.called);
proclaim.isFalse(closeSpy.called);
new Overlay('myID', {html: 'hello', trigger: '#testTrigger'});
document.getElementById('testTrigger').click();
setTimeout(() => {
proclaim.isTrue(openSpy.called);
Overlay.prototype.open.restore();
Overlay.prototype.close.restore();
done();
}, 10);
});
QUnit.test('inputValue as a Promise', (assert) => {
const _consoleWarn = console.warn
const spy = sinon.spy(console, 'warn')
const done = assert.async()
const inputTypes = ['text', 'email', 'number', 'tel', 'textarea']
const value = '1.1 input value'
const inputValue = new Promise((resolve) => {
resolve('1.1 input value')
})
function showPopupWithInput () {
const input = inputTypes.pop()
SwalWithoutAnimation.fire({
input,
inputValue,
onOpen: () => {
setTimeout(() => {
assert.equal(Swal.getInput().value, input === 'number' ? parseFloat(value) : value)
if (inputTypes.length) {
showPopupWithInput()
} else {
done()
}
}, TIMEOUT)
}
})
}
showPopupWithInput()
console.warn = _consoleWarn
assert.ok(spy.notCalled)
})
QUnit.test('should throw console warning about unexpected type of inputValue', (assert) => {
const _consoleWarn = console.warn
const spy = sinon.spy(console, 'warn')
Swal.fire({ input: 'text', inputValue: undefined })
console.warn = _consoleWarn
assert.ok(spy.calledWith('SweetAlert2: Unexpected type of inputValue! Expected "string", "number" or "Promise", got "undefined"'))
})
it('removes all event listeners', () => {
input = new Input(requiredField);
fieldSpy = sinon.spy(requiredField, 'removeEventListener');
input.destroy();
proclaim.isTrue(fieldSpy.calledTwice);
});
it("calls the callback with `this` bound to the correct context (the toggle not the event)", () => {
let target = new OToggle.Target(testToggle);
testToggle.target = target;
testToggle.callback = () => {};
sinon.stub(target, "isOpen").returns(true);
let callbackSpy = sinon.spy(testToggle, "callback");
let toggleSpy = sinon.spy(testToggle, "toggle");
testToggle.toggleEl.addEventListener('customEvent', testToggle.toggle);
testToggle.toggleEl.dispatchEvent(new CustomEvent('customEvent'));
proclaim.isTrue(toggleSpy.calledOnce);
proclaim.isTrue(callbackSpy.calledOnce);
});
it("should autoinitialize", (done) => {
const initSpy = sinon.spy(Share, 'init');
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
setTimeout(function(){
proclaim.equal(initSpy.called, true);
initSpy.restore();
done();
}, 100);
});
it("calls target.toggle", () => {
let target = new OToggle.Target(testToggle);
let targetSpy = sinon.spy(target, "toggle");
testToggle.target = target;
testToggle.toggle();
proclaim.isTrue(targetSpy.called);
});
it("calls target.removeToggle on it's target", () => {
let target = new OToggle.Target(testToggle);
let targetSpy = sinon.spy(target, "removeToggle");
testToggle.target = target;
testToggle.destroy();
proclaim.isTrue(targetSpy.called);
});
it("removes the data-o-toggle--js from the toggleEl", () => {
let elSpy = sinon.spy(toggleEl, 'removeAttribute');
proclaim.isTrue(testToggle.toggleEl.hasAttribute('data-o-toggle--js'));
testToggle.destroy();
proclaim.isTrue(elSpy.calledWith('data-o-toggle--js'));
});
it("removes aria-expanded from the toggleEl", () => {
let elSpy = sinon.spy(toggleEl, 'removeAttribute');
proclaim.isTrue(testToggle.toggleEl.hasAttribute('aria-expanded'));
testToggle.destroy();
proclaim.isTrue(elSpy.calledWith('aria-expanded'));
});
it("creates a new target and adds it to the _targets map", () => {
let targetSpy = sinon.spy(OToggle, "Target");
let testToggle = new OToggle(toggleEl);
proclaim.equal(targetSpy.called, true);
const key = testToggle.targetEl;
proclaim.isTrue(OToggle._targets.has(key));
proclaim.equal(OToggle._targets.get(key), testToggle.target);
});
it("does not call a callback if none is defined", () => {
let target = new OToggle.Target(testToggle);
testToggle.target = target;
let callbackSpy = sinon.spy(testToggle, "callback");
testToggle.callback = undefined;
testToggle.toggle();
proclaim.isFalse(callbackSpy.called);
});
it('does not fire events when the instance is destroyed', (done) => {
const spy = sinon.spy();
const scrollTracker = new ScrollTracker({element: document.querySelector('#test'), buckets: [25, 50, 75, 100], callback: spy});
scrollTracker.destroy();
window.scrollTo(0, 2500);
setTimeout(() => {
expect(spy.calledOnce).to.be.false;
done();
}, 250);
});
it("calls preventDefault on if an event is passed in", () => {
let target = new OToggle.Target(testToggle);
testToggle.target = target;
let event = new Event('click');
let eventSpy = sinon.spy(event, "preventDefault");
testToggle.toggle(event);
proclaim.isTrue(eventSpy.called);
});
it('throttles events to 250ms', (done) => {
const spy = sinon.spy();
new ScrollTracker({element: document.querySelector('#test'), buckets: [25, 50, 75, 100], callback: spy});
window.scrollTo(0, 2500);
window.scrollTo(0, 5000);
setTimeout(() => {
expect(spy.calledOnce).to.be.true;
expect(spy.args[0][0]).to.eql([25, 50]);
done();
}, 250);
});
it("Removes state from history when opened in full screen mode if supported.", () => {
const testOverlay = new Overlay('myID', {html: 'hello', fullscreen: true});
sinon.spy(window.history, "back");
testOverlay.open();
testOverlay.close();
if (window.history.pushState) {
proclaim.isTrue(window.history.back.called);
}
window.history.back.restore();
});
it('adds scroll event listeners to the element passed in to the constructor', () => {
const realAddEventListener = document.addEventListener;
const addEventListenerSpy = sinon.spy();
document.addEventListener = addEventListenerSpy;
new ScrollTracker({element: document.querySelector('#test'), buckets: [25, 50, 75, 100], callback: () => {}});
expect(addEventListenerSpy.calledOnce).to.be.true;
expect(addEventListenerSpy.args[0][0]).to.equal('scroll');
expect(addEventListenerSpy.calledOn(document)).to.be.true;
document.addEventListener = realAddEventListener;
});
it("calls the callback if defined with the value 'close' if the target.isOpen is false", () => {
let event = new Event('click');
let target = new OToggle.Target(testToggle);
testToggle.target = target;
sinon.stub(target, "isOpen").returns(false);
testToggle.callback = () => {};
let callbackSpy = sinon.spy(testToggle, "callback");
testToggle.toggle(event);
proclaim.isTrue(callbackSpy.called);
proclaim.isTrue(callbackSpy.withArgs('close', event).called);
});
QUnit.test('allowOutsideClick: should throw console warning for popups without backdrop', (assert) => {
const _consoleWarn = console.warn
const spy = sinon.spy(console, 'warn')
SwalWithoutAnimation.fire({
title: 'allowOutsideClick is not compatible with modeless popups',
allowOutsideClick: true,
backdrop: false
})
console.warn = _consoleWarn
assert.ok(spy.calledWith('SweetAlert2: "allowOutsideClick" parameter requires `backdrop` parameter to be set to `true`'))
})
it('should throttle callback to every 100ms', function(done) {
const callback = sinon.spy();
const throttled = Utils.throttle(callback, 100);
throttled();
throttled();
clock.tick(99);
proclaim.strictEqual(callback.callCount, 0);
clock.tick(1);
proclaim.strictEqual(callback.callCount, 1);
done();
});
it('click tab', () => {
sinon.spy(testTabs, 'selectTab');
const clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', true, true);
tabsEl.querySelectorAll('li a')[2].dispatchEvent(clickEvent);
proclaim.calledWith(testTabs.selectTab, 2);
tabsEl.querySelectorAll('li a')[1].dispatchEvent(clickEvent);
proclaim.calledWith(testTabs.selectTab, 1);
tabsEl.querySelectorAll('li a')[0].dispatchEvent(clickEvent);
proclaim.calledWith(testTabs.selectTab, 0);
});
it('enter key press tab', () => {
sinon.spy(testTabs, 'selectTab');
const keyPressEvent = document.createEvent('Event');
keyPressEvent.keyCode = 13;
keyPressEvent.initEvent('keypress', true, true);
tabsEl.querySelectorAll('li a')[2].dispatchEvent(keyPressEvent);
proclaim.calledWith(testTabs.selectTab, 2);
tabsEl.querySelectorAll('li a')[1].dispatchEvent(keyPressEvent);
proclaim.calledWith(testTabs.selectTab, 1);
tabsEl.querySelectorAll('li a')[0].dispatchEvent(keyPressEvent);
proclaim.calledWith(testTabs.selectTab, 0);
});
it("calls target.addToggle() if the target already exists in the _targets map", () => {
fixtures.reset();
fixtures.twoTogglesOneTarget();
const toggleEl1 = document.getElementById("testToggle1");
const toggleEl2 = document.getElementById("testToggle2");
let testToggle1 = new OToggle(toggleEl1);
let target = new OToggle.Target(testToggle1);
let targetSpy = sinon.spy(target, "addToggle");
OToggle._targets.set(testToggle1.targetEl, target);
// Now add another toggle with the same target
new OToggle(toggleEl2);
proclaim.isTrue(targetSpy.calledOnce);
});