Merge lp:~jcsackett/juju-gui/charm-slider into lp:juju-gui/experimental

[j.c.sackett]

Adds the charm slider widget

This adds a slider widget derived from Jeff Pihach's flickr carousel. It
doesn't wire it into anything yet.

https://codereview.appspot.com/7641043/

[j.c.sackett (jcsackett)]

Reviewers: mp+152418_code.launchpad.net,

Message:
Please take a look.

Description:
Adds the charm slider widget

This adds a slider widget derived from Jeff Pihach's flickr carousel. It
doesn't wire it into anything yet.

https://code.launchpad.net/~jcsackett/juju-gui/charm-slider/+merge/152418

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/7641043/

Affected files:
   A [revision details]
   M app/modules-debug.js
   M app/templates/charm-small-widget.handlebars
   A app/widgets/charm-slider.js
   M app/widgets/charm-small.js
   A lib/views/browser/charm-slider.less
   M lib/views/stylesheet.less
   M test/index.html
   A test/test_charm_slider.js

[Richard Harding (rharding)]

Some light weight changes. Many have a lot of occurances so didn't mark
each one for the first pass, but {Object} vs { Object } and String vs
string.

Some other suggestions and additional tests requested.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js
File app/widgets/charm-slider.js (right):

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode7
app/widgets/charm-slider.js:7: * @namespace juju.widgets.browser
namespace juju; modules widgets; submodule browser.notifier I think is
how it works.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode12
app/widgets/charm-slider.js:12: var sub = Y.Lang.sub;
comma here and combine with next var

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode21
app/widgets/charm-slider.js:21: *
In the doc string can you put a sample of min. html needed to use the
widget? Want to include enough to reuse without too much hunting.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode29
app/widgets/charm-slider.js:29: * @type { string }
Caps String for a class name. No spaces inside the {}.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode66
app/widgets/charm-slider.js:66:
extra space here

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode82
app/widgets/charm-slider.js:82:
extra space here (my snippets fault I know...)

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode83
app/widgets/charm-slider.js:83: _generateDOM: function() {
please move private methods to the top of the class functions.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode90
app/widgets/charm-slider.js:90: sub(that.itemTemplate, {width:
that.get('width'), index: index}));
you get width twice. Please just get the var and cache it to avoid
lookups that aren't required.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode115
app/widgets/charm-slider.js:115: * Advances the slider to the next item,
or a designated index
end comment with .

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode128
app/widgets/charm-slider.js:128: index = parseInt(index, 10);
why does index need to be parsed? How is it coming in as a string?

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode184
app/widgets/charm-slider.js:184: this.set('pauseOnHover', true);
can we rename this to pause(d)OnHover. It matches up better since it's a
completed state. Maybe even just move to paused. Who cares if we're
paused for hover or some manual control.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode200
app/widgets/charm-slider.js:200:
Y.juju.widgets.browser.CharmSlider.superclass.bindUI.apply(this);
to prevent the nested lookup use ns. please.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode244
app/widgets/charm-slider.js:244: * @default 500
since this is a little slider let's default to something closer to what
we would use like 150 or 200px.

https://coderevie...

[lp:~jcsackett/juju-gui/charm-slider]

431. By j.c.sackett on 2013-03-08

Addressed comments from review.

[j.c.sackett (jcsackett)]

Agree with most comments, address the remainder. Code is coming up
shortly.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js
File app/widgets/charm-slider.js (right):

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode21
app/widgets/charm-slider.js:21: *
On 2013/03/08 15:12:02, rharding wrote:
> In the doc string can you put a sample of min. html needed to use the
widget?
> Want to include enough to reuse without too much hunting.

Per discussion, this doesn't actual require any setup; just pass in
parentNode to render, as with default Y.Widget.

https://codereview.appspot.com/7641043/diff/1/app/widgets/charm-slider.js#newcode128
app/widgets/charm-slider.js:128: index = parseInt(index, 10);
On 2013/03/08 15:12:02, rharding wrote:
> why does index need to be parsed? How is it coming in as a string?

We get index out of a data-* attribute on the element, but I have moved
the parseInt to where we fetch it, so it's an int when it hits this
method.

https://codereview.appspot.com/7641043/

[j.c.sackett (jcsackett)]

Please take a look.

https://codereview.appspot.com/7641043/

[Jeff Pihach (hatch)]

Thanks for the code! See my comments (as we discussed) below.

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js
File app/widgets/charm-slider.js (right):

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode72
app/widgets/charm-slider.js:72: if (Y.Lang.isValue(index)) {
We decided to no longer use isValue() as all it's really doing is a
glorified falsy check

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode102
app/widgets/charm-slider.js:102: sub(that.itemTemplate, {width: width,
index: index}));
There is no need to do the that=this trick here because (like most
methods of this type in yui) it has a final param which is the context.

http://yuilibrary.com/yui/docs/api/classes/Array.html#method_map

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode103
app/widgets/charm-slider.js:103: tmpNode.setContent(item);
setContent() is depricated use setHTML()

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode116
app/widgets/charm-slider.js:116: Y.log('_generateSliderControls',
'info', this.name);
I think we have standardized on using console.log()

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode119
app/widgets/charm-slider.js:119: Y.Array.each(this.get('items'),
function(item, index) {
Like I mentioned above, YUI's iterators have a context param as the
final param so the that=this can be removed in favour of that.

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode195
app/widgets/charm-slider.js:195: var index =
this.getAttribute('data-index');
event callbacks are passed an event object which hold reference to the
target.

so this can be changed to e.currentTarget.getAttribute('data-index');

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode198
app/widgets/charm-slider.js:198: }, 'li'));
delegate() also has a context property

https://codereview.appspot.com/7641043/diff/8001/lib/views/browser/charm-slider.less
File lib/views/browser/charm-slider.less (right):

https://codereview.appspot.com/7641043/diff/8001/lib/views/browser/charm-slider.less#newcode1
lib/views/browser/charm-slider.less:1:
.yui3-browser-charm-slider-content {
Because we are using less you can actually nest most of the rules in
this commit - let me know if you need help doing this.

https://codereview.appspot.com/7641043/

[lp:~jcsackett/juju-gui/charm-slider]

432. By j.c.sackett on 2013-03-08

Changes from hatch's review

[j.c.sackett (jcsackett)]

On 2013/03/08 19:23:49, jeff.pihach wrote:
> Thanks for the code! See my comments (as we discussed) below.

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js
> File app/widgets/charm-slider.js (right):

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode72
> app/widgets/charm-slider.js:72: if (Y.Lang.isValue(index)) {
> We decided to no longer use isValue() as all it's really doing is a
glorified
> falsy check

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode102
> app/widgets/charm-slider.js:102: sub(that.itemTemplate, {width: width,
index:
> index}));
> There is no need to do the that=this trick here because (like most
methods of
> this type in yui) it has a final param which is the context.

> http://yuilibrary.com/yui/docs/api/classes/Array.html#method_map

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode103
> app/widgets/charm-slider.js:103: tmpNode.setContent(item);
> setContent() is depricated use setHTML()

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode116
> app/widgets/charm-slider.js:116: Y.log('_generateSliderControls',
'info',
> this.name);
> I think we have standardized on using console.log()

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode119
> app/widgets/charm-slider.js:119: Y.Array.each(this.get('items'),
function(item,
> index) {
> Like I mentioned above, YUI's iterators have a context param as the
final param
> so the that=this can be removed in favour of that.

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode195
> app/widgets/charm-slider.js:195: var index =
this.getAttribute('data-index');
> event callbacks are passed an event object which hold reference to the
target.

> so this can be changed to e.currentTarget.getAttribute('data-index');

https://codereview.appspot.com/7641043/diff/8001/app/widgets/charm-slider.js#newcode198
> app/widgets/charm-slider.js:198: }, 'li'));
> delegate() also has a context property

https://codereview.appspot.com/7641043/diff/8001/lib/views/browser/charm-slider.less
> File lib/views/browser/charm-slider.less (right):

https://codereview.appspot.com/7641043/diff/8001/lib/views/browser/charm-slider.less#newcode1
> lib/views/browser/charm-slider.less:1:
.yui3-browser-charm-slider-content {
> Because we are using less you can actually nest most of the rules in
this commit
> - let me know if you need help doing this.

I've address your points, code coming shortly.

https://codereview.appspot.com/7641043/

[j.c.sackett (jcsackett)]

Please take a look.

https://codereview.appspot.com/7641043/

[Jeff Pihach (hatch)]

LGTM

https://codereview.appspot.com/7641043/

[Richard Harding (rharding)]

On 2013/03/08 20:17:48, jeff.pihach wrote:
> LGTM

lgtm as well

https://codereview.appspot.com/7641043/

[j.c.sackett (jcsackett)]

*** Submitted:

Adds the charm slider widget

This adds a slider widget derived from Jeff Pihach's flickr carousel. It
doesn't wire it into anything yet.

R=rharding, jeff.pihach
CC=
https://codereview.appspot.com/7641043

https://codereview.appspot.com/7641043/

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-03-06 16:17:11 +0000
+++ app/modules-debug.js	2013-03-08 19:44:21 +0000
@@ -52,6 +52,10 @@
           fullpath: '/juju-ui/widgets/charm-small.js'
         },
 
+        'browser-charm-slider': {
+          fullpath: '/juju-ui/widgets/charm-slider.js'
+        },
+
         'reconnecting-websocket': {
           fullpath: '/juju-ui/assets/javascripts/reconnecting-websocket.js'
         },

=== modified file 'app/templates/charm-small-widget.handlebars'
--- app/templates/charm-small-widget.handlebars	2013-03-01 20:58:58 +0000
+++ app/templates/charm-small-widget.handlebars	2013-03-08 19:44:21 +0000
@@ -1,4 +1,4 @@
-<div >
+<div>
   <img url="{{ iconfile }}" />
   <h3 class="title">{{ title }}</h3>
   <p class="description">{{ description }}</p>

=== added file 'app/widgets/charm-slider.js'
--- app/widgets/charm-slider.js	1970-01-01 00:00:00 +0000
+++ app/widgets/charm-slider.js	2013-03-08 19:44:21 +0000
@@ -0,0 +1,329 @@
+'use strict';
+
+
+/**
+ * Provides the Charm Slider widget.
+ *
+ * @namespace juju
+ * @module widgets
+ * @submodule browser.CharmSlider
+ *
+ */
+YUI.add('browser-charm-slider', function(Y) {
+  var sub = Y.Lang.sub,
+      ns = Y.namespace('juju.widgets.browser');
+
+  /**
+   * The CharmSlider provides a rotating display of one member of a generic set
+   * of items, with controls to go directly to a given item.
+   *
+   * @class CharmSlider
+   * @extends {Y.ScrollView}
+   *
+   */
+  ns.CharmSlider = new Y.Base.create('browser-charm-slider', Y.ScrollView, [], {
+
+    /**
+     * Template for the CharmSlider
+     *
+     * @property charmSliderTemplate
+     * @type {String}
+     *
+     */
+    charmSliderTemplate: '<ul width="{width}px" />',
+
+    /**
+     * Template for a given item in the slider
+     *
+     * @property itemTemplate
+     * @type {String}
+     *
+     */
+    itemTemplate: '<li width="{width}px" data-index="{index}" />',
+
+    /**
+     * Template used for the navigation controls.
+     *
+     * @property prevNavTemplate
+     * @type {String}
+     */
+    navTemplate: '<ul class="navigation"></div>',
+
+    /**
+     * Template used for items in the navigation.
+     *
+     * @property navItemTemplate
+     * @type {String}
+     */
+    navItemTemplate: '<li data-index="{index}">O</li>',
+
+    /**
+      * Advances the slider to the next item, or a designated index.
+      *
+      * @method _advanceSlide
+      * @param {string} Index to move to; if not supplied, advances to next
+      * slide.
+      * @private
+      */
+    _advanceSlide: function(index) {
+      var pages = this.pages;
+      if (index) {
+        this._stopTimer();
+        pages.scrollToIndex(index);
+        this._startTimer();
+      } else {
+        index = pages.get('index');
+        if (index < pages.get('total') - 1) {
+          pages.next();
+        } else {
+          pages.scrollToIndex(0);
+        }
+      }
+    },
+
+    /**
+     * Creates the structure and DOM nodes for the slider.
+     *
+     * @method _generateDOM
+     * @private
+     * @return {Node} The slider's DOM nodes.
+     *
+     */
+    _generateDOM: function() {
+      var width = this.get('width'),
+          slider = Y.Node.create(
+              sub(this.charmSliderTemplate, {width: width}));
+
+      Y.Array.map(this.get('items'), function(item, index) {
+        var tmpNode = Y.Node.create(
+            sub(this.itemTemplate, {width: width, index: index}));
+        tmpNode.setHTML(item);
+        slider.append(tmpNode);
+      }, this);
+      return slider;
+    },
+
+    /**
+     * Generates and appends the navigation controls for the slider
+     *
+     * @method _generateSliderControls
+     * @private
+     */
+    _generateSliderControls: function() {
+      var nav = Y.Node.create(this.navTemplate);
+      Y.Array.each(this.get('items'), function(item, index) {
+        nav.append(Y.Node.create(sub(
+            this.navItemTemplate, {index: index})));
+      }, this);
+      this.get('boundingBox').append(nav);
+    },
+
+    /**
+      * Mouseenter/mouseleave event handler
+      *
+      * @method _pauseAutoAdvance
+      * @private
+      * @param {object} mouseout or mouseover event object.
+      */
+    _pauseAutoAdvance: function(e) {
+      if (e.type === 'mouseenter') {
+        this.set('paused', true);
+      } else {
+        this.set('paused', false);
+      }
+    },
+
+    /**
+      * Checks to see if autoadvance is set then sets up the timeouts
+      *
+      * @method _startTimer
+      * @private
+      */
+    _startTimer: function() {
+
+      if (this.get('autoAdvance') === true) {
+        var timer = Y.later(this.get('advanceDelay'), this, function() {
+          if (this.get('paused') !== true) {
+            this._advanceSlide();
+          }
+        }, null, true);
+        this.set('timer', timer);
+      }
+    },
+
+    /**
+      * Stops the timer for autoadvance
+      *
+      * @method _stopTimer
+      * @private
+      */
+    _stopTimer: function() {
+      var timer = this.get('timer');
+      if (timer) {
+        timer.cancel();
+      }
+    },
+
+    /**
+      * Binds the navigate event listeners
+      *
+      * @method bindUI
+      * @private
+      */
+    bindUI: function() {
+
+      //Call the parent bindUI method
+      ns.CharmSlider.superclass.bindUI.apply(this);
+
+      var events = this.get('_events'),
+          boundingBox = this.get('boundingBox'),
+          nav = boundingBox.one('.navigation');
+      events.push(this.after('render', this._startTimer, this));
+      events.push(boundingBox.on('mouseenter', this._pauseAutoAdvance, this));
+      events.push(boundingBox.on('mouseleave', this._pauseAutoAdvance, this));
+      events.push(nav.delegate('click', function(e) {
+        var index = e.currentTarget.getAttribute('data-index');
+        index = parseInt(index, 10);
+        this._advanceSlide(index);
+      }, 'li', this));
+    },
+
+    /**
+      * Detaches events attached during instantiation
+      *
+      * @method destructor
+      * @private
+      */
+    destructor: function() {
+      this.get('_events').each(function(event) {
+        event.detach();
+      });
+    },
+
+    /**
+     * Initializer
+     *
+     * @method initializer
+     * @param {Object} The config object.
+     *
+     */
+    initializer: function(cfg) {
+      this.plug(Y.Plugin.ScrollViewPaginator, {
+        selector: 'li'
+      });
+
+    },
+
+    /**
+      * Render the nodes and HTML for the slider.
+      *
+      * @method renderUI
+      * @private
+      */
+    renderUI: function() {
+      this.get('contentBox').setHTML(this._generateDOM());
+      this._generateSliderControls();
+    }
+  }, {
+    ATTRS: {
+
+      /**
+       * @attribute width
+       * @default 200
+       * @type {Int}
+       *
+       */
+      width: {
+        value: 500
+      },
+
+      /**
+       * @attribute autoAdvance
+       * @default true
+       * @type {Boolean}
+       *
+       */
+      autoAdvance: {
+        value: true
+      },
+
+      /**
+       * @attribute advanceDelay
+       * @default 3000
+       * @type {Int}
+       *
+       */
+      advanceDelay: {
+        value: 3000
+      },
+
+      /**
+       * @attribute paused
+       * @default false
+       * @type {Boolean}
+       *
+       */
+      paused: {
+        value: false
+      },
+
+      /**
+       * @attribute items
+       * @default []
+       * @type {Array}
+       *
+       */
+      items: {
+        value: [],
+        /**
+         * Verify items aren't larger than max value.
+         *
+         * @method validator
+         * @param {Array} The items being validated.
+         */
+        validator: function(val) {
+          return (val.length <= this.get('max'));
+        }
+      },
+
+      /**
+       * @attribute _events
+       * @default []
+       * @type {Array}
+       *
+       */
+      _events: {
+        value: []
+      },
+
+      /**
+       * @attribute max
+       * @default 5
+       * @type {Int}
+       *
+       */
+      max: {
+        value: 5
+      },
+
+      /**
+       * @attribute timer
+       * @default null
+       * @type {Object}
+       *
+       */
+      timer: {
+        value: null
+      }
+    }
+  });
+
+}, '0.1.0', {
+  requires: [
+    'array-extras',
+    'base',
+    'event-mouseenter',
+    'scrollview',
+    'scrollview-paginator'
+  ]
+});

=== modified file 'app/widgets/charm-small.js'
--- app/widgets/charm-small.js	2013-03-04 21:26:27 +0000
+++ app/widgets/charm-small.js	2013-03-08 19:44:21 +0000
@@ -57,7 +57,7 @@
     },
 
     /**
-     * Desctructor
+     * Destructor
      *
      * @method destructor
      * @return {undefined} Mutates only.

=== added file 'lib/views/browser/charm-slider.less'
--- lib/views/browser/charm-slider.less	1970-01-01 00:00:00 +0000
+++ lib/views/browser/charm-slider.less	2013-03-08 19:44:21 +0000
@@ -0,0 +1,29 @@
+.yui3-browser-charm-slider {
+
+    .yui3-browser-charm-slider-content {
+        white-space: nowrap;
+
+        ul {
+            margin: 0;
+            -moz-padding-start: 0;
+            padding-start: 0;
+            -webkit-padding-start: 0;
+        }
+
+        li {
+            display: inline-block;
+            text-align: center;
+            vertical-align: middle;
+        }
+    }
+
+    .navigate {
+        cursor: pointer;
+        list-style-type: none;
+
+        li {
+            display: block-inline;
+            width: auto;
+        }
+    }
+}

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-03-06 15:07:47 +0000
+++ lib/views/stylesheet.less	2013-03-08 19:44:21 +0000
@@ -1635,3 +1635,4 @@
 }
 
 @import "browser/charm-small.less";
+@import "browser/charm-slider.less";

=== modified file 'test/index.html'
--- test/index.html	2013-03-06 15:59:28 +0000
+++ test/index.html	2013-03-08 19:44:21 +0000
@@ -39,6 +39,7 @@
   <script src="test_charm_configuration.js"></script>
   <script src="test_charm_panel.js"></script>
   <script src="test_charm_small_widget.js"></script>
+  <script src="test_charm_slider.js"></script>
   <script src="test_charm_store.js"></script>
   <script src="test_charm_view.js"></script>
   <script src="test_console.js"></script>

=== added file 'test/test_charm_slider.js'
--- test/test_charm_slider.js	1970-01-01 00:00:00 +0000
+++ test/test_charm_slider.js	2013-03-08 19:44:21 +0000
@@ -0,0 +1,81 @@
+'use strict';
+
+describe('charm slider', function() {
+  var container, Y;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(
+        ['browser-charm-slider', 'browser-charm-small', 'event-simulate',
+         'node-event-simulate', 'node'], function(Y) {
+          done();
+        });
+  });
+
+  beforeEach(function() {
+    container = Y.Node.create('<div id="container"></div>');
+    Y.one('body').prepend(container);
+  });
+
+  afterEach(function() {
+    container.remove(true);
+  });
+
+  it('initializes', function() {
+    var cs = new Y.juju.widgets.browser.CharmSlider();
+    assert.isObject(cs);
+  });
+
+  it('creates the right DOM', function() {
+    var cs = new Y.juju.widgets.browser.CharmSlider(),
+        items = ['foo', 'bar', 'baz'];
+    cs.set('items', items);
+    var sliderDOM = cs._generateDOM();
+    assert.equal(3, sliderDOM.all('li').size());
+    var html = sliderDOM.get('outerHTML');
+    Y.Array.each(items, function(item) {
+      assert.notEqual(-1, html.indexOf(item));
+    });
+  });
+
+  it('renders', function() {
+    var cs = new Y.juju.widgets.browser.CharmSlider({
+      items: ['<div id="foo"/>']
+    });
+    cs.render(container);
+    assert.isObject(Y.one('#foo'));
+  });
+
+  it('it generates buttons for each', function() {
+    var cs = new Y.juju.widgets.browser.CharmSlider(),
+        items = ['<div />', '<div />'];
+    cs.set('items', items);
+    cs.render(container);
+    var nav = Y.one('.navigation');
+    assert.equal(items.length, nav.all('li').size());
+  });
+
+  it('pauses on hover', function() {
+    var cs = new Y.juju.widgets.browser.CharmSlider({items: ['<div/>']});
+    cs.render(container);
+    Y.one('.yui3-browser-charm-slider').simulate('mouseover');
+    assert.isTrue(cs.get('paused'), 'Slider is not paused.');
+    Y.one('.yui3-browser-charm-slider').simulate('mouseout');
+    assert.isFalse(cs.get('paused'), 'Slider is not paused.');
+  });
+
+  it('goes to the right slide on nav click', function() {
+    var cs = new Y.juju.widgets.browser.CharmSlider({
+      items: ['<div/>', '<div/>'],
+      autoAdvance: false
+    });
+    cs.render(container);
+    assert.equal(
+        0, cs.pages.get('index'),
+        'Slider did not start on first slide.');
+    var li = Y.one('.navigation').all('li').pop();
+    li.simulate('click');
+    assert.equal(
+        1, cs.pages.get('index'),
+        'Slider did not advance to second slide.');
+  });
+});