Refactor temperature, UV and pollen predictions

app/components/prediction_component.html.erb

@@ -1,11 +1,11 @@
 <div class="prediction py-4 <%= name_for_class %> <%= daqi_level_for_class %> border-b border-gray-400">
   <div class="summary flex flex-row">
     <dt class="name w-1/2">
-      <%= @prediction.name %>
+      <%= name_for_label %>
     </dt>
     <dd class="flex flex-row w-1/2">
       <div class=" -mt-1 daqi-indicator <%= daqi_level_for_class %> <%= daqi_indicator_colour %> text-2xl">●</div>
-      <div class=" daqi-label font-bold ml-1 w-4/5"><%= @prediction.daqi_label %></div>
+      <div class=" daqi-label font-bold ml-1 w-4/5"><%= daqi_level_for_label %></div>
       <div class="control"><%= render partial: "shared/icons/chevron_down" %></div>
     </dd>
   </div>

app/components/prediction_component.rb

@@ -9,10 +9,18 @@ def name_for_class
     @prediction.name.parameterize
   end
 
+  def name_for_label
+    @prediction.name
+  end
+
   def daqi_level_for_class
     @prediction.daqi_level.to_s.parameterize
   end
 
+  def daqi_level_for_label
+    @prediction.daqi_label
+  end
+
   def daqi_indicator_colour
     case @prediction.daqi_level
     when :low

app/models/pollen_prediction.rb

@@ -7,6 +7,10 @@ def initialize(value)
     @value = value
   end
 
+  def name
+    "Pollen"
+  end
+
   def guidance
     I18n.t("prediction.guidance.pollen.#{daqi_level}")
   end

app/models/temperature_prediction.rb

@@ -6,6 +6,10 @@ def initialize(min:, max:)
     @max = max
   end
 
+  def name
+    "Temperature"
+  end
+
   # :nocov:
   def inspect
     "#<#{self.class.name} @min=#{min} @max=#{max}>"

app/models/uv_prediction.rb

@@ -7,6 +7,10 @@ def initialize(value)
     @value = value
   end
 
+  def name
+    "Ultravoilet rays (UV)"
+  end
+
   def guidance
     I18n.t("prediction.guidance.uv.#{daqi_level}")
   end

app/views/styled_forecasts/_predictions.html.erb

@@ -1,40 +1,5 @@
 <dl class="predictions p-4">
-  <div class="prediction py-4 uv border-b border-gray-400">
-    <div class="summary flex flex-row">
-      <dt class="w-1/2">Ultravoilet rays (UV)</dd>
-      <dd class="flex flex-row w-1/2">
-        <div class="daqi-indicator -mt-1 text-green-600 text-2xl">●</div>
-        <div class="daqi-label font-bold ml-1 w-4/5">Low</div>
-        <div class="control"><%= render partial: "shared/icons/chevron_down" %></div>
-      </dd>
-    </div>
-    <div class="details hidden">
-    </div>
-  </div>
-  <div class="prediction py-4 pollen border-b border-gray-400">
-    <div class="summary flex flex-row">
-      <dt class="w-1/2">Pollen</dd>
-      <dd class="flex flex-row w-1/2">
-        <div class=" -mt-1 daqi-indicator text-amber-300 text-2xl">●</div>
-        <div class=" daqi-label font-bold ml-1 w-4/5">Moderate</div>
-        <div class="control"><%= render partial: "shared/icons/chevron_down" %></div>
-      </dd>
-    </div>
-    <div class="details visible  bg-amber-50 p-4 mt-2">
-      <%= render partial: "details" %>
-    </div>
-  </div>
-  <div class="prediction py-4 temperature border-b border-gray-400">
-    <div class="summary flex flex-row">
-      <dt class="w-1/2">Temperature</dd>
-      <dd class="flex flex-row w-1/2">
-        <div class="daqi-indicator -mt-1 text-green-600 text-2xl">●</div>
-        <div class="daqi-label font-bold ml-1 w-4/5">Low</div>
-        <div class="control"><%= render partial: "shared/icons/chevron_down" %></div>
-      </dd>
-    </div>
-    <div class="details hidden">
-    </div>
-  </div>
-</div>
+  <%= render(PredictionComponent.new(prediction: @forecasts.first.uv)) %>
+  <%= render(PredictionComponent.new(prediction: @forecasts.first.pollen)) %>
+  <%= render "temperature_prediction", prediction: @forecasts.first.temperature %>
 </dl>

app/views/styled_forecasts/_temperature_prediction.html.erb

@@ -0,0 +1,9 @@
+  <div class="prediction py-4 temperature border-b border-gray-400">
+    <div class="summary flex flex-row">
+      <dt class="w-1/2"> <%= prediction.name %> </dt>
+      <dd class="flex flex-row w-1/2">
+        <div class="font-bold"><%= "#{prediction.min.round}°C - #{prediction.max.round}" %>°C</div>
+      </dd>
+    </div>
+  </div>
+

spec/feature_steps/forecast_steps.rb

@@ -88,6 +88,18 @@ def and_i_see_predicted_temperature_for_each_day
     expect_prediction(day: :day_after_tomorrow, category: :temperature, value: "27-31°C")
   end
 
+  def and_i_see_predicted_uv_level_v2
+    expect_prediction_v2(category: "ultravoilet-rays-uv", value: "Low")
+  end
+
+  def and_i_see_predicted_pollen_level_v2
+    expect_prediction_v2(category: :pollen, value: "Low")
+  end
+
+  def and_i_see_predicted_temperature_level_v2
+    expect_prediction_v2(category: :temperature, value: "-5°C - 4°C")
+  end
+
   def expect_prediction(day:, category:, value:)
     within(prediction_category(category)) do
       within("td[data-date='#{date(day)}']") do
@@ -96,6 +108,12 @@ def expect_prediction(day:, category:, value:)
     end
   end
 
+  def expect_prediction_v2(category:, value:)
+    within(".#{category}") do
+      find("dd", text: value)
+    end
+  end
+
   def expect_air_pollution_prediction(day:, value:)
     within("div[data-date='#{date(day)}']") do
       expect(page).to have_content(content_for_air_pollution(value))

spec/features/visitors/view_styled_forecasts_spec.rb

@@ -25,5 +25,8 @@
     when_i_select_view_forecasts_v2
     then_i_see_the_forecasts_page_v2
     and_i_see_predicted_air_pollution_status_for_each_day_v2
+    and_i_see_predicted_uv_level_v2
+    and_i_see_predicted_pollen_level_v2
+    and_i_see_predicted_temperature_level_v2
   end
 end