Merge branch 'ml-qa-add-welcome-images-test' into 'master'

Add E2E test of broken images on welcome page

See merge request gitlab-org/gitlab!19924

app/views/dashboard/projects/_zero_authorized_projects.html.haml

@@ -3,7 +3,7 @@
     .container.section-body
       .row
         .blank-state-welcome.w-100
-          %h2.blank-state-welcome-title
+          %h2.blank-state-welcome-title{ data: { qa_selector: 'welcome_title_content' } }
             = _('Welcome to GitLab')
           %p.blank-state-text
             = _('Faster releases. Better code. Less pain.')

qa/qa.rb

@@ -165,6 +165,7 @@ module QA
     module Dashboard
       autoload :Projects, 'qa/page/dashboard/projects'
       autoload :Groups, 'qa/page/dashboard/groups'
+      autoload :Welcome, 'qa/page/dashboard/welcome'
 
       module Snippet
         autoload :New, 'qa/page/dashboard/snippet/new'

qa/qa/page/base.rb

@@ -135,6 +135,40 @@ module QA
         has_no_css?('.fa-spinner.block-loading', wait: Capybara.default_max_wait_time)
       end
 
+      def has_loaded_all_images?
+        # I don't know of a foolproof way to wait for all images to load
+        # This loop gives time for the img tags to be rendered and for
+        # images to start loading.
+        previous_total_images = 0
+        wait(interval: 1) do
+          current_total_images = all("img").size
+          result = previous_total_images == current_total_images
+          previous_total_images = current_total_images
+          result
+        end
+
+        # Retry until all images found can be fetched via HTTP, and
+        # check that the image has a non-zero natural width (a broken
+        # img tag could have a width, but wouldn't have a natural width)
+
+        # Unfortunately, this doesn't account for SVGs. They're rendered
+        # as HTML, so there doesn't seem to be a way to check that they
+        # display properly via Selenium. However, if the SVG couldn't be
+        # rendered (e.g., because the file doesn't exist), the whole page
+        # won't display properly, so we should catch that with the test
+        # this method is called from.
+
+        # The user's avatar is an img, which could be a gravatar image,
+        # so we skip that by only checking for images hosted internally
+        retry_until(sleep_interval: 1) do
+          all("img").all? do |image|
+            next true unless URI(image['src']).host == URI(page.current_url).host
+
+            asset_exists?(image['src']) && image['naturalWidth'].to_i > 0
+          end
+        end
+      end
+
       def wait_for_animated_element(name)
         # It would be ideal if we could detect when the animation is complete
         # but in some cases there's nothing we can easily access via capybara

qa/qa/page/dashboard/welcome.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Dashboard
+      class Welcome < Page::Base
+        view 'app/views/dashboard/projects/_zero_authorized_projects.html.haml' do
+          element :welcome_title_content
+        end
+
+        def has_welcome_title?(text)
+          has_element?(:welcome_title_content, text: text)
+        end
+      end
+    end
+  end
+end

qa/qa/resource/user.rb

@@ -7,13 +7,14 @@ module QA
     class User < Base
       attr_reader :unique_id
       attr_writer :username, :password
-      attr_accessor :provider, :extern_uid
+      attr_accessor :admin, :provider, :extern_uid
 
       attribute :id
       attribute :name
       attribute :email
 
       def initialize
+        @admin = false
         @unique_id = SecureRandom.hex(8)
       end
 
@@ -75,6 +76,16 @@ module QA
         super
       end
 
+      def api_delete
+        super
+
+        QA::Runtime::Logger.debug("Deleted user '#{username}'") if Runtime::Env.debug?
+      end
+
+      def api_delete_path
+        "/users/#{id}"
+      end
+
       def api_get_path
         "/users/#{fetch_id(username)}"
       end
@@ -85,6 +96,7 @@ module QA
 
       def api_post_body
         {
+          admin: admin,
           email: email,
           password: password,
           username: username,

qa/qa/specs/features/browser_ui/1_manage/project/dashboard_images_spec.rb

+# frozen_string_literal: true
+
+require 'nokogiri'
+
+module QA
+  context 'Manage' do
+    describe 'Check for broken images', :requires_admin do
+      before(:context) do
+        admin = QA::Resource::User.new.tap do |user|
+          user.username = QA::Runtime::User.admin_username
+          user.password = QA::Runtime::User.admin_password
+        end
+        @api_client = Runtime::API::Client.new(:gitlab, user: admin)
+        @new_user = Resource::User.fabricate_via_api! do |user|
+          user.api_client = @api_client
+        end
+        @new_admin = Resource::User.fabricate_via_api! do |user|
+          user.admin = true
+          user.api_client = @api_client
+        end
+
+        Page::Main::Menu.perform(&:sign_out_if_signed_in)
+      end
+
+      after(:context) do
+        @new_user.remove_via_api!
+        @new_admin.remove_via_api!
+      end
+
+      shared_examples 'loads all images' do
+        it 'loads all images' do
+          Runtime::Browser.visit(:gitlab, Page::Main::Login)
+          Page::Main::Login.perform { |login| login.sign_in_using_credentials(user: new_user) }
+
+          Page::Dashboard::Welcome.perform do |welcome|
+            expect(welcome).to have_welcome_title("Welcome to GitLab")
+
+            # This would be better if it were a visual validation test
+            expect(welcome).to have_loaded_all_images
+          end
+        end
+      end
+
+      context 'when logged in as a new user' do
+        it_behaves_like 'loads all images' do
+          let(:new_user) { @new_user }
+        end
+      end
+
+      context 'when logged in as a new admin' do
+        it_behaves_like 'loads all images' do
+          let(:new_user) { @new_admin }
+        end
+      end
+    end
+  end
+end