Fix image URLs in build

Vite is supposed to prefix asset [1] URLs with the base / origin, and
you can see this working for url() in CSS (otherwise the Wikidata logo
would be broken), but due to vitejs/vite-plugin-vue#85 [2] this doesn’t
work for <img> src= attributes. Work around it by importing the
importing the files and then using that URL dynamically. (In the tests,
we need to map those imports to a fake module so Jest doesn’t try to
load the real file content as JS source.)

[1]: https://vitejs.dev/guide/assets.html
[2]: vitejs/vite-plugin-vue#85

Bug: T335754
Change-Id: Ie3c1cf9c225c646b2f7d94727a634e9ff78aad4e

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
 	collectCoverageFrom: [ 'src/**/*.{ts,vue}' ],
 	moduleNameMapper: {
 		'^@/(.*)$': '<rootDir>/src/$1',
+		'/img/(.*)$': '<rootDir>/tests/config/fileMock.js',
 	},
 	transform: {
 		'.*\\.(vue)$': '@vue/vue2-jest',

src/components/LanguageSelector.vue

@@ -3,7 +3,7 @@
 		<div class="languageSelector__mobile-header">
 			<span>{{ $i18n( 'query-builder-language-selector-mobile-header' ) }}</span>
 			<button @click="onCloseMenu">
-				<img src="/img/close.svg" :alt="$i18n( 'query-builder-language-selector-close-button-label' )">
+				<img :src="closeUrl" :alt="$i18n( 'query-builder-language-selector-close-button-label' )">
 			</button>
 		</div>
 		<LanguageSelectorInput
@@ -37,6 +37,7 @@ import LanguageSelectorOptionsMenu from '@/components/LanguageSelectorOptionsMen
 import Language from '@/data-model/Language';
 import Vue from 'vue';
 import languagedata from '@wikimedia/language-data';
+import closeUrl from '/img/close.svg';
 
 export default Vue.extend( {
 	name: 'LanguageSelector',
@@ -47,6 +48,7 @@ export default Vue.extend( {
 	data: () => ( {
 		searchInput: '',
 		highlightedIndex: -1,
+		closeUrl,
 	} ),
 	computed: {
 		languages(): Language[] {

src/components/LanguageSelectorInput.vue

@@ -2,7 +2,7 @@
 	<div class="languageSelector__input__wrapper">
 		<div class="languageSelector__input-left-side">
 			<div class="languageSelector__input__search-icon">
-				<img src="/img/search.svg" alt="">
+				<img :src="searchUrl" alt="">
 			</div>
 			<input
 				ref="input"
@@ -23,13 +23,15 @@
 			:class="clearBtnVisible ? 'languageSelector__input__clear-button--visible' : ''"
 			@click="onClearInputValue"
 		>
-			<img src="/img/clear.svg" :alt="$i18n( 'query-builder-language-selector-clear-button-label' )">
+			<img :src="clearUrl" :alt="$i18n( 'query-builder-language-selector-clear-button-label' )">
 		</button>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import searchUrl from '/img/search.svg';
+import clearUrl from '/img/clear.svg';
 
 export default Vue.extend( {
 	name: 'LanguageSelectorInput',
@@ -43,6 +45,12 @@ export default Vue.extend( {
 			default: '',
 		},
 	},
+	data() {
+		return {
+			searchUrl,
+			clearUrl,
+		};
+	},
 	computed: {
 		clearBtnVisible(): boolean {
 			return this.value.length > 0;

tests/config/fileMock.js

@@ -0,0 +1 @@
+module.exports = '';