Test entering the form including javascript stuff.

3 files changed, 74 insertions, 32 deletions

diff --git a/public/regform.js b/public/regform.js
index 7509f0b..e620b04 100644
--- a/public/regform.js
+++ b/public/regform.js
@@ -8,8 +8,8 @@ $(function() {
         '<div class="member-info">' +
         '    <h4>Medlem nr. '+num_members+'<input type="button" name="delete" data-member="'+num_members+'" class="delete-member-button" value="X"></h4>' +
         '    <div class="field text required">' +
-        '        <label>Navn:</label>' +
-        '        <input type="text" name="band[members]['+num_members+'][name]">' +
+        '        <label for="band-member-'+num_members+'-name">Navn:</label>' +
+        '        <input type="text" id="band-member-'+num_members+'-name" name="band[members]['+num_members+'][name]">' +
         '    </div>' +
         '    <div class="field text optional">' +
         '        <label>Instrument:</label>' +
@@ -29,28 +29,28 @@ $(function() {
        '<div class="song-info" id="song-'+num_songs+'-info">' +
        '    <h4>Låt nr '+num_songs+'<input type="button" id="delete-song-'+num_songs+'" class="delete-song" value="X"></h4>' +
        '    <div class="field text required">' +
-       '        <label>Tittel:</label>' +
-       '        <input type="text" name="band[songs]['+num_songs+'][title]">' +
+       '        <label for="band-song-'+num_songs+'-title">Tittel:</label>' +
+       '        <input type="text" id="band-song-'+num_songs+'-title" name="band[songs]['+num_songs+'][title]">' +
        '    </div>' +
        '    <div class="field text optional">' +
-       '        <label>Lengde:</label>' +
-       '        <input type="text" pattern="[0-9]{2}:[0-9]{2}" title="Spilletid i min:sek (mm:ss)" name="band[songs]['+num_songs+'][time]" size="6">'+
+       '        <label for="band-song-'+num_songs+'-time">Lengde:</label>' +
+       '        <input type="text" pattern="[0-9]{2}:[0-9]{2}" title="Spilletid i min:sek (mm:ss)" id="band-song-'+num_songs+'-time" name="band[songs]['+num_songs+'][time]" size="6">'+
        '    </div>' +
        '    <div class="field text optional">' +
-       '        <label>ISRC-kode:</label>' +
-       '        <input type="text" title="Dersom låten har vært utgitt før har den en ISRC-kode. Om du vet den så oppgi den her." name="band[songs]['+num_songs+'][isrc]" size="11">'+
+       '        <label for="band-song-'+num_songs+'-isrc">ISRC-kode:</label>' +
+       '        <input type="text" title="Dersom låten har vært utgitt før har den en ISRC-kode. Om du vet den så oppgi den her." id="band-song-'+num_songs+'-isrc" name="band[songs]['+num_songs+'][isrc]" size="11">'+
        '    </div>' +
        '    <div class="field textarea required">' +
-       '        <label>Utøvere:</label>'+
-       '        <textarea cols="40" rows="5" name="band[songs]['+num_songs+'][performers]" title="Fullt navn (ingen pseudonymer) på alle som er med på denne innspillingen."></textarea>' +
+       '        <label for="band-song-'+num_songs+'-performers">Utøvere:</label>'+
+       '        <textarea cols="40" rows="5" id="band-song-'+num_songs+'-performers" name="band[songs]['+num_songs+'][performers]" title="Fullt navn (ingen pseudonymer) på alle som er med på denne innspillingen."></textarea>' +
        '    </div>' +
        '    <div class="field textarea required">' +
-       '        <label>Opphavsmenn:</label>'+
-       '        <textarea cols="40" rows="5" name="band[songs]['+num_songs+'][composers]" title="Fullt navn (ingen pseudonymer) på alle som har vært med på å skrive denne låten."></textarea>' +
+       '        <label for="band-song-'+num_songs+'-composers">Opphavsmenn:</label>'+
+       '        <textarea cols="40" rows="5" id="band-song-'+num_songs+'-composers" name="band[songs]['+num_songs+'][composers]" title="Fullt navn (ingen pseudonymer) på alle som har vært med på å skrive denne låten."></textarea>' +
        '    </div>' +
        '    <div class="field textarea optional">' +
-       '        <label>Andre merknader:</label>'+
-       '        <textarea cols="40" rows="5" name="band[songs]['+num_songs+'][notes]" title="Evt andre ting vi burde vite."></textarea>' +
+       '        <label for="band-song-'+num_songs+'-notes">Andre merknader:</label>'+
+       '        <textarea cols="40" rows="5" id="band-song-'+num_songs+'-notes" name="band[songs]['+num_songs+'][notes]" title="Evt andre ting vi burde vite."></textarea>' +
        '    </div>' +
        '</div>'
     )
diff --git a/spec/features/register_band_spec.rb b/spec/features/register_band_spec.rb
new file mode 100644
index 0000000..65eede4
--- /dev/null
+++ b/spec/features/register_band_spec.rb
@@ -0,0 +1,42 @@
+require 'spec_helper'
+
+feature "Register a band" do
+
+  scenario "with valid input", js: true do
+    band_params = create_band_params
+
+    visit '/'
+
+    fill_in 'Bandnavn:', with: band_params['name']
+    fill_in 'Hjemsted:', with: band_params['city']
+    fill_in 'Webside:', with: band_params['website']
+    fill_in 'Plateselskap:', with: band_params['label']
+    fill_in 'Kort bio:', with: band_params['shortbio']
+
+    within '#form-contact-info' do
+      fill_in 'Navn:', with: band_params['contact']['name']
+      fill_in 'Postadresse:', with: band_params['contact']['addr']
+      fill_in 'Tlf:', with: band_params['contact']['phone']
+      fill_in 'E-post:', with: band_params['contact']['email']
+    end
+
+    click_on 'Legg til medlem'
+
+    within '#form-members .member-info' do
+      fill_in 'Navn:', with: band_params['members']['1']['name']
+    end
+
+    click_on 'Legg til låt'
+
+    within '#form-songs #song-1-info' do
+      fill_in 'Tittel:', with: band_params['songs']['1']['title']
+      fill_in 'Lengde:', with: band_params['songs']['1']['time']
+      fill_in 'ISRC-kode:', with: band_params['songs']['1']['isrc']
+      fill_in 'Utøvere:', with: band_params['songs']['1']['performers']
+      fill_in 'Opphavsmenn:', with: band_params['songs']['1']['composers']
+      fill_in 'Andre merknader:', with: band_params['songs']['1']['notes']
+    end
+
+    click_on 'Send skjema'
+  end
+end
diff --git a/views/index.erb b/views/index.erb
index 51ec288..1a63651 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -6,51 +6,51 @@
             <h3>Generell info:</h3>
 
             <div class="field text required">
-                <label>Bandnavn:</label>
-                <input type="text" name="band[name]">
+                <label for="band_name">Bandnavn:</label>
+                <input type="text" id="band_name" name="band[name]">
             </div>
 
             <div class="field text optional">
-                <label>Hjemsted:</label>
-                <input type="text" name="band[city]">
+                <label for="band_city">Hjemsted:</label>
+                <input type="text" id="band_city" name="band[city]">
             </div>
 
             <div class="field text optional">
-                <label>Webside:</label>
-                <input type="text" name="band[website]">
+                <label for="band_website">Webside:</label>
+                <input type="text" id="band_website" name="band[website]">
             </div>
 
             <div class="field text optional">
-                <label>Plateselskap:</label>
-                <input type="text" name="band[label]">
+                <label for="band_label">Plateselskap:</label>
+                <input type="text" id="band_label" name="band[label]">
             </div>
 
             <div class="field text required">
-                <label>Kort bio:</label>
-                <textarea cols="40" rows="5" name="band[shortbio]"></textarea>
+                <label for="band_shortbio">Kort bio:</label>
+                <textarea cols="40" rows="5" id="band_shortbio" name="band[shortbio]"></textarea>
             </div>
         </div>
 
         <div id="form-contact-info" class="fieldgroup">
             <h3>Kontaktperson</h3>
             <div class="field text required">
-                <label>Navn:</label>
-                <input type="text" name="band[contact][name]">
+                <label for="band-contact-name">Navn:</label>
+                <input type="text" id="band-contact-name" name="band[contact][name]">
             </div>
 
             <div class="field textarea required">
-                <label>Postadresse:</label>
-                <textarea cols="40" rows="4" name="band[contact][addr]"></textarea>
+                <label for="band-contact-addr">Postadresse:</label>
+                <textarea cols="40" rows="4" id="band-contact-addr" name="band[contact][addr]"></textarea>
             </div>
 
             <div class="field text required">
-                <label>Tlf:</label>
-                <input type="text" name="band[contact][phone]">
+                <label for="band-contact-phone">Tlf:</label>
+                <input type="text" id="band-contact-phone" name="band[contact][phone]">
             </div>
 
             <div class="field text required">
-                <label>E-post:</label>
-                <input type="text" name="band[contact][email]">
+                <label for="band-contact-email">E-post:</label>
+                <input type="text" id="band-contact-email" name="band[contact][email]">
             </div>
         </div>