Case insensitive filter in group topics view (#1774)

* case-insensitive filters (#1772) * fix "unresolved function (...)" warnings in tests (#1772) fixes `Unresolved function or method toBeInTheDocument()` warnings in `hermes-console-vue` tests * case-insensitive filters on admin, favorite, topic views (#1772) --------- Co-authored-by: Mateusz <76775507+szczygiel-m@users.noreply.github.com> Co-authored-by: Piotr Rżysko <piotr.rzysko@gmail.com>
allegro · Nov 7, 2023 · ff1614b · ff1614b
1 parent 27551a9
commit ff1614b
Show file tree

Hide file tree

Showing 19 changed files with 207 additions and 141 deletions.
diff --git a/hermes-console-vue/src/api/inconsistent-group.ts b/hermes-console-vue/src/api/inconsistent-group.ts
@@ -17,5 +17,5 @@ export interface InconsistentSubscription {
 
 export interface InconsistentMedata {
   datacenter: string;
-  content: string | undefined;
+  content?: string;
 }
diff --git a/.../src/views/admin/consistency/inconsistent-groups-listing/InconsistentGroupListing.spec.ts b/.../src/views/admin/consistency/inconsistent-groups-listing/InconsistentGroupListing.spec.ts
@@ -10,21 +10,32 @@ describe('InconsistentGroupListing', () => {
     setActivePinia(createPinia());
   });
 
-  it('should render inconsistent groups table', async () => {
-    // given
-    const group = 'pl.allegro.public.group';
+  it.each([
+    [null, 1],
+    ['pl.allegro.public.group', 1],
+    ['PL.ALLEGRO.PUBLIC.GROUP', 1],
+    ['public', 1],
+    ['Public', 1],
+    ['pl.allegro.internal.group', 0],
+    ['FOO', 0],
+  ])(
+    'should render inconsistent groups table with filter applied (case-insensitive, filter: %s)',
+    async (filter: string | null, expectedGroups: number) => {
+      // given
+      const group = 'pl.allegro.public.group';
 
-    // when
-    const { getByText } = render(InconsistentGroupsListing, {
-      props: {
-        filter: null,
-        inconsistentGroups: dummyGroupInconsistency,
-      },
-    });
+      // when
+      const { queryAllByText } = render(InconsistentGroupsListing, {
+        props: {
+          filter,
+          inconsistentGroups: dummyGroupInconsistency,
+        },
+      });
 
-    // then
-    expect(getByText(group)).toBeVisible();
-  });
+      // then
+      expect(queryAllByText(group).length).toBe(expectedGroups);
+    },
+  );
 
   it('should render empty groups table', async () => {
     //given

diff --git a/...vue/src/views/admin/consistency/inconsistent-groups-listing/InconsistentGroupsListing.vue b/...vue/src/views/admin/consistency/inconsistent-groups-listing/InconsistentGroupsListing.vue
@@ -14,7 +14,9 @@
 
   const filteredGroups = computed(() => {
     return props.inconsistentGroups.filter(
-      (group) => !props.filter || group.name.includes(props.filter),
+      (group) =>
+        !props.filter ||
+        group.name.toLowerCase().includes(props.filter.toLowerCase()),
     );
   });
 

diff --git a/...src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.spec.ts b/...src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.spec.ts
@@ -25,26 +25,29 @@ describe('ConstraintsListing', () => {
     });
   });
 
-  it('should render inconsistent topics listing with a filter applied', () => {
-    // given
-    const props = {
-      inconsistentTopics: dummyInconsistentTopics,
-      filter: 'Dummy',
-    };
+  it.each(['dummy', 'Dummy', 'DUMMY'])(
+    'should render inconsistent topics listing with a filter applied (case-insensitive, filter: %s)',
+    (filter: string) => {
+      // given
+      const props = {
+        inconsistentTopics: dummyInconsistentTopics,
+        filter,
+      };
 
-    // when
-    const inconsistentTopic = render(InconsistentTopicsListing, { props })
-      .getAllByText(/Dummy/)
-      .map((inconsistentTopic) => inconsistentTopic.closest('tr'));
+      // when
+      const inconsistentTopic = render(InconsistentTopicsListing, { props })
+        .getAllByText(/Dummy/)
+        .map((inconsistentTopic) => inconsistentTopic.closest('tr'));
 
-    // then
-    expect(inconsistentTopic).toHaveLength(1);
-    expect(
-      within(inconsistentTopic[0]!).getByText(
-        'consistency.inconsistentTopics.actions.delete',
-      ),
-    ).toBeVisible();
-  });
+      // then
+      expect(inconsistentTopic).toHaveLength(1);
+      expect(
+        within(inconsistentTopic[0]!).getByText(
+          'consistency.inconsistentTopics.actions.delete',
+        ),
+      ).toBeVisible();
+    },
+  );
 
   it('should render inconsistent topics listing with a filter applied (no results)', () => {
     // given

diff --git a/...vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue b/...vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue
@@ -10,7 +10,9 @@
 
   const filteredTopics = computed(() => {
     return props.inconsistentTopics.filter(
-      (topic) => !props.filter || topic.includes(props.filter),
+      (topic) =>
+        !props.filter ||
+        topic.toLowerCase().includes(props.filter.toLowerCase()),
     );
   });
 

diff --git a/...es-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.spec.ts b/...es-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.spec.ts
@@ -10,8 +10,6 @@ describe('ConstraintsListing', () => {
     // given
     const props = {
       constraints: dummyConstraints.topicConstraints,
-      upsertConstraint: () => {},
-      deleteConstraint: () => {},
     };
 
     // when
@@ -35,8 +33,6 @@ describe('ConstraintsListing', () => {
     // given
     const props = {
       constraints: dummyConstraints.subscriptionConstraints,
-      upsertConstraint: () => {},
-      deleteConstraint: () => {},
     };
 
     // when
@@ -56,34 +52,33 @@ describe('ConstraintsListing', () => {
     );
   });
 
-  it('should render constraints listing with a filter applied', () => {
-    // given
-    const props = {
-      constraints: dummyConstraints.topicConstraints,
-      filter: 'pl.group.Topic1',
-      upsertConstraint: () => {},
-      deleteConstraint: () => {},
-    };
-
-    // when
-    const constraints = render(ConstraintsListing, { props })
-      .getAllByText(/pl\.group\.Topic1/)
-      .map((constraint) => constraint.closest('tr'));
-
-    // then
-    expect(constraints).toHaveLength(1);
-    expect(
-      within(constraints[0]!).getByText(/consumersNumberChip 2/),
-    ).toBeVisible();
-  });
+  it.each(['pl.group.Topic1', 'pl.group.topic1', 'PL.GROUP.TOPIC1'])(
+    'should render constraints listing with a filter applied (case-insensitive, filter: %s)',
+    (filter: string) => {
+      // given
+      const props = {
+        constraints: dummyConstraints.topicConstraints,
+        filter,
+      };
+
+      // when
+      const constraints = render(ConstraintsListing, { props })
+        .getAllByText(/pl\.group\.Topic1/)
+        .map((constraint) => constraint.closest('tr'));
+
+      // then
+      expect(constraints).toHaveLength(1);
+      expect(
+        within(constraints[0]!).getByText(/consumersNumberChip 2/),
+      ).toBeVisible();
+    },
+  );
 
   it('should render constraints listing with a filter applied (no results)', () => {
     // given
     const props = {
       constraints: dummyConstraints.topicConstraints,
       filter: 'pl.group.NoExistingTopic',
-      upsertConstraint: () => {},
-      deleteConstraint: () => {},
     };
 
     // when
@@ -130,8 +125,6 @@ describe('ConstraintsListing', () => {
 
     const props = {
       constraints: dummyConstraints.topicConstraints,
-      upsertConstraint: () => {},
-      deleteConstraint: () => {},
     };
 
     const { queryByText, getByText } = render(ConstraintsListing, { props });
@@ -150,8 +143,6 @@ describe('ConstraintsListing', () => {
 
     const props = {
       constraints: dummyConstraints.subscriptionConstraints,
-      upsertConstraint: () => {},
-      deleteConstraint: () => {},
     };
 
     const { queryByText, getByText } = render(ConstraintsListing, { props });

diff --git a/hermes-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.vue b/hermes-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.vue
@@ -18,7 +18,9 @@
   const filteredConstraints = computed(() =>
     Object.fromEntries(
       Object.entries(props.constraints).filter(
-        ([name]) => !props.filter || name.indexOf(props.filter) !== -1,
+        ([name]) =>
+          !props.filter ||
+          name.toLowerCase().includes(props.filter.toLowerCase()),
       ),
     ),
   );

diff --git a/...rc/views/favorite/subscriptions/subscription-listing/FavoriteSubscriptionsListing.spec.ts b/...rc/views/favorite/subscriptions/subscription-listing/FavoriteSubscriptionsListing.spec.ts
@@ -29,21 +29,24 @@ describe('FavoriteSubscriptionsListing', () => {
     });
   });
 
-  it('should render listing with a filter applied', () => {
-    // given
-    const props = {
-      subscriptions: dummySubscriptions,
-      filter: 'fo',
-    };
-
-    // when
-    const subscriptions = render(FavoriteSubscriptionsListing, { props })
-      .getAllByText(/foo/)
-      .map((subscription) => subscription.closest('tr'));
-
-    // then
-    expect(subscriptions).toHaveLength(1);
-  });
+  it.each(['fo', 'Fo', 'FO'])(
+    'should render listing with a filter applied (case-insensitive, filter: %s)',
+    (filter: string) => {
+      // given
+      const props = {
+        subscriptions: dummySubscriptions,
+        filter,
+      };
+
+      // when
+      const subscriptions = render(FavoriteSubscriptionsListing, { props })
+        .getAllByText(/foo/)
+        .map((subscription) => subscription.closest('tr'));
+
+      // then
+      expect(subscriptions).toHaveLength(1);
+    },
+  );
 
   it('should render listing with a filter applied (no results)', () => {
     // given

diff --git a/...ue/src/views/favorite/subscriptions/subscription-listing/FavoriteSubscriptionsListing.vue b/...ue/src/views/favorite/subscriptions/subscription-listing/FavoriteSubscriptionsListing.vue
@@ -18,7 +18,9 @@
 
   const filteredSubscriptions = computed(() => {
     return (props.subscriptions ?? []).filter(
-      (subscription) => !props.filter || subscription.includes(props.filter),
+      (subscription) =>
+        !props.filter ||
+        subscription.toLowerCase().includes(props.filter.toLowerCase()),
     );
   });
 

diff --git a/hermes-console-vue/src/views/favorite/topics/topic-listing/FavoriteTopicsListing.spec.ts b/hermes-console-vue/src/views/favorite/topics/topic-listing/FavoriteTopicsListing.spec.ts
@@ -27,21 +27,24 @@ describe('FavoriteTopicsListing', () => {
     });
   });
 
-  it('should render listing with a filter applied', () => {
-    // given
-    const props = {
-      topics: dummyTopics,
-      filter: 'fo',
-    };
-
-    // when
-    const topics = render(FavoriteTopicsListing, { props })
-      .getAllByText(/foobarEventV1/)
-      .map((topic) => topic.closest('tr'));
-
-    // then
-    expect(topics).toHaveLength(1);
-  });
+  it.each(['fo', 'Fo', 'FO'])(
+    'should render listing with a filter applied (case-insensitive, %s)',
+    (filter: string) => {
+      // given
+      const props = {
+        topics: dummyTopics,
+        filter,
+      };
+
+      // when
+      const topics = render(FavoriteTopicsListing, { props })
+        .getAllByText(/foobarEventV1/)
+        .map((topic) => topic.closest('tr'));
+
+      // then
+      expect(topics).toHaveLength(1);
+    },
+  );
 
   it('should render listing with a filter applied (no results)', () => {
     // given

diff --git a/hermes-console-vue/src/views/favorite/topics/topic-listing/FavoriteTopicsListing.vue b/hermes-console-vue/src/views/favorite/topics/topic-listing/FavoriteTopicsListing.vue
@@ -17,7 +17,9 @@
 
   const filteredTopics = computed(() => {
     return (props.topics ?? []).filter(
-      (topic) => !props.filter || topic.includes(props.filter),
+      (topic) =>
+        !props.filter ||
+        topic.toLowerCase().includes(props.filter.toLowerCase()),
     );
   });
 

diff --git a/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.spec.ts b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.spec.ts
@@ -21,21 +21,24 @@ describe('GroupTopicsListing', () => {
     });
   });
 
-  it('should render group topics listing with a filter applied', () => {
-    // given
-    const props = {
-      group: dummyGroup,
-      filter: 'V1',
-    };
+  it.each(['v1', 'V1', 'productevent', 'ProductEvent', 'PRODUCTEVENT'])(
+    'should render group topics listing with a filter applied (case-insensitive, filter: %s)',
+    (filter: string) => {
+      // given
+      const props = {
+        group: dummyGroup,
+        filter,
+      };
 
-    // when
-    const topics = render(GroupTopicsListing, { props })
-      .getAllByText(/ProductEventV1/)
-      .map((topic) => topic.closest('tr'));
+      // when
+      const topics = render(GroupTopicsListing, { props })
+        .getAllByText(/ProductEventV1/)
+        .map((topic) => topic.closest('tr'));
 
-    // then
-    expect(topics).toHaveLength(1);
-  });
+      // then
+      expect(topics).toHaveLength(1);
+    },
+  );
 
   it('should render group topics listing with a filter applied (no results)', () => {
     // given

diff --git a/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
@@ -14,7 +14,9 @@
 
   const filteredTopics = computed(() => {
     return (props.group?.topics ?? []).filter(
-      (topic) => !props.filter || topic.includes(props.filter),
+      (topic) =>
+        !props.filter ||
+        topic.toLowerCase().includes(props.filter.toLowerCase()),
     );
   });