Need an event which fires when there are no more pending search queries

[kronaemmanuel]

I'm trying to write a test in which the test types something in the algolia search box, waits for the results to come back, and then checks if the first result we got was correct or not.

The test case flow looks like this:

• Input string "Base" into the search box
• Wait for the search results to appear:

            await t.waitFor(() => searchInstance.status === 'idle'); // Using the algoliasearch Instance itself
            await t.waitFor(() => searchClientHelper.hasPendingRequests() === false); // Using algoliasearch helper library

• Check if the first result we got is also called "Base"

However, what ends up happening is that as the test case runs, it types: "B", and the first result that comes up is "Bottom". now, even though there are other characters in the search box by now, and it should have pending queries, there is sometimes a race condition, where it considers that both of the waiting conditions have been fulfilled, so it checks the first result, which is not "Base", it's "bottom" or something else.

Is there something, which I can use to know that all the searches have really already been completed?

[Haroenv]

We don't have tests of that type, but couldn't you check that the query of the response is the same as the query you're setting in the state? then all searches are done.

[mmorris8]

All Algolia searches pass through the search client returned by the algoliasearch function. You can extend that object with a queueing system as follows:

const algoliaClient = algoliasearch(appId, appKey)
let searchQueue = []

const searchClient = {
  ...algoliaClient,
  queue(...promises) {
    promises.map(promise => {
      if (searchQueue.length === 0) {
        document.dispatchEvent(new CustomEvent("algolia-search-queue-start"));
      }
      searchQueue.push(promise);
      promise.then(() => {
        searchQueue = searchQueue.filter(p => p !== promise);
        if (searchQueue.length === 0) {
          document.dispatchEvent(new CustomEvent("algolia-search-queue-resolve"));
        }
      });
    });
  
    return searchQueue
  },
  search(requests) {
    const query = algoliaClient.search(filtered)
    this.queue(query)
    return query
  }
}

export default searchClient

This allows you to fetch the query with searchClient.queue() and then await Promise.all(). This has limitation though. The problem I ran into though and you'll likely run into as well is Algolia usually runs searches sequentially and not in parallel - the outcome of one query determining if the next is required. It's also possible for you to make a call that you expect to trigger a query and then your call to searchClient.queue() gets called before that query, so the queue remains empty. This can likely be avoided with some further refinement of the code but I didn't explore it since in my use case I found another way to avoid the issue entirely. I left the queue system in on the off chance it becomes useful, but I've not leveraged it myself.

A second option is to use event listeners against the two events I have the queue system set to dispatch off the document. This way you can listen for the definite start of the query cycle and then listen for the next time the queue empties out.

A third option is to use a Performance Observer as outlined in this discussion: #6425