From 998cd27b09cca55b41ca2abc50a8f151f53e6e7e Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Mon, 1 Jul 2024 15:17:12 +0300
Subject: [PATCH] test: ChartSettings

---
 .../SettingsModal/__tests__/settings-chart.spec.tsx | 13 ++++++++++++-
 .../App/Containers/SettingsModal/settings-chart.tsx |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/trader/src/App/Containers/SettingsModal/__tests__/settings-chart.spec.tsx b/packages/trader/src/App/Containers/SettingsModal/__tests__/settings-chart.spec.tsx
index ca20d51e410a..e360ac00ea57 100644
--- a/packages/trader/src/App/Containers/SettingsModal/__tests__/settings-chart.spec.tsx
+++ b/packages/trader/src/App/Containers/SettingsModal/__tests__/settings-chart.spec.tsx
@@ -20,7 +20,11 @@ jest.mock('Assets/SvgComponents/settings/dark/interval-enabled.svg', () =>
 describe('<ChartSettings/>', () => {
     let default_mock_store: ReturnType<typeof mockStore>;
     beforeEach(() => {
-        default_mock_store = mockStore({});
+        default_mock_store = mockStore({
+            contract_trade: {
+                granularity: 60,
+            },
+        });
     });
 
     const mockChartSettings = () => {
@@ -45,4 +49,11 @@ describe('<ChartSettings/>', () => {
 
         expect(default_mock_store.ui.setChartCountdown).toBeCalled();
     });
+    it('should display Unavailable message and disable checkbox if chart granularity === 0 (1 Tick interval)', () => {
+        default_mock_store.contract_trade.granularity = 0;
+        render(mockChartSettings());
+
+        expect(screen.getByText(/This feature is unavailable for tick intervals/)).toBeInTheDocument();
+        expect(screen.getByRole('checkbox')).toBeDisabled();
+    });
 });
diff --git a/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx b/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx
index 662ebae75c36..b8f60ce7dbd7 100644
--- a/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx
+++ b/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Checkbox, InlineMessage } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import MediaItem, { MediaHeading, MediaIcon, MediaDescription } from 'App/Components/Elements/Media';
 import { observer, useStore } from '@deriv/stores';
 
@@ -50,7 +50,7 @@ const ChartSettings = observer(() => {
                             id='dt_settings_interval_checkbox'
                             defaultChecked={is_countdown_visible}
                             disabled={granularity === 0}
-                            label={localize('Display remaining time for each interval')}
+                            label={<Localize i18n_default_text='Display remaining time for each interval' />}
                             onChange={e => {
                                 if ('checked' in e.target) {
                                     setCountdown(e.target.checked);