Maintenance: Mobile - Add tests for Home page

app/frontend/apps/mobile/components/layout/LayoutBottomNavigation.vue

@@ -17,7 +17,7 @@ const { user } = storeToRefs(useSessionStore())
       class="flex flex-1 justify-center"
       exact-active-class="text-blue"
     >
-      <CommonIcon name="home" size="small" active-class="text-blue" />
+      <CommonIcon name="home" size="small" />
     </CommonLink>
     <CommonLink link="/notifications" class="flex flex-1 justify-center">
       <CommonIcon name="bell" size="medium" />

app/frontend/shared/components/CommonIcon/CommonIcon.vue

@@ -69,6 +69,6 @@ const finalSize = computed(() => {
     :aria-hidden="decorative"
     @click="onClick"
   >
-    <use :xlink:href="`#icon-${name}`" />
+    <use :href="`#icon-${name}`" />
   </svg>
 </template>

app/frontend/tests/support/components/iconQueries.ts

@@ -16,7 +16,7 @@ export const queryAllIconsByName = (
   if (typeof matcher === 'string') {
     id = `#icon-${matcher}`
   }
-  return queryAllByAttribute(`xlink:href`, container, id).map(
+  return queryAllByAttribute(`href`, container, id).map(
     (el) => el.parentElement as HTMLElement,
   )
 }

spec/support/capybara/browser_test_helper.rb

@@ -58,6 +58,16 @@ module BrowserTestHelper
     find(*args).click
   end
 
+  # Finds svg icon in Mobile View
+  #
+  # @example
+  #  icon = find_icon('home')
+  #  icon.click
+  #
+  def find_icon(name)
+    find("[href=\"#icon-#{name}\"]").find(:xpath, '..')
+  end
+
   # This is a wrapper around the Selenium::WebDriver::Wait class
   # with additional methods.
   # @see BrowserTestHelper::Waiter

spec/system/apps/mobile/home_spec.rb

@@ -0,0 +1,36 @@
+# Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+require 'rails_helper'
+
+RSpec.describe 'Mobile > App Home Page', type: :system, app: :mobile do
+  context 'when on the home page', authenticated_as: :admin do
+    let(:admin) { create(:admin) }
+
+    before do
+      visit '/mobile/'
+    end
+
+    it 'clicking on plus icon opens creating ticket' do
+      icon = find_icon 'plus'
+      icon.click
+      expect_current_route 'ticket/create'
+    end
+
+    it '"all tickets" leads to tickets list' do
+      tickets_link = find('a', text: 'All Tickets')
+      expect(tickets_link[:href]).to match(%r{/mobile/tickets})
+    end
+
+    it 'home icon is highlighted on home page' do
+      expect(page).to have_css('a[href="/mobile/"].text-blue')
+    end
+
+    it 'footer has my avatar' do
+      me = find('a[href="/user"]')
+      firstname = admin.firstname.first
+      lastname = admin.lastname.first
+      expect(me.text).to match("#{firstname}#{lastname}")
+    end
+
+  end
+end