Add test for external HTML artifact

app/assets/javascripts/lib/utils/url_utility.js

@@ -90,7 +90,7 @@ w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
 // eslint-disable-next-line import/prefer-default-export
 export function visitUrl(url, external = false) {
   if (external) {
-    // Simulate `target="blank" ref="noopener noreferrer"`
+    // Simulate `target="blank" rel="noopener noreferrer"`
     // See https://mathiasbynens.github.io/rel-noopener/
     const otherWindow = window.open();
     otherWindow.opener = null;

app/views/projects/artifacts/_tree_file.html.haml

@@ -12,6 +12,6 @@
         title: ('Opens in a new window' if is_external_link) do
       %span.str-truncated>= blob.name
     - if is_external_link
-      = icon('external-link')
+      = icon('external-link', class: 'js-artifact-tree-external-icon')
   %td
     = number_to_human_size(blob.size, precision: 2)

spec/features/projects/artifacts/browse_spec.rb

@@ -1,19 +1,20 @@
 require 'spec_helper'
 
 feature 'Browse artifact', :js do
+  include ArtifactHelper
+
   let(:project) { create(:project, :public) }
   let(:pipeline) { create(:ci_empty_pipeline, project: project) }
   let(:job) { create(:ci_build, :artifacts, pipeline: pipeline) }
+  let(:browse_url) do
+    browse_path('other_artifacts_0.1.2')
+  end
 
   def browse_path(path)
     browse_project_job_artifacts_path(project, job, path)
   end
 
   context 'when visiting old URL' do
-    let(:browse_url) do
-      browse_path('other_artifacts_0.1.2')
-    end
-
     before do
       visit browse_url.sub('/-/jobs', '/builds')
     end
@@ -22,4 +23,23 @@ feature 'Browse artifact', :js do
       expect(page.current_path).to eq(browse_url)
     end
   end
+
+  context 'when browsing a directory with an HTML file' do
+    let(:html_entry) { job.artifacts_metadata_entry("other_artifacts_0.1.2/index.html") }
+
+    before do
+      allow(Gitlab.config.pages).to receive(:enabled).and_return(true)
+      allow(Gitlab.config.pages).to receive(:artifacts_server).and_return(true)
+
+      visit browse_url
+    end
+
+    it "shows external link icon and styles" do
+      link = first('.tree-item-file-external-link')
+
+      expect(link).to have_content('index.html')
+      expect(link[:href]).to eq(html_artifact_url(project, job, html_entry.blob))
+      expect(page).to have_selector('.js-artifact-tree-external-icon')
+    end
+  end
 end