SHARED:AKR:OTR:VKT:YKI(Frontend): Fix rendering of toggle filter with…

… zero count

frontend/packages/akr/package.json

@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].4"
+    "shared": "npm:@opetushallitus/[email protected].5"
   }
 }

frontend/packages/otr/package.json

@@ -25,6 +25,6 @@
     "otr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].4"
+    "shared": "npm:@opetushallitus/[email protected].5"
   }
 }

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.5] - 2024-02-28
+
+### Fixed
+
+- ToggleFilterGroup buttons should render zero counts properly
+
 ## [1.10.4] - 2024-01-23
 
 ### Changed

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.4",
+  "version": "1.10.5",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.test.tsx

@@ -0,0 +1,42 @@
+import renderer from 'react-test-renderer';
+
+import { ToggleFilterGroup } from './ToggleFilterGroup';
+
+const enum FilterStatusEnum {
+  Active,
+  Passive,
+  Expired,
+}
+const filterData = [
+  {
+    status: FilterStatusEnum.Active,
+    label: 'Active',
+    count: 10,
+    testId: 'toggleFilter--active',
+  },
+  {
+    status: FilterStatusEnum.Passive,
+    label: 'Passive',
+    count: 0,
+  },
+  {
+    status: FilterStatusEnum.Expired,
+    label: 'Expired',
+  },
+];
+
+describe('ToggleFilterGroup', () => {
+  it('should render correctly', () => {
+    const tree = renderer
+      .create(
+        <ToggleFilterGroup
+          filters={filterData}
+          activeStatus={FilterStatusEnum.Active}
+          onButtonClick={jest.fn}
+        />,
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.tsx

@@ -33,7 +33,7 @@ export function ToggleFilterGroup<T>({
         >
           <div className="columns gapped">
             <div className="grow">{label}</div>
-            {count && <div>{`(${count})`}</div>}
+            {typeof count === "number" && <div>{`(${count})`}</div>}
           </div>
         </CustomButton>
       ))}

frontend/packages/shared/src/components/ToggleFilterGroup/__snapshots__/ToggleFilterGroup.test.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleFilterGroup should render correctly 1`] = `
+<div
+  className="columns"
+>
+  <button
+    className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium border-radius-unset css-zcbmsk-MuiButtonBase-root-MuiButton-root"
+    data-testid="toggleFilter--active"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="columns gapped"
+    >
+      <div
+        className="grow"
+      >
+        Active
+      </div>
+      <div>
+        (10)
+      </div>
+    </div>
+  </button>
+  <button
+    className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium border-radius-unset css-1l9sosn-MuiButtonBase-root-MuiButton-root"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="columns gapped"
+    >
+      <div
+        className="grow"
+      >
+        Passive
+      </div>
+      <div>
+        (0)
+      </div>
+    </div>
+  </button>
+  <button
+    className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-sizeMedium MuiButton-outlinedSizeMedium border-radius-unset css-1l9sosn-MuiButtonBase-root-MuiButton-root"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="columns gapped"
+    >
+      <div
+        className="grow"
+      >
+        Expired
+      </div>
+    </div>
+  </button>
+</div>
+`;

frontend/packages/vkt/package.json

@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].4"
+    "shared": "npm:@opetushallitus/[email protected].5"
   }
 }

frontend/packages/yki/package.json

@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].4"
+    "shared": "npm:@opetushallitus/[email protected].5"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

frontend/yarn.lock

@@ -2586,15 +2586,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.akr@workspace:packages/akr"
   dependencies:
-    shared: "npm:@opetushallitus/[email protected].3"
+    shared: "npm:@opetushallitus/[email protected].5"
   languageName: unknown
   linkType: soft
 
 "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr"
   dependencies:
-    shared: "npm:@opetushallitus/[email protected].3"
+    shared: "npm:@opetushallitus/[email protected].5"
   languageName: unknown
   linkType: soft
 
@@ -2687,7 +2687,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].3":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].5":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -2698,7 +2698,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: "npm:^7.2.1"
-    shared: "npm:@opetushallitus/[email protected].3"
+    shared: "npm:@opetushallitus/[email protected].5"
   languageName: unknown
   linkType: soft
 
@@ -2707,7 +2707,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.yki@workspace:packages/yki"
   dependencies:
     multer: "npm:^1.4.5-lts.1"
-    shared: "npm:@opetushallitus/[email protected].3"
+    shared: "npm:@opetushallitus/[email protected].5"
   languageName: unknown
   linkType: soft