Integration tests for live preview of display language

Bug: 53255

Change-Id: I1506ddd0ef68217ac114bdf4c29c62cd071b1900

resources/js/ext.uls.displaysettings.js

@@ -80,8 +80,6 @@
 
 		+ '</div>'; // End font settings section
 
-
-
 	function DisplaySettings( $parent ) {
 		this.name = $.i18n( 'ext-uls-display-settings-title-short' );
 		this.description = $.i18n( 'ext-uls-display-settings-desc' );

tests/browser/features/live_preview_of_display_language.feature

@@ -0,0 +1,46 @@
+@login @reset-preferences-after @en.wikipedia.beta.wmflabs.org @commons.wikimedia.beta.wmflabs.org
+Feature: Live preview of display language changes
+
+  Background:
+    Given I am logged in
+      And I set "English" as the interface language
+      And I am on a page with interlanguage links
+
+  Scenario: Display language change is previewed immediately
+    Given I open "Language" panel of language settings
+      And I click the button with the ellipsis
+      And in the language filter I type hi
+      And I click on the link to select Hindi
+    Then I should see the text in the language panel in Hindi
+
+  Scenario: Live preview of display language changes can be reverted on cancel
+    Given I open "Language" panel of language settings
+      And I select a language different than English for display language
+    When I click Cancel
+      And I open "Language" panel of language settings
+    Then I should see the text in the language panel in English
+
+  Scenario: Live preview of display language changes can be reverted on closing the dialog with the X button
+    Given I open "Language" panel of language settings
+      And I select a language different than English for display language
+    When I click X
+      And I open "Language" panel of language settings
+    Then I should see the text in the language panel in English
+
+  Scenario: Live preview of display language changes can be reverted on closing the dialog on cancel from a different section
+    Given I open "Language" panel of language settings
+      And I select a language different than English for display language
+      And I switch to "Input" panel of language settings
+    When I click Cancel
+      And I open "Language" panel of language settings
+    Then I should see the text in the language panel in English
+
+  Scenario: Font setting is reset after pressing "Cancel"
+    Given I open "Fonts" panel of language settings
+    When I set English font to OpenDyslexic
+      And I apply the changes
+      And I open "Fonts" panel of language settings
+      And I set English font to System
+      And I click Cancel
+    When I open "Fonts" panel of language settings
+    Then the selected content font must be OpenDyslexic

tests/browser/features/step_definitions/common_steps.rb

@@ -37,6 +37,8 @@ def language_to_code(language)
 		'fi'
 	when 'Hebrew'
 		'he'
+	when 'Hindi'
+		'hi'
 	else
 		pending
 	end

tests/browser/features/step_definitions/persistent_steps.rb

@@ -12,3 +12,28 @@ end
 Then(/^the selected interface font must be what I previously selected$/) do
 	on(PanelPage).select_font_for_interface.should == 'OpenDyslexic'
 end
+
+When(/^I set English font to System$/) do
+	on(PanelPage).select_font_for_content = 'System font'
+end
+
+And(/^I set English font to OpenDyslexic$/) do
+	on(PanelPage).select_font_for_content = 'OpenDyslexic'
+end
+
+Then(/^the selected content font must be OpenDyslexic$/) do
+	on(PanelPage).select_font_for_content.should == 'OpenDyslexic'
+end
+
+And(/^I select a language different than English for display language$/) do
+	on(PanelPage).other_language_button_element.click
+end
+
+And(/^I click on the link to select Hindi$/) do
+	on(InterlanguagePage).hindi_link_element.click
+end
+
+Then(/^I should see the text in the language panel in (.+?)$/) do |language|
+	code = language_to_code(language)
+	on(PanelPage).uls_display_settings_element.attribute_value('lang').should == code
+end

tests/browser/features/support/modules/interlanguage_module.rb

@@ -1,3 +1,4 @@
+# encoding: utf-8
 require "page-object"
 
 module InterlanguagePageModule
@@ -9,6 +10,7 @@ module InterlanguagePageModule
   span(:cog, class: 'uls-settings-trigger')
   button(:ellipsis_button, class: 'uls-more-languages button')
   a(:english_link, text: 'English')
+  a(:hindi_link, text: 'हिन्दी')
   div(:input_settings, id: 'input-settings-block')
 	div(:language_list, class: 'row uls-language-list lcd')
   text_field(:language_search, id: 'languagefilter')

tests/browser/features/support/pages/panel_page.rb

@@ -23,7 +23,7 @@ class PanelPage
 	select_list(:panel_interface_font_selector, id: 'ui-font-selector')
 
 	# TODO: Rename to match convention
-	button(:other_language_button, class: 'button uls-language-button')
+	button(:other_language_button, class: 'button uls-language-button', index: 1)
 	button(:default_language_button, class: 'button uls-language-button down')
 
 	# Triggers
@@ -33,6 +33,8 @@ class PanelPage
 	select(:select_font_for_interface, id: 'ui-font-selector')
 	select(:select_font_for_content, id: 'content-font-selector')
 
+	div(:uls_display_settings, class: 'uls-display-settings')
+
 	# Is there way to access the html element?
 	div(:interface, id: 'footer')
 end