Merge pull request #3246 from DFE-Digital/no-js-degree-inputbox

No js degree inputbox

app/controllers/candidates/registrations/educations_controller.rb

@@ -7,7 +7,6 @@ def new
 
       def create
         @education = Education.new education_params
-
         if @education.valid?
           persist @education
           redirect_to next_step_path
@@ -40,9 +39,15 @@ def education_params
           :degree_stage_explaination,
           :degree_subject,
           :degree_subject_raw,
+          :degree_subject_nojs,
+          :nojs
         ).tap do |params|
           params[:degree_stage_explaination] = nil unless params[:degree_stage] == 'Other'
-          params[:degree_subject] = params[:degree_subject_raw] if params.key?(:degree_subject_raw)
+          if params.key?(:degree_subject_raw)
+            params[:degree_subject] = params[:degree_subject_raw]
+          elsif params.key?(:nojs) && ActiveModel::Type::Boolean.new.cast(params[:nojs])
+            params[:degree_subject] = params[:degree_subject_nojs]
+          end
         end
       end
 

app/services/candidates/registrations/behaviours/education.rb

@@ -14,11 +14,28 @@ module Education
           validates :degree_stage, inclusion: { in: :available_degree_stages }, if: -> { degree_stage.present? }
           validates :degree_stage_explaination, presence: true, if: :degree_stage_explaination_required?
 
-          validates :degree_subject, presence: true, if: -> { degree_subject_simple? || degree_stage_requires_subject? }
-          validates :degree_subject, absence: true, if: -> { degree_subject_autocomplete? && !degree_stage_requires_subject? }
-          validates :degree_subject, inclusion: { in: :available_degree_subjects }, if: -> { degree_subject_simple? && degree_subject.present? && degree_stage_requires_subject? }
-          validates :degree_subject, inclusion: [NO_DEGREE_SUBJECT], if: :degree_stage_requires_n_a_subject?
-          validates :degree_subject, exclusion: [NO_DEGREE_SUBJECT], if: :degree_stage_requires_subject_in_subjects_list?
+          # if DEGREE_SUBJECT_AUTOCOMPLETE_ENABLED=true (degree_subject_autocomplete?)
+          # + if javascript is disabled (nojs?), then
+          validates :degree_subject_nojs, presence: true, if: -> { degree_subject_autocomplete? && nojs? && degree_stage_requires_subject? }
+          validates :degree_subject_nojs, absence: true,  if: -> { degree_subject_autocomplete? && nojs? && !degree_stage_requires_subject? }
+
+          # # + else if javascript is enabled (js?), then
+          validates :degree_subject, presence: true,  if: -> { degree_subject_autocomplete? && js? && degree_stage_requires_subject? }
+          validates :degree_subject, absence: true,   if: -> { degree_subject_autocomplete? && js? && !degree_stage_requires_subject? }
+
+          # if DEGREE_SUBJECT_AUTOCOMPLETE_ENABLED=false (degree_subject_simple?)
+          validates :degree_subject, presence: true,                                if: -> { degree_subject_simple? && degree_stage_requires_subject? }
+          validates :degree_subject, inclusion: { in: :available_degree_subjects }, if: -> { degree_subject_simple? && degree_stage_requires_subject? }
+          validates :degree_subject, inclusion: [NO_DEGREE_SUBJECT],                if: -> { degree_subject_simple? && degree_stage_requires_n_a_subject? }
+          validates :degree_subject, exclusion: [NO_DEGREE_SUBJECT],                if: -> { degree_subject_simple? && degree_stage_requires_subject_in_subjects_list? }
+        end
+
+        def js?
+          !nojs?
+        end
+
+        def nojs?
+          ActiveModel::Type::Boolean.new.cast(nojs) if defined?(nojs)
         end
 
         def available_degree_stages
@@ -65,15 +82,13 @@ def degree_stage_explaination_required?
         end
 
         def degree_stage_requires_subject_in_subjects_list?
-          degree_subject_simple? &&
-            degree_subject.present? &&
+          degree_subject.present? &&
             degree_stage.present? &&
             degree_stage_requires_subject?
         end
 
         def degree_stage_requires_n_a_subject?
-          degree_subject_simple? &&
-            degree_subject.present? &&
+          degree_subject.present? &&
             degree_stage.present? &&
             !degree_stage_requires_subject?
         end

app/services/candidates/registrations/education.rb

@@ -6,7 +6,12 @@ class Education < RegistrationStep
       attribute :degree_stage_explaination, :string
       attribute :degree_subject, :string
 
-      attr_accessor :degree_subject_raw
+      attr_accessor :degree_subject_raw, :degree_subject_nojs, :nojs
+
+      def initialize(*)
+        super
+        self.degree_subject_nojs = degree_subject
+      end
     end
   end
 end

app/views/candidates/registrations/educations/_form.html.erb

@@ -31,6 +31,13 @@
 
   <section id="education-degree-subject-container" data-education-form-target="degreeSubjectContainer">
     <% if f.object.degree_subject_autocomplete? %>
+      <%= f.hidden_field :nojs, value: true, class: 'nojs-flag' %>
+
+      <div id="degree_subject_nojs" class="hide-with-javascript">
+        <!-- no-javascript version of autocomplete box -->
+        <%=f.govuk_text_field :degree_subject_nojs, label: { size: 'm' } %>
+      </div>
+
       <%= render DfE::Autocomplete::View.new(
         f,
         attribute_name: :degree_subject,
@@ -40,7 +47,10 @@
           label: { text: t('helpers.legend.candidates_registrations_education.degree_subject'),  size: 'm', tag: 'h2' },
           hint: { text: t('helpers.hint.candidates_registrations_education.degree_subject') },
           data: { education_form_target: 'degreeSubject' },
+          class: "enable-with-javascript",
+          disabled: true,
           ),
+        classes: "show-with-javascript",
         ) %>
     <% else %>
       <%= f.govuk_collection_select \

app/webpacker/controllers/education_form_controller.js

@@ -6,6 +6,10 @@ export default class extends Controller {
   connect() {
     const radioButtons = this.degreeStagesContainerTarget.querySelectorAll('input[type="radio"]')
     const checked = Array.from(radioButtons).find(r => r.checked)
+    this.degreeSubjectContainerTarget.querySelector('input.nojs-flag').value = false
+    this.degreeSubjectContainerTarget.querySelectorAll('.hide-with-javascript').forEach(c => c.style.display="none");
+    this.degreeSubjectContainerTarget.querySelectorAll('.show-with-javascript').forEach(c => c.style.display="block");
+    this.degreeSubjectContainerTarget.querySelectorAll(".enable-with-javascript").forEach(c => c.disabled=false);
     if (checked) { this.toggleDegreeSubjectContainer(checked) }
   }
 

app/webpacker/stylesheets/application.scss

@@ -30,6 +30,7 @@ $govuk-grid-widths: (
 @import "dfe-autocomplete/src/dfe-autocomplete";
 @import "accessible-autocomplete" ;
 @import "global-styles" ;
+@import "candidate";
 @import "contents-list" ;
 @import "cookie-banner" ;
 @import "form-extensions" ;

app/webpacker/stylesheets/candidate.scss

@@ -0,0 +1,7 @@
+.hide-with-javascript {
+  display: block;
+}
+
+.show-with-javascript {
+  display: none;
+}

config/locales/en.yml

@@ -221,6 +221,9 @@ en:
               inclusion: "Select 'Not applicable' if you don't have a degree or are not studying for one"
               exclusion: "Select a subject if you have a degree or are studying for one"
               present: "Subject should be blank"
+            degree_subject_nojs:
+              blank: "Enter a subject"
+              present: "Subject should be blank"
 
         candidates/registrations/teaching_preference:
           attributes:
@@ -679,6 +682,7 @@ en:
       dbs_policies: Disclosure and Barring Service
       candidates_registrations_education:
         degree_subject: If you have or are studying for a degree, tell us about your degree subject
+        degree_subject_nojs: If you have or are studying for a degree, tell us about your degree subject
       candidates_registrations_subject_preference:
         degree_subject: Select the nearest or equivalent subject.
       candidates_registrations_placement_preference:
@@ -819,6 +823,7 @@ en:
         subject_second_choice: "Second choice"
       candidates_registrations_education:
         degree_subject: If you have or are studying for a degree, tell us about your degree subject
+        degree_subject_nojs: What subject are you studying?
         degree_stage_explaination: "Explain what stage you're at with your degree"
       candidates_registrations_subject_preference:
         degree_stage: What stage are you at with your degree?

features/candidates/registrations/education.feature

@@ -13,7 +13,7 @@ Feature: Entering candidate education details
         Given I am on the 'education' page for my school of choice
         When I submit the form
         Then I should see the validation error 'Select a degree stage'
-        And I should see the validation error 'Select a subject'
+        And I should see the validation error 'Enter a subject'
         Given I am on the 'education' page for my school of choice
         And I choose 'Other' as my degree stage
         When I submit the form

features/step_definitions/candidates/registrations/application_preview_steps.rb

@@ -66,7 +66,7 @@
 
 Given("I have filled in my education details successfully") do
   choose 'Graduate or postgraduate'
-  select 'Physics', from: 'What subject are you studying?'
+  fill_in "What subject are you studying?", with: "Physics"
   click_button 'Continue'
   expect(page.current_path).to eq \
     "/candidates/schools/#{@school.urn}/registrations/teaching_preference/new"

features/step_definitions/candidates/registrations/education_steps.rb

@@ -1,6 +1,6 @@
 Given("I make my degree selection") do
   choose 'Graduate or postgraduate'
-  select 'Physics', from: 'What subject are you studying?'
+  fill_in "What subject are you studying?", with: "Physics"
 end
 
 Given("I have completed the Education step") do

features/step_definitions/candidates/registrations/subject_preferences_steps.rb

@@ -1,6 +1,6 @@
 Given("I make my degree and teaching preference selections") do
   choose 'Graduate or postgraduate'
-  select 'Physics', from: 'What subject are you studying?'
+  fill_in "What subject are you studying?", with: "Physics"
   choose 'I want to become a teacher'
   select 'Physics', from: 'First choice'
   select 'Mathematics', from: 'Second choice'

features/step_definitions/candidates/registrations/wizard_steps.rb

@@ -38,16 +38,16 @@
 Given("I have completed the education form") do
   visit path_for 'education', school: @school
   choose 'Graduate or postgraduate'
+
   subject_field = find_field("What subject are you studying?")
-  if subject_field.tag_name == "select"
-    # When javascript is disabled, the autocomplete becomes a simple option list
-    # which we can simply select from
-    subject_field.select "Physics"
-  else
-    # Otherwise we should fill-in the value like an input box, and then press
-    # tab or enter to advance to the next field after filling-in
-    subject_field.fill_in(with: "Physics").send_keys :tab
+  subject_field.fill_in(with: "Physics")
+
+  unless subject_field.native.is_a?(Nokogiri::XML::Element)
+    # Unless we are using the standard rack-test driver (which does not support
+    # javascript), we need to change the focus off the control before continuing
+    subject_field.send_keys :tab
   end
+
   click_button 'Continue'
 end
 

spec/features/candidates/api_registrations_spec.rb

@@ -137,7 +137,7 @@ def complete_education_step
 
     # Submit registrations/education form successfully
     choose 'Graduate or postgraduate'
-    select("Physics", from: "What subject are you studying?")
+    fill_in "What subject are you studying?", with: "Physics"
     click_button 'Continue'
   end