@muonic/muon 0.0.2-beta.0

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

@@ -0,0 +1,284 @@
+import testRunner from 'ava';
+import sinon from 'sinon';
+import appRoot from 'app-root-path';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import esmock from 'esmock';
+import * as utilsLibrary from '../../../scripts/utils/index.mjs';
+
+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) => {
+  const stub = sinon.stub(process, 'exit');
+  utilsLibrary.getConfig('test.json');
+  t.true(process.exit.called);
+  t.true(process.exit.calledWith(1));
+  stub.restore();
+});
+
+testRunner('getConfig config file', async (t) => {
+  const config = utilsLibrary.getConfig('tests/scripts/utils/muon.config.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('getAliasPath invalid', async (t) => {
+  const alias = utilsLibrary.getAliasPaths('invalid');
+  t.true(alias === undefined);
+});
+
+testRunner('getAliasPath config alias regex', async (t) => {
+  const stub = await esmock('../../../scripts/utils/index.mjs', {
+    '../../../scripts/utils/config.mjs': {
+      getConfig: (configFile) => JSON.parse(fs.readFileSync('tests/scripts/utils/muon.config.test.json').toString())
+    }
+  });
+  const alias = stub.getAliasPaths('regex');
+  t.true(alias !== undefined);
+  t.deepEqual(alias, [
+    {
+      find: /^@muon\/utils\/validation$/,
+      replacement: `${process.cwd()}/utils/validation`
+    },
+    {
+      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('getAliasPath config alias glob', async (t) => {
+  const stub = await esmock('../../../scripts/utils/index.mjs', {
+    '../../../scripts/utils/config.mjs': {
+      getConfig: (configFile) => JSON.parse(fs.readFileSync('tests/scripts/utils/muon.config.test.json').toString())
+    }
+  });
+  const alias = stub.getAliasPaths('glob');
+  t.true(alias !== undefined);
+  t.deepEqual(alias, {
+    '@muon/utils/validation': ['./utils/validation'],
+    '@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('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`);
+  });
+});
+
+testRunner('sourceFilesAnalyzer error', async (t) => {
+  const stub = await esmock('../../../scripts/utils/index.mjs', {
+    '../../../scripts/utils/config.mjs': {
+      getConfig: (configFile) => JSON.parse(fs.readFileSync('tests/scripts/utils/muon.config.test.json').toString())
+    }
+  });
+  const sinonStub = sinon.stub(process, 'exit');
+  await stub.sourceFilesAnalyzer();
+  t.true(process.exit.called);
+  t.true(process.exit.calledWith(1));
+  sinonStub.restore();
+});
+
+testRunner('sourceFilesAnalyzer single file', async (t) => {
+  const stub = await esmock('../../../scripts/utils/index.mjs', {
+    '../../../scripts/utils/config.mjs': {
+      getConfig: (configFile) => JSON.parse(fs.readFileSync('tests/scripts/utils/single.component.config.json').toString())
+    }
+  });
+  const result = await stub.sourceFilesAnalyzer();
+  const jsonResult = JSON.parse(result);
+
+  const components = ['card'];
+  const propertiesMap = {
+    card: ['standardTemplate', 'image', 'alt', 'background', '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`);
+  });
+});
+
+testRunner('create tokens', async (t) => {
+  await utilsLibrary.createTokens();
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'css', 'mn-fonts.css')), 'font css file not exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'es6', 'muon-tokens-module.js')), 'muon-tokens-module.js don\'t exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'es6', 'muon-tokens.js')), 'muon-tokens.js don\'t exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'es6', 'muon-tokens.mjs')), 'muon-tokens.mjs don\'t exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'json', 'muon-tokens-reference.json')), 'muon-tokens-reference.json don\'t exist');
+});
+
+testRunner('getDestination', async (t) => {
+  const destination = utilsLibrary.getDestination();
+  t.is(destination, 'dist');
+});
+
+testRunner('runner', async (t) => {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  utilsLibrary.runner(path.join(__dirname, 'test-runner.mjs'));
+  t.pass();
+});
+
+testRunner('cleanup on rollup', async (t) => {
+  const destination = utilsLibrary.getDestination();
+  const cemPath = path.join(destination, 'custom-elements.json');
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination);
+  }
+  fs.openSync(cemPath, 'w');
+  t.true(fs.existsSync(destination));
+  t.true(fs.existsSync(cemPath));
+  utilsLibrary.cleanup(destination, true);
+  t.true(fs.existsSync(destination));
+  t.false(fs.existsSync(cemPath));
+});
+
+testRunner('cleanup on serve', async (t) => {
+  const destination = utilsLibrary.getDestination();
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination);
+  }
+  t.true(fs.existsSync(destination));
+  utilsLibrary.cleanup(destination);
+  t.true(fs.existsSync(destination));
+});

package/tests/utils/validation.functions.test.js

@@ -0,0 +1,199 @@
+/* eslint-disable no-undef */
+import { expect, fixture, html } from '@open-wc/testing';
+import customValidations from '@muonic/muon/utils/validation';
+
+describe('validation', () => {
+  it('isRequired', () => {
+    let validation = customValidations.isRequired(null, '');
+    expect(validation).to.equal('This field is required', 'validation has correct value');
+
+    validation = customValidations.isRequired(null, 'fdgdfdf');
+    expect(validation).to.equal(false, 'validation has correct value');
+  });
+
+  it('isNumber', async () => {
+    let inputElement = {};
+    let validation = customValidations.isNumber(inputElement, '');
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    inputElement = { separator: '-' };
+    validation = customValidations.isNumber(inputElement, 'fdgd-fdf');
+    expect(validation).to.equal('Needs to be a number', 'validation has correct value');
+
+    validation = customValidations.isNumber(inputElement, '343');
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.isNumber(inputElement, '343-23');
+    expect(validation).to.equal(false, 'validation has correct value');
+  });
+
+  it('isInteger', async () => {
+    let inputElement = {};
+    let validation = customValidations.isInteger(inputElement, '');
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    inputElement = { separator: '-' };
+    validation = customValidations.isInteger(inputElement, 'fdgdf-df');
+    expect(validation).to.equal('Needs to be a whole number', 'validation has correct value');
+
+    validation = customValidations.isInteger(inputElement, 'Infinity');
+    expect(validation).to.equal('Needs to be a whole number', 'validation has correct value');
+
+    validation = customValidations.isInteger(inputElement, '343-67');
+    expect(validation).to.equal(false, 'validation has correct value');
+  });
+
+  it('isEmail', async () => {
+    let inputElement = await fixture(html`<input></input>`);
+    let validation = customValidations.isEmail(inputElement, '');
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    inputElement = await fixture(html`<input></input>`);
+    validation = customValidations.isEmail(inputElement, 'fdgdf-df');
+    expect(validation).to.equal('Your email does not look right', 'validation has correct value');
+
+    validation = customValidations.isEmail(inputElement, 'djfgdfg');
+    expect(validation).to.equal('Your email does not look right', 'validation has correct value');
+
+    validation = customValidations.isEmail(inputElement, 'fjjdf.dfgd@dfd.com');
+    expect(validation).to.equal(false, 'validation has correct value');
+  });
+
+  it('minLength', async () => {
+    let inputElement = {};
+    let validation = customValidations.minLength(inputElement, '', 2);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.minLength(inputElement, '353434', 6);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.minLength(inputElement, 'f', 2);
+    expect(validation).to.equal('Length must be at least 2 characters', 'validation has correct value');
+
+    inputElement = { separator: '-' };
+    validation = customValidations.minLength(inputElement, 'djfg-dfg', 8);
+    expect(validation).to.equal('Length must be at least 8 characters', 'validation has correct value');
+
+    validation = customValidations.minLength(inputElement, 'djfg-dfg8', 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+  });
+
+  it('maxLength', async () => {
+    let inputElement = {};
+    let validation = customValidations.maxLength(inputElement, '', 2);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.maxLength(inputElement, '353434', 6);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.maxLength(inputElement, 'djf-gdf-gdjd', 10);
+    expect(validation).to.equal('Length must be no longer than 10 characters', 'validation has correct value');
+
+    inputElement = { separator: '-' };
+    validation = customValidations.maxLength(inputElement, '353-434', 6);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.maxLength(inputElement, 'fer', 2);
+    expect(validation).to.equal('Length must be no longer than 2 characters', 'validation has correct value');
+  });
+
+  it('isBetween', async () => {
+    let inputElement = {};
+    let validation = customValidations.isBetween(inputElement, '', 2, 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.isBetween(inputElement, 's', 2, 8);
+    expect(validation).to.equal('Length must be between 2 and 8 characters', 'validation has correct value');
+
+    validation = customValidations.isBetween(inputElement, 'df', 2, 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.isBetween(inputElement, 'dfedfdfd', 2, 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.isBetween(inputElement, 'dfdfgdsfgsdfasd', 2, 8);
+    expect(validation).to.equal('Length must be between 2 and 8 characters', 'validation has correct value');
+
+    inputElement = { separator: '-' };
+    validation = customValidations.isBetween(inputElement, 'd-', 2, 8);
+    expect(validation).to.equal('Length must be between 2 and 8 characters', 'validation has correct value');
+
+    validation = customValidations.isBetween(inputElement, 'd-jfg-dfg', 2, 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+  });
+
+  it('isDate', async () => {
+    const inputElement = {};
+    let validation = customValidations.isDate(inputElement, '');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '23/10/2021');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '2021-10-23');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '36-10-2021');
+    expect(validation).to.equal('Your date does not look right', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '23/3d/2021');
+    expect(validation).to.equal('Your date does not look right', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '2f/03/2021');
+    expect(validation).to.equal('Your date does not look right', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '12/12/20');
+    expect(validation).to.equal('Your date does not look right', 'validation has correct value');
+
+    validation = customValidations.isDate(inputElement, '2021-23-10');
+    expect(validation).to.equal('Your date does not look right', 'validation has correct value');
+  });
+
+  it('minDate', async () => {
+    const inputElement = {};
+    let validation = customValidations.minDate(inputElement, '', '');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.minDate(inputElement, '21/12/2021', '11/12/2021');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.minDate(inputElement, '09/12/2021', '11/12/2021');
+    expect(validation).to.equal('Date must be on or after 11/12/2021', 'validation has correct value');
+  });
+
+  it('maxDate', async () => {
+    const inputElement = {};
+    let validation = customValidations.maxDate(inputElement, '', '');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.maxDate(inputElement, '09/12/2021', '11/12/2021');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.maxDate(inputElement, '21/12/2021', '11/12/2021');
+    expect(validation).to.equal('Date must be on or before 11/12/2021', 'validation has correct value');
+  });
+
+  it('hasNumbers', async () => {
+    const inputElement = {};
+    let validation = customValidations.hasNumbers(inputElement, '');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.hasNumbers(inputElement, 'rgdfgdf');
+    expect(validation).to.equal('Must include at least one number', 'validation has correct value');
+
+    validation = customValidations.hasNumbers(inputElement, 'fgdf3gd');
+    expect(validation).to.equal('', 'validation has correct value');
+  });
+
+  it('hasLetters', async () => {
+    const inputElement = {};
+    let validation = customValidations.hasLetters(inputElement, '');
+    expect(validation).to.equal('', 'validation has correct value');
+
+    validation = customValidations.hasLetters(inputElement, '43232');
+    expect(validation).to.equal('Must include at least one letter', 'validation has correct value');
+
+    validation = customValidations.hasLetters(inputElement, '232d23');
+    expect(validation).to.equal('', 'validation has correct value');
+  });
+});