[SECURITY] Remove flakiness on SpacesPopoverList renders a search box (#117888) (#118029)

* wip to figure out flakyness

* clean up

* fix types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>

x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.test.tsx

@@ -46,8 +46,7 @@ const spacesManager = spacesManagerMock.create();
 const { getStartServices } = coreMock.createSetup();
 const spacesApiUi = getUiApi({ spacesManager, getStartServices });
 
-// FLAKY: https://github.com/elastic/kibana/issues/101454
-describe.skip('SpacesPopoverList', () => {
+describe('SpacesPopoverList', () => {
   async function setup(spaces: Space[]) {
     const wrapper = mountWithIntl(
       <SpacesPopoverList spaces={spaces} buttonText="hello world" spacesApiUi={spacesApiUi} />
@@ -84,41 +83,16 @@ describe.skip('SpacesPopoverList', () => {
       const spaceAvatar = items.at(index).find(SpaceAvatarInternal);
       expect(spaceAvatar.props().space).toEqual(space);
     });
-
-    expect(wrapper.find(EuiFieldSearch)).toHaveLength(0);
   });
 
-  it('renders a search box when there are 8 or more spaces', async () => {
-    const lotsOfSpaces = [1, 2, 3, 4, 5, 6, 7, 8].map((num) => ({
-      id: `space-${num}`,
-      name: `Space ${num}`,
-      disabledFeatures: [],
-    }));
-
-    const wrapper = await setup(lotsOfSpaces);
+  it('Should NOT render a search box when there is less than 8 spaces', async () => {
+    const wrapper = await setup(mockSpaces);
     await act(async () => {
       wrapper.find(EuiButtonEmpty).simulate('click');
     });
     wrapper.update();
 
-    const menu = wrapper.find(EuiContextMenuPanel).first();
-    const items = menu.find(EuiContextMenuItem);
-    expect(items).toHaveLength(lotsOfSpaces.length);
-
-    const searchField = wrapper.find(EuiFieldSearch);
-    expect(searchField).toHaveLength(1);
-
-    searchField.props().onSearch!('Space 6');
-    await act(async () => {});
-    wrapper.update();
-    expect(wrapper.find(SpaceAvatarInternal)).toHaveLength(1);
-
-    searchField.props().onSearch!('this does not match');
-    wrapper.update();
-    expect(wrapper.find(SpaceAvatarInternal)).toHaveLength(0);
-
-    const updatedMenu = wrapper.find(EuiContextMenuPanel).first();
-    expect(updatedMenu.text()).toMatchInlineSnapshot(`"Spaces no spaces found "`);
+    expect(wrapper.find(EuiFieldSearch)).toHaveLength(0);
   });
 
   it('can close its popover', async () => {

x-pack/test/functional/apps/spaces/spaces_selection.ts

@@ -23,15 +23,18 @@ export default function spaceSelectorFunctionalTests({
   ]);
 
   describe('Spaces', function () {
+    before(async () => {
+      await esArchiver.load('x-pack/test/functional/es_archives/spaces/selector');
+    });
+    after(
+      async () => await esArchiver.unload('x-pack/test/functional/es_archives/spaces/selector')
+    );
+
     this.tags('includeFirefox');
     describe('Space Selector', () => {
       before(async () => {
-        await esArchiver.load('x-pack/test/functional/es_archives/spaces/selector');
         await PageObjects.security.forceLogout();
       });
-      after(
-        async () => await esArchiver.unload('x-pack/test/functional/es_archives/spaces/selector')
-      );
 
       afterEach(async () => {
         // NOTE: Logout needs to happen before anything else to avoid flaky behavior
@@ -59,6 +62,68 @@ export default function spaceSelectorFunctionalTests({
       });
     });
 
+    describe('Space Selector', () => {
+      before(async () => {
+        await PageObjects.security.forceLogout();
+      });
+
+      afterEach(async () => {
+        await PageObjects.security.forceLogout();
+      });
+
+      it('allows user to navigate to different spaces', async () => {
+        const spaceId = 'another-space';
+
+        await PageObjects.security.login(undefined, undefined, {
+          expectSpaceSelector: true,
+        });
+
+        await PageObjects.spaceSelector.clickSpaceCard(spaceId);
+
+        await PageObjects.spaceSelector.expectHomePage(spaceId);
+
+        await PageObjects.spaceSelector.openSpacesNav();
+
+        // change spaces
+
+        await PageObjects.spaceSelector.clickSpaceAvatar('default');
+
+        await PageObjects.spaceSelector.expectHomePage('default');
+      });
+    });
+
+    describe('Search spaces in popover', () => {
+      const spaceId = 'default';
+      before(async () => {
+        await PageObjects.security.forceLogout();
+        await PageObjects.security.login(undefined, undefined, {
+          expectSpaceSelector: true,
+        });
+      });
+
+      after(async () => {
+        await PageObjects.security.forceLogout();
+      });
+
+      it('allows user to search for spaces', async () => {
+        await PageObjects.spaceSelector.clickSpaceCard(spaceId);
+        await PageObjects.spaceSelector.expectHomePage(spaceId);
+        await PageObjects.spaceSelector.openSpacesNav();
+        await PageObjects.spaceSelector.expectSearchBoxInSpacesSelector();
+      });
+
+      it('search for "ce 1" and find one space', async () => {
+        await PageObjects.spaceSelector.setSearchBoxInSpacesSelector('ce 1');
+        await PageObjects.spaceSelector.expectToFindThatManySpace(1);
+      });
+
+      it('search for "dog" and find NO space', async () => {
+        await PageObjects.spaceSelector.setSearchBoxInSpacesSelector('dog');
+        await PageObjects.spaceSelector.expectToFindThatManySpace(0);
+        await PageObjects.spaceSelector.expectNoSpacesFound();
+      });
+    });
+
     describe('Spaces Data', () => {
       const spaceId = 'another-space';
       const sampleDataHash = '/tutorial_directory/sampleData';
@@ -71,7 +136,6 @@ export default function spaceSelectorFunctionalTests({
       };
 
       before(async () => {
-        await esArchiver.load('x-pack/test/functional/es_archives/spaces/selector');
         await PageObjects.security.login(undefined, undefined, {
           expectSpaceSelector: true,
         });
@@ -97,7 +161,6 @@ export default function spaceSelectorFunctionalTests({
         });
         await PageObjects.home.removeSampleDataSet('logs');
         await PageObjects.security.forceLogout();
-        await esArchiver.unload('x-pack/test/functional/es_archives/spaces/selector');
       });
 
       describe('displays separate data for each space', () => {

x-pack/test/functional/es_archives/spaces/selector/data.json

@@ -41,4 +41,139 @@
       "type": "space"
     }
   }
-}
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-1",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space I",
+        "name": "Space 1"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-2",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space II",
+        "name": "Space 2"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-3",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space III",
+        "name": "Space 3"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-4",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space IV",
+        "name": "Space 4"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-5",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space V",
+        "name": "Space 5"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-6",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space VI",
+        "name": "Space 6"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-7",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space VII",
+        "name": "Space 7"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-8",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space VIII",
+        "name": "Space 8"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:space-9",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is space IX",
+        "name": "Space 9"
+      },
+      "type": "space"
+    }
+  }
+}

x-pack/test/functional/page_objects/space_selector_page.ts

@@ -21,6 +21,7 @@ export class SpaceSelectorPageObject extends FtrService {
   }
 
   async clickSpaceCard(spaceId: string) {
+    await this.common.sleep(10000);
     return await this.retry.try(async () => {
       this.log.info(`SpaceSelectorPage:clickSpaceCard(${spaceId})`);
       await this.testSubjects.click(`space-card-${spaceId}`);
@@ -189,4 +190,29 @@ export class SpaceSelectorPageObject extends FtrService {
       await this.common.sleep(1000);
     });
   }
+
+  async expectSearchBoxInSpacesSelector() {
+    expect(await this.find.existsByCssSelector('div[role="dialog"] input[type="search"]')).to.be(
+      true
+    );
+  }
+
+  async setSearchBoxInSpacesSelector(searchText: string) {
+    const searchBox = await this.find.byCssSelector('div[role="dialog"] input[type="search"]');
+    searchBox.clearValue();
+    searchBox.type(searchText);
+    await this.common.sleep(1000);
+  }
+
+  async expectToFindThatManySpace(numberOfExpectedSpace: number) {
+    const spacesFound = await this.find.allByCssSelector('div[role="dialog"] a.euiContextMenuItem');
+    expect(spacesFound.length).to.be(numberOfExpectedSpace);
+  }
+
+  async expectNoSpacesFound() {
+    const msgElem = await this.find.byCssSelector(
+      'div[role="dialog"] .euiContextMenuPanel .euiText'
+    );
+    expect(await msgElem.getVisibleText()).to.be('no spaces found');
+  }
 }