runfix: show expand option for collections over limit [FS-1025]

src/script/page/MainContent/panels/Collection/CollectionSection.test.tsx

@@ -0,0 +1,82 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {render, fireEvent} from '@testing-library/react';
+
+import CollectionSection from './CollectionSection';
+import {ContentMessage} from '../../../../entity/message/ContentMessage';
+import {createRandomUuid} from 'Util/util';
+
+const NUMBER_OF_ASSETS = 5;
+
+const messages = new Array(NUMBER_OF_ASSETS).fill(null).map(() => new ContentMessage(createRandomUuid()));
+
+const getDefaultProps = ({limit}: {limit: number}) => ({
+  label: 'cool collection',
+  limit,
+  messages,
+  onSelect: jest.fn(),
+  uieName: 'cool-collection',
+});
+
+describe('CollectionSection', () => {
+  it('does not show show all button when under or equal a limit', async () => {
+    const props = getDefaultProps({limit: NUMBER_OF_ASSETS + 1});
+    const {queryByText, rerender} = render(
+      <CollectionSection {...props}>
+        <span className={`collection-header-icon icon-library`}></span>
+      </CollectionSection>,
+    );
+
+    props.limit = NUMBER_OF_ASSETS;
+    expect(queryByText('collectionShowAll')).toBeNull();
+
+    rerender(
+      <CollectionSection {...props}>
+        <span className={`collection-header-icon icon-library`}></span>
+      </CollectionSection>,
+    );
+
+    expect(queryByText('collectionShowAll')).toBeNull();
+  });
+
+  it('does show show all button when over a limit', async () => {
+    const {getByText} = render(
+      <CollectionSection {...getDefaultProps({limit: NUMBER_OF_ASSETS - 1})}>
+        <span className={`collection-header-icon icon-library`}></span>
+      </CollectionSection>,
+    );
+
+    expect(getByText('collectionShowAll')).toBeDefined();
+  });
+
+  it('triggers onSelect callback on show all button click', async () => {
+    const props = getDefaultProps({limit: NUMBER_OF_ASSETS - 1});
+    const {getByText} = render(
+      <CollectionSection {...props}>
+        <span className={`collection-header-icon icon-library`}></span>
+      </CollectionSection>,
+    );
+
+    const button = getByText('collectionShowAll');
+    fireEvent.click(button);
+
+    expect(props.onSelect).toHaveBeenCalled();
+  });
+});

src/script/page/MainContent/panels/Collection/CollectionSection.tsx

@@ -33,7 +33,7 @@ const CollectionSection: React.FC<{
   if (messages.length === 0) {
     return null;
   }
-  const hasExtra = true || messages.length > limit;
+  const hasExtra = messages.length > limit;
   const topMessages = messages.slice(0, limit);
 
   return (
@@ -42,7 +42,7 @@ const CollectionSection: React.FC<{
         {children}
         <span className="label-bold-xs">{label}</span>
         {hasExtra && (
-          <button className="collection-header-all accent-text" onClick={() => onSelect()}>
+          <button className="collection-header-all accent-text" onClick={onSelect}>
             <span data-uie-name="collection-show-all">{t('collectionShowAll', messages.length)}</span>
             &nbsp;<span className="icon-forward font-size-xxs"></span>
           </button>