bug: Unwanted content displayed in search suggestion box when there are no results for search

[khoa-le]

Description

Disable render suggestion component when search query have not results.

Related Issue

Closes #1223.

Verification Steps

1. Go to Venia store front and click on search icon.
2. Enter search string which should not return any results. example - afgdsgedf
3. Search suggestion box display "No results were found."

How Have YOU Tested this?

Verification steps above!

Screenshots / Screen Captures (if appropriate):

[magento-cicd2]

All committers have signed the CLA.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://venia-git-fork-khoa-le-bugfix-1223-hide-unwante-c705fb.magento-research1.now.sh

[khoa-le]

I see this pull request have error when run tests but I don't see any output that help me fix it. Can anyone help?

[PWAStudioBot]

	Messages
📖	We are currently working on automating the PR metadata checks. Until that time, you may see failures related to labels/description/linked issues/etc even if you have fixed the problem. Failures will persist until the next push (assuming they are fixed).

Generated by 🚫 dangerJS against 5dd816f

[supernova-at]

This solves the problem perfectly, thank you!

Looking at that conditional though, I'm left wondering if autocomplete.js shouldn't house this logic instead. In other words, only render <Suggestions> if we have results (data.products.items.length > 0).

Here's where autocomplete.js renders this Suggestions component:

                <Suggestions
                    products={data ? data.products : {}}
                    searchValue={value}
                    setVisible={setVisible}
                    visible={visible}
                />

And sending in an empty object as the products prop just doesn't make much sense to me. We need products to suggest both categories and other products. If we don't have any, we shouldn't render <Suggestions> at all (because we don't have any!).

That said, this code works fine and I'd still accept it if you don't want to make the change to autocomplete.js instead.

[supernova-at]

I see this pull request have error when run tests but I don't see any output that help me fix it. Can anyone help?

Yeah, that output isn't very helpful sometimes, sorry 😬 . You can get more details locally by running yarn test.

The unit tests for this component do need to be updated to reflect this change:

Update the "renders correctly" and "renders a category list" unit tests

The products prop these tests are passing in contains an empty items array which - after your change - will satisfy the conditional and render null. Instead of updating the snapshot / assertion, please pass in some items.

Add a test for empty items array

Please add a test that ensures this component returns null when products.items is an empty array.

[jimbo]

Makes sense to me. Thanks for your contribution! 👍

[jimbo]

Wow, Github's cache really didn't show me any conversation on this one.

Looking at that conditional though, I'm left wondering if autocomplete.js shouldn't house this logic instead.

No, I wouldn't make that change. I think the logic is fine where it is.

[sirugh]

We need to make sure the tests are updated/fixed before merging. The code looks fine, otherwise but please fix the test! If you need help with this you can always reach out to us on the community slack or you can comment here and we can try to help.

[sirugh]

Assigned this to @tjwiebell to handle writing/fixing tests.

[dpatil-magento]

QA Pass.

approved

[khoa-le]

Thank you guys helping me out.