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

* 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>
2021-11-09 13:14:39 -05:00 · 2021-11-09 13:14:39 -05:00 · c04bce3330
parent 6a7569c15c
commit c04bce3330
4 changed files with 235 additions and 37 deletions
--- a/x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.test.tsx
+++ b/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 () => {
--- a/x-pack/test/functional/apps/spaces/spaces_selection.ts
+++ b/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', () => {
--- a/x-pack/test/functional/es_archives/spaces/selector/data.json
+++ b/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"
+    }
+  }
+}
--- a/x-pack/test/functional/page_objects/space_selector_page.ts
+++ b/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');
+  }
 }