From 4621760b39eb7089a4467b5e44bd3dd86be0bccb Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Mon, 5 Jun 2023 16:23:52 +0200
Subject: [PATCH] Fix image URLs in build
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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]: https://github.com/vitejs/vite-plugin-vue/issues/85

Bug: T335754
Change-Id: Ie3c1cf9c225c646b2f7d94727a634e9ff78aad4e
---
 jest.config.js                           |  1 +
 src/components/LanguageSelector.vue      |  4 +++-
 src/components/LanguageSelectorInput.vue | 12 ++++++++++--
 tests/config/fileMock.js                 |  1 +
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 tests/config/fileMock.js

diff --git a/jest.config.js b/jest.config.js
index 3494acd7..2ad83b42 100644
--- a/jest.config.js
+++ b/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',
diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
index fa040d5c..673296e9 100644
--- a/src/components/LanguageSelector.vue
+++ b/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[] {
diff --git a/src/components/LanguageSelectorInput.vue b/src/components/LanguageSelectorInput.vue
index c701f7ab..203eb780 100644
--- a/src/components/LanguageSelectorInput.vue
+++ b/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;
diff --git a/tests/config/fileMock.js b/tests/config/fileMock.js
new file mode 100644
index 00000000..9dc5fc1e
--- /dev/null
+++ b/tests/config/fileMock.js
@@ -0,0 +1 @@
+module.exports = '';