feat(ui/testing): new specs script arg: "--test" (dry-run create + va…

…lidate)

ui/build/build.api.js

@@ -21,7 +21,7 @@ const apiValueRegex = {
   Boolean: /^(true|false)$/,
   Function: / => /,
   RegExp: /^\/.*\/[gimuy]*$/,
-  Element: /(^document\.?|^\..+|^#.+|^body\.?|.+El$|\$refs)/,
+  Element: /(^document\.|^\..+|^#.+|.+El$|\$refs)/,
   Component: /^[A-Z][A-Za-z]+$/,
   'Promise<any>': apiValuePromiseRegex,
   'Promise<void>': apiValuePromiseRegex,

ui/src/api.extends.json

@@ -132,7 +132,7 @@
         ".scroll-target-class",
         "#scroll-target-id",
         "$refs.scrollTarget",
-        "body"
+        "document.body"
       ],
       "category": "behavior"
     },

ui/src/components/btn-dropdown/QBtnDropdown.json

@@ -59,7 +59,7 @@
       "desc": "Class definitions to be attributed to the menu",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/editor/QEditor.json

@@ -233,7 +233,7 @@
       "desc": "CSS classes for the input area",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/fab/use-fab.json

@@ -90,7 +90,7 @@
       "desc": "Class definitions to be attributed to the label container",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/file/QFile.json

@@ -77,7 +77,7 @@
       "desc": "Class definitions to be attributed to the underlying selection container",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/input/QInput.json

@@ -56,7 +56,7 @@
       "desc": "Class definitions to be attributed to the underlying input tag",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/pagination/QPagination.json

@@ -219,7 +219,7 @@
       "desc": "Class definitions to be attributed to the input (if using one)",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/select/QSelect.json

@@ -287,7 +287,7 @@
       "desc": "Class definitions to be attributed to the underlying input tag",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/splitter/QSplitter.json

@@ -55,7 +55,7 @@
       "desc": "Class definitions to be attributed to the 'before' panel",
       "examples": [
         "'bg-deep-orange'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -66,7 +66,7 @@
       "desc": "Class definitions to be attributed to the 'after' panel",
       "examples": [
         "'bg-deep-orange'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -77,7 +77,7 @@
       "desc": "Class definitions to be attributed to the splitter separator",
       "examples": [
         "'bg-deep-orange'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },

ui/src/components/table/QTable.json

@@ -528,7 +528,7 @@
       "desc": "CSS classes to apply to native HTML <table> element's wrapper (which is a DIV)",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -550,7 +550,7 @@
       "desc": "CSS classes to apply to header of native HTML <table> (which is a TR)",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -573,7 +573,7 @@
       "examples": [
         "'my-special-class'",
         "'justify-center'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -595,7 +595,7 @@
       "desc": "CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)",
       "examples": [
         "'my-special-class'",
-        "{ 'my-special-class': <condition> }"
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -607,7 +607,7 @@
       "examples": [
         "'my-special-class'",
         "'text-h1'",
-        "{ 'text-h1': <condition> }"
+        "{ 'text-h1': true }"
       ],
       "category": "style"
     },

ui/src/plugins/notify/Notify.json

@@ -131,7 +131,7 @@
         "desc": "Class definitions to be attributed to the badge",
         "examples": [
           "'my-special-class'",
-          "{ 'my-special-class': <condition> }"
+          "{ 'my-special-class': true }"
         ]
       },
 
@@ -145,7 +145,7 @@
         "desc": "Class definitions to be attributed to the progress bar",
         "examples": [
           "'my-special-class'",
-          "{ 'my-special-class': <condition> }"
+          "{ 'my-special-class': true }"
         ]
       },
 
@@ -349,7 +349,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "'my-special-class'",
-                "{ 'my-special-class': <condition> }"
+                "{ 'my-special-class': true }"
               ]
             },
 
@@ -363,7 +363,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "'my-special-class'",
-                "{ 'my-special-class': <condition> }"
+                "{ 'my-special-class': true }"
               ]
             },
 

ui/testing/specs/astParser.js

@@ -75,7 +75,7 @@ export function readAstJson (ctx) {
         )
         console.error('declaration', node.declaration)
         console.error('ctx', ctx)
-        process.exit(1)
+        throw new Error('readAstJson > unknown ExportNamedDeclaration > declaration')
       }
       if (node.declaration.type === 'VariableDeclaration') {
         node.declaration.declarations.forEach(declaration => {
@@ -101,7 +101,7 @@ export function readAstJson (ctx) {
             )
             console.error('declaration', declaration)
             console.error('ctx', ctx)
-            process.exit(1)
+            throw new Error('readAstJson > unknown ExportNamedDeclaration > VariableDeclaration > type')
           }
         })
       }
@@ -156,7 +156,7 @@ export function readAstJson (ctx) {
           )
           console.error('prop', prop)
           console.error('ctx', ctx)
-          process.exit(1)
+          throw new Error('readAstJson > unregistered ExportDefaultDeclaration > ObjectExpression > properties')
         }
 
         const { jsonKey, def } = content[ ref ]
@@ -215,7 +215,7 @@ export function readAstJson (ctx) {
   ) {
     console.error('AST: no variables, classes or functions found for:', ctx.targetAbsolute)
     console.error('ctx', ctx)
-    process.exit(1)
+    throw new Error('readAstJson > no variables, classes or functions found')
   }
 
   if (hasVariables === false) {

ui/testing/specs/cmd.test.js

@@ -0,0 +1,86 @@
+import { relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import fse from 'fs-extra'
+
+import { getTestFile } from './testFile.js'
+
+const testFilePath = fileURLToPath(new URL('./__temp.js', import.meta.url))
+const rootFolder = fileURLToPath(new URL('../..', import.meta.url))
+
+const ctxOverride = {
+  testFileAbsolute: testFilePath,
+  testFileRelative: relative(rootFolder, testFilePath)
+}
+
+/**
+ * Dry-run test of create + validate
+ */
+export async function cmdTest ({
+  ctx,
+  testFile
+}) {
+  console.log(`\n  🍕 Testing ${ ctx.targetRelative }:`)
+
+  let testFileContent
+  try {
+    testFileContent = testFile.createContent()
+  }
+  catch (err) {
+    console.error('  ❌ Failed createContent() test (threw an error)')
+    console.error(err)
+    return
+  }
+
+  fse.writeFileSync(
+    testFilePath,
+    testFileContent,
+    'utf-8'
+  )
+
+  let tempTestFile
+  try {
+    tempTestFile = getTestFile({ ...ctx, ...ctxOverride })
+  }
+  catch (err) {
+    console.error('  ❌ Failed getTestFile() test (threw an error)')
+    console.error(err)
+    fse.unlinkSync(testFilePath)
+    return
+  }
+
+  try {
+    const { errors, warnings } = tempTestFile.getMisconfiguration()
+    if (errors.length !== 0 || warnings.length !== 0) {
+      console.error('  ❌ Failed getMisconfiguration() test')
+      console.error('errors', errors)
+      console.error('warnings', warnings)
+      fse.unlinkSync(testFilePath)
+      return
+    }
+  }
+  catch (err) {
+    console.error('  ❌ Failed getMisconfiguration() test (threw an error)')
+    console.error(err)
+    fse.unlinkSync(testFilePath)
+    return
+  }
+
+  try {
+    const missingTests = tempTestFile.getMissingTests()
+    if (missingTests !== null) {
+      console.error('  ❌ Failed getMissingTests() test')
+      console.log(missingTests)
+      fse.unlinkSync(testFilePath)
+      return
+    }
+  }
+  catch (err) {
+    console.error('  ❌ Failed getMissingTests() test (threw an error)')
+    console.error(err)
+    fse.unlinkSync(testFilePath)
+    return
+  }
+
+  fse.unlinkSync(testFilePath)
+  console.log('  ✅ Passed')
+}

ui/testing/specs/ctx.js

@@ -5,28 +5,30 @@ import fse from 'fs-extra'
 import { pascalCase } from './specs.utils.js'
 
 const rootFolder = fileURLToPath(new URL('../..', import.meta.url))
+const jsRE = /\.js$/
 
 export function createCtx (target) {
   const localName = basename(target)
-  const dirAbsolute = dirname(resolve(rootFolder, target))
-  const testName = localName.replace('.js', '.test.js')
-  const testFileAbsolute = resolve(dirAbsolute, testName)
-  const pascalName = pascalCase(localName.replace('.js', ''))
+  const rootName = localName.replace(jsRE, '')
+  const testName = rootName + '.test.js'
+  const targetAbsolute = resolve(rootFolder, target)
+  const testFileAbsolute = resolve(dirname(targetAbsolute), testName)
+  const pascalName = pascalCase(rootName)
 
   const ctx = {
     targetRelative: target,
-    targetAbsolute: resolve(rootFolder, target),
+    targetAbsolute,
     localName,
     pascalName,
-    dirAbsolute,
+    testTreeRootId: `[${ pascalName } API]`,
     testFileAbsolute,
-    testFileRelative: relative(rootFolder, testFileAbsolute),
-    testTreeRootId: `[${ pascalName } API]`
+    testFileRelative: relative(rootFolder, testFileAbsolute)
   }
 
   let cachedTargetContent
   // on demand only
   Object.defineProperty(ctx, 'targetContent', {
+    enumerable: true,
     get () {
       if (cachedTargetContent === void 0) {
         cachedTargetContent = fse.readFileSync(ctx.targetAbsolute, 'utf-8')

ui/testing/specs/ignoredTestFiles.conf

@@ -10,6 +10,7 @@ src/components/table/table-pagination.js
 src/components/table/table-row-expand.js
 src/components/table/table-row-selection.js
 src/components/table/table-sort.js
+src/components/uploader/QUploaderAddTrigger.js
 src/composables.js
 src/composables/private/use-field.js
 src/composables/private/use-file-dom-props.js

ui/testing/specs/readAssociatedJsonFile.js

@@ -10,7 +10,7 @@ function readJsonFile (ctx) {
   const distJsonFile = resolve(rootFolder, 'dist/api/', jsonFileBasename)
   if (fse.existsSync(distJsonFile)) return distJsonFile
 
-  const localJsonFile = resolve(ctx.dirAbsolute, jsonFileBasename)
+  const localJsonFile = ctx.targetAbsolute.replace('.js', '.json')
   if (fse.existsSync(localJsonFile)) return localJsonFile
 }