Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Fix Issue with Search block stealing focus after media updated for image block #31393

Merged
merged 5 commits into from
May 5, 2021
Merged

[RNMobile] Fix Issue with Search block stealing focus after media updated for image block #31393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db5ebe5
Default placeholder selected state to false
AmandaRiu Apr 30, 2021
fdbd170
Update snapshot for unit tests
AmandaRiu Apr 30, 2021
094d1cd
Ensure search block selected before each test
AmandaRiu Apr 30, 2021
9345588
Increase wait time for secondary menu to dismiss
AmandaRiu Apr 30, 2021
757546e
Add changelog notes
AmandaRiu Apr 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/search/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function SearchEdit( {
const [ isButtonSelected, setIsButtonSelected ] = useState( false );
const [ isLabelSelected, setIsLabelSelected ] = useState( false );
const [ isPlaceholderSelected, setIsPlaceholderSelected ] = useState(
true
false
);
const [ isLongButton, setIsLongButton ] = useState( false );
const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
Expand Down
10 changes: 5 additions & 5 deletions packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ exports[`Search Block renders block with button inside option 1`] = `
className="wp-block-search__input"
ellipsizeMode="tail"
fontFamily="serif"
isSelected={true}
isSelected={false}
label={null}
numberOfLines={1}
onBlur={[Function]}
Expand Down Expand Up @@ -255,7 +255,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
className="wp-block-search__input"
ellipsizeMode="tail"
fontFamily="serif"
isSelected={true}
isSelected={false}
label={null}
numberOfLines={1}
onBlur={[Function]}
Expand Down Expand Up @@ -312,7 +312,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
className="wp-block-search__input"
ellipsizeMode="tail"
fontFamily="serif"
isSelected={true}
isSelected={false}
label={null}
numberOfLines={1}
onBlur={[Function]}
Expand Down Expand Up @@ -485,7 +485,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
className="wp-block-search__input"
ellipsizeMode="tail"
fontFamily="serif"
isSelected={true}
isSelected={false}
label={null}
numberOfLines={1}
onBlur={[Function]}
Expand Down Expand Up @@ -649,7 +649,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
className="wp-block-search__input"
ellipsizeMode="tail"
fontFamily="serif"
isSelected={true}
isSelected={false}
label={null}
numberOfLines={1}
onBlur={[Function]}
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label to i
- [*] Image block: Add a "featured" banner. (Android only) [#30806]
- [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546]
- [**] The media upload options of the File and Audio block automatically opens when the respective block is inserted. [#31025]
- [*] Fixed a bug where the Search block was stealing focus from the Image block upon updating image asset [#31393]

## 1.51.1

Expand Down
126 changes: 61 additions & 65 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,36 @@ const searchBlockHtml = `<!-- wp:search {"label":"","buttonText":""} /-->`;

describe( 'Gutenberg Editor Search Block tests.', () => {
describe( 'Editing Search Block elements.', () => {
it( 'Add search block via HTML', async () => {
beforeAll( async () => {
// Add a search block with all child elements having no text.
// This is important to get around test flakiness where sometimes
// the existing default text isn't replaced properly when entering
// new text during testing.
await editorPage.setHtmlContent( searchBlockHtml );
} );

beforeEach( async () => {
// Tap search block to ensure selected
const searchBlock = await editorPage.getBlockAtPosition(
blockNames.search
);
await searchBlock.click();
} );

afterAll( async () => {
await removeSearchBlock();
} );
AmandaRiu marked this conversation as resolved.
Show resolved Hide resolved

it( 'Able to customize label text', async () => {
await editorPage.sendTextToSearchBlockChild(
testIds.label,
testData.shortText
);

let actual;
let expected;

if ( isAndroid() ) {
// Android pads the string entered into the `PlainText` component so we'll get the
// value a different way by asking for it directly.
const input = await editorPage.getSearchBlockTextElement(
testIds.label
);
const inputValue = await input.text();
actual = inputValue.trim();
expected = testData.shortText;
} else {
actual = await editorPage.getHtmlContent();
expected = `"label":"${ testData.shortText }"`;
}

expect( actual ).toContain( expected );
const expected = isAndroid()
? testData.shortText
: `"label":"${ testData.shortText }"`;
await verifySearchElementText( testIds.label, expected );
} );

it( 'Able to customize placeholder text', async () => {
Expand All @@ -51,24 +53,10 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
testData.shortText
);

let actual;
let expected;

if ( isAndroid() ) {
// Android pads the string entered into the `PlainText` component so we'll get the
// value a different way by asking for it directly.
const input = await editorPage.getSearchBlockTextElement(
testIds.input
);
const inputValue = await input.text();
actual = inputValue.trim();
expected = testData.shortText;
} else {
actual = await editorPage.getHtmlContent();
expected = `"placeholder":"${ testData.shortText }"`;
}

expect( actual ).toContain( expected );
const expected = isAndroid()
? testData.shortText
: `"placeholder":"${ testData.shortText }"`;
await verifySearchElementText( testIds.input, expected );
} );

it( 'Able to customize button text', async () => {
Expand All @@ -77,33 +65,18 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
testData.shortButtonText
);

let actual;
let expected;

if ( isAndroid() ) {
// Android pads the string entered into the `PlainText` component so we'll get the
// value a different way by asking for it directly.
const input = await editorPage.getSearchBlockTextElement(
testIds.button
);
const inputValue = await input.text();
actual = inputValue.trim();
expected = testData.shortButtonText;
} else {
actual = await editorPage.getHtmlContent();
expected = `"buttonText":"${ testData.shortButtonText }"`;
}

expect( actual ).toContain( expected );
} );

it( 'Remove Search block', async () => {
// Remove the search block to end this suite of tests.
await editorPage.removeBlockAtPosition( blockNames.search );
const expected = isAndroid()
? testData.shortButtonText
: `"buttonText":"${ testData.shortButtonText }"`;
await verifySearchElementText( testIds.button, expected );
} );
} );

describe( 'Changing search block settings.', () => {
afterAll( async () => {
await removeSearchBlock();
} );

it( 'Able to add the Search Block.', async () => {
await editorPage.addNewBlock( blockNames.search );
const searchBlock = await editorPage.getBlockAtPosition(
Expand All @@ -117,6 +90,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
const searchBlock = await editorPage.getBlockAtPosition(
blockNames.search
);
await searchBlock.click();

await editorPage.toggleHideSearchLabelSetting( searchBlock );
await editorPage.dismissBottomSheet();
Expand All @@ -130,6 +104,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
const searchBlock = await editorPage.getBlockAtPosition(
blockNames.search
);
await searchBlock.click();

await editorPage.toggleSearchIconOnlySetting( searchBlock );
await editorPage.dismissBottomSheet();
Expand All @@ -143,6 +118,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
const searchBlock = await editorPage.getBlockAtPosition(
blockNames.search
);
await searchBlock.click();

await editorPage.changeSearchButtonPositionSetting(
searchBlock,
Expand All @@ -159,6 +135,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
const searchBlock = await editorPage.getBlockAtPosition(
blockNames.search
);
await searchBlock.click();

await editorPage.changeSearchButtonPositionSetting(
searchBlock,
Expand All @@ -170,10 +147,29 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
const html = await editorPage.getHtmlContent();
expect( html ).toContain( `"buttonPosition":"no-button"` );
} );

it( 'Remove search block', async () => {
// Remove the search block to end this suite of tests.
await editorPage.removeBlockAtPosition( blockNames.search );
} );
} );
} );

const removeSearchBlock = async () => {
const searchBlock = await editorPage.getBlockAtPosition(
blockNames.search
);
await searchBlock.click();

// Remove search block
await editorPage.removeBlockAtPosition( blockNames.search );
};

const verifySearchElementText = async ( testId, expected ) => {
let actual;

if ( isAndroid() ) {
const input = await editorPage.getSearchBlockTextElement( testId );
const inputValue = await input.text();
actual = inputValue.trim();
} else {
actual = await editorPage.getHtmlContent();
}

expect( actual ).toContain( expected );
};
2 changes: 1 addition & 1 deletion packages/react-native-editor/__device-tests__/pages/editor-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -639,7 +639,7 @@ class EditorPage {
return await this.driver
.elementByXPath( optionMenuButtonLocator )
.click()
.sleep( isAndroid() ? 500 : 200 ); // sleep a little longer due to multiple menus
.sleep( isAndroid() ? 600 : 200 ); // sleep a little longer due to multiple menus
}

async toggleSearchIconOnlySetting( block ) {
Expand Down