Permalink
Browse files

Add edit Record function with tests.

  • Loading branch information...
1 parent a154d62 commit 1703c4ca7061dd545a609434c8653a083506e829 @mllocs committed Dec 9, 2012
@@ -2,7 +2,9 @@ ZohMyRecords.Routers.Records = Backbone.Router.extend({
routes: {
"": "index",
- "records/new": "newRecord"
+ "records": "index",
+ "records/new": "newRecord",
+ "records/:id/edit": "editRecord"
},
initialize: function() {
@@ -11,12 +13,17 @@ ZohMyRecords.Routers.Records = Backbone.Router.extend({
},
index: function() {
- view = new ZohMyRecords.Views.RecordsIndex({ collection: this.collection });
+ var view = new ZohMyRecords.Views.RecordsIndex({ collection: this.collection });
$('#container').html(view.render().el);
},
newRecord: function() {
- view = new ZohMyRecords.Views.NewRecord({ collection: this.collection });
+ var view = new ZohMyRecords.Views.NewRecord({ collection: this.collection });
+ $('#container').html(view.render().el);
+ },
+
+ editRecord: function(id) {
+ var view = new ZohMyRecords.Views.NewRecord({ collection: this.collection, id: id });
$('#container').html(view.render().el);
}
@@ -4,11 +4,17 @@ ZohMyRecords.Views.NewRecord = Backbone.View.extend({
events: {
"click #cancel": "cancel",
- "submit #new_record": "createRecord"
+ "submit #new_record": "createRecord",
+ "submit #edit_record": "updateRecord"
+ },
+
+ initialize: function() {
+ this.collection.on('reset', this.render, this);
},
render: function() {
- $(this.el).html(this.template());
+ this.model = (this.id === undefined) ? undefined : this.collection.get(this.id);
+ $(this.el).html(this.template({ record: this.model }));
return this;
},
@@ -19,16 +25,30 @@ ZohMyRecords.Views.NewRecord = Backbone.View.extend({
createRecord: function(event) {
event.preventDefault();
- this.collection.create({
- title: $('#new_record_title').val(),
- artist: $('#new_record_artist').val(),
- cover_url: $('#new_record_cover_url').val(),
- spotify_uri: $('#new_record_spotify_uri').val()
- }, {
+ this.collection.create(this.getAttributes(), {
+ wait: true,
+ success: this.goToMain,
+ error: this.handleError
+ });
+ },
+
+ updateRecord: function(event) {
+ event.preventDefault();
+ this.model.save(this.getAttributes(), {
wait: true,
success: this.goToMain,
error: this.handleError
});
+
+ },
+
+ getAttributes: function() {
+ return {
+ title: $('#record_title').val(),
+ artist: $('#record_artist').val(),
+ cover_url: $('#record_cover_url').val(),
+ spotify_uri: $('#record_spotify_uri').val()
+ };
},
handleError: function(entry, response) {
@@ -37,6 +57,7 @@ ZohMyRecords.Views.NewRecord = Backbone.View.extend({
for (attribute in errors) {
messages = errors[attribute];
alert("" + attribute + " " + messages[0]);
+ $("#record_" + attribute).focus();
break;
}
}
@@ -4,7 +4,8 @@ ZohMyRecords.Views.Record = Backbone.View.extend({
tagName: "li",
events: {
- "click .delete": "deleteRecord"
+ "click .delete": "deleteRecord",
+ "click .edit": "editRecord"
},
initialize: function() {
@@ -26,6 +27,12 @@ ZohMyRecords.Views.Record = Backbone.View.extend({
}
},
+ editRecord: function(event) {
+ event.preventDefault();
+ var edit_path = "/records/" + parseInt(this.model.get('id')) + "/edit"
+ Backbone.history.navigate(edit_path, true);
+ },
+
fadeOut: function() {
$(this.el).fadeOut();
},
@@ -54,7 +54,7 @@ ul#records {
}
}
-form#new_record {
+form.record_form {
padding: 20px;
div.field {
@@ -1,23 +1,32 @@
-<form id="new_record">
+<%
+var is_new = (record === undefined);
+var form_id = is_new ? "new_record" : "edit_record";
+var submit_value = is_new ? "Add Record" : "Save Record";
+var record_title = is_new ? "" : record.get('title');
+var record_artist = is_new ? "" : record.get('artist');
+var record_cover_url = is_new ? "" : record.get('cover_url');
+var record_spotify_uri = is_new ? "" : record.get('spotify_uri');
+%>
+
+<form id="<%= form_id %>" class="record_form">
<div class="field">
- <label for="new_record_title">Title</label>
- <input type="text" name="title" id="new_record_title" id="new_record_title">
+ <label for="record_title">Title</label>
+ <input type="text" name="title" id="record_title" value="<%= record_title %>" />
</div>
<div class="field">
- <label for="new_record_artist">Artist</label>
- <input type="text" name="artist" id="new_record_artist">
+ <label for="record_artist">Artist</label>
+ <input type="text" name="artist" id="record_artist" value="<%= record_artist %>" />
</div>
<div class="field">
- <label for="new_record_cover_url">Cover URL</label>
- <input type="text" name="cover_url" id="new_record_cover_url" size="30">
+ <label for="record_cover_url">Cover URL</label>
+ <input type="text" name="cover_url" id="record_cover_url" size="30" value="<%= record_cover_url %>" />
</div>
<div class="field">
- <label for="new_record_spotify_uri">Spotify URI</label>
- <input type="text" name="spotify_uri" id="new_record_spotify_uri" size="30">
+ <label for="record_spotify_uri">Spotify URI</label>
+ <input type="text" name="spotify_uri" id="record_spotify_uri" size="30" value="<%= record_spotify_uri %>" />
</div>
<div class="buttons">
- <input type="submit" value="Add Record">
- <button id="cancel">Cancel</a>
+ <input type="submit" value="<%= submit_value %>" />
+ <button id="cancel">Cancel</button>
</div>
</form>
-
@@ -1,5 +1,5 @@
<div class='menu'>
- <a href="#" class="edit">Edit</a> ·
+ <a href="#" id="edit_record_<%= record.get('id') %>" class="edit">Edit</a> ·
<a href="#" id="delete_record_<%= record.get('id') %>" class="delete">Delete</a>
</div>
<a class="record" href="<%= record.get('spotify_uri') %>">
@@ -13,3 +13,10 @@ two:
artist: Tom Waits
cover_url: http://ijustreadaboutthat.files.wordpress.com/2011/09/75112.jpg
spotify_uri: spotify:track:23X3UiWmkM09Ug2heM6z38
+
+three:
+ id: 3
+ title: "OH (Ohio)"
+ artist: "Lambchop"
+ cover_url: "http://expressmilwaukee.com/imgs/hed/art5489widea.jpg"
+ spotify_uri: "spotify:album:4y9ebrmAx1TMyUlyCVJJL6"
@@ -59,11 +59,51 @@ class RecordsPagesTest < ActionDispatch::IntegrationTest
test "record delete button" do
visit "/"
- assert page.has_content?("Low Edges")
- click_link "delete_record_1"
+ assert page.has_content?("OH (Ohio)")
+ click_link "delete_record_3"
assert_equal page.driver.browser.switch_to.alert.text, "Are you sure?"
page.driver.browser.switch_to.alert.accept
- assert page.has_no_content?("Low Edges")
+ assert page.has_no_content?("OH (Ohio)")
+ end
+
+ test "edit record link" do
+ visit "/"
+ assert page.has_content?("Low Edges")
+ click_link "edit_record_1"
+ within("form#edit_record") do
+ assert_equal find_field('title').value, "Low Edges"
+ assert_equal find_field('artist').value, "Richard Hawley"
+ assert_equal find_field('cover_url').value, "http://cdn.krrb.com/post_images/photos/000/000/361/Richard_Hawley_Lowedges1_large.jpg"
+ assert_equal find_field('spotify_uri').value, "spotify:album:6O2x7QN3BqUeXBaH8Fot49"
+ end
+ end
+
+ test "edit record save action if valid" do
+ visit "/"
+ assert page.has_content?("Low Edges")
+ click_link "edit_record_1"
+ within("form#edit_record") do
+ fill_in "title", :with => "New Title"
+ fill_in "artist", :with => "New Artist"
+ click_button "Save Record"
+ end
+ within("ul#records") do
+ assert page.has_content?("New Title")
+ assert page.has_content?("New Artist")
+ end
+ end
+
+ test "edit record save action show errors if not valid" do
+ visit "/"
+ assert page.has_content?("The Heart Of Sunday Night")
+ click_link "edit_record_2"
+ within("form#edit_record") do
+ fill_in "title", :with => ""
+ click_button "Save Record"
+ end
+ assert_equal page.driver.browser.switch_to.alert.text, "title can't be blank"
+ page.driver.browser.switch_to.alert.accept
+ assert_equal current_path, "/records/2/edit"
end
end

1 comment on commit 1703c4c

@micho
micho commented on 1703c4c Dec 10, 2012

Nice specs!

Please sign in to comment.