From efc69e8663422fa264d0c963ec50897b18b7bfd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 29 Jan 2023 04:34:45 +0100 Subject: [PATCH] Extract component for remote translations button So we're consistent with the rest of the code in the header, which renders components and not partials. --- app/assets/stylesheets/layout.scss | 20 ------ .../layout/remote_translations_button.scss | 19 ++++++ ...te_translations_button_component.html.erb} | 2 +- .../remote_translations_button_component.rb | 20 ++++++ app/helpers/remote_translations_helper.rb | 11 ---- app/views/layouts/_header.html.erb | 4 +- ...mote_translations_button_component_spec.rb | 65 +++++++++++++++++++ spec/system/remote_translations_spec.rb | 62 ------------------ 8 files changed, 106 insertions(+), 97 deletions(-) create mode 100644 app/assets/stylesheets/layout/remote_translations_button.scss rename app/{views/shared/_remote_translations_button.html.erb => components/layout/remote_translations_button_component.html.erb} (86%) create mode 100644 app/components/layout/remote_translations_button_component.rb delete mode 100644 app/helpers/remote_translations_helper.rb create mode 100644 spec/components/layout/remote_translations_button_component_spec.rb delete mode 100644 spec/system/remote_translations_spec.rb diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index e3b2837e3..788d8d975 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -514,26 +514,6 @@ body > header, border-bottom: 1px solid #fff; } - .remote-translations-button { - - &.callout { - margin: 0; - padding: rem-calc(6); - - [type="submit"] { - @include brand-color; - background: none; - border: 0; - cursor: pointer; - font-weight: bold; - - &:hover { - text-decoration: underline; - } - } - } - } - .external-links { padding: rem-calc(6) 0; text-align: center; diff --git a/app/assets/stylesheets/layout/remote_translations_button.scss b/app/assets/stylesheets/layout/remote_translations_button.scss new file mode 100644 index 000000000..f4a6db706 --- /dev/null +++ b/app/assets/stylesheets/layout/remote_translations_button.scss @@ -0,0 +1,19 @@ +.remote-translations-button { + + &.callout { + margin: 0; + padding: rem-calc(6); + + [type="submit"] { + @include brand-color; + background: none; + border: 0; + cursor: pointer; + font-weight: bold; + + &:hover { + text-decoration: underline; + } + } + } +} diff --git a/app/views/shared/_remote_translations_button.html.erb b/app/components/layout/remote_translations_button_component.html.erb similarity index 86% rename from app/views/shared/_remote_translations_button.html.erb rename to app/components/layout/remote_translations_button_component.html.erb index 83f805fce..478f61459 100644 --- a/app/views/shared/_remote_translations_button.html.erb +++ b/app/components/layout/remote_translations_button_component.html.erb @@ -1,5 +1,5 @@
- <% if display_remote_translation_button?(remote_translations) %> + <% if display_remote_translation_button? %> <%= form_tag remote_translations_path do %> <%= hidden_field_tag :remote_translations, remote_translations.to_json %> <%= t("remote_translations.text") %> diff --git a/app/components/layout/remote_translations_button_component.rb b/app/components/layout/remote_translations_button_component.rb new file mode 100644 index 000000000..ebae39d23 --- /dev/null +++ b/app/components/layout/remote_translations_button_component.rb @@ -0,0 +1,20 @@ +class Layout::RemoteTranslationsButtonComponent < ApplicationComponent + attr_reader :remote_translations + + def initialize(remote_translations) + @remote_translations = remote_translations + end + + def render? + remote_translations.present? && + RemoteTranslations::Microsoft::AvailableLocales.include_locale?(I18n.locale) + end + + private + + def display_remote_translation_button? + remote_translations.none? do |remote_translation| + RemoteTranslation.remote_translation_enqueued?(remote_translation) + end + end +end diff --git a/app/helpers/remote_translations_helper.rb b/app/helpers/remote_translations_helper.rb deleted file mode 100644 index 90d8b7335..000000000 --- a/app/helpers/remote_translations_helper.rb +++ /dev/null @@ -1,11 +0,0 @@ -module RemoteTranslationsHelper - def display_remote_translation_info?(remote_translations, locale) - remote_translations.present? && RemoteTranslations::Microsoft::AvailableLocales.include_locale?(locale) - end - - def display_remote_translation_button?(remote_translations) - remote_translations.none? do |remote_translation| - RemoteTranslation.remote_translation_enqueued?(remote_translation) - end - end -end diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index f55bb1031..183b60fe5 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,7 +1,5 @@
- <% if display_remote_translation_info?(@remote_translations, I18n.locale) %> - <%= render "shared/remote_translations_button", remote_translations: @remote_translations %> - <% end %> + <%= render Layout::RemoteTranslationsButtonComponent.new(@remote_translations) %>
<%= render Layout::LocaleSwitcherComponent.new %> diff --git a/spec/components/layout/remote_translations_button_component_spec.rb b/spec/components/layout/remote_translations_button_component_spec.rb new file mode 100644 index 000000000..f60544500 --- /dev/null +++ b/spec/components/layout/remote_translations_button_component_spec.rb @@ -0,0 +1,65 @@ +require "rails_helper" + +describe Layout::RemoteTranslationsButtonComponent do + let(:translations) { [{}] } + let(:component) { Layout::RemoteTranslationsButtonComponent.new(translations) } + + before do + allow(RemoteTranslations::Microsoft::AvailableLocales).to receive(:available_locales) + .and_return(%w[de en es fr pt zh-Hans]) + end + + context "locale with English as a fallback" do + before do + allow(I18n.fallbacks).to receive(:[]).and_return([:en]) + Globalize.set_fallbacks_to_all_available_locales + end + + it "displays the text in English" do + I18n.with_locale(:de) { render_inline component } + + expect(page).to have_css ".remote-translations-button" + expect(page).to have_content "The content of this page is not available in your language" + end + + it "displays the text in English with a locale needing parsing" do + I18n.with_locale(:"zh-CN") { render_inline component } + + expect(page).to have_css ".remote-translations-button" + expect(page).to have_content "The content of this page is not available in your language" + end + end + + context "locale with Spanish as a fallback" do + before do + allow(I18n.fallbacks).to receive(:[]).and_return([:es]) + Globalize.set_fallbacks_to_all_available_locales + end + + it "displays the text in Spanish" do + I18n.with_locale(:fr) { render_inline component } + + expect(page).to have_css ".remote-translations-button" + expect(page).to have_content "El contenido de esta página no está disponible en tu idioma" + end + + it "displays the text in Spanish with a locale needing parsing" do + I18n.with_locale(:"pt-BR") { render_inline component } + + expect(page).to have_css ".remote-translations-button" + expect(page).to have_content "El contenido de esta página no está disponible en tu idioma" + end + end + + it "is not rendered when the locale isn't included in microsoft translate client" do + I18n.with_locale(:nl) { render_inline component } + + expect(page).not_to be_rendered + end + + it "is not rendered when there aren't any remote translations" do + render_inline Layout::RemoteTranslationsButtonComponent.new([]) + + expect(page).not_to be_rendered + end +end diff --git a/spec/system/remote_translations_spec.rb b/spec/system/remote_translations_spec.rb deleted file mode 100644 index 58759584c..000000000 --- a/spec/system/remote_translations_spec.rb +++ /dev/null @@ -1,62 +0,0 @@ -require "rails_helper" - -describe "Remote Translations" do - before do - Setting["feature.remote_translations"] = true - create(:proposal) - available_locales_response = %w[de en es fr pt zh-Hans] - expect(RemoteTranslations::Microsoft::AvailableLocales).to receive(:available_locales).at_most(2).times. - and_return(available_locales_response) - allow(Rails.application.secrets).to receive(:microsoft_api_key).and_return("123") - end - - describe "Display remote translation button when locale is included in microsoft translate client" do - context "with locale that has :en fallback" do - before do - allow(I18n.fallbacks).to receive(:[]).and_return([:en]) - Globalize.set_fallbacks_to_all_available_locales - end - - scenario "should display text in English" do - visit root_path(locale: :de) - - expect(page).to have_css ".remote-translations-button" - expect(page).to have_content "The content of this page is not available in your language" - end - - scenario "should display text in English after parse key" do - visit root_path(locale: :"zh-CN") - - expect(page).to have_css ".remote-translations-button" - expect(page).to have_content "The content of this page is not available in your language" - end - end - - context "with locale that has :es fallback" do - before do - allow(I18n.fallbacks).to receive(:[]).and_return([:es]) - Globalize.set_fallbacks_to_all_available_locales - end - - scenario "should display text in Spanish" do - visit root_path(locale: :fr) - - expect(page).to have_css ".remote-translations-button" - expect(page).to have_content "El contenido de esta página no está disponible en tu idioma" - end - - scenario "should display text in Spanish after parse key" do - visit root_path(locale: :"pt-BR") - - expect(page).to have_css ".remote-translations-button" - expect(page).to have_content "El contenido de esta página no está disponible en tu idioma" - end - end - end - - scenario "Not display remote translation button when locale is not included in microsoft translate client" do - visit root_path(locale: :nl) - - expect(page).not_to have_css ".remote-translations-button" - end -end