middleman-sprockets 4.0.0.rc.1 → 4.0.0.rc.2

data/features/asset_gems.feature

@@ -0,0 +1,63 @@
+Feature: Make Gem assets available to Sprocket's lookup paths
+
+  An attempt is made to lookup all css, js, image, & font paths in asset gems to be appended to Sprocket's lookup paths. These gems are expected to loosely follow a few conventions:
+
+  - asset root at: `assets`, `app`, `vendor`, `lib`, `app/assets`, `vendor/assets`, or `lib/assets`
+  - asset directories named: `javascripts`, `js`, `stylesheets`, `css`, `images`, `img`, or `fonts`
+
+  If not, no worries -- you can append the gems path manually to Sprockets.
+
+  Scenario: An asset gem with assets under vendor
+    Using the fixture asset gem located at `fixtures/gems/asset_gem` which puts it's assets in `vendor` like this:
+      """
+      assets_gem/
+      +-- vendor/
+          +-- assets/
+              +-- css/
+              +-- fonts/
+              +-- images/
+              +-- javascripts/
+      """
+
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "source/stylesheets/site.css.scss" with:
+      """
+      @import "test";
+      """
+    And the Server is running
+
+    Then sprockets paths should include gem path "assets_gem/vendor/assets/css"
+    And sprockets paths should include gem path "assets_gem/vendor/assets/fonts"
+    And sprockets paths should include gem path "assets_gem/vendor/assets/images"
+    And sprockets paths should include gem path "assets_gem/vendor/assets/javascripts"
+
+    When I go to "/stylesheets/site.css"
+    Then I should see:
+      """
+      body {
+        background: #fd0; }
+      """
+
+  Scenario: Manually appending a gem's paths
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      sprockets.append_path File.join(root, 'local_gem', 'resources')
+      """
+    And a file named "local_gem/resources/stylesheet.css" with:
+      """
+      body { content: 'local_gem'; }
+      """
+    And a file named "source/stylesheets/site.css" with:
+      """
+      //= require stylesheet
+      """
+    And the Server is running
+
+    When I go to "/stylesheets/site.css"
+    Then I should see "content: 'local_gem';"

data/features/basic_usage.feature

@@ -0,0 +1,97 @@
+Feature: Basic Usage
+
+  At it's base, the middleman-sprockets extension hooks sprockets into Middleman so that Sprockets is used to render js & css files instead of Middleman. This gives you access to [sprockets directives](https://github.com/rails/sprockets#sprockets-directives) and automagically building linked assets.
+
+  To use, activate the extension in `config.rb`:
+
+    """ruby
+    activate :sprockets
+    """
+
+  Scenario: CSS & JS files are rendered with Sprockets
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "source/stylesheets/_lib/partial.scss" with:
+      """
+      body { background: #fd0; }
+      """
+    And a file named "source/stylesheets/site.css.scss" with:
+      """
+      @import '_lib/partial';
+      """
+    And a file named "source/javascripts/_lib/partial.js" with:
+      """
+      console.log('hello');
+      """
+    And a file named "source/javascripts/site.js" with:
+      """
+      //= require '_lib/partial'
+      """
+    And the Server is running
+
+    When I go to "/stylesheets/site.css"
+    Then I should see:
+      """
+      body {
+        background: #fd0; }
+      """
+
+    When I go to "/javascripts/site.js"
+    Then I should see "console.log('hello');"
+
+
+  Scenario: The default :css_dir or :js_dir are appended to Sprockets lookup paths
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And the Server is running
+
+    Then sprockets paths should include "source/stylesheets"
+    And sprockets paths should include "source/javascripts"
+
+
+  Scenario: Custom directories for :css_dir or :js_dir are appened to Sprockets lookup paths
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+
+      set :css_dir, "assets/css"
+      set :js_dir,  "assets/scripts"
+      """
+    And the Server is running
+
+    Then sprockets paths should include "source/assets/css"
+    And sprockets paths should include "source/assets/scripts"
+
+  @sprockets3
+  Scenario: Css can use either a Sprockets require or Sass import
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "source/stylesheets/_lib/import.scss" with:
+      """
+      body { content: 'imported'; }
+      """
+    And a file named "source/stylesheets/sprockets.css.scss" with:
+      """
+      //= require '_lib/import.css'
+      """
+    And a file named "source/stylesheets/sass_import.css.scss" with:
+      """
+      @import '_lib/import';
+      """
+    And the Server is running
+
+    When I go to "/stylesheets/sprockets.css"
+    Then I should see "content: 'imported';"
+
+    When I go to "/stylesheets/sass_import.css"
+    Then I should see "content: 'imported';"

data/features/bower.feature

@@ -1,42 +1,102 @@
-Feature: Bower
-  Scenario: Sprockets can pull underscore from bower
-    Given the Server is running at "bower-app"
+Feature: Using assets installed via Bower
+
+  Usage with Bower is fairly barebones -- for now we don't do anything fancy to detect which files to link by reading bower.json files. A typical workflow looks something like this:
+
+  - create your `ROOT/bower.json` & install via bower to `ROOT/bower_components`
+  - append `bower_components` to sprockets paths
+  - either require assets for use, or create a `manifest.js` that links files
+
+  Background:
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      sprockets.append_path File.join(root, "bower_components")
+      """
+    And a file named "bower_components/underscore/underscore.js" with:
+      """
+      var _ = {};
+      return _;
+      """
+    And a file named "source/javascripts/application.js" with:
+      """
+      //= require underscore/underscore
+      """
+
+  Scenario: Sprockets can require underscore from bower
+    Given the Server is running
+
+    Then sprockets paths should include "bower_components"
     When I go to "/javascripts/application.js"
     Then I should see "return _;"
 
-  Scenario: Sprockets can build underscore from bower
-    Given a successfully built app at "bower-app"
+
+  Scenario: Sprockets can build when requiring underscore from bower
+    And a successfully built app
+
     When I cd to "build"
     Then the following files should exist:
       | javascripts/application.js |
     And the file "javascripts/application.js" should contain "return _;"
 
-  Scenario: Sprockets should not mess with bower.json
-    Given a successfully built app at "bower-json-app"
-    When I cd to "build"
-    Then the following files should exist:
-      | javascripts/bower.json |
-    And the file "javascripts/bower.json" should contain '"name": "my-project",'
 
-  Scenario: Assets can be added to the build with import_asset from bower dir
-    Given a successfully built app at "bower-app"
-    When I cd to "build"
-    Then a file named "assets/underscore/underscore.js" should exist
+  Scenario: Assets can be added to the sitemap by linking them in a manifest
+    Given a file named "source/javascripts/manifest.js" with:
+      """
+      //= link underscore/underscore
+      """
+    And the Server is running
 
-  Scenario: Multiple assets can be added to the build with import_asset from bower dir and are placed in the correct directory
-    Given a successfully built app at "bower-multiple-assets-app"
-    When I cd to "build"
-    Then a file named "assets/lightbox2/img/close.png" should exist
-    Then a file named "assets/lightbox2/js/lightbox.js" should exist
+    When I go to "/assets/underscore/underscore.js"
+    Then I should see "return _;"
 
-  Scenario: Assets which haven't been imported don't appear in output directory
-    Given a successfully built app at "bower-multiple-assets-app"
-    When I cd to "build"
-    Then a file named "images/lightbox2/img/open.png" should not exist
 
-  Scenario: Assets can have an individual output directory
-    Given a successfully built app at "bower-individual-outputdir-app"
-    When I cd to "build"
-    Then a file named "assets/underscore/underscore.js" should exist
-    And a file named "assets/lightbox2/img/close.png" should exist
-    And a file named "assets/lightbox2/js/lightbox.js" should exist
+  Scenario: Assets which haven't been linked aren't added to the sitemap
+    Given a file named "bower_components/underscore/hello.js" with:
+      """
+      console.log('hello');
+      """
+    And the Server is running
+
+    When I go to "/assets/underscore/hello.js"
+    Then the status code should be "404"
+
+
+  Scenario: Assets have an individual output directory
+    Given a file named "vendor/assets/lightbox2/hello.js" with:
+      """
+      console.log('hello');
+      """
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      sprockets.append_path File.join(root, "bower_components")
+      sprockets.append_path File.join(root, "vendor/assets")
+      """
+    And a file named "source/javascripts/manifest.js" with:
+      """
+      //= link underscore/underscore
+      //= link lightbox2/hello
+      """
+    And the Server is running
+
+    When I go to "/assets/underscore/underscore.js"
+    Then I should see "return _;"
+
+    When I go to "/assets/lightbox2/hello.js"
+    Then I should see "console.log('hello');"
+
+
+  Scenario: Sprockets should not mess with bower.json if it's in source
+    Given a file named "source/javascripts/bower.json" with:
+      """
+      {
+        "name": "my-project",
+        "version": "1.0.0",
+        "main": "application.js"
+      }
+      """
+    And the Server is running
+
+    When I go to "/javascripts/bower.json"
+    Then I should see '"name": "my-project",'

data/features/linked_assets.feature

@@ -0,0 +1,123 @@
+Feature: Linked assets are included in the sitemap
+
+  Assets that are linked, either through a `//= link` directive or with an asset url helper (like `asset_path`) will be included in the sitemap & built automatically. The path these assets are placed at is configurable with the `:imported_asset_path` option.
+
+  Note that we're taking advantage of the fact that the `assets_gem` is included in the sprockets paths with these examples.
+
+  Scenario: Assets linked with a Sprockets directive
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "source/stylesheets/manifest.js" with:
+      """
+      //= link logo.png
+      """
+    And the Server is running
+
+    When I go to "/assets/logo.png"
+    Then the status code should be "200"
+
+
+  Scenario: Assets linked using a path helper
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "source/stylesheets/site.css.scss" with:
+      """
+      @import 'import';
+      """
+    And a file named "source/stylesheets/_import.scss" with:
+      """
+      body {
+        background: image-url('logo.png');
+      }
+      """
+    And the Server is running
+
+    When I go to "/assets/logo.png"
+    Then the status code should be "200"
+
+    When I go to "/stylesheets/site.css"
+    Then I should see "url(/assets/logo.png)"
+
+
+  Scenario: Linked asset destination is configurable
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets do |c|
+        c.imported_asset_path = 'linked'
+      end
+      """
+    And a file named "source/javascripts/manifest.js" with:
+      """
+      //= link logo.png
+      """
+    And the Server is running
+
+    When I go to "/linked/logo.png"
+    Then the status code should be "200"
+
+
+  Scenario: Linked assets can be rendered
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "vendor/css/vendored.css.sass" with:
+      """
+      body
+        color: red
+      """
+    And a file named "vendor/js/vendored.js.coffee" with:
+      """
+      console.log 'hello'
+      """
+    And a file named "source/javascripts/manifest.js" with:
+      """
+      //= link 'vendored.css'
+      //= link 'vendored.js'
+      """
+    And the Server is running
+
+    When I go to "/assets/vendored.css"
+    Then I should see "color: red;"
+
+    When I go to "/assets/vendored.js"
+    Then I should see "console.log('hello')"
+
+
+  Scenario: Linking to Sprockets assets from Middleman
+    You can do this, but you need to make sure that the asset is imported into the sitemap. If the asset is linked via a Sprockets directive or path helper no worries -- otherwise you could create a manifest file that contains links to assets you need.
+
+    In this test case, remember the `assets_gem` is available.
+
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "source/index.html.erb" with:
+      """
+      <%= image_tag('assets/logo.png') %>
+      """
+    And the Server is running
+
+    When I go to "/assets/logo.png"
+    Then the status code should be "404"
+
+    And the file "source/javascripts/manifest.js" has the contents
+      """
+      //= link 'logo.png'
+      """
+
+    When I go to "/assets/logo.png"
+    Then the status code should be "200"
+
+    When I go to "/"
+    Then I should see '<img src="/assets/logo.png" />'

data/features/middleman_helpers.feature

@@ -0,0 +1,154 @@
+Feature: Access to Middleman helpers
+
+  Sprockets is given an `asset_path` helper that is able to use the Middleman sitemap. This allows Sprockets methods like `image-url` to work for Middleman assets.
+
+  By default helpers other than asset_path that are added to Middleman aren't available in Sprockets' rendering context. They can, however, be added through a configuration option. There is a caveat though that `current_resource` is unavailable so look out for helpers that depend on it.
+
+  Scenario: Using asset_path to link to a Middleman asset
+    Here we're depending on the behavior of `image-url` to call asset_path internally
+
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      set :http_prefix, '/winterfell'
+      """
+    And a file named "source/images/img.svg" with:
+      """
+      <?xml version="1.0" encoding="iso-8859-1"?>
+      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
+       "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
+      <svg width="100%" height="100%">
+        <g transform="translate(50,50)">
+          <rect x="0" y="0" width="150" height="50" style="fill:red;" />
+        </g>
+      </svg>
+      """
+    And a file named "source/stylesheets/site.css.scss" with:
+      """
+      body {
+        background: image-url('img.svg');
+      }
+      """
+    And the Server is running
+
+    When I go to "/stylesheets/site.css"
+    Then I should see:
+      """
+      body {
+        background: url(/winterfell/images/img.svg); }
+      """
+
+  Scenario: Sprockets has access to Middleman data
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+      """
+    And a file named "data/test.yml" with:
+      """
+      foo: bar
+      """
+    And a file named "source/javascripts/data_accessor.js.coffee.erb" with:
+      """
+      console.log '<%= data.test.foo %>'
+      """
+    And the Server is running
+
+    When I go to "/javascripts/data_accessor.js"
+    Then I should see "console.log('bar')"
+
+  Scenario: Using a helper from a Sprockets asset
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets do |c|
+        c.expose_middleman_helpers = true
+      end
+
+      helpers do
+        def hello
+          'hello'
+        end
+      end
+      """
+    And a file named "source/index.html.erb" with:
+      """
+      <h1><%= hello %></h1>
+      """
+    And a file named "source/javascripts/site.js.erb" with:
+      """
+      console.log('<%= hello %>');
+      """
+    And a file named "vendor/javascripts/imported.js.erb" with:
+      """
+      console.log('<%= hello %>');
+      """
+    And a file named "source/javascripts/importer.js" with:
+      """
+      //= require imported
+      """
+    And the Server is running
+
+    When I go to "/index.html"
+    Then I should see "<h1>hello</h1>"
+
+    When I go to "/javascripts/site.js"
+    Then I should see "console.log('hello');"
+
+    When I go to "/javascripts/importer.js"
+    Then I should see "console.log('hello');"
+
+
+  Scenario: current_resource is unavailable
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets do |c|
+        c.expose_middleman_helpers = true
+      end
+      """
+    And a file named "source/index.html.erb" with:
+      """
+      <pre><%= current_resource.url %></pre>
+      """
+    And a file named "source/javascripts/site.js.erb" with:
+      """
+      console.log('<%= current_resource.url %>');
+      """
+    And the Server is running
+
+    When I go to "/index.html"
+    Then I should see "<pre>/</pre>"
+
+    When going to "/javascripts/site.js" should not raise an exception
+    And I should see "NoMethodError: undefined method `url' for nil:NilClass"
+
+
+  Scenario: Helpers are not included by default
+    Given a fixture app "base-app"
+    And a file named "config.rb" with:
+      """
+      activate :sprockets
+
+      helpers do
+        def hello
+          'hello'
+        end
+      end
+      """
+    And a file named "source/index.html.erb" with:
+      """
+      <h1><%= hello %></h1>
+      """
+    And a file named "source/javascripts/site.js.erb" with:
+      """
+      console.log('<%= hello %>');
+      """
+    And the Server is running
+
+    When I go to "/index.html"
+    Then I should see "<h1>hello</h1>"
+
+    When going to "/javascripts/site.js" should not raise an exception
+    Then I should see "undefined local variable or method `hello'"