app/addons/fauxton/tests/componentsSpec.react.jsx - couchdb-fauxton - Git at Google

 // Licensed under the Apache License, Version 2.0 (the "License"); you may not
 // use this file except in compliance with the License. You may obtain a copy of
 // the License at
 //
 //   http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
 define([
   'api',
   'addons/fauxton/components.react',
   'testUtils',
   'react'
 ], function (FauxtonAPI, Views, utils, React) {

   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;


   describe('Tray', function () {

     var container, trayEl, oldToggleSpeed;

     beforeEach(function () {
       container = document.createElement('div');

       // when we want to control the diff, we have to render directly
       trayEl = TestUtils.renderIntoDocument(<Views.Tray className="traytest" />, container);

       oldToggleSpeed = FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED;

       // makes velocity toggle immediately
       FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED = 0;
     });

     afterEach(function () {
       React.unmountComponentAtNode(container);
       FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED = oldToggleSpeed;
     });

     it('renders trayid and custom classes', function () {
       assert(trayEl.getDOMNode().getAttribute('class').indexOf('traytest') >= 0);
     });

     it('is initially closed', function () {
       assert.equal('none', trayEl.getDOMNode().style.display);
     });

     it('shows when requested', function () {
       trayEl.setVisible(true, function () {
         assert.equal('block', trayEl.getDOMNode().style.display);
       });
     });

     it('hides when requested', function () {
       trayEl.show(function () {
         trayEl.setVisible(false, function () {
           assert.equal('none', trayEl.getDOMNode().style.display);
         });
       });
     });

     it('does nothing when already hidden', function () {
       trayEl.setVisible(false, function () {
         throw new Error('should do nothing');
       });
     });

     it('toggles open with callback', function () {
       trayEl.toggle(function () {
         assert.equal('block', trayEl.getDOMNode().style.display);
       });
     });

     it('toggles close again with callback', function () {
       trayEl.show(function () {
         trayEl.toggle(function () {
           assert.equal('none', trayEl.getDOMNode().style.display);
         });
       });
     });

     it('calls props.onAutoHide when closing tray by clicking outside of it', function () {
       var container = document.createElement('div');
       var onClose = function () { };
       var spy = sinon.spy();

       var wrapper = React.createClass({

         runTest: function () {
           var trayEl = this.refs.tray;
           var externalEl = this.refs.externalElement;
           trayEl.show(function () {
             TestUtils.Simulate.click(React.findDOMNode(externalEl));
             assert.ok(spy.calledOnce);
           });
         },

         render: function () {
           return (
             <div>
               <p ref="externalElement">Click me!</p>
               <Views.Tray ref="tray" onAutoHide={onClose} />
             </div>
           );
         }
       });

       var reactEl = TestUtils.renderIntoDocument(React.createElement(wrapper), container);
       reactEl.runTest();

       React.unmountComponentAtNode(container);
     });

   });

   describe('Pagination', function () {

     var nvl, container;

     beforeEach(function () {
       // helper for empty strings
       nvl = function (str) {
         return str === null ? "" : str;
       };
       container = document.createElement('div');
       // create element individually to parameterize
     });

     afterEach(function () {
       React.unmountComponentAtNode(container);
     });

     it('renders 20-wise pages per default', function () {
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={3} total={55} urlPrefix="?prefix=" urlSuffix="&suffix=88" />,
         container
       );

       var lis = pageEl.getDOMNode().getElementsByTagName("li");
       assert.equal(1 + 3 + 1, lis.length);
       assert(nvl(lis[0].getAttribute("class")).indexOf("disabled") < 0);
       assert(nvl(lis[1].getAttribute("class")).indexOf("active") < 0);
       assert(nvl(lis[2].getAttribute("class")).indexOf("active") < 0);
       assert(nvl(lis[3].getAttribute("class")).indexOf("active") >= 0);
       assert(nvl(lis[4].getAttribute("class")).indexOf("disabled") >= 0);
       assert.equal("2", lis[2].innerText);
       assert.equal("?prefix=2&suffix=88", lis[2].getElementsByTagName("a")[0].getAttribute("href"));
     });

     it("can overwrite collection size", function () {
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination perPage={10} page={3} total={55} urlPrefix="?prefix=" urlSuffix="&suffix=88" />,
         container
       );

       var lis = pageEl.getDOMNode().getElementsByTagName("li");
       assert.equal(1 + 6 + 1, lis.length);
     });

     it("handles large collections properly - beginning", function () {
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={3} total={600} />,
         container
       );
       var lis = pageEl.getDOMNode().getElementsByTagName("li");
       assert.equal(1 + 10 + 1, lis.length);
       assert(nvl(lis[3].getAttribute("class")).indexOf("active") >= 0);
       assert.equal("3", lis[3].innerText);
       assert.equal("7", lis[7].innerText);
       assert.equal("10", lis[10].innerText);
     });

     it("handles large collections properly - middle", function () {
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={10} total={600} />,
         container
       );

       var lis = pageEl.getDOMNode().getElementsByTagName("li");
       assert.equal(1 + 10 + 1, lis.length);
       assert(nvl(lis[6].getAttribute("class")).indexOf("active") >= 0);
       assert.equal("7", lis[3].innerText);
       assert.equal("11", lis[7].innerText);
       assert.equal("14", lis[10].innerText);
     });

     it("handles large collections properly - end", function () {
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={29} total={600} />,
         container
       );

       var lis = pageEl.getDOMNode().getElementsByTagName("li");
       assert.equal(1 + 10 + 1, lis.length);
       assert(nvl(lis[9].getAttribute("class")).indexOf("active") >= 0);
       assert.equal("23", lis[3].innerText);
       assert.equal("27", lis[7].innerText);
       assert.equal("30", lis[10].innerText);
     });

     it('limits the number of total pages when customized', function () {
       var maxNavPages = 15;
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={1} total={1000} maxNavPages={maxNavPages} />,
         container
       );
       var lis = pageEl.getDOMNode().getElementsByTagName("li");
       assert.equal(1 + maxNavPages + 1, lis.length);
     });

     it('calls callback method when supplied', function () {
       var spy = sinon.spy();
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={1} total={100} onClick={spy} />,
         container
       );
       var links = React.findDOMNode(pageEl).getElementsByTagName("a");

       TestUtils.Simulate.click(links[3]);

       // confirm it gets called
       assert.ok(spy.calledOnce);

       // confirm it's called with the pagination number (3)
       assert.ok(spy.calledWith(3));
     });

     it('calls callback method with correct values for prev and next', function () {
       var spy = sinon.spy();

       var currentPage = 5;
       var pageEl = TestUtils.renderIntoDocument(
         <Views.Pagination page={currentPage} total={200} onClick={spy} />,
         container
       );
       var links = React.findDOMNode(pageEl).getElementsByTagName("a");

       TestUtils.Simulate.click(links[0]);
       assert.ok(spy.calledWith(currentPage - 1));

       TestUtils.Simulate.click(links[11]); // last index
       assert.ok(spy.calledWith(currentPage + 1));
     });

   });


   describe('Clipboard', function () {
     var container;
     beforeEach(function () {
       container = document.createElement('div');
     });

     afterEach(function () {
       React.unmountComponentAtNode(container);
     });

     it('shows a clipboard icon by default', function () {
       var clipboard = TestUtils.renderIntoDocument(<Views.Clipboard text="copy me" />, container);
       assert.equal($(clipboard.getDOMNode()).find('.fonticon-clipboard').length, 1);
     });

     it('shows text if specified', function () {
       var clipboard = TestUtils.renderIntoDocument(<Views.Clipboard displayType="text" text="copy me" />, container);
       assert.equal($(clipboard.getDOMNode()).find('.fonticon-clipboard').length, 0);
     });

     it('shows custom text if specified ', function () {
       var clipboard = TestUtils.renderIntoDocument(<Views.Clipboard displayType="text" textDisplay='booyah!' text="copy me" />, container);
       assert.ok(/booyah!/.test($(clipboard.getDOMNode())[0].outerHTML));
     });

   });

 });
	// Licensed under the Apache License, Version 2.0 (the "License"); you may not
	// use this file except in compliance with the License. You may obtain a copy of
	// the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
	// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
	// License for the specific language governing permissions and limitations under
	// the License.
	define([
	'api',
	'addons/fauxton/components.react',
	'testUtils',
	'react'
	], function (FauxtonAPI, Views, utils, React) {

	var assert = utils.assert;
	var TestUtils = React.addons.TestUtils;


	describe('Tray', function () {

	var container, trayEl, oldToggleSpeed;

	beforeEach(function () {
	container = document.createElement('div');

	// when we want to control the diff, we have to render directly
	trayEl = TestUtils.renderIntoDocument(<Views.Tray className="traytest" />, container);

	oldToggleSpeed = FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED;

	// makes velocity toggle immediately
	FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED = 0;
	});

	afterEach(function () {
	React.unmountComponentAtNode(container);
	FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED = oldToggleSpeed;
	});

	it('renders trayid and custom classes', function () {
	assert(trayEl.getDOMNode().getAttribute('class').indexOf('traytest') >= 0);
	});

	it('is initially closed', function () {
	assert.equal('none', trayEl.getDOMNode().style.display);
	});

	it('shows when requested', function () {
	trayEl.setVisible(true, function () {
	assert.equal('block', trayEl.getDOMNode().style.display);
	});
	});

	it('hides when requested', function () {
	trayEl.show(function () {
	trayEl.setVisible(false, function () {
	assert.equal('none', trayEl.getDOMNode().style.display);
	});
	});
	});

	it('does nothing when already hidden', function () {
	trayEl.setVisible(false, function () {
	throw new Error('should do nothing');
	});
	});

	it('toggles open with callback', function () {
	trayEl.toggle(function () {
	assert.equal('block', trayEl.getDOMNode().style.display);
	});
	});

	it('toggles close again with callback', function () {
	trayEl.show(function () {
	trayEl.toggle(function () {
	assert.equal('none', trayEl.getDOMNode().style.display);
	});
	});
	});

	it('calls props.onAutoHide when closing tray by clicking outside of it', function () {
	var container = document.createElement('div');
	var onClose = function () { };
	var spy = sinon.spy();

	var wrapper = React.createClass({

	runTest: function () {
	var trayEl = this.refs.tray;
	var externalEl = this.refs.externalElement;
	trayEl.show(function () {
	TestUtils.Simulate.click(React.findDOMNode(externalEl));
	assert.ok(spy.calledOnce);
	});
	},

	render: function () {
	return (
	<div>
	<p ref="externalElement">Click me!</p>
	<Views.Tray ref="tray" onAutoHide={onClose} />
	</div>
	);
	}
	});

	var reactEl = TestUtils.renderIntoDocument(React.createElement(wrapper), container);
	reactEl.runTest();

	React.unmountComponentAtNode(container);
	});

	});

	describe('Pagination', function () {

	var nvl, container;

	beforeEach(function () {
	// helper for empty strings
	nvl = function (str) {
	return str === null ? "" : str;
	};
	container = document.createElement('div');
	// create element individually to parameterize
	});

	afterEach(function () {
	React.unmountComponentAtNode(container);
	});

	it('renders 20-wise pages per default', function () {
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={3} total={55} urlPrefix="?prefix=" urlSuffix="&suffix=88" />,
	container
	);

	var lis = pageEl.getDOMNode().getElementsByTagName("li");
	assert.equal(1 + 3 + 1, lis.length);
	assert(nvl(lis[0].getAttribute("class")).indexOf("disabled") < 0);
	assert(nvl(lis[1].getAttribute("class")).indexOf("active") < 0);
	assert(nvl(lis[2].getAttribute("class")).indexOf("active") < 0);
	assert(nvl(lis[3].getAttribute("class")).indexOf("active") >= 0);
	assert(nvl(lis[4].getAttribute("class")).indexOf("disabled") >= 0);
	assert.equal("2", lis[2].innerText);
	assert.equal("?prefix=2&suffix=88", lis[2].getElementsByTagName("a")[0].getAttribute("href"));
	});

	it("can overwrite collection size", function () {
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination perPage={10} page={3} total={55} urlPrefix="?prefix=" urlSuffix="&suffix=88" />,
	container
	);

	var lis = pageEl.getDOMNode().getElementsByTagName("li");
	assert.equal(1 + 6 + 1, lis.length);
	});

	it("handles large collections properly - beginning", function () {
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={3} total={600} />,
	container
	);
	var lis = pageEl.getDOMNode().getElementsByTagName("li");
	assert.equal(1 + 10 + 1, lis.length);
	assert(nvl(lis[3].getAttribute("class")).indexOf("active") >= 0);
	assert.equal("3", lis[3].innerText);
	assert.equal("7", lis[7].innerText);
	assert.equal("10", lis[10].innerText);
	});

	it("handles large collections properly - middle", function () {
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={10} total={600} />,
	container
	);

	var lis = pageEl.getDOMNode().getElementsByTagName("li");
	assert.equal(1 + 10 + 1, lis.length);
	assert(nvl(lis[6].getAttribute("class")).indexOf("active") >= 0);
	assert.equal("7", lis[3].innerText);
	assert.equal("11", lis[7].innerText);
	assert.equal("14", lis[10].innerText);
	});

	it("handles large collections properly - end", function () {
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={29} total={600} />,
	container
	);

	var lis = pageEl.getDOMNode().getElementsByTagName("li");
	assert.equal(1 + 10 + 1, lis.length);
	assert(nvl(lis[9].getAttribute("class")).indexOf("active") >= 0);
	assert.equal("23", lis[3].innerText);
	assert.equal("27", lis[7].innerText);
	assert.equal("30", lis[10].innerText);
	});

	it('limits the number of total pages when customized', function () {
	var maxNavPages = 15;
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={1} total={1000} maxNavPages={maxNavPages} />,
	container
	);
	var lis = pageEl.getDOMNode().getElementsByTagName("li");
	assert.equal(1 + maxNavPages + 1, lis.length);
	});

	it('calls callback method when supplied', function () {
	var spy = sinon.spy();
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={1} total={100} onClick={spy} />,
	container
	);
	var links = React.findDOMNode(pageEl).getElementsByTagName("a");

	TestUtils.Simulate.click(links[3]);

	// confirm it gets called
	assert.ok(spy.calledOnce);

	// confirm it's called with the pagination number (3)
	assert.ok(spy.calledWith(3));
	});

	it('calls callback method with correct values for prev and next', function () {
	var spy = sinon.spy();

	var currentPage = 5;
	var pageEl = TestUtils.renderIntoDocument(
	<Views.Pagination page={currentPage} total={200} onClick={spy} />,
	container
	);
	var links = React.findDOMNode(pageEl).getElementsByTagName("a");

	TestUtils.Simulate.click(links[0]);
	assert.ok(spy.calledWith(currentPage - 1));

	TestUtils.Simulate.click(links[11]); // last index
	assert.ok(spy.calledWith(currentPage + 1));
	});

	});


	describe('Clipboard', function () {
	var container;
	beforeEach(function () {
	container = document.createElement('div');
	});

	afterEach(function () {
	React.unmountComponentAtNode(container);
	});

	it('shows a clipboard icon by default', function () {
	var clipboard = TestUtils.renderIntoDocument(<Views.Clipboard text="copy me" />, container);
	assert.equal($(clipboard.getDOMNode()).find('.fonticon-clipboard').length, 1);
	});

	it('shows text if specified', function () {
	var clipboard = TestUtils.renderIntoDocument(<Views.Clipboard displayType="text" text="copy me" />, container);
	assert.equal($(clipboard.getDOMNode()).find('.fonticon-clipboard').length, 0);
	});

	it('shows custom text if specified ', function () {
	var clipboard = TestUtils.renderIntoDocument(<Views.Clipboard displayType="text" textDisplay='booyah!' text="copy me" />, container);
	assert.ok(/booyah!/.test($(clipboard.getDOMNode())[0].outerHTML));
	});

	});

	});