Page MenuHomePhabricator

[L] Migrate MachineVision's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
Closed, ResolvedPublic

Event Timeline

CBogen renamed this task from Migrate MachineVision's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode to [L] Migrate MachineVision's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode.Feb 23 2022, 5:22 PM

Change 767781 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/MachineVision@master] Migrate Test to use Vue 3 compatibility Mode

https://gerrit.wikimedia.org/r/767781

SimoneThisDot changed the task status from Open to In Progress.Mar 3 2022, 1:13 PM

Change 767781 merged by jenkins-bot:

[mediawiki/extensions/MachineVision@master] Migrate Test to use Vue 3 compatibility Mode

https://gerrit.wikimedia.org/r/767781

Note: there are quite few Vue warning in the Console; not sure if they need to be addressed. @SimoneThisDot - can you take a look and see if they are harmless?

e.g.

(1) [Vue warn]: (deprecation GLOBAL_PROTOTYPE) Vue.prototype is no longer available in Vue 3. Use app.config.globalProperties instead.

(2) [Vue warn]: Directive "i18n-html" has already been registered in target app.

(3) Use of Vue.createMwApp( { store } ) is deprecated. Use Vue.createMwApp(...).use( store ) instead.

(4) [Vue warn]: (deprecation CONFIG_WHITESPACE) Vue 3 compiler's whitespace option will default to "condense" instead of "preserve". To suppress this warning, provide an explicit value for `config.compilerOptions.whitespace`. 
  at <MediaSearch>

(5) [Vue warn]: (deprecation OPTIONS_BEFORE_DESTROY) `beforeDestroy` has been renamed to `beforeUnmount`. 
  at <MediaSearch>

(6) [Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute "role" with v-bind value `false` will render role="false" instead of removing it in Vue 3. To remove the attribute, use `null` or `undefined` instead. If the usage is intended, you can disable the compat behavior and suppress this warning with:

 configureCompat({ ATTR_FALSE_VALUE: false })

  Details: https://v3.vuejs.org/guide/migration/attribute-coercion.html 

(7) [Vue warn]: (deprecation WATCH_ARRAY) "watch" option or vm.$watch on an array value will no longer trigger on array mutation unless the "deep" option is specified. If current usage is intended, you can disable the compat behavior and suppress this warning with:

  configureCompat({ WATCH_ARRAY: false })

  Details: https://v3.vuejs.org/guide/migration/watch.html 

(8) [Vue warn]: (deprecation OPTIONS_DESTROYED) `destroyed` has been renamed to `unmounted`. 
  at <SdTabs active="image" onTabChange=fn<bound onTabChange> > 
  at <MediaSearch>

(9) [Vue warn]: (deprecation ATTR_FALSE_VALUE) (2) 
  at <SdTabs active="image" onTabChange=fn<bound onTabChange> > 
  at <MediaSearch>

(10)  Vue warn]: Template compilation error: <template v-for> key should be placed on the <template> tag.
1  |  <div class="sdms-search-filters-wrapper" :class="rootClasses"> 		<div ref="filters" class="sdms-search-filters" role="group" :aria-label="filtersLabel" :aria-describedby="searchCountId" tabindex="0" @scroll.passive="onScroll"> 			<template v-for="( filter, index ) in searchFilters"> 				<div :key="'filter-' + index"> 					<!-- Namespace filter requires special treatment; see below. --> 					<!-- Sort filter has slightly different behavior from other 					non-namespace filters because one of the two options 					(relevance or recency) must always be selected. For other 					filters, a generic label must be shown whenever their value 					is un-set. See T285349 for more context. --> 					<sd-select v-if="filter.type !== 'namespace'" :ref="filter.type" :class="getFilterClasses( filter.type )" :name="filter.type" :items="filter.items" :label="getFilterDefaultLabel( filter.type )" :initial-selected-item-index="filter.type === 'sort' ? 0 : -1" :prefix="getFilterPrefix( filter.type )" @select="onSelect( $event, filter.type )"> 					</sd-select>  					<!-- Namespace filter is represented as a button that 					launches a modal --> 					<sd-button v-else="" :key="'filter-namespace-' + index" class="sdms-search-filters__namespace" :class="namespaceFilterClasses" @click="namespaceFilterDialogActive = true"> 						{{ namespaceFilterLabel }} 					</sd-button> 				</div> 			</template> 			<div class="sdms-search-results-count"> 				<span v-if="showResultsCount" :id="searchCountId"> 					{{ resultsCount }} 				</span> 			</div> 		</div>  		<namespace-filter-dialog v-if="namespaceFilter" ref="namespace" :items="namespaceFilter.items" :namespaces="namespaceFilter.data.namespaceGroups.all_incl_file" :namespace-groups="namespaceFilter.data.namespaceGroups" :active="namespaceFilterDialogActive" :initial-value="namespaceFilterValue" @submit="onSelect( $event, 'namespace' )" @close="namespaceFilterDialogActive = false"> 		</namespace-filter-dialog> 	</div>
   |                                                                                                                                                                                                                                                                                                       ^^^^^^^^^^^^^^^^^^^^^^^^ 
  at <SearchFilters media-type="image" onFilterChange=fn<bound onFilterChange> > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="sd-tab-fade-in" > 
  at <SdTab key="image" name="image" title="Images" > 
  at <SdTabs active="image" onTabChange=fn<bound onTabChange> > 
  at <MediaSearch>

(11) Vue warn]: (deprecation WATCH_ARRAY) (2) 
  at <SearchFilters media-type="image" onFilterChange=fn<bound onFilterChange> > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="sd-tab-fade-in" > 
  at <SdTab key="image" name="image" title="Images" > 
  at <SdTabs active="image" onTabChange=fn<bound onTabChange> > 
  at <MediaSearch>