Merge pull request #1767 from SUI-Components/debt/jest-compatibility-…

…with-studio-dev feat(packages/sui-studio): Add jest compatibility with test path on studio-dev
SUI-Components · Jun 10, 2024 · a523169 · a523169
2 parents 5d34bc3 + e0f232b
commit a523169
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/packages/sui-studio/bin/sui-studio-dev.js b/packages/sui-studio/bin/sui-studio-dev.js
@@ -45,15 +45,20 @@ if (!category || !component) {
 
 const componentPath = path.join(PWD, 'components', category, component)
 const legacyTestPath = path.join(PWD, 'test', category, component)
+const jestPath = path.join(componentPath, '__tests__')
 
 const testPath = fs.existsSync(legacyTestPath) ? legacyTestPath : path.join(componentPath, 'test')
+const isJestTest = fs.existsSync(jestPath)
 
 const {cache, ...others} = config
 
 const studioDevConfig = {
   ...others,
   context: path.join(__dirname, '..', 'workbench', 'src'),
-  plugins: [...config.plugins, new webpack.DefinePlugin({__COMPONENT_ID__: JSON.stringify(componentID)})],
+  plugins: [
+    ...config.plugins,
+    new webpack.DefinePlugin({__COMPONENT_ID__: JSON.stringify(componentID), __DISABLE_TESTS__: isJestTest})
+  ],
   resolve: {
     ...config.resolve,
     alias: {

diff --git a/packages/sui-studio/workbench/src/components/Root/index.js b/packages/sui-studio/workbench/src/components/Root/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import {useState} from 'react'
 
 import PropTypes from 'prop-types'
@@ -7,7 +8,10 @@ import Select from '../Select/index'
 import Test from '../Suite/index'
 
 const importComponent = () => import('component/index')
-const importTest = () => import('test/index.test')
+let importTest = null
+if (!__DISABLE_TESTS__) {
+  importTest = () => import('test/index.test')
+}
 
 const getFromStorage = (key, defaultValue) => window.sessionStorage[key] || defaultValue
 
@@ -38,19 +42,23 @@ export default function Root({componentID, contexts = {}, themes}) {
           initValue={actualStyle}
           onChange={updateOnChange(setActualStyle, 'actualStyle')}
         />
-        <button
-          className="Root-testSwitch"
-          onClick={() => {
-            updateOnChange(setShowTests, 'showTests')(showTests === 'show' ? 'hide' : 'show')
-          }}
-        >
-          {showTests === 'show' ? 'Close Tests' : 'Open Tests'}
-        </button>
+        {importTest ? (
+          <button
+            className="Root-testSwitch"
+            onClick={() => {
+              updateOnChange(setShowTests, 'showTests')(showTests === 'show' ? 'hide' : 'show')
+            }}
+          >
+            {showTests === 'show' ? 'Close Tests' : 'Open Tests'}
+          </button>
+        ) : null}
       </Header>
 
       <iframe src={iframeSrc} scrolling="yes" title="Demo" />
       <div className="Root-test" hidden={showTests === 'hide'}>
-        <Test open contexts={contexts} importComponent={importComponent} importTest={importTest} />
+        {importTest ? (
+          <Test open contexts={contexts} importComponent={importComponent} importTest={importTest} />
+        ) : null}
       </div>
     </div>
   )