fix: improve abort request search (#3436)

* fix: improve abort request search

* chore: add changeset

* chore: ui flacky tests

.changeset/slow-snails-sniff.md

@@ -0,0 +1,7 @@
+---
+'@verdaccio/api': patch
+'@verdaccio/ui-theme': patch
+'@verdaccio/web': patch
+---
+
+fix: improve abort request search

e2e/ui/cypress/support/commands.ts

@@ -8,8 +8,11 @@ Cypress.Commands.add('getByTestId', (selector, ...args) => {
 // -- This is a parent command --
 Cypress.Commands.add('login', (user, password) => {
   cy.getByTestId('header--button-login').click();
+  cy.wait(300);
   cy.get('#login--dialog-username').type(user);
+  cy.wait(200);
   cy.get('#login--dialog-password').type(password);
+  cy.wait(500);
   cy.get('#login--dialog-button-submit').click();
 });
 //

packages/api/src/v1/search.ts

@@ -41,7 +41,8 @@ export default function (route, auth: Auth, storage: Storage): void {
     let data;
     const abort = new AbortController();
 
-    req.on('aborted', () => {
+    req.socket.on('close', function () {
+      debug('search web aborted');
       abort.abort();
     });
 

packages/plugins/ui-theme/jest/jest.config.js

@@ -1,8 +1,6 @@
 const config = require('../../../../jest/config');
 
 module.exports = Object.assign({}, config, {
-  name: 'verdaccio-ui-jest',
-  verbose: true,
   automock: false,
   collectCoverage: false,
   testEnvironment: 'jest-environment-jsdom-global',
@@ -10,7 +8,9 @@ module.exports = Object.assign({}, config, {
     '^.+\\.(js|ts|tsx)$': 'babel-jest',
   },
   moduleFileExtensions: ['js', 'ts', 'tsx'],
-  testURL: 'http://localhost:9000/',
+  testEnvironmentOptions: {
+    url: 'http://localhost:9000/',
+  },
   rootDir: '..',
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '<rootDir>/jest/setup-env.ts'],
   setupFiles: ['<rootDir>/jest/setup.ts'],

packages/plugins/ui-theme/src/App/Header/Search/Search.tsx

@@ -76,6 +76,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
   const handleFetchPackages = useCallback(
     ({ value }: { value: string }) => {
       if (value?.trim() !== '') {
+        dispatch.search.clearRequestQueue();
         dispatch.search.getSuggestions({ value });
       }
     },

packages/plugins/ui-theme/src/providers/API/api.ts

@@ -51,6 +51,7 @@ class API {
       fetch(url, {
         method,
         credentials: 'same-origin',
+        signal: options.signal,
         ...options,
       })
         .then(handleResponseType)

packages/plugins/ui-theme/src/store/models/search.ts

@@ -24,7 +24,9 @@ export const search = createModel<RootModel>()({
   reducers: {
     clearRequestQueue(state) {
       const controllers = state.controller;
-      controllers.forEach((request) => request.abort());
+      controllers.forEach((request) => {
+        request?.abort();
+      });
       return {
         ...state,
         controller: [],

packages/web/src/api/search.ts

@@ -44,7 +44,7 @@ function addSearchWebApi(storage: Storage, auth: Auth): Router {
       try {
         let data;
         const abort = new AbortController();
-        req.on('aborted', () => {
+        req.socket.on('close', function () {
           debug('search web aborted');
           abort.abort();
         });