Use custom translations in components

In the `i18n_translation` initializer, we're overwriting the `t` helper
so calling it uses custom translations if they're available.

However, ViewComponent doesn't use the `t` helper but implements its own
`t` method. So, when calling the `t` method in a component, we weren't
using our implementation of the `t` helper, and so we weren't loading
custom translations.

Using the `t` helper in components solves the issue.

There was a test where we were directly testing a method in a component,
and that method uses the `t` helper. This caused an error when running
the test:

ViewComponent::Base::ViewContextCalledBeforeRenderError:
`#helpers` can't be used during initialization, as it depends on the
view context that only exists once a ViewComponent is passed to the
Rails render pipeline.

Using `render_inline` in the test and testing the generated HTML, as
recommended in the ViewComponent documentation, solves the issue.

app/components/application_component.rb

@@ -1,5 +1,5 @@
 class ApplicationComponent < ViewComponent::Base
   include SettingsHelper
-  delegate :back_link_to, to: :helpers
+  delegate :back_link_to, :t, to: :helpers
   delegate :default_form_builder, to: :controller
 end

spec/components/application_component_spec.rb

@@ -0,0 +1,21 @@
+require "rails_helper"
+
+describe ApplicationComponent do
+  it "uses custom translations if present" do
+    I18nContent.update([{ id: "shared.yes", values: { "value_en" => "Affirmative" }}])
+
+    component_class = Class.new(ApplicationComponent) do
+      def call
+        t("shared.yes")
+      end
+
+      def self.name
+        ""
+      end
+    end
+
+    render_inline component_class.new
+
+    expect(page).to be_rendered with: "<p>Affirmative</p>"
+  end
+end

spec/components/sdg/related_list_selector_component_spec.rb

@@ -47,38 +47,44 @@ describe SDG::RelatedListSelectorComponent do
   end
 
   describe "#suggestion_tag_for" do
-    it "return suggestion tag for goal" do
+    it "sets suggestion tags for goals" do
-      suggestion = component.suggestion_tag_for(SDG::Goal[1])
+      allow(component).to receive(:goals_and_targets).and_return([SDG::Goal[1]])
 
-      expect(suggestion).to eq({
+      render_inline component
+
+      expect(page.find_field("Goals and Targets")["data-suggestions-list"]).to eq([{
         tag: "1. No Poverty",
         display_text: "SDG1",
         title: "No Poverty",
         value: 1
-      })
+      }].to_json)
     end
 
-    it "returns suggestion tag for global target" do
+    it "sets suggestion tags for global targets" do
-      suggestion = component.suggestion_tag_for(SDG::Target[1.1])
+      allow(component).to receive(:goals_and_targets).and_return([SDG::Target[1.1]])
 
-      expect(suggestion).to eq({
+      render_inline component
+
+      expect(page.find_field("Goals and Targets")["data-suggestions-list"]).to eq([{
         tag: "1.1. Eradicate Extreme Poverty",
         display_text: "1.1",
         title: "By 2030, eradicate extreme poverty for all people everywhere, currently measured as people living on less than $1.25 a day",
         value: "1.1"
-      })
+      }].to_json)
     end
 
-    it "returns suggestion tag for local target" do
+    it "sets suggestion tags for local targets" do
       create(:sdg_local_target, code: "1.1.1", title: "By 2030, eradicate extreme custom text")
-      suggestion = component.suggestion_tag_for(SDG::LocalTarget["1.1.1"])
+      allow(component).to receive(:goals_and_targets).and_return([SDG::LocalTarget["1.1.1"]])
 
-      expect(suggestion).to eq({
+      render_inline component
+
+      expect(page.find_field("Goals and Targets")["data-suggestions-list"]).to eq([{
         tag: "1.1.1. By 2030 eradicate extreme custom text",
         display_text: "1.1.1",
         title: "By 2030, eradicate extreme custom text",
         value: "1.1.1"
-      })
+      }].to_json)
     end
   end
 end