@muonic/muon 0.0.2-experimental-152-a931dc2.0 → 0.0.2-experimental-153-7d10f5f.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-152-a931dc2.0",
+  "version": "0.0.2-experimental-153-7d10f5f.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "web-test-runner \"./tests/**/*.test.js\" --coverage",
+    "test:scripts": "ava \"tests/scripts/utils/utils-test.js\"",
     "test:browserstack": "web-test-runner \"./tests/**/*.test.js\" --config web-test-runner.browserstack.config.mjs",
     "release": "standard-version"
   },
@@ -56,6 +57,7 @@
     "@web/test-runner": "0.14.0",
     "@web/test-runner-browserstack": "0.5.1",
     "@web/test-runner-playwright": "0.8.10",
+    "ava": "4.3.3",
     "sinon": "14.0.0"
   },
   "engines": {

package/scripts/serve/run.mjs

@@ -4,7 +4,7 @@ import StorybookConfig from '../../storybook/server.config.mjs';
 
 const myServerDefinitions = [
   { name: 'no-open', type: Boolean },
-  { name: 'no-watch', type: Boolean },
+  { name: 'no-watch', type: Boolean }
 ];
 
 const myConfig = commandLineArgs(myServerDefinitions, { partial: true });

package/scripts/utils/index.mjs

@@ -139,7 +139,7 @@ const getAliasPaths = (type) => {
         obj[key] = [value];
       } else {
         // @TODO: This needs a better way to find the node_modules folder
-        obj[key] = [`node_modules/${value}`];
+        obj[key] = [`${appRoot}/node_modules/${value}`];
       }
     });
 
@@ -177,7 +177,7 @@ const getAliasPaths = (type) => {
 
 const sourceFilesAnalyzer = async () => {
   const files = await findComponents();
-  const paths = await getAliasPaths('glob');
+  const paths = getAliasPaths('glob');
   const options = {
     noEmitOnError: false,
     allowJs: true,
@@ -207,7 +207,8 @@ const sourceFilesAnalyzer = async () => {
     verbose: true,
     config: {
       format: 'json',
-      discoverNodeModules: true
+      discoverNodeModules: true,
+      excludedDeclarationNames: ['ScopedElementsMixin']
     }
   }));
 

package/tests/scripts/utils/test.json

@@ -0,0 +1,9 @@
+{
+  "components": {
+    "included": "inputter,card,image"
+  },
+  "tokens": {
+    "dir": ["tokens/*.json"],
+    "theme": "default"
+  }
+}

package/tests/scripts/utils/utils-test.js

@@ -0,0 +1,134 @@
+const testRunner = require('ava');
+const sinon = require('sinon');
+const appRoot = require('app-root-path');
+
+let utilsLibrary;
+testRunner.before(async () => {
+  await import('../../../scripts/utils/index.mjs').then((utils) => {
+    utilsLibrary = utils;
+  });
+});
+
+testRunner('filterPathToCustomElements default', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements('all');
+  t.is(componentList, '*');
+});
+
+testRunner('filterPathToCustomElements default array', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements(['all']);
+  t.is(componentList, '*');
+});
+
+testRunner('filterPathToCustomElements single component', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements('inputter');
+  t.is(componentList, 'inputter');
+});
+
+testRunner('filterPathToCustomElements single component in array', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements(['inputter']);
+  t.is(componentList, 'inputter');
+});
+
+testRunner('filterPathToCustomElements multiple component', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements(['inputter', 'image']);
+  t.is(componentList, '{inputter,image}');
+});
+
+testRunner('getConfig default file and root', async (t) => {
+  const config = utilsLibrary.getConfig();
+  t.true(config !== undefined);
+});
+
+testRunner('getConfig new file default root', async (t) => {
+  const config = utilsLibrary.getConfig('browserstack.json');
+  t.true(config !== undefined);
+});
+
+testRunner('getConfig config file not exist', async (t) => {
+  sinon.stub(process, 'exit');
+  utilsLibrary.getConfig('test.json');
+  t.true(process.exit.called);
+  t.true(process.exit.calledWith(1));
+});
+
+testRunner('getConfig config file', async (t) => {
+  const config = utilsLibrary.getConfig('tests/scripts/utils/test.json');
+  t.true(config !== undefined);
+});
+
+const componentsDefinitionMacro = async (t, expected) => {
+  const componentDefinition = await utilsLibrary.componentDefiner();
+  t.true(componentDefinition !== undefined);
+  t.true(componentDefinition.indexOf(`import '@webcomponents/scoped-custom-element-registry';`) > -1);
+  Object.keys(expected).forEach((component) => {
+    t.true(componentDefinition.indexOf(`import { ${expected[component]} } from '${process.cwd()}/components/${component}/src/${component}-component.js';`) > -1);
+    t.true(componentDefinition.indexOf(`customElements.define('muon-${component}', ${expected[component]});`) > -1);
+  });
+};
+componentsDefinitionMacro.title = (providedTitle, expected) => `${providedTitle} => ${Object.keys(expected)}`;
+
+testRunner('componentDefiner', componentsDefinitionMacro, { card: 'Card', cta: 'Cta', detail: 'Detail', form: 'Form', icon: 'Icon', inputter: 'Inputter', image: 'Image' });
+
+testRunner('getAliasPath glob', async (t) => {
+  const alias = utilsLibrary.getAliasPaths('glob');
+
+  t.deepEqual(alias, {
+    '@muon/components/*': [`${appRoot}/node_modules/@muonic/muon/components/*`],
+    '@muon/mixins/*': [`${appRoot}/node_modules/@muonic/muon/mixins/*`],
+    '@muon/directives/*': [`${appRoot}/node_modules/@muonic/muon/directives/*`],
+    '@muon/utils/*': [`${appRoot}/node_modules/@muonic/muon/utils/*`],
+    '@muon/tokens': [`${appRoot}/node_modules/@muonic/muon/build/tokens/es6/muon-tokens`]
+  });
+});
+
+testRunner('getAliasPath regex', async (t) => {
+  const alias = utilsLibrary.getAliasPaths('regex');
+  t.deepEqual(alias, [
+    {
+      find: /^@muon\/components\/(.*)$/,
+      replacement: '@muonic/muon/components/$1'
+    },
+    {
+      find: /^@muon\/mixins\/(.*)$/,
+      replacement: '@muonic/muon/mixins/$1'
+    },
+    {
+      find: /^@muon\/directives\/(.*)$/,
+      replacement: '@muonic/muon/directives/$1'
+    },
+    {
+      find: /^@muon\/utils\/(.*)$/,
+      replacement: '@muonic/muon/utils/$1'
+    },
+    {
+      find: /^@muon\/tokens$/,
+      replacement: '@muonic/muon/build/tokens/es6/muon-tokens'
+    }
+  ]);
+});
+
+testRunner('sourceFilesAnalyzer', async (t) => {
+  const result = await utilsLibrary.sourceFilesAnalyzer();
+  const jsonResult = JSON.parse(result);
+
+  const components = ['card', 'cta', 'detail', 'form', 'icon', 'image', 'inputter', 'inputter-detail'];
+  const propertiesMap = {
+    card: ['standardTemplate', 'image', 'alt', 'background', 'type'],
+    cta: ['href', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    detail: ['icon', 'standardTemplate', 'open', 'type'],
+    form: ['standardTemplate', 'type'],
+    icon: ['size', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'url', 'describe', 'type'],
+    image: ['src', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
+    inputter: ['helper', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
+    'inputter-detail': ['icon', 'standardTemplate', 'open', 'type']
+  };
+  t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);
+
+  components.forEach((component) => {
+    t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
+      (property) => property.name), propertiesMap[component]);
+  });
+  jsonResult.tags?.map((tag) => {
+    t.true(tag.description !== undefined, `${tag.name} description is not present`);
+  });
+});