Merge pull request #45 from suisin-deriv/suisin/74185/ts_migration_se…

…lf_exclusion_modal Suisin/refactor: ts migration for self-exclusion-modal
jim-deriv · Jan 25, 2023 · 114cd95 · 114cd95
2 parents 1232228 + 3fad336
commit 114cd95
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/...on/__tests__/self-exclusion-modal.spec.js → ...n/__tests__/self-exclusion-modal.spec.tsx b/...on/__tests__/self-exclusion-modal.spec.js → ...n/__tests__/self-exclusion-modal.spec.tsx
@@ -7,12 +7,17 @@ const modal_root = document.createElement('div');
 modal_root.setAttribute('id', 'modal_root');
 document.body.appendChild(modal_root);
 
-jest.mock('../self-exclusion-article-content', () => () => <div>SelfExclusionArticleContent</div>);
+jest.mock('../self-exclusion-article-content', () => {
+    const mockArticle = () => <div>SelfExclusionArticleContent</div>;
+    return mockArticle;
+});
 
 describe('<SelfExclusionModal />', () => {
     it('should be shown on the page', () => {
         render(
-            <SelfExclusionContext.Provider value={{ state: { show_article: true }, toggleArticle: () => {} }}>
+            <SelfExclusionContext.Provider
+                value={{ state: { show_article: true }, overlay_ref: document.createElement('div') }}
+            >
                 <SelfExclusionModal />
             </SelfExclusionContext.Provider>
         );

diff --git a/.../self-exclusion/self-exclusion-context.js → ...self-exclusion/self-exclusion-context.tsx b/.../self-exclusion/self-exclusion-context.js → ...self-exclusion/self-exclusion-context.tsx
diff --git a/...s/self-exclusion/self-exclusion-modal.jsx → ...s/self-exclusion/self-exclusion-modal.tsx b/...s/self-exclusion/self-exclusion-modal.jsx → ...s/self-exclusion/self-exclusion-modal.tsx
@@ -7,9 +7,9 @@ const SelfExclusionModal = () => {
     const { state, toggleArticle } = React.useContext(SelfExclusionContext);
 
     return (
-        <Modal className='self_exclusion__article-modal' is_open={state.show_article} toggleModal={toggleArticle}>
+        <Modal className='self_exclusion__article-modal' is_open={state?.show_article} toggleModal={toggleArticle}>
             <ThemedScrollbars>
-                <SelfExclusionArticleContent toggleModal={toggleArticle} />
+                <SelfExclusionArticleContent />
             </ThemedScrollbars>
         </Modal>
     );

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion.jsx b/packages/account/src/Components/self-exclusion/self-exclusion.jsx
@@ -15,7 +15,7 @@ import DemoMessage from 'Components/demo-message';
 import LoadErrorMessage from 'Components/load-error-message';
 import SelfExclusionArticleContent from './self-exclusion-article-content';
 import SelfExclusionContext from './self-exclusion-context';
-import SelfExclusionModal from './self-exclusion-modal.jsx';
+import SelfExclusionModal from './self-exclusion-modal';
 import SelfExclusionWrapper from './self-exclusion-wrapper';
 import SelfExclusionForm from './self-exclusion-form.jsx';
 

diff --git a/packages/components/src/components/label/label.tsx b/packages/components/src/components/label/label.tsx
@@ -17,8 +17,8 @@ const available_modes = [
 const available_sizes = ['regular', 'large'] as const;
 
 type TLabel = {
-    mode: (typeof available_modes)[number];
-    size: (typeof available_sizes)[number];
+    mode: typeof available_modes[number];
+    size: typeof available_sizes[number];
     className?: string;
 };