From 5ac54f84144f094e5f0570d2ff86ed62fe224d1a Mon Sep 17 00:00:00 2001 From: John Bintz Date: Tue, 13 Mar 2012 13:20:57 -0400 Subject: [PATCH] start integrating flowerbox tests --- .gitignore | 3 + Gemfile | 4 + Guardfile | 33 +++ js-features/presentation_timer.feature | 13 ++ js-features/spec_helper.rb | 13 ++ .../i_have_a_presentation_counter.js.coffee | 5 + .../then/counter_should_have_state.js.coffee | 7 + .../then/counter_should_show_time.js.coffee | 8 + .../steps/then/it_should_count_up.js.coffee | 3 + .../steps/when/i_render_the_counter.js.coffee | 3 + .../steps/when/i_start_the_counter.js.coffee | 3 + js-features/steps/when/i_wait_time.js.coffee | 3 + js-features/support/env.js.coffee | 7 + lib/assets/javascripts/attentive.js.coffee | 213 +----------------- .../attentive/presentation.js.coffee | 137 +++++++++++ .../attentive/presentation_timer.js.coffee | 59 +++++ .../javascripts/attentive/slide.js.coffee | 24 ++ lib/attentive/server.rb | 2 + skel/.gitignore | 2 + skel/assets/javascripts/application.js.coffee | 2 +- .../presentation_timer_spec.js.coffee | 5 + spec/javascripts/spec_helper.rb | 9 + 22 files changed, 347 insertions(+), 211 deletions(-) create mode 100644 Guardfile create mode 100644 js-features/presentation_timer.feature create mode 100644 js-features/spec_helper.rb create mode 100644 js-features/steps/given/i_have_a_presentation_counter.js.coffee create mode 100644 js-features/steps/then/counter_should_have_state.js.coffee create mode 100644 js-features/steps/then/counter_should_show_time.js.coffee create mode 100644 js-features/steps/then/it_should_count_up.js.coffee create mode 100644 js-features/steps/when/i_render_the_counter.js.coffee create mode 100644 js-features/steps/when/i_start_the_counter.js.coffee create mode 100644 js-features/steps/when/i_wait_time.js.coffee create mode 100644 js-features/support/env.js.coffee create mode 100644 lib/assets/javascripts/attentive/presentation.js.coffee create mode 100644 lib/assets/javascripts/attentive/presentation_timer.js.coffee create mode 100644 lib/assets/javascripts/attentive/slide.js.coffee create mode 100644 spec/javascripts/attentive/presentation_timer_spec.js.coffee create mode 100644 spec/javascripts/spec_helper.rb diff --git a/.gitignore b/.gitignore index d87d4be..11e079c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +.tmp/ +chromedriver.log +node_modules/ *.gem *.rbc .bundle diff --git a/Gemfile b/Gemfile index d90922d..1e50a97 100644 --- a/Gemfile +++ b/Gemfile @@ -2,3 +2,7 @@ source 'https://rubygems.org' # Specify your gem's dependencies in attentive.gemspec gemspec + +gem 'flowerbox', :path => '../flowerbox' +gem 'flowerbox-delivery', :path => '../flowerbox-delivery' +gem 'guard' diff --git a/Guardfile b/Guardfile new file mode 100644 index 0000000..0ed9c8d --- /dev/null +++ b/Guardfile @@ -0,0 +1,33 @@ +require 'guard' +require 'guard/guard' + +require 'flowerbox' + +class ::Guard::FlowerboxUnit < ::Guard::Guard + def run_all + ::Flowerbox.run('spec/javascripts') + end + + def run_on_change(files) + run_all + end +end + +class ::Guard::FlowerboxIntegration < ::Guard::Guard + def run_all + ::Flowerbox.run('js-features') + end + + def run_on_change(files) + run_all + end +end + +guard 'flowerbox-unit' do + watch(%r{^spec/javascripts}) +end + +guard 'flowerbox-integration' do + watch(%r{^js-features}) +end + diff --git a/js-features/presentation_timer.feature b/js-features/presentation_timer.feature new file mode 100644 index 0000000..5d202c0 --- /dev/null +++ b/js-features/presentation_timer.feature @@ -0,0 +1,13 @@ +Feature: Presentation Timer + Background: + Given I have a presentation counter + + Scenario: Render + When I render the counter + Then the counter should show the time "00:00" + And the counter should not be running + + Scenario: Start the timer + When I start the timer + Then the counter should be running + diff --git a/js-features/spec_helper.rb b/js-features/spec_helper.rb new file mode 100644 index 0000000..f22a66f --- /dev/null +++ b/js-features/spec_helper.rb @@ -0,0 +1,13 @@ +Flowerbox.configure do |c| + c.test_with :cucumber + c.run_with :chrome + + c.asset_paths << "lib/assets/javascripts" + c.spec_patterns << "**/*.js*" + c.spec_patterns << "*.js*" + c.spec_patterns << "**/*.feature" + c.spec_patterns << "*.feature" + + c.report_with :verbose +end + diff --git a/js-features/steps/given/i_have_a_presentation_counter.js.coffee b/js-features/steps/given/i_have_a_presentation_counter.js.coffee new file mode 100644 index 0000000..152fca7 --- /dev/null +++ b/js-features/steps/given/i_have_a_presentation_counter.js.coffee @@ -0,0 +1,5 @@ +#= require attentive/presentation_timer +# +Flowerbox.Given /I have a presentation counter/, -> + @timer = new Attentive.PresentationTimer() + @timer.render() diff --git a/js-features/steps/then/counter_should_have_state.js.coffee b/js-features/steps/then/counter_should_have_state.js.coffee new file mode 100644 index 0000000..b2df97c --- /dev/null +++ b/js-features/steps/then/counter_should_have_state.js.coffee @@ -0,0 +1,7 @@ +Flowerbox.Then /^the counter (should|should not) be running$/, (state) -> + switch state + when 'should' + @expect(@timer).toBeRunning() + when 'should not' + @expect(@timer).not.toBeRunning() + diff --git a/js-features/steps/then/counter_should_show_time.js.coffee b/js-features/steps/then/counter_should_show_time.js.coffee new file mode 100644 index 0000000..3e641bc --- /dev/null +++ b/js-features/steps/then/counter_should_show_time.js.coffee @@ -0,0 +1,8 @@ +Flowerbox.Then /^the counter (should|should not) show the time "([^"]+)"$/, (state, time) -> + content = @timer.ensureEl().innerHTML + + switch state + when 'should' + @expect(content).toEqual(time) + when 'should not' + @expect(content).not.toEqual(time) diff --git a/js-features/steps/then/it_should_count_up.js.coffee b/js-features/steps/then/it_should_count_up.js.coffee new file mode 100644 index 0000000..a1c491a --- /dev/null +++ b/js-features/steps/then/it_should_count_up.js.coffee @@ -0,0 +1,3 @@ +Flowerbox.Then /^it should count up$/, -> + @pending() + diff --git a/js-features/steps/when/i_render_the_counter.js.coffee b/js-features/steps/when/i_render_the_counter.js.coffee new file mode 100644 index 0000000..6a21d5e --- /dev/null +++ b/js-features/steps/when/i_render_the_counter.js.coffee @@ -0,0 +1,3 @@ +Flowerbox.When /^I render the counter$/, -> + @timer.render() + diff --git a/js-features/steps/when/i_start_the_counter.js.coffee b/js-features/steps/when/i_start_the_counter.js.coffee new file mode 100644 index 0000000..73922c5 --- /dev/null +++ b/js-features/steps/when/i_start_the_counter.js.coffee @@ -0,0 +1,3 @@ +Flowerbox.When /^I start the timer$/, -> + @timer.start() + diff --git a/js-features/steps/when/i_wait_time.js.coffee b/js-features/steps/when/i_wait_time.js.coffee new file mode 100644 index 0000000..33e0228 --- /dev/null +++ b/js-features/steps/when/i_wait_time.js.coffee @@ -0,0 +1,3 @@ +Flowerbox.When /^I wait (\d+) seconds?$/, (secs) -> + Flowerbox.pause(Number(secs) * 1000) + diff --git a/js-features/support/env.js.coffee b/js-features/support/env.js.coffee new file mode 100644 index 0000000..eb6b134 --- /dev/null +++ b/js-features/support/env.js.coffee @@ -0,0 +1,7 @@ +Flowerbox.World -> + @addMatchers( + toBeRunning: () -> + @message = "Expected #{@notMessage} be running" + @actual._runner? + ) + diff --git a/lib/assets/javascripts/attentive.js.coffee b/lib/assets/javascripts/attentive.js.coffee index e288e09..b541a33 100644 --- a/lib/assets/javascripts/attentive.js.coffee +++ b/lib/assets/javascripts/attentive.js.coffee @@ -1,212 +1,5 @@ +#= require attentive/presentation +#= require attentive/slide +#= require attentive/presentation_timer #= require underscore -# -class PresentationTimer - constructor: -> - @time = 0 - @el = document.createElement('div') - @el.classList.add('timer') - this.render() - - render: -> - @el.innerHTML = this.formattedTime() - - start: -> - @_runner = this.runner() - @el.classList.add('running') - - runner: -> - setTimeout( - => - this.render() - @time += 1 - this.runner() if @_runner? - , 1000 - ) - - stop: -> - clearTimeout(@_runner) - @el.classList.remove('running') - @_runner = null - - reset: -> - this.stop() - @time = 0 - this.render() - - toggle: -> - if @_runner? - this.stop() - else - this.start() - - toggleVisible: -> - @el.classList.toggle('hide') - - isVisible: -> - !@el.classList.contains('hide') - - hide: -> - @el.classList.add('hide') - - formattedTime: -> - minute = "00#{Math.floor(@time / 60)}".slice(-2) - second = "00#{@time % 60}".slice(-2) - - "#{minute}:#{second}" - -class Slide - @fromList: (list) -> - result = (new Slide(slide) for slide in list) - - constructor: (@dom) -> - - recalculate: => - @dom.style['width'] = "#{window.innerWidth}px" - - currentMarginTop = Number(@dom.style['marginTop'].replace(/[^\d\.]/g, '')) - height = (window.innerHeight - @dom.querySelector('.content').clientHeight) / 2 - - if height != currentMarginTop - @dom.style['marginTop'] = "#{height}px" - true - - activate: => - @dom.classList.add('active') - - deactivate: => - @dom.classList.remove('active') - -class this.Attentive - @setup: (identifier) -> - starter = -> - setTimeout( - -> - (new Attentive(identifier)).start() - , 250 - ) - window.addEventListener('DOMContentLoaded', starter, false) - - constructor: (@identifier) -> - @length = @allSlides().length - @priorSlide = null - @initialRender = true - - @timer = new PresentationTimer() - @timer.hide() - - @currentWindowHeight = null - - document.querySelector('body').appendChild(@timer.el) - - bodyClassList: -> - @_bodyClassList ||= document.querySelector('body').classList - - allSlides: -> - @_allSlides ||= Slide.fromList(@slidesViewer().querySelectorAll('.slide')) - - slidesViewer: -> - @_slidesViewer ||= document.querySelector(@identifier) - - start: -> - if !this.isFile() - window.addEventListener('popstate', @handlePopState, false) - - document.addEventListener('click', @handleClick, false) - document.addEventListener('keydown', @handleKeyDown, false) - window.addEventListener('resize', _.throttle(@calculate, 500), false) - - imageWait = null - imageWait = => - wait = false - - for slide in @allSlides() - for img in slide.dom.getElementsByTagName('img') - wait = true if !img.complete - - if wait - setTimeout(imageWait, 100) - else - this.advanceTo(this.slideFromLocation()) - - imageWait() - - slideFromLocation: -> - value = if this.isFile() - location.hash - else - location.pathname - - Number(value.substr(1)) - - handlePopState: (e) => - this.advanceTo(if e.state then e.state.index else this.slideFromLocation()) - - handleClick: (e) => - this.advance() if e.target.tagName != 'A' - - handleKeyDown: (e) => - switch e.keyCode - when 72 - this.advanceTo(0) - when 37 - this.advance(-1) - when 39, 32 - this.advance() - when 220 - @timer.reset() - when 84 - if e.shiftKey - @timer.toggleVisible() - else - @timer.toggle() if @timer.isVisible() - - advance: (offset = 1) => - this.advanceTo(Math.max(Math.min(@currentSlide + offset, @length - 1), 0)) - - isFile: => location.href.slice(0, 4) == 'file' - - advanceTo: (index) => - @priorSlide = @currentSlide - @currentSlide = index || 0 - - this.calculate() - - if this.isFile() - location.hash = @currentSlide - else - history.pushState({ index: @currentSlide }, '', @currentSlide) - - calculate: => - if @currentWindowHeight != window.innerHeight - recalculate = true - times = 3 - - while recalculate and times > 0 - recalculate = false - times -= 1 - - for slide in @allSlides() - recalculate = true if slide.recalculate() - - @currentWindowHeight = window.innerHeight - - @slidesViewer().style['width'] = "#{window.innerWidth * @allSlides().length}px" - - this.align() - - getCurrentSlide: => - @allSlides()[@currentSlide] - - align: => - @allSlides()[@priorSlide].deactivate() if @priorSlide - this.getCurrentSlide().activate() - - @slidesViewer().style['left'] = "-#{@currentSlide * window.innerWidth}px" - - if @initialRender - @bodyClassList().remove('loading') - - @initialRender = false - @currentWindowHeight = null - this.calculate() diff --git a/lib/assets/javascripts/attentive/presentation.js.coffee b/lib/assets/javascripts/attentive/presentation.js.coffee new file mode 100644 index 0000000..3ce1896 --- /dev/null +++ b/lib/assets/javascripts/attentive/presentation.js.coffee @@ -0,0 +1,137 @@ +if !Attentive? then Attentive = {} + +class Attentive.Presentation + @setup: (identifier) -> + starter = -> + setTimeout( + -> + (new Attentive.Presentation(identifier)).start() + , 250 + ) + window.addEventListener('DOMContentLoaded', starter, false) + + constructor: (@identifier) -> + @length = @allSlides().length + @priorSlide = null + @initialRender = true + + @timer = new Attentive.PresentationTimer() + @timer.hide() + + @currentWindowHeight = null + + document.querySelector('body').appendChild(@timer.el) + + bodyClassList: -> + @_bodyClassList ||= document.querySelector('body').classList + + allSlides: -> + @_allSlides ||= Attentive.Slide.fromList(@slidesViewer().querySelectorAll('.slide')) + + slidesViewer: -> + @_slidesViewer ||= document.querySelector(@identifier) + + start: -> + if !this.isFile() + window.addEventListener('popstate', @handlePopState, false) + + @timer.render() + + document.addEventListener('click', @handleClick, false) + document.addEventListener('keydown', @handleKeyDown, false) + window.addEventListener('resize', _.throttle(@calculate, 500), false) + + imageWait = null + imageWait = => + wait = false + + for slide in @allSlides() + for img in slide.dom.getElementsByTagName('img') + wait = true if !img.complete + + if wait + setTimeout(imageWait, 100) + else + this.advanceTo(this.slideFromLocation()) + + imageWait() + + slideFromLocation: -> + value = if this.isFile() + location.hash + else + location.pathname + + Number(value.substr(1)) + + handlePopState: (e) => + this.advanceTo(if e.state then e.state.index else this.slideFromLocation()) + + handleClick: (e) => + this.advance() if e.target.tagName != 'A' + + handleKeyDown: (e) => + switch e.keyCode + when 72 + this.advanceTo(0) + when 37 + this.advance(-1) + when 39, 32 + this.advance() + when 220 + @timer.reset() + when 84 + if e.shiftKey + @timer.toggleVisible() + else + @timer.toggle() if @timer.isVisible() + + advance: (offset = 1) => + this.advanceTo(Math.max(Math.min(@currentSlide + offset, @length - 1), 0)) + + isFile: => location.href.slice(0, 4) == 'file' + + advanceTo: (index) => + @priorSlide = @currentSlide + @currentSlide = index || 0 + + this.calculate() + + if this.isFile() + location.hash = @currentSlide + else + history.pushState({ index: @currentSlide }, '', @currentSlide) + + calculate: => + if @currentWindowHeight != window.innerHeight + recalculate = true + times = 3 + + while recalculate and times > 0 + recalculate = false + times -= 1 + + for slide in @allSlides() + recalculate = true if slide.recalculate() + + @currentWindowHeight = window.innerHeight + + @slidesViewer().style['width'] = "#{window.innerWidth * @allSlides().length}px" + + this.align() + + getCurrentSlide: => + @allSlides()[@currentSlide] + + align: => + @allSlides()[@priorSlide].deactivate() if @priorSlide + this.getCurrentSlide().activate() + + @slidesViewer().style['left'] = "-#{@currentSlide * window.innerWidth}px" + + if @initialRender + @bodyClassList().remove('loading') + + @initialRender = false + @currentWindowHeight = null + this.calculate() diff --git a/lib/assets/javascripts/attentive/presentation_timer.js.coffee b/lib/assets/javascripts/attentive/presentation_timer.js.coffee new file mode 100644 index 0000000..b6eab2a --- /dev/null +++ b/lib/assets/javascripts/attentive/presentation_timer.js.coffee @@ -0,0 +1,59 @@ +if !Attentive? then Attentive = {} + +class Attentive.PresentationTimer + constructor: -> + @time = 0 + @el = null + + render: -> + @ensureEl().innerHTML = this.formattedTime() + + ensureEl: -> + if !@el + @el = document.createElement('div') + @el.classList.add('timer') + @el + + start: -> + @_runner = this.runner() + @ensureEl().classList.add('running') + + runner: -> + setTimeout( + => + this.render() + @time += 1 + this.runner() if @_runner? + , 1000 + ) + + stop: -> + clearTimeout(@_runner) + @ensureEl().classList.remove('running') + @_runner = null + + reset: -> + this.stop() + @time = 0 + this.render() + + toggle: -> + if @_runner? + this.stop() + else + this.start() + + toggleVisible: -> + @ensureEl().classList.toggle('hide') + + isVisible: -> + !@ensureEl().classList.contains('hide') + + hide: -> + @ensureEl().classList.add('hide') + + formattedTime: -> + minute = "00#{Math.floor(@time / 60)}".slice(-2) + second = "00#{@time % 60}".slice(-2) + + "#{minute}:#{second}" diff --git a/lib/assets/javascripts/attentive/slide.js.coffee b/lib/assets/javascripts/attentive/slide.js.coffee new file mode 100644 index 0000000..2c43160 --- /dev/null +++ b/lib/assets/javascripts/attentive/slide.js.coffee @@ -0,0 +1,24 @@ +if !Attentive? then Attentive = {} + +class Attentive.Slide + @fromList: (list) -> + result = (new Attentive.Slide(slide) for slide in list) + + constructor: (@dom) -> + + recalculate: => + @dom.style['width'] = "#{window.innerWidth}px" + + currentMarginTop = Number(@dom.style['marginTop'].replace(/[^\d\.]/g, '')) + height = (window.innerHeight - @dom.querySelector('.content').clientHeight) / 2 + + if height != currentMarginTop + @dom.style['marginTop'] = "#{height}px" + true + + activate: => + @dom.classList.add('active') + + deactivate: => + @dom.classList.remove('active') + diff --git a/lib/attentive/server.rb b/lib/attentive/server.rb index c66f2da..c7a9b0c 100644 --- a/lib/attentive/server.rb +++ b/lib/attentive/server.rb @@ -20,6 +20,8 @@ module Attentive require 'coffee_script' require 'sass' + Tilt::CoffeeScriptTemplate.default_bare = true + # make sure pygments is ready before starting a new thread Pygments.highlight("attentive") diff --git a/skel/.gitignore b/skel/.gitignore index e69de29..7b4f00c 100644 --- a/skel/.gitignore +++ b/skel/.gitignore @@ -0,0 +1,2 @@ +.sass-cache/ + diff --git a/skel/assets/javascripts/application.js.coffee b/skel/assets/javascripts/application.js.coffee index 17d140a..3a40d0b 100644 --- a/skel/assets/javascripts/application.js.coffee +++ b/skel/assets/javascripts/application.js.coffee @@ -1,4 +1,4 @@ #= require attentive # -Attentive.setup('#slides') +Attentive.Presentation.setup('#slides') diff --git a/spec/javascripts/attentive/presentation_timer_spec.js.coffee b/spec/javascripts/attentive/presentation_timer_spec.js.coffee new file mode 100644 index 0000000..3e16bd4 --- /dev/null +++ b/spec/javascripts/attentive/presentation_timer_spec.js.coffee @@ -0,0 +1,5 @@ +#= require attentive/presentation_timer + +describe 'Attentive.PresentationTimer', -> + describe '#render', -> + it 'should do something', -> diff --git a/spec/javascripts/spec_helper.rb b/spec/javascripts/spec_helper.rb new file mode 100644 index 0000000..094259c --- /dev/null +++ b/spec/javascripts/spec_helper.rb @@ -0,0 +1,9 @@ +Flowerbox.configure do |c| + c.test_with :jasmine + c.run_with :node + + c.asset_paths << "lib/assets/javascripts" + + c.report_with :verbose +end +