From d501076d2d36fe12e5e3283b28ce255f47d74c07 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 10 Dec 2024 16:53:41 +0100
Subject: [PATCH] chore: add test for disabling buttons on small screen

---
 .../FilterBar/__tests__/FilterBadge.spec.js   | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js b/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js
index 9b9328833..fd0d32110 100644
--- a/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js
+++ b/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js
@@ -3,16 +3,14 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
+import { useWindowDimensions } from '../../../../components/WindowDimensionsProvider.js'
 import FilterBadge from '../FilterBadge.js'
 
 jest.mock('@dhis2/app-runtime', () => ({
     useDhis2ConnectionStatus: jest.fn(() => ({ isConnected: true })),
 }))
 jest.mock('../../../../components/WindowDimensionsProvider.js', () => ({
-    useWindowDimensions: () => ({
-        width: 1920,
-        height: 1080,
-    }),
+    useWindowDimensions: jest.fn(() => ({ width: 1920, height: 1080 })),
 }))
 
 const baseState = { selected: { id: 'dashboard1' } }
@@ -80,6 +78,7 @@ test('Has enabled buttons when online', () => {
     expect(getByTestId('filter-badge-button')).toBeEnabled()
     expect(getByTestId('filter-badge-clear-button')).toBeEnabled()
 })
+
 test('Has disabled buttons when offline', () => {
     useDhis2ConnectionStatus.mockImplementation(() => ({ isConnected: false }))
     const filter = {
@@ -100,3 +99,24 @@ test('Has disabled buttons when offline', () => {
     expect(getByTestId('filter-badge-button')).toBeDisabled()
     expect(getByTestId('filter-badge-clear-button')).toBeDisabled()
 })
+
+test('Has disabled buttons when on small screen', () => {
+    useWindowDimensions.mockImplementation(() => ({ width: 440, height: 780 }))
+    const filter = {
+        id: 'ponies',
+        name: 'Ponies',
+        values: [{ name: 'Twilight Sparkle' }],
+    }
+    const { getByTestId } = render(
+        <Provider store={createMockStore()}>
+            <FilterBadge
+                filter={filter}
+                openFilterModal={jest.fn()}
+                removeFilter={jest.fn}
+                onRemove={Function.prototype}
+            />
+        </Provider>
+    )
+    expect(getByTestId('filter-badge-button')).toBeDisabled()
+    expect(getByTestId('filter-badge-clear-button')).toBeDisabled()
+})