app/frontend/comments/add_comment_form.component.test.jsx in decidim-comments-0.0.3 vs app/frontend/comments/add_comment_form.component.test.jsx in decidim-comments-0.0.5
- old
+ new
@@ -6,12 +6,14 @@
import generateUserData from '../support/generate_user_data';
import generateUserGroupData from '../support/generate_user_group_data';
describe("<AddCommentForm />", () => {
let session = null;
- const commentableId = "1";
- const commentableType = "Decidim::ParticipatoryProcess";
+ const commentable = {
+ id: "1",
+ type: "Decidim::DummyResource"
+ };
const addCommentStub = () => {
return null;
}
beforeEach(() => {
@@ -20,58 +22,64 @@
verifiedUserGroups: []
};
});
it("should render a div with class add-comment", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper.find('div.add-comment')).to.present();
});
it("should have a reference to body textarea", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper.instance().bodyTextArea).to.be.ok;
});
it("should initialize with a state property disabled as true", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper).to.have.state('disabled', true);
});
it("should have a default prop showTitle as true", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper).to.have.prop('showTitle').equal(true);
});
it("should not render the title if prop showTitle is false", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} showTitle={false} />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} />);
expect(wrapper.find('h5.section-heading')).not.to.be.present();
});
it("should have a default prop submitButtonClassName as 'button button--sc'", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper).to.have.prop('submitButtonClassName').equal('button button--sc');
});
+ it("should have a default prop maxLength of 1000", () => {
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
+ expect(wrapper).to.have.prop('maxLength').equal(1000);
+ });
+
+
it("should use prop submitButtonClassName as a className prop for submit button", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} submitButtonClassName="button small hollow" />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" />);
expect(wrapper.find('input[type="submit"]')).to.have.className('button');
expect(wrapper.find('input[type="submit"]')).to.have.className('small');
expect(wrapper.find('input[type="submit"]')).to.have.className('hollow');
});
it("should enable the submit button if textarea is not blank", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
wrapper.find('textarea').simulate('change', {
target: {
value: 'This is a comment'
}
});
expect(wrapper.find('input[type="submit"]')).not.to.be.disabled();
});
it("should disable the submit button if textarea is blank", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
wrapper.find('textarea').simulate('change', {
target: {
value: 'This will be deleted'
}
});
@@ -82,11 +90,11 @@
});
expect(wrapper.find('input[type="submit"]')).to.be.disabled();
});
it("should not render a div with class 'opinion-toggle'", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper.find('.opinion-toggle')).not.to.be.present();
});
describe("submitting the form", () => {
let addComment = null;
@@ -95,11 +103,11 @@
let message = null;
beforeEach(() => {
addComment = sinon.spy();
onCommentAdded = sinon.spy();
- wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentableId={commentableId} commentableType={commentableType} onCommentAdded={onCommentAdded} />);
+ wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} />);
message = 'This will be submitted';
wrapper.instance().bodyTextArea.value = message;
});
it("should call addComment prop with the textarea value and state property alignment", () => {
@@ -123,29 +131,29 @@
expect(onCommentAdded).to.have.been.called;
});
});
it("should initialize state with a property alignment and value 0", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
expect(wrapper).to.have.state('alignment').equal(0);
});
describe("when receiving an optional prop arguable with value true", () => {
it("should render a div with class 'opinion-toggle'", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
expect(wrapper.find('.opinion-toggle')).to.be.present();
});
it("should set state alignment to 1 if user clicks ok button and change its class", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
wrapper.find('.opinion-toggle--ok').simulate('click');
expect(wrapper.find('.opinion-toggle--ok')).to.have.className('is-active');
expect(wrapper).to.have.state('alignment').equal(1);
});
it("should set state alignment to -11 if user clicks ko button and change its class", () => {
- const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+ const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
wrapper.find('.opinion-toggle--ko').simulate('click');
expect(wrapper.find('.opinion-toggle--ko')).to.have.className('is-active');
expect(wrapper).to.have.state('alignment').equal(-1);
});
@@ -154,11 +162,11 @@
let wrapper = null;
let message = null;
beforeEach(() => {
addComment = sinon.spy();
- wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentableId={commentableId} commentableType={commentableType} arguable />);
+ wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} arguable />);
message = 'This will be submitted';
wrapper.instance().bodyTextArea.value = message;
});
it("should call addComment prop with the state's property alignment", () => {
@@ -182,16 +190,16 @@
generateUserGroupData()
];
});
it("should have a reference to user_group_id select", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper.instance().userGroupIdSelect).to.be.ok;
});
it("should render a select with option tags for each verified user group", () => {
- const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
expect(wrapper.find('select')).to.have.exactly(3).descendants('option');
});
describe("submitting the form", () => {
let addComment = null;
@@ -199,11 +207,11 @@
let message = null;
let userGroupId = null;
beforeEach(() => {
addComment = sinon.spy();
- wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentableId={commentableId} commentableType={commentableType} />);
+ wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} />);
message = 'This will be submitted';
userGroupId = session.verifiedUserGroups[1].id;
wrapper.instance().bodyTextArea.value = message;
wrapper.instance().userGroupIdSelect.value = userGroupId;
});
@@ -222,7 +230,18 @@
wrapper.find('form').simulate('submit');
expect(addComment).to.calledWith({ body: message, alignment: 0 });
});
});
});
- })
+ });
+
+ describe("when session is null", () => {
+ beforeEach(() => {
+ session = null;
+ });
+
+ it("display a message to sign in or sign up", () => {
+ const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
+ expect(wrapper.find('span')).to.include.text("sign up");
+ });
+ });
});