UserLookup.vue: trigger new search when changes are made before mounting

Given the Lookup component a template ref and force a lookup and display
the results when the user types in something before Vue loads.

A TODO is left for making the test assert that the menu is visible.
Related: T390127

Move refs to the top of setup() and document them to be consistent with
the structure of other components as well as the store.

SpecialBlock.php: if the Codex form is submitted, treat as no-submission
since this code path isn't supposed to be possible with a JS-only form.

Bug: T389955
Change-Id: I6b9788370495648f1629ec7c3b768e704d78f157

3 files changed, 35 insertions, 1 deletions

diff --git a/tests/jest/jest.setup.js b/tests/jest/jest.setup.js
index 3cc8f2f4ee94..51880fb52bf6 100644
--- a/tests/jest/jest.setup.js
+++ b/tests/jest/jest.setup.js
@@ -32,6 +32,7 @@ config.global.directives = {
 };
 
 function ApiMock() {}
+ApiMock.prototype.abort = jest.fn();
 ApiMock.prototype.get = jest.fn();
 ApiMock.prototype.post = jest.fn();
 ApiMock.prototype.postWithEditToken = jest.fn();
diff --git a/tests/jest/mediawiki.special.block/SpecialBlock.setup.js b/tests/jest/mediawiki.special.block/SpecialBlock.setup.js
index d31c970eec4b..58c604dc6b88 100644
--- a/tests/jest/mediawiki.special.block/SpecialBlock.setup.js
+++ b/tests/jest/mediawiki.special.block/SpecialBlock.setup.js
@@ -62,6 +62,7 @@ function mockMwConfigGet( config = {} ) {
 		wgUserLanguage: 'en',
 		blockAlreadyBlocked: false,
 		blockTargetUser: null,
+		blockTargetUserInput: null,
 		blockTargetExists: null,
 		blockAdditionalDetailsPreset: [ 'wpAutoBlock' ],
 		blockAllowsEmailBan: true,
diff --git a/tests/jest/mediawiki.special.block/UserLookup.test.js b/tests/jest/mediawiki.special.block/UserLookup.test.js
index ba18d01e575b..d9353cfff8a0 100644
--- a/tests/jest/mediawiki.special.block/UserLookup.test.js
+++ b/tests/jest/mediawiki.special.block/UserLookup.test.js
@@ -2,12 +2,16 @@
 
 const { nextTick } = require( 'vue' );
 const { mount, flushPromises } = require( '@vue/test-utils' );
-const { getSpecialBlock, mockMwApiGet, mockMwConfigGet } = require( './SpecialBlock.setup.js' );
 const { createTestingPinia } = require( '@pinia/testing' );
+const { getSpecialBlock, mockMwApiGet, mockMwConfigGet } = require( './SpecialBlock.setup.js' );
 const UserLookup = require( '../../../resources/src/mediawiki.special.block/components/UserLookup.vue' );
 const useBlockStore = require( '../../../resources/src/mediawiki.special.block/stores/block.js' );
 
 describe( 'UserLookup', () => {
+	afterEach( () => {
+		document.body.innerHTML = '';
+	} );
+
 	const getWrapper = ( propsData, apiMocks = [] ) => {
 		mockMwApiGet( apiMocks );
 		return mount( UserLookup, {
@@ -96,4 +100,32 @@ describe( 'UserLookup', () => {
 		expect( store.targetExists ).toBeFalsy();
 		expect( document.activeElement.name ).toStrictEqual( 'wpTarget' );
 	} );
+
+	it( 'blockTargetUserInput and targetUser mismatch after mounting (T389955)', async () => {
+		mockMwConfigGet( { blockTargetUserInput: 'Examp' } );
+		// null modelValue, meaning no target user is pre-supplied.
+		const wrapper = getWrapper( { modelValue: null }, [ {
+			params: {
+				list: 'allusers',
+				auprefix: 'Examp'
+			},
+			response: {
+				query: {
+					allusers: [
+						{ name: 'ExampleUser' },
+						{ name: 'ExampleUser2' }
+					]
+				}
+			}
+		} ] );
+		const store = useBlockStore();
+		await flushPromises();
+		expect( store.targetUser ).toBe( '' );
+		expect( wrapper.vm.currentSearchTerm ).toBe( 'Examp' );
+		expect( wrapper.vm.menuItems ).toStrictEqual( [
+			{ label: 'ExampleUser', value: 'ExampleUser' },
+			{ label: 'ExampleUser2', value: 'ExampleUser2' }
+		] );
+		// TODO: Assert .cdx-menu is visible; currently fails only in test environment.
+	} );
 } );