Fix aria label on IDE tab close button

Previously we were not passing the right arguments
to sprintf. This also adds unit tests to cover this bug.

app/assets/javascripts/ide/components/repo_tab.vue

@@ -29,9 +29,9 @@ export default {
     ...mapGetters(['getUrlForPath']),
     closeLabel() {
       if (this.fileHasChanged) {
-        return sprintf(__(`%{tabname} changed`), { tabname: this.tab.name });
+        return sprintf(__('%{tabname} changed'), { tabname: this.tab.name });
       }
-      return sprintf(__(`Close %{tabname}`, { tabname: this.tab.name }));
+      return sprintf(__('Close %{tabname}'), { tabname: this.tab.name });
     },
     showChangedIcon() {
       if (this.tab.pending) return true;

changelogs/unreleased/222507-ide-move-file-editor-props.yml

+---
+title: Fix aria label on IDE tab close button
+merge_request: 45709
+author:
+type: fixed

spec/features/ide/user_sees_editor_info_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'IDE user sees editor info', :js do
+  include WebIdeSpecHelpers
+
+  let_it_be(:project) { create(:project, :public, :repository) }
+  let_it_be(:user) { project.owner }
+
+  before do
+    sign_in(user)
+
+    ide_visit(project)
+  end
+
+  it 'shows line position' do
+    ide_open_file('README.md')
+
+    within find('.ide-status-bar') do
+      expect(page).to have_content('1:1')
+    end
+
+    ide_set_editor_position(4, 10)
+
+    within find('.ide-status-bar') do
+      expect(page).not_to have_content('1:1')
+      expect(page).to have_content('4:10')
+    end
+  end
+
+  it 'updates after rename' do
+    ide_open_file('README.md')
+    ide_set_editor_position(4, 10)
+
+    within find('.ide-status-bar') do
+      expect(page).to have_content('markdown')
+      expect(page).to have_content('4:10')
+    end
+
+    ide_rename_file('README.md', 'READMEZ.txt')
+
+    within find('.ide-status-bar') do
+      expect(page).to have_content('plaintext')
+      expect(page).to have_content('1:1')
+    end
+  end
+
+  it 'persists position' do
+    ide_open_file('README.md')
+    ide_set_editor_position(4, 10)
+
+    ide_close_file('README.md')
+    ide_open_file('README.md')
+
+    within find('.ide-status-bar') do
+      expect(page).to have_content('markdown')
+      expect(page).to have_content('4:10')
+    end
+  end
+
+  it 'persists viewer' do
+    ide_open_file('README.md')
+    click_link('Preview Markdown')
+
+    within find('.md-previewer') do
+      expect(page).to have_content('testme')
+    end
+
+    # Switch away from and back to the file
+    ide_open_file('.gitignore')
+    ide_open_file('README.md')
+
+    # Preview is still enabled
+    within find('.md-previewer') do
+      expect(page).to have_content('testme')
+    end
+  end
+end

spec/frontend/ide/components/repo_tab_spec.js

@@ -100,6 +100,18 @@ describe('RepoTab', () => {
     expect(wrapper.find('.file-modified').exists()).toBe(true);
   });
 
+  it.each`
+    tabProps             | closeLabel
+    ${{}}                | ${'Close foo.txt'}
+    ${{ changed: true }} | ${'foo.txt changed'}
+  `('close button has label ($closeLabel) with tab ($tabProps)', ({ tabProps, closeLabel }) => {
+    const tab = { ...file('foo.txt'), ...tabProps };
+
+    createComponent({ tab });
+
+    expect(wrapper.find('button').attributes('aria-label')).toBe(closeLabel);
+  });
+
   describe('locked file', () => {
     let f;
 

spec/support/helpers/features/web_ide_spec_helpers.rb

@@ -22,6 +22,8 @@ module WebIdeSpecHelpers
     click_link('Web IDE')
 
     wait_for_requests
+
+    save_monaco_editor_reference
   end
 
   def ide_tree_body
@@ -36,8 +38,8 @@ module WebIdeSpecHelpers
     ".js-ide-#{mode}-mode"
   end
 
-  def ide_file_row_open?(row)
-    row.matches_css?('.is-open')
+  def ide_folder_row_open?(row)
+    row.matches_css?('.folder.is-open')
   end
 
   # Creates a file in the IDE by expanding directories
@@ -63,6 +65,17 @@ module WebIdeSpecHelpers
     ide_set_editor_value(content)
   end
 
+  def ide_rename_file(path, new_path)
+    container = ide_traverse_to_file(path)
+
+    click_file_action(container, 'Rename/Move')
+
+    within '#ide-new-entry' do
+      find('input').fill_in(with: new_path)
+      click_button('Rename file')
+    end
+  end
+
   # Deletes a file by traversing to `path`
   # then clicking the 'Delete' action.
   #
@@ -90,8 +103,22 @@ module WebIdeSpecHelpers
     container
   end
 
+  def ide_close_file(name)
+    within page.find('.multi-file-tabs') do
+      click_button("Close #{name}")
+    end
+  end
+
+  def ide_open_file(path)
+    row = ide_traverse_to_file(path)
+
+    ide_open_file_row(row)
+
+    wait_for_requests
+  end
+
   def ide_open_file_row(row)
-    return if ide_file_row_open?(row)
+    return if ide_folder_row_open?(row)
 
     row.click
   end
@@ -103,6 +130,10 @@ module WebIdeSpecHelpers
     execute_script("monaco.editor.getModel('#{uri}').setValue('#{escape_javascript(value)}')")
   end
 
+  def ide_set_editor_position(line, col)
+    execute_script("TEST_EDITOR.setPosition(#{{ lineNumber: line, column: col }.to_json})")
+  end
+
   def ide_editor_value
     editor = find('.monaco-editor')
     uri = editor['data-uri']
@@ -149,4 +180,8 @@ module WebIdeSpecHelpers
       wait_for_requests
     end
   end
+
+  def save_monaco_editor_reference
+    evaluate_script("monaco.editor.onDidCreateEditor(editor => { window.TEST_EDITOR = editor; })")
+  end
 end