Show story ID in story edit form and hover

app/assets/javascripts/templates/story_hover.jst.ejs

@@ -7,12 +7,17 @@
       <span class="text"><%= story.get('estimate') %> <%= I18n.t('points') %></span>
     <% } %>
   </span>
+  <span>
+    <%= story.humanAttributeName('id') %>: <%= story.get('id') %>
+  </span>
+  <br/>
   <span>
     <% if (story.requested_by()) { %>
       <%= I18n.t("requested by user on date", {user: story.requested_by().get('name'), date: story.created_at()}) %>
     <% } else { %>
       <%= I18n.t("requested on date", {date: story.created_at()}) %>
     <% } %>
+  </span>
 </div>
 <% if (story.get('description')) { %>
   <h4 class="title"><%= story.humanAttributeName('description') %></h4>

app/assets/javascripts/views/story_view.js

@@ -275,6 +275,12 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({
         })
       );
 
+      if(!this.model.isNew()) {
+        this.$el.append(
+          $('<div/>').addClass('story-id').html(I18n.t('activerecord.attributes.story.id') + ": " + this.model.escape('id'))
+        );
+      }
+
       this.$el.append(
         this.makeFormControl(function(div) {
           $(div).append(this.textField("title", {

config/locales/en.yml

@@ -41,7 +41,7 @@ en:
   n weeks:
     one: '1 week'
     other: '%{count} weeks'
-  
+
   keycuts:
     keyboard_shortcuts: Keyboard shortcuts
     help: Help (this)
@@ -55,7 +55,7 @@ en:
     toggle_my_work: Toggle my work
     toggle_labels_searches: Toggle labels & searches
     toggle_current: Toggle current
-  
+
   activerecord:
     models:
       user:
@@ -79,6 +79,7 @@ en:
         iteration_length:     'Iteration length'
         default_velocity:     'Default velocity'
       story:
+        id:                   'ID'
         title:                'Title'
         description:          'Description'
         estimate:             'Estimate'

spec/features/stories_spec.rb

@@ -1,28 +1,22 @@
 require 'spec_helper'
 
 describe "Stories" do
-
-  before(:each) do
-    sign_in user
-  end
-
-  let(:user)  {
+  let(:user) do
     FactoryGirl.create :user, :email => '[email protected]',
                               :password => 'password'
-  }
+  end
 
   let(:project) do
     FactoryGirl.create :project,  :name => 'Test Project',
                                   :users => [user]
   end
 
-  describe "full story life cycle" do
-
-    before do
-      project
-    end
+  before(:each) do
+    sign_in user
+  end
 
-    it "steps through the full story life cycle", :js => true do
+  describe "full story life cycle" do
+    it "steps through the full story life cycle", js: true do
       visit project_path(project)
 
       click_on 'Add story'
@@ -45,23 +39,45 @@
       end
 
       find('#in_progress .story.accepted .story-title').should have_content('New story')
-
     end
-
   end
 
-  describe "delete a story" do
+  describe 'ID display', js: true do
+    context 'saved story' do
+      let!(:story) { FactoryGirl.create :story, project: project, title: 'My Fantastic Story', requested_by: user }
+      let(:story_div) { "#story-#{story.id}" }
 
-    let(:story) {
-      FactoryGirl.create(:story, :title => 'Delete Me', :project => project,
-                                  :requested_by => user)
-    }
+      before(:each) { visit project_path project }
 
-    before do
-      story
+      it 'shows the story ID in the expanded tile' do
+        within(story_div) do
+          find('*', text: story.title).click
+          page.should have_selector('.story-id', text: "ID: #{story.id}")
+        end
+      end
+
+      it 'shows the story ID in the hover balloon' do
+        find(story_div).find('.popover-activate').hover
+        page.should have_selector('.popover .content', text: "ID: #{story.id}")
+      end
     end
 
+    context 'unsaved story', js: true do
+      it 'does not show the story id in the expanded tile' do
+        visit project_path project
+        click_on 'Add story'
+        within '.story.editing' do
+          page.should_not have_text 'ID:'
+        end
+      end
+    end
+  end
+
+  describe "delete a story" do
     it "deletes the story", :js => true do
+      story = FactoryGirl.create(:story, :title => 'Delete Me', :project => project,
+                                  :requested_by => user)
+
       visit project_path(project)
 
       within(story_selector(story)) do
@@ -71,17 +87,11 @@
 
       page.should_not have_css(story_selector(story))
     end
-
   end
 
   describe "show and hide columns" do
-
-    before do
-      project
-      Capybara.ignore_hidden_elements = true
-    end
-
     it "hides and shows the columns", :js => true do
+      Capybara.ignore_hidden_elements = true
 
       visit project_path(project)
 
@@ -113,13 +123,11 @@
           click_link 'Close'
         end
         page.should_not have_css(selector)
-
       end
     end
   end
 
   def story_selector(story)
     "#story-#{story.id}"
   end
-
 end