From 436092828c6f8bcb8c785cea3d7746b552009c8f Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Wed, 1 May 2024 15:48:41 +0800 Subject: [PATCH 1/4] chore: replaced vite-plugin-svgr with @svgr/rollup, fix svg issues --- __mocks__/svgReactTransformer.cjs | 2 +- jest.config.cjs | 19 +- package-lock.json | 434 +++++++++++++++++- package.json | 2 + .../__tests__/AdErrorTooltipModal.spec.tsx | 8 - .../PaymentMethodCardHeader.tsx | 6 +- .../PaymentMethodCardHeader.spec.tsx | 2 - .../PaymentMethodWithIcon.tsx | 6 +- .../ChatFooterIcon/ChatFooterIcon.tsx | 4 +- .../components/ChatMessages/ChatMessages.tsx | 2 +- tsconfig.json | 49 +- vite-env-override.d.ts | 5 + vite.config.ts | 4 +- 13 files changed, 466 insertions(+), 77 deletions(-) create mode 100644 vite-env-override.d.ts diff --git a/__mocks__/svgReactTransformer.cjs b/__mocks__/svgReactTransformer.cjs index a6610c3c..8952e377 100644 --- a/__mocks__/svgReactTransformer.cjs +++ b/__mocks__/svgReactTransformer.cjs @@ -4,4 +4,4 @@ module.exports = { process() { return `module.exports = ${JSON.stringify(React.Component)}`; }, -}; \ No newline at end of file +}; diff --git a/jest.config.cjs b/jest.config.cjs index 1bd924a2..ecbe13ff 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -1,17 +1,16 @@ module.exports = { - testEnvironment: 'jsdom', - transform: { - '^.+\\.tsx?$': 'ts-jest', - '^.+\\.(js|jsx)$': 'babel-jest', - '^.+\\.svg$': '/__mocks__/svgReactTransformer.cjs', - }, moduleNameMapper: { - '\\.(css|less|sass|scss)$': 'identity-obj-proxy', '@deriv-com/(.*)': '/node_modules/@deriv-com/$1', - '^@/assets/(.*)\\.svg\\?react$': '/__mocks__/svgReactTransformer.cjs', - '^@/assets/(.*)$': '/src/assets/$1', + '\\.(css|less|sass|scss)$': 'identity-obj-proxy', '^@/(.*)$': '/src/$1', + '^@/assets/(.*)$': '/src/assets/$1', }, - transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui|@sendbird/chat)).+\\.js$'], setupFilesAfterEnv: ['/jest.setup.ts'], + testEnvironment: 'jsdom', + transform: { + '^.+\\.(js|jsx)$': 'babel-jest', + '^.+\\.svg$': 'jest-transform-stub', + '^.+\\.tsx?$': 'ts-jest', + }, + transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui|@sendbird/chat)).+\\.js$'], }; diff --git a/package-lock.json b/package-lock.json index 8a1db5d9..15793b7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@deriv/quill-design": "^1.2.24", "@deriv/quill-icons": "^1.18.10", "@sendbird/chat": "^4.11.3", + "@svgr/rollup": "^8.1.0", "@tanstack/react-query": "^5.28.14", "@tanstack/react-table": "^8.15.0", "@vitejs/plugin-react": "^4.2.1", @@ -24,6 +25,7 @@ "downshift": "^9.0.0", "history": "^4.10.1", "html2canvas": "^1.4.1", + "jest-transform-stub": "^2.0.0", "lodash": "^4.17.21", "moment": "^2.30.1", "qrcode.react": "^3.1.0", @@ -902,7 +904,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz", "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0" }, @@ -1011,7 +1012,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz", "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0" }, @@ -1601,11 +1601,24 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-react-constant-elements": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.1.tgz", + "integrity": "sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-react-display-name": { "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz", "integrity": "sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0" }, @@ -1620,7 +1633,6 @@ "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz", "integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==", - "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-module-imports": "^7.22.15", @@ -1639,7 +1651,6 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz", "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==", - "dev": true, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.22.5" }, @@ -1682,7 +1693,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.1.tgz", "integrity": "sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==", - "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-plugin-utils": "^7.24.0" @@ -1798,7 +1808,6 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz", "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==", - "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-create-class-features-plugin": "^7.24.4", @@ -1982,7 +1991,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.1.tgz", "integrity": "sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-validator-option": "^7.23.5", @@ -2002,7 +2010,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz", "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==", - "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-validator-option": "^7.23.5", @@ -4695,6 +4702,49 @@ "@svgr/core": "*" } }, + "node_modules/@svgr/plugin-svgo": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz", + "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==", + "dependencies": { + "cosmiconfig": "^8.1.3", + "deepmerge": "^4.3.1", + "svgo": "^3.0.2" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/rollup": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-8.1.0.tgz", + "integrity": "sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==", + "dependencies": { + "@babel/core": "^7.21.3", + "@babel/plugin-transform-react-constant-elements": "^7.21.3", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.0", + "@rollup/pluginutils": "^5.0.2", + "@svgr/core": "8.1.0", + "@svgr/plugin-jsx": "8.1.0", + "@svgr/plugin-svgo": "8.1.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, "node_modules/@tanstack/query-core": { "version": "5.29.0", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz", @@ -5033,6 +5083,14 @@ "node": ">= 10" } }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@tsconfig/node10": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", @@ -6985,6 +7043,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -7780,6 +7843,72 @@ "xtend": ">=4.0.0 <4.1.0-0" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-select/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/css-select/node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/css-select/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/css-select/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/css-tokenize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz", @@ -7814,6 +7943,29 @@ "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==", "dev": true }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -7832,6 +7984,36 @@ "node": ">=4" } }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + }, "node_modules/cssom": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", @@ -8069,7 +8251,6 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -13598,6 +13779,11 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/jest-transform-stub": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz", + "integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==" + }, "node_modules/jest-transformer-svg": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/jest-transformer-svg/-/jest-transformer-svg-2.0.2.tgz", @@ -14982,6 +15168,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" + }, "node_modules/memory-fs": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz", @@ -15382,6 +15573,17 @@ "node": ">=8" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", @@ -18585,6 +18787,38 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, + "node_modules/svgo": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz", + "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==", + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, + "node_modules/svgo/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -21178,7 +21412,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz", "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0" } @@ -21251,7 +21484,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz", "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0" } @@ -21607,11 +21839,18 @@ "@babel/helper-plugin-utils": "^7.24.0" } }, + "@babel/plugin-transform-react-constant-elements": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.1.tgz", + "integrity": "sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==", + "requires": { + "@babel/helper-plugin-utils": "^7.24.0" + } + }, "@babel/plugin-transform-react-display-name": { "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz", "integrity": "sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0" } @@ -21620,7 +21859,6 @@ "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz", "integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==", - "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-module-imports": "^7.22.15", @@ -21633,7 +21871,6 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz", "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==", - "dev": true, "requires": { "@babel/plugin-transform-react-jsx": "^7.22.5" } @@ -21658,7 +21895,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.1.tgz", "integrity": "sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==", - "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-plugin-utils": "^7.24.0" @@ -21726,7 +21962,6 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz", "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==", - "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-create-class-features-plugin": "^7.24.4", @@ -21871,7 +22106,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.1.tgz", "integrity": "sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-validator-option": "^7.23.5", @@ -21885,7 +22119,6 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz", "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-validator-option": "^7.23.5", @@ -23666,6 +23899,32 @@ "svg-parser": "^2.0.4" } }, + "@svgr/plugin-svgo": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz", + "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==", + "requires": { + "cosmiconfig": "^8.1.3", + "deepmerge": "^4.3.1", + "svgo": "^3.0.2" + } + }, + "@svgr/rollup": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-8.1.0.tgz", + "integrity": "sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==", + "requires": { + "@babel/core": "^7.21.3", + "@babel/plugin-transform-react-constant-elements": "^7.21.3", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.0", + "@rollup/pluginutils": "^5.0.2", + "@svgr/core": "8.1.0", + "@svgr/plugin-jsx": "8.1.0", + "@svgr/plugin-svgo": "8.1.0" + } + }, "@tanstack/query-core": { "version": "5.29.0", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz", @@ -23880,6 +24139,11 @@ "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", "dev": true }, + "@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==" + }, "@tsconfig/node10": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", @@ -25386,6 +25650,11 @@ "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "devOptional": true }, + "boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, "brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -25969,6 +26238,53 @@ } } }, + "css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "requires": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "dependencies": { + "dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "requires": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + } + }, + "domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==" + }, + "domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "requires": { + "domelementtype": "^2.3.0" + } + }, + "domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "requires": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + } + } + } + }, "css-tokenize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz", @@ -26005,6 +26321,20 @@ } } }, + "css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "requires": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + } + }, + "css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" + }, "css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -26017,6 +26347,30 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "requires": { + "css-tree": "~2.2.0" + }, + "dependencies": { + "css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "requires": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + } + }, + "mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + } + } + }, "cssom": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", @@ -26194,8 +26548,7 @@ "deepmerge": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", - "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", - "dev": true + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==" }, "define-data-property": { "version": "1.1.4", @@ -30212,6 +30565,11 @@ } } }, + "jest-transform-stub": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz", + "integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==" + }, "jest-transformer-svg": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/jest-transformer-svg/-/jest-transformer-svg-2.0.2.tgz", @@ -31274,6 +31632,11 @@ "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", "dev": true }, + "mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" + }, "memory-fs": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz", @@ -31577,6 +31940,14 @@ "path-key": "^3.0.0" } }, + "nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "requires": { + "boolbase": "^1.0.0" + } + }, "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", @@ -33872,6 +34243,27 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, + "svgo": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz", + "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==", + "requires": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "dependencies": { + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + } + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 38d73aeb..b9b6046c 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@deriv/quill-design": "^1.2.24", "@deriv/quill-icons": "^1.18.10", "@sendbird/chat": "^4.11.3", + "@svgr/rollup": "^8.1.0", "@tanstack/react-query": "^5.28.14", "@tanstack/react-table": "^8.15.0", "@vitejs/plugin-react": "^4.2.1", @@ -30,6 +31,7 @@ "downshift": "^9.0.0", "history": "^4.10.1", "html2canvas": "^1.4.1", + "jest-transform-stub": "^2.0.0", "lodash": "^4.17.21", "moment": "^2.30.1", "qrcode.react": "^3.1.0", diff --git a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx index 266ca85f..788839a9 100644 --- a/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx +++ b/src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx @@ -13,14 +13,6 @@ const mockProps = { visibilityStatus: [], }; -jest.mock('@deriv/api-v2', () => ({ - useAuthorize: () => ({ - data: { - local_currencies: ['USD'], - }, - }), -})); - jest.mock('@deriv-com/ui', () => ({ ...jest.requireActual('@deriv-com/ui'), useDevice: () => ({ isMobile: false }), diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx index 95c7dd52..3791937a 100644 --- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx +++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx @@ -2,9 +2,9 @@ import { THooks } from 'types'; import { FlyoutMenu } from '@/components'; import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons'; import { Button, Checkbox } from '@deriv-com/ui'; -import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg?react'; -import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg?react'; -import IcCashierOther from '../../../public/ic-cashier-other.svg?react'; +import { ReactComponent as IcCashierBankTransfer } from '../../../public/ic-cashier-bank-transfer.svg'; +import { ReactComponent as IcCashierEwallet } from '../../../public/ic-cashier-ewallet.svg'; +import { ReactComponent as IcCashierOther } from '../../../public/ic-cashier-other.svg'; import './PaymentMethodCardHeader.scss'; type TPaymentMethodCardHeaderProps = { diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx index 54c8a117..1bc6c224 100644 --- a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx +++ b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx @@ -1,8 +1,6 @@ import { render, screen } from '@testing-library/react'; import { PaymentMethodCardHeader } from '../PaymentMethodCardHeader'; -jest.mock('../../../public/ic-cashier-ewallet.svg?react', () => 'span'); - describe('PaymentMethodCardHeader', () => { it('should render the component correctly', () => { render( diff --git a/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx b/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx index 6bfdca12..cab748ed 100644 --- a/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx +++ b/src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx @@ -3,9 +3,9 @@ import clsx from 'clsx'; import { THooks } from 'types'; import { TGenericSizes } from '@/utils'; import { Text } from '@deriv-com/ui'; -import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg?react'; -import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg?react'; -import IcCashierOther from '../../public/ic-cashier-other.svg?react'; +import { ReactComponent as IcCashierBankTransfer } from '../../public/ic-cashier-bank-transfer.svg'; +import { ReactComponent as IcCashierEwallet } from '../../public/ic-cashier-ewallet.svg'; +import { ReactComponent as IcCashierOther } from '../../public/ic-cashier-other.svg'; type TPaymentMethodWithIconProps = { className?: string; diff --git a/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx b/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx index d17faaf8..070dca6e 100644 --- a/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx +++ b/src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx @@ -1,7 +1,7 @@ import { MouseEventHandler } from 'react'; import { Button } from '@deriv-com/ui'; -import AttachmentIcon from '../../../../public/ic-attachment.svg?react'; -import SendMessageIcon from '../../../../public/ic-send-message.svg?react'; +import { ReactComponent as AttachmentIcon } from '../../../../public/ic-attachment.svg'; +import { ReactComponent as SendMessageIcon } from '../../../../public/ic-send-message.svg'; type TChatFooterIconProps = { length: number; diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.tsx b/src/pages/orders/components/ChatMessages/ChatMessages.tsx index 982393eb..d1b66f53 100644 --- a/src/pages/orders/components/ChatMessages/ChatMessages.tsx +++ b/src/pages/orders/components/ChatMessages/ChatMessages.tsx @@ -5,7 +5,7 @@ import { CHAT_FILE_TYPE, CHAT_MESSAGE_TYPE } from '@/constants'; import { useSendbird } from '@/hooks/custom-hooks'; import { convertToMB, formatMilliseconds } from '@/utils'; import { Text, useDevice } from '@deriv-com/ui'; -import PDFIcon from '../../../../public/ic-pdf.svg?react'; +import PDFIcon from '../../../../public/ic-pdf.svg'; import { ChatMessageReceipt } from '../ChatMessageReceipt'; import { ChatMessageText } from '../ChatMessageText'; import './ChatMessages.scss'; diff --git a/tsconfig.json b/tsconfig.json index a3bcab7b..62a550e0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,30 +1,29 @@ { - "compilerOptions": { - "baseUrl": "./", - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", + "compilerOptions": { + "baseUrl": "./", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", - "esModuleInterop": true, + "esModuleInterop": true, - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "types": ["@testing-library/jest-dom"], - "paths": { - "@/*": ["src/*"] + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "types": ["@testing-library/jest-dom"], + "paths": { + "@/*": ["src/*"] + } }, - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }], + "include": ["src", "vite-env-override.d.ts"], + "references": [{ "path": "./tsconfig.node.json" }] } - diff --git a/vite-env-override.d.ts b/vite-env-override.d.ts new file mode 100644 index 00000000..5f736902 --- /dev/null +++ b/vite-env-override.d.ts @@ -0,0 +1,5 @@ +declare module '*.svg' { + import * as React from 'react'; + + export const ReactComponent: React.FunctionComponent & { title?: string }>; +} diff --git a/vite.config.ts b/vite.config.ts index b13f5ffe..af80d045 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,8 @@ +/// +/// import path from 'path'; import { defineConfig } from 'vite'; -import svgr from 'vite-plugin-svgr'; +import svgr from '@svgr/rollup'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ From e11cf738bff569d7cdb16dbbe0ee52316b39f38f Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Wed, 1 May 2024 17:10:59 +0800 Subject: [PATCH 2/4] fix: test cases --- .../BlockUnblockUserModal.tsx | 1 + .../__tests__/BlockUnblockUserModal.spec.tsx | 6 ++--- .../DailyLimitModal/DailyLimitModal.tsx | 1 + .../__tests__/DailyLimitModal.spec.tsx | 14 +++++------ .../__tests__/MyAdsDeleteModal.spec.tsx | 4 +-- .../Modals/NicknameModal/NicknameModal.tsx | 4 +-- .../__tests__/NicknameModal.spec.tsx | 18 ++++++------- .../OrderDetailsComplainModal.spec.tsx | 6 ++--- .../__tests__/ShareAdsModal.spec.tsx | 25 +++++++++++-------- 9 files changed, 42 insertions(+), 37 deletions(-) diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx index 7b21a207..28d90254 100644 --- a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx +++ b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx @@ -41,6 +41,7 @@ const BlockUnblockUserModal = ({ return ( ({ - ...jest.requireActual('@deriv/api-v2'), - p2p: { +jest.mock('@/hooks', () => ({ + ...jest.requireActual('@/hooks'), + api: { counterparty: { useBlock: jest.fn(() => ({ mutate: mockUseBlockMutate, diff --git a/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx b/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx index 5dd8a8ae..a8728943 100644 --- a/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx +++ b/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx @@ -76,6 +76,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM return ( // TODO: below modal will be rewritten to use @deriv/ui modal ({ - ...jest.requireActual('@deriv/api-v2'), - p2p: { +jest.mock('@/hooks', () => ({ + ...jest.requireActual('@/hooks'), + api: { advertiser: { useUpdate: jest.fn(() => mockUseAdvertiserUpdate), }, @@ -25,7 +25,7 @@ jest.mock('@deriv/api-v2', () => ({ })); describe('DailyLimitModal', () => { - it('should render loader when data is not ready', () => { + it('should render loader when data is not ready', async () => { render(); expect(screen.getByTestId('dt_derivs-loader')).toBeVisible(); @@ -33,7 +33,7 @@ describe('DailyLimitModal', () => { it('should render the correct title and behaviour', async () => { mockUseAdvertiserUpdate = { ...mockUseAdvertiserUpdate, - isLoading: false, + isPending: false, isSuccess: false, }; render(); @@ -55,7 +55,7 @@ describe('DailyLimitModal', () => { it('should render the successful limits increase', async () => { mockUseAdvertiserUpdate = { ...mockUseAdvertiserUpdate, - isLoading: false, + isPending: false, isSuccess: true, }; render(); diff --git a/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx b/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx index 239d5542..e7992cfc 100644 --- a/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx +++ b/src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx @@ -17,8 +17,8 @@ const mockUseGet = { isLoading: false, }; -jest.mock('@deriv/api-v2', () => ({ - p2p: { +jest.mock('@/hooks', () => ({ + api: { advert: { useGet: jest.fn(() => mockUseGet), }, diff --git a/src/components/Modals/NicknameModal/NicknameModal.tsx b/src/components/Modals/NicknameModal/NicknameModal.tsx index 97e1cd56..4302917f 100644 --- a/src/components/Modals/NicknameModal/NicknameModal.tsx +++ b/src/components/Modals/NicknameModal/NicknameModal.tsx @@ -40,7 +40,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) => useEffect(() => { if (isSuccess) { - onRequestClose; + onRequestClose(); setHasCreatedAdvertiser(true); } else if (isError) { debouncedReset(); @@ -90,7 +90,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) => color='black' onClick={() => { history.push(BUY_SELL_URL); - onRequestClose; + onRequestClose(); }} size='lg' textSize={textSize} diff --git a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx index deb88a39..db49c14f 100644 --- a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx +++ b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx @@ -29,9 +29,9 @@ jest.mock('@deriv-com/ui', () => ({ }), })); -jest.mock('@deriv/api-v2', () => ({ - ...jest.requireActual('@deriv/api-v2'), - p2p: { +jest.mock('@/hooks', () => ({ + ...jest.requireActual('@/hooks'), + api: { advertiser: { useCreate: jest.fn(() => ({ error: undefined, @@ -78,7 +78,7 @@ describe('NicknameModal', () => { expect(mockedMutate).toHaveBeenCalledWith({ name: 'Nahida', }); - expect(mockUseAdvertiserInfoState().setHasCreatedAdvertiser).toBeCalledWith(true); + expect(mockUseAdvertiserInfoState().setHasCreatedAdvertiser).toHaveBeenCalledWith(true); }); it('should invoke reset when there is an error from creating advertiser', async () => { (mockedUseAdvertiserCreate as jest.Mock).mockImplementationOnce(() => ({ @@ -89,11 +89,9 @@ describe('NicknameModal', () => { reset: mockedReset, })); - await (() => { - render(); - }); + render(); - expect(mockedReset).toBeCalled(); + expect(mockedReset).toHaveBeenCalled(); }); it('should close the modal when Cancel button is clicked', async () => { (mockedUseAdvertiserCreate as jest.Mock).mockImplementationOnce(() => ({ @@ -111,7 +109,7 @@ describe('NicknameModal', () => { }); await userEvent.click(cancelBtn); - expect(mockPush).toBeCalledWith('/buy-sell'); - expect(mockProps.onRequestClose).toBeCalledWith(false); + expect(mockPush).toHaveBeenCalledWith('/buy-sell'); + expect(mockProps.onRequestClose).toHaveBeenCalled(); }); }); diff --git a/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx b/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx index e510c872..b6547fca 100644 --- a/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx +++ b/src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx @@ -14,9 +14,9 @@ const mockUseDispute = { mutate: jest.fn(), }; -jest.mock('@deriv/api-v2', () => ({ - ...jest.requireActual('@deriv/api-v2'), - p2p: { +jest.mock('@/hooks', () => ({ + ...jest.requireActual('@/hooks'), + api: { orderDispute: { useDispute: () => mockUseDispute, }, diff --git a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx index d76f394c..67e82122 100644 --- a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx +++ b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx @@ -1,6 +1,6 @@ import html2canvas from 'html2canvas'; import { useDevice } from '@deriv-com/ui'; -import { act, render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ShareAdsModal from '../ShareAdsModal'; @@ -24,8 +24,8 @@ const mockUseGet = { isLoading: false, }; -jest.mock('@deriv/api-v2', () => ({ - p2p: { +jest.mock('@/hooks', () => ({ + api: { advert: { useGet: jest.fn(() => mockUseGet), }, @@ -50,8 +50,8 @@ jest.mock('@deriv-com/ui', () => ({ })); const mockCopyFn = jest.fn(); -jest.mock('@/hooks', () => ({ - ...jest.requireActual('@/hooks'), +jest.mock('@/hooks/custom-hooks', () => ({ + ...jest.requireActual('@/hooks/custom-hooks'), useCopyToClipboard: jest.fn(() => [true, mockCopyFn, jest.fn()]), })); @@ -77,21 +77,26 @@ describe('ShareAdsModal', () => { }); it('should call onCopy function when clicking on copy icon', async () => { - jest.useFakeTimers(); + mockUseDevice.mockReturnValue({ + isDesktop: false, + isMobile: true, + }); render(); + screen.debug(undefined, 1000000); const copyButton = screen.getByRole('button', { name: 'Copy link' }); await userEvent.click(copyButton); - await act(async () => { - jest.runAllTimers(); - await Promise.resolve(); - }); expect(mockCopyFn).toHaveBeenCalledWith( `${window.location.href}advertiser/${mockUseGet.data.advertiser_details.id}?advert_id=${mockProps.id}` ); }); it('should call html2canvas function when clicking on Download this QR code button', async () => { + mockUseDevice.mockReturnValue({ + isDesktop: false, + isMobile: true, + }); + render(); const downloadButton = screen.getByRole('button', { name: 'Download this QR code' }); From 723d0c744498df1f49b7c6d701a7f87f757f5842 Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Thu, 2 May 2024 13:27:28 +0800 Subject: [PATCH 3/4] chore: added suggestions --- __mocks__/svgReactTransformer.cjs | 7 ------- .../Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx | 2 +- vite-env-override.d.ts | 2 +- vite.config.ts | 2 -- 4 files changed, 2 insertions(+), 11 deletions(-) delete mode 100644 __mocks__/svgReactTransformer.cjs diff --git a/__mocks__/svgReactTransformer.cjs b/__mocks__/svgReactTransformer.cjs deleted file mode 100644 index 8952e377..00000000 --- a/__mocks__/svgReactTransformer.cjs +++ /dev/null @@ -1,7 +0,0 @@ -const React = require('react'); - -module.exports = { - process() { - return `module.exports = ${JSON.stringify(React.Component)}`; - }, -}; diff --git a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx index 67e82122..93af0aa5 100644 --- a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx +++ b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx @@ -83,7 +83,7 @@ describe('ShareAdsModal', () => { }); render(); - screen.debug(undefined, 1000000); + const copyButton = screen.getByRole('button', { name: 'Copy link' }); await userEvent.click(copyButton); diff --git a/vite-env-override.d.ts b/vite-env-override.d.ts index 5f736902..4d8cc360 100644 --- a/vite-env-override.d.ts +++ b/vite-env-override.d.ts @@ -1,5 +1,5 @@ declare module '*.svg' { import * as React from 'react'; - export const ReactComponent: React.FunctionComponent & { title?: string }>; + export const ReactComponent: React.FunctionComponent>; } diff --git a/vite.config.ts b/vite.config.ts index af80d045..2895a173 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,3 @@ -/// -/// import path from 'path'; import { defineConfig } from 'vite'; import svgr from '@svgr/rollup'; From 48e8a1e1eabfbe00a89f4fb594e7a6ab05d3aeaa Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Thu, 2 May 2024 13:38:20 +0800 Subject: [PATCH 4/4] fix: PdfIcon import as ReactComponent --- src/pages/orders/components/ChatMessages/ChatMessages.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.tsx b/src/pages/orders/components/ChatMessages/ChatMessages.tsx index d1b66f53..616bc0a8 100644 --- a/src/pages/orders/components/ChatMessages/ChatMessages.tsx +++ b/src/pages/orders/components/ChatMessages/ChatMessages.tsx @@ -5,7 +5,7 @@ import { CHAT_FILE_TYPE, CHAT_MESSAGE_TYPE } from '@/constants'; import { useSendbird } from '@/hooks/custom-hooks'; import { convertToMB, formatMilliseconds } from '@/utils'; import { Text, useDevice } from '@deriv-com/ui'; -import PDFIcon from '../../../../public/ic-pdf.svg'; +import { ReactComponent as PDFIcon } from '../../../../public/ic-pdf.svg'; import { ChatMessageReceipt } from '../ChatMessageReceipt'; import { ChatMessageText } from '../ChatMessageText'; import './ChatMessages.scss';