js test on travis: teaspoon

.travis.yml

@@ -24,4 +24,4 @@ before_script:
 - cp config/settings.yml.example config/settings.yml
 after_script:
 - ruby script/travis/bundle_cache.rb
-script: bundle exec rake db:create db:test:load spec
+script: bundle exec rake db:create db:test:load spec teaspoon

Gemfile

@@ -88,6 +88,8 @@ group :development, :test do
 
   # gem 'database_cleaner'
   gem 'database_rewinder'
+
+  gem 'teaspoon'
 end
 
 group :test do

Gemfile.lock

@@ -320,6 +320,8 @@ GEM
       net-scp (>= 1.1.2)
       net-ssh
       term-ansicolor
+    teaspoon (0.7.9)
+      railties (>= 3.2.5, < 5)
     temple (0.6.7)
     term-ansicolor (1.3.0)
       tins (~> 1.0)
@@ -404,6 +406,7 @@ DEPENDENCIES
   sdoc
   settingslogic
   slim
+  teaspoon
   therubyracer
   thin
   turnip

app/assets/javascripts/modules/mod-md-editor.js.coffee

@@ -82,36 +82,34 @@ $.fn.extend
         if matches? then matches.length + 1 else 1
 
       replace_regexp_meta = (str) ->
-        b = str.replace(/([\.\^\$\[\]\*\+\?\|\(\)])/g, "\\$1")
-        console.log str + ' -> ' + b
-        b
+        str.replace(/([\.\^\$\[\]\*\+\?\|\(\)])/g, "\\$1")
 
       # 行の先頭に文字を挿入
       md_head_insert_string = (insert_str) ->
         textarea_text = $textarea.val()
 
-        console.log 'insert_str: ' + insert_str
+
 
         sel_start_pos = $textarea.get(0).selectionStart
-        console.log 'sel_start_pos: ' + sel_start_pos
+
         # sel_end_pos = $textarea.get(0).selectionEnd
-        # console.log 'sel_end_pos: ' + sel_end_pos
+
 
         # # textの全行数
         # line_num = count_line_number(textarea_text)
-        # console.log('line_num: ' + line_num)
+
 
         # # 現在行の行数
         # current_line_num = count_line_number(textarea_text.substr(0, sel_start_pos))
-        # console.log('current_line_num: ' + current_line_num)
+
 
         # 現在行の最初の文字の位置
         current_line_head_pos = textarea_text.lastIndexOf("\n", sel_start_pos - 1) + 1
-        console.log('current_line_head_pos: ' + current_line_head_pos)
+
 
         # 現在行のカーソル位置
         current_pos_in_line = sel_start_pos - current_line_head_pos
-        console.log('current_pos_in_line: ' + current_pos_in_line)
+
 
         # すでに挿入済みの場合は取り除く
         insert_str_re = new RegExp('^' + replace_regexp_meta(insert_str), "g") # TODO ?
@@ -132,12 +130,8 @@ $.fn.extend
       md_wrap_string = (wrap_str) ->
         textarea_text = $textarea.val()
 
-        console.log 'wrap_str: ' + wrap_str
-
         sel_start_pos = $textarea.get(0).selectionStart
-        console.log 'sel_start_pos: ' + sel_start_pos
         sel_end_pos = $textarea.get(0).selectionEnd
-        console.log 'sel_end_pos: ' + sel_end_pos
 
         # 文字が選択されていなければplaceholderを挿入
         if sel_start_pos == sel_end_pos
@@ -149,22 +143,18 @@ $.fn.extend
           ].join(''))
           $textarea.get(0).selectionEnd = sel_end_pos + 2 + 2 * wrap_str.length + placeholder_str.length
 
-          console.log '$textarea.get(0).selectionEnd: ' + $textarea.get(0).selectionEnd
+
           # execute self.
           md_wrap_string(wrap_str)
           return
 
-        console.log '$textarea.get(0).selectionStart: ' + $textarea.get(0).selectionStart
-        console.log '$textarea.get(0).selectionEnd: ' + $textarea.get(0).selectionEnd
 
         # すでに挿入済みの場合は取り除く
         wrap_str_re = new RegExp('^ ' + replace_regexp_meta(wrap_str))
-        console.log wrap_str_re
+
         wrap_str_re_end = new RegExp(replace_regexp_meta(wrap_str) + ' $')
         if textarea_text.substring(sel_start_pos, sel_end_pos).match(wrap_str_re)
-          console.log textarea_text.substring(sel_start_pos, sel_end_pos).replace(wrap_str_re, '')
-          console.log textarea_text.substring(0, sel_start_pos)
-          console.log textarea_text.substring(sel_end_pos)
+
           $textarea.val([
             textarea_text.substring(0, sel_start_pos),
             textarea_text.substring(sel_start_pos, sel_end_pos).
@@ -187,8 +177,6 @@ $.fn.extend
         $textarea.get(0).selectionEnd = sel_end_pos + 2 + 2 * wrap_str.length
 
         $textarea.get(0).selectionStart = sel_start_pos
-        console.log '$textarea.get(0).selectionStart: ' + $textarea.get(0).selectionStart
-        console.log '$textarea.get(0).selectionEnd: ' + $textarea.get(0).selectionEnd
 
 
       # WYSIWYG
@@ -227,5 +215,9 @@ $.fn.extend
         md_wrap_string('_')
         generatePreview()
 
+      $root.find('.mod-mdEditor-btn-strikethrough').on 'click', (e) ->
+        e.preventDefault()
+        md_wrap_string('~~')
+        generatePreview()
 
 

app/assets/stylesheets/application.css

@@ -10,6 +10,7 @@
  *
  *= require normalize
  *= require_tree ./lib
+ *= require_tree ./modules
  *= require_tree .
  *= require_self
  */

app/assets/stylesheets/modules/bootstrap-ext.css.scss

+.panel-body.panel-body-nopadding {
+  padding: 0;
+}
+
+.panel-body textarea {
+  border: none;
+  border-top: 1px dashed #999;
+}

app/controllers/posts_controller.rb

@@ -33,7 +33,7 @@ class PostsController < ApplicationController
 
   # GET /posts/new
   def new
-    @post = Post.new
+    @post = Post.new(title: '新しい投稿')
   end
 
   def fork

app/views/posts/_form.html.slim

 #post-form
-  = form_for(@post) do |f|
+  = form_for(@post, role: 'form') do |f|
     - if @post.errors.any?
       #error_explanation
         h2
@@ -11,46 +11,47 @@
 
     .row
       .col-xs-10
-        .field
-          .input-group
-            span.input-group-addon= f.label :title
-            = f.text_field :title, class: 'form-control mod-mdEditor-title'
+        .form-group
+          = f.label :title
+          = f.text_field :title, class: 'form-control mod-mdEditor-title', placeholder: 'post title'
       .col-xs-2
         .actions
           = f.submit class: 'btn btn-primary js-disable-confirm-unload', id: 'save_button'
 
     .row
       .col-xs-12
-        .field
-          .input-group
-            span.input-group-addon= f.label :tags
-            = hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:300px', value: @post.tags.map{ |_tag| _tag.name }.join(',')
+        .form-group
+          = f.label :tags
+          = hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:300px', value: @post.tags.map{ |_tag| _tag.name }.join(',')
 
     .row
-      .col-xs-12
-        .btn-toolbar role="toolbar"
-          .btn-group.btn-group-xs
-            button.btn.btn-default.mod-mdEditor-btn-h1 type="button" H1
-            button.btn.btn-default.mod-mdEditor-btn-h2 type="button" H2
-            button.btn.btn-default.mod-mdEditor-btn-h3 type="button" H3
-          .btn-group.btn-group-xs
-            button.btn.btn-default.mod-mdEditor-btn-bold type="button"
-              i.fa.fa-bold
-            button.btn.btn-default.mod-mdEditor-btn-italic type="button"
-              i.fa.fa-italic
-            button.btn.btn-default.mod-mdEditor-btn-ol type="button"
-              i.fa.fa-list-ol
-            button.btn.btn-default.mod-mdEditor-btn-ul type="button"
-              i.fa.fa-list-ul
-            / button.btn.btn-default.mod-mdEditor-btn-link type="button"
-            /   i.fa.fa-link
+      .col-xs-6
+        .panel.panel-default
+          .panel-heading
+            .btn-toolbar role="toolbar"
+              .btn-group.btn-group-xs
+                button.btn.btn-default.mod-mdEditor-btn-h1 type="button" title="Header level 1" H1
+                button.btn.btn-default.mod-mdEditor-btn-h2 type="button" title="Header level 2" H2
+                button.btn.btn-default.mod-mdEditor-btn-h3 type="button" title="Header level 3" H3
+              .btn-group.btn-group-xs
+                button.btn.btn-default.mod-mdEditor-btn-bold type="button" title="Text bold"
+                  i.fa.fa-bold
+                button.btn.btn-default.mod-mdEditor-btn-italic type="button" title="Text itelic"
+                  i.fa.fa-italic
+              .btn-group.btn-group-xs
+                button.btn.btn-default.mod-mdEditor-btn-ol type="button" title="順序リスト"
+                  i.fa.fa-list-ol
+                button.btn.btn-default.mod-mdEditor-btn-ul type="button" title="リスト"
+                  i.fa.fa-list-ul
+                button.btn.btn-default.mod-mdEditor-btn-strikethrough type="button" title="打ち消し線"
+                  i.fa.fa-strikethrough
+                / button.btn.btn-default.mod-mdEditor-btn-link type="button"
+                /   i.fa.fa-link
 
-    br/
-    .row
-      .col-xs-6.col-md-6
-        .field
-          = f.text_area :body, class: 'mod-mdEditor-textarea'
-      .col-xs-12.col-sm-6.col-md-6
+          .panel-body.panel-body-nopadding
+            = f.text_area :body, class: 'mod-mdEditor-textarea'
+
+      .col-xs-6
         .box-text
           .text-box.body.viewer.github.mod-mdEditor-preview
 

app/views/posts/new.html.slim

-h1 新しい投稿
 = render 'form'

config/initializers/teaspoon.rb

+Teaspoon.setup do |config|
+
+  # This determines where the Teaspoon routes will be mounted. Changing this to "/jasmine" would allow you to browse to
+  # http://localhost:3000/jasmine to run your specs.
+  config.mount_at = "/teaspoon"
+
+  # This defaults to Rails.root if left nil. If you're testing an engine using a dummy application it can be useful to
+  # set this to your engines root.. E.g. `Teaspoon::Engine.root`
+  config.root = nil
+
+  # These paths are appended to the Rails assets paths (relative to config.root), and by default is an array that you
+  # can replace or add to.
+  config.asset_paths = ["spec/javascripts", "spec/javascripts/stylesheets"]
+
+  # Fixtures are rendered through a standard controller. This means you can use things like HAML or RABL/JBuilder, etc.
+  # to generate fixtures within this path.
+  config.fixture_path = "spec/javascripts/fixtures"
+
+  # You can modify the default suite configuration and create new suites here. Suites can be isolated from one another.
+  # When defining a suite you can provide a name and a block. If the name is left blank, :default is assumed. You can
+  # omit various directives and the defaults will be used.
+  #
+  # To run a specific suite
+  #   - in the browser: http://localhost/teaspoon/[suite_name]
+  #   - from the command line: rake teaspoon suite=[suite_name]
+  config.suite do |suite|
+
+    # You can specify a file matcher and all matching files will be loaded when the suite is run. It's important that
+    # these files are serve-able from sprockets.
+    #
+    # Note: Can also be set to nil.
+    suite.matcher = "{spec/javascripts,app/assets}/**/*_spec.{js,js.coffee,coffee}"
+
+    # Each suite can load a different helper, which can in turn require additional files. This file is loaded before
+    # your specs are loaded, and can be used as a manifest.
+    suite.helper = "spec_helper"
+
+    # These are the core Teaspoon javascripts. It's strongly encouraged to include only the base files here. You can
+    # require other support libraries in your spec helper, which allows you to change them without having to restart the
+    # server.
+    #
+    # Available frameworks: teaspoon-jasmine, teaspoon-mocha, teaspoon-qunit
+    #
+    # Note: To use the CoffeeScript source files use `"teaspoon/jasmine"` etc.
+    suite.javascripts = ["teaspoon-jasmine"]
+
+    # If you want to change how Teaspoon looks, or include your own stylesheets you can do that here. The default is the
+    # stylesheet for the HTML reporter.
+    suite.stylesheets = ["teaspoon"]
+
+    # When running coverage reports, you probably want to exclude libraries that you're not testing.
+    # Accepts an array of filenames or regular expressions. The default is to exclude assets from vendors or gems.
+    suite.no_coverage = [%r{/lib/ruby/gems/}, %r{/vendor/assets/}, %r{/support/}, %r{/(.+)_helper.}]
+    # suite.no_coverage << "jquery.min.js" # excludes jquery from coverage reports
+
+  end
+
+  # Example suite. Since we're just filtering to files already within the root spec/javascripts, these files will also
+  # be run in the default suite -- but can be focused into a more specific suite.
+  #config.suite :targeted do |suite|
+  #  suite.matcher = "spec/javascripts/targeted/*_spec.{js,js.coffee,coffee}"
+  #end
+
+end if defined?(Teaspoon) && Teaspoon.respond_to?(:setup) # let Teaspoon be undefined outside of development/test/asset groups

spec/javascripts/mod-md-editor_spec.js

+// require jquery
+describe("My great feature", function() {
+
+  it("will change the world", function() {
+    expect(true).toBe(true);
+    expect(jQuery).toBeDefined();
+  });
+
+});

spec/javascripts/spec_helper.js

+// Teaspoon includes some support files, but you can use anything from your own support path too.
+// require support/jasmine-jquery
+// require support/sinon
+// require support/your-support-file
+//
+// PhantomJS (Teaspoons default driver) doesn't have support for Function.prototype.bind, which has caused confusion. Use
+// this polyfill to avoid the confusion.
+//= require support/bind-poly
+//
+// Deferring execution
+// If you're using CommonJS, RequireJS or some other asynchronous library you can defer execution. Call Teaspoon.execute()
+// after everything has been loaded. Simple example of a timeout:
+//
+// Teaspoon.defer = true
+// setTimeout(Teaspoon.execute, 1000)
+//
+// Matching files
+// By default Teaspoon will look for files that match _spec.{js,js.coffee,.coffee}. Add a filename_spec.js file in your
+// spec path and it'll be included in the default suite automatically. If you want to customize suites, check out the
+// configuration in config/initializers/teaspoon.rb
+//
+// Manifest
+// If you'd rather require your spec files manually (to control order for instance) you can disable the suite matcher in
+// the configuration and use this file as a manifest.
+//
+// For more information: http://github.com/modeset/teaspoon
+//
+// You can require javascript files here. A good place to start is by requiring your application.js.
+//= require application
+

spec/teaspoon_env.rb

+# This file allows you to override various Teaspoon configuration directives when running from the command line. It is not
+# required from within the Rails environment, so overriding directives that have been defined within the initializer
+# is not possible.
+#
+# Set RAILS_ROOT and load the environment.
+ENV["RAILS_ROOT"] = File.expand_path("../../", __FILE__)
+require File.expand_path("../../config/environment", __FILE__)
+
+# Provide default configuration.
+#
+# You can override various configuration directives defined here by using arguments with the teaspoon command.
+#
+# teaspoon --driver=selenium --suppress-log
+# rake teaspoon DRIVER=selenium SUPPRESS_LOG=false
+Teaspoon.setup do |config|
+  # Driver / Server
+  config.driver              = "phantomjs" # available: phantomjs, selenium
+  #config.server              = nil # defaults to Rack::Server
+
+  # Behaviors
+  #config.server_timeout      = 20 # timeout for starting the server
+  #config.server_port         = nil # defaults to any open port unless specified
+  #config.fail_fast           = true # abort after the first failing suite
+
+  # Output
+  #config.formatters          = "dot" # available: dot, tap, tap_y, swayze_or_oprah
+  #config.suppress_log        = false # suppress logs coming from console[log/error/debug]
+  #config.color               = true
+
+  # Coverage (requires istanbul -- https://github.com/gotwarlost/istanbul)
+  #config.coverage                      = true
+  #config.coverage_reports              = "text,html,cobertura"
+  #config.coverage_output_dir           = "coverage"
+  #config.statements_coverage_threshold = 50
+  #config.functions_coverage_threshold  = 50
+  #config.branches_coverage_threshold   = 50
+  #config.lines_coverage_threshold      = 50
+end