Merge 83f3b09 into 7759c37

app/assets/javascripts/components/story/StoryItem.js

@@ -11,33 +11,55 @@ import {
   isRelease,
 } from '../../rules/story';
 
-const StoryPoints = () => (
+const StateAction = {
+  started: ["finish"],
+  finished: ["deliver"],
+  delivered: ["accept","reject"],
+  rejected: ["restart"],
+  accepted: [],
+  unstarted: ["start"]
+};
+
+export const StoryPoints = () => (
   <div>
     <span className="Story__estimate">1</span>
     <span className="Story__estimate">2</span>
     <span className="Story__estimate">3</span>
     <span className="Story__estimate">5</span>
     <span className="Story__estimate">8</span>
   </div>
-)
+);
 
-const StateActions = ({ storyType, estimate }) => (
+export const StateActions = ({ storyType, estimate, state }) => (
   <div className='Story__actions'>
     {
       isStoryNotEstimated(storyType, estimate)
         ? <StoryPoints />
-        : <ButtonStart />
+        : StoryActionFor(state).map((stateAction) => <StateButton action={stateAction} key={stateAction} />)
     }
   </div>
-)
+);
+
+export const StoryActionFor = (state) => StateAction[state] || StateAction.unstarted;  
+
 StateActions.propTypes = {
-  storyType : PropTypes.string.isRequired
-}
+  storyType: PropTypes.string.isRequired,
+  estimate: PropTypes.number,
+  state: PropTypes.string.isRequired
+};
+
+StateActions.defaultProp = {
+  estimate: '-',
+};
 
-const ButtonStart = () => (
-  <button type="button" className="Story__btn Story__btn--start">start</button>
+export const StateButton = ({ action }) => (
+  <button type="button" className={`Story__btn Story__btn--${action}`}>{action}</button>
 );
 
+StateButton.propTypes = {
+  action: PropTypes.string.isRequired
+};
+
 const StoryEstimate = ({ estimate }) => (
   <span className='Story__estimated'>{estimateRule(estimate)}</span>
 );
@@ -109,12 +131,12 @@ const classNameStory = (storyType, estimate) => classname (
   }
 );
 
-const StoryItem = ({ title, storyType, estimate, labels }) => (
+const StoryItem = ({ title, storyType, estimate, labels, state }) => (
   <div className={classNameStory(storyType, estimate)}>
     <StoryIcon storyType={storyType} />
     <StoryEstimate estimate={estimate} />
     <StoryInfo title={title} labels={labels} storyType={storyType} estimate={estimate} />
-    <StateActions storyType={storyType} estimate={estimate}/>
+    <StateActions storyType={storyType} estimate={estimate} state={state}/>
   </div>
 );
 
@@ -124,10 +146,11 @@ StoryItem.propTypes = {
   description: PropTypes.string,
   storyType: PropTypes.string.isRequired,
   labels: PropTypes.any,
+  state: PropTypes.string.isRequired,
 };
 
 StoryItem.defaultProps = {
   description: '',
-}
+};
 
-export default StoryItem
+export default StoryItem;

app/assets/stylesheets/new_board/_story.scss

@@ -94,35 +94,32 @@
   }
 
   &__btn {
-    display: inline-block;
-    margin-bottom: 0;
-    font-weight: normal;
-    text-align: center;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    border: 1px solid transparent;
-    white-space: nowrap;
-    font-size: 14px;
-    line-height: 1.5;
-    border-radius: 4px;
-    -webkit-user-select: none;
-    user-select: none;
-    padding: 1px 5px;
-    font-size: 12px;
+    @extend .btn;
+    @extend .btn-xs;
+    font-size: 11px;
+    display: inline;
 
     &--start {
-      color: $story-btn-start-color;
-      background-color: $white;
-      border-color: $story-btn-start-border-color;
-
-      &:hover,
-      &:active {
-        color: $story-btn-start-color;
-        background-color: $story-btn-start-hover-background-color;
-        border-color: $story-btn-start-hover-border-color;
-      }
+      @extend .btn-default;
+    }
+    &--finish {
+      @extend .btn-primary;
+    }
+    &--deliver{
+      @extend .btn-warning;
+    }
+    &--accept{
+      @extend .btn-success;
+    }
+    &--reject{
+      @extend .btn-danger;
+    }
+    &--restart{
+      @extend .btn-danger;
+      background-image: sprite-url($icons-sprites);
+      background-position: sprite-position($icons-sprites, redo, 0, 2px);
+      background-repeat: no-repeat;
+      padding-left: 20px;
     }
   }
 }

spec/javascripts/components/story/story_actions_spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import StoryItem, {
+  StoryPoints,
+  StateActions,
+  StateButton,
+  StoryActionFor
+} from 'components/story/StoryItem';
+
+describe('<StateActions />', () => {
+  describe('When estimate is null',() => {
+    it("renders <StoryPoints /> component", () => {
+      const props = {
+        storyType: "feature",
+        estimate: null,
+        state: "started"
+      };
+      const wrapper = shallow(<StateActions {...props} />);
+      expect(wrapper.find(StoryPoints)).toExist();
+    });
+  });
+  describe('When estimate is not null', () => {
+    const states = [
+      "started",
+      "finished",
+      "delivered",
+      "rejected",
+      "accepted",
+      "unstarted",
+      ""
+    ];
+    states.forEach((state) => {
+      describe(`When state = ${state}`, () => {
+        it('renders the <StateButton /> component',() => {
+          const wrapper = shallow(<StateActions state={state} estimate={1} storyType="feature" />);
+          const actions = StoryActionFor(state)
+          actions.forEach((action) => {
+            expect(wrapper.find(`StateButton[action="${action}"]`)).toExist();
+          });
+        });
+      });
+    });
+  });
+});

spec/javascripts/components/story/story_points_spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import StoryItem, {
+  StoryPoints,
+} from 'components/story/StoryItem';
+
+describe('<StoryPoints />', () => {
+  it("renders <StoryPoints /> component", () => {
+    const wrapper = shallow(<StoryPoints />);
+    const text = wrapper.text()
+    expect(text).toContain('1');
+    expect(text).toContain('2');
+    expect(text).toContain('3');
+    expect(text).toContain('5');
+    expect(text).toContain('8');
+  });
+});

spec/javascripts/components/story/story_state_button_spec.js

@@ -0,0 +1,21 @@
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import { shallow } from 'enzyme';
+import StoryItem, {
+  StateButton,
+} from 'components/story/StoryItem';
+
+beforeEach(() => {
+  jasmineEnzyme();
+});
+
+describe('<StateButton />', () => {
+  it("renders <StateButton /> with the right content", () => {
+    const props = {
+      action: 'start'
+    };
+    const wrapper = shallow(<StateButton {...props} />);
+    expect(wrapper.text()).toEqual(props.action);
+    expect(wrapper).toHaveClassName(`Story__btn Story__btn--${props.action}`);
+  });
+});

spec/javascripts/views/story_view_spec.js

@@ -685,7 +685,7 @@ describe('StoryView', function() {
       this.view.canEdit = sinon.stub().returns(true);
       this.view.render();
 
-      expect(this.view.$('.story_estimate')).toBeDisabled();
+      expect(this.view.$('.story_estimate').is(':disabled')).toEqual(true);;
     });
   });