@ui5/webcomponents-tools 0.0.0-b053ad005 → 0.0.0-b132dd7b9

package/components-package/wdio.sync.js

@@ -1,344 +0,0 @@
-exports.config = {
-	//
-	// ====================
-	// Runner Configuration
-	// ====================
-	//
-	// WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
-	// on a remote machine).
-	runner: 'local',
-
-	//
-	// ==================
-	// Specify Test Files
-	// ==================
-	// Define which test specs should run. The pattern is relative to the directory
-	// from which `wdio` was called. Notice that, if you are calling `wdio` from an
-	// NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
-	// directory is where your package.json resides, so `wdio` will be called from there.
-	//
-	specs: [
-		'./test/specs/**/*.js'
-	],
-	// Patterns to exclude.
-	exclude: [
-		// 'path/to/excluded/files'
-	],
-	//
-	// ============
-	// Capabilities
-	// ============
-	// Define your capabilities here. WebdriverIO can run multiple capabilities at the same
-	// time. Depending on the number of capabilities, WebdriverIO launches several test
-	// sessions. Within your capabilities you can overwrite the spec and exclude options in
-	// order to group specific specs to a specific capability.
-	//
-	// First, you can define how many instances should be started at the same time. Let's
-	// say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
-	// set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
-	// files and you set maxInstances to 10, all spec files will get tested at the same time
-	// and 30 processes will get spawned. The property handles how many capabilities
-	// from the same test should run tests.
-	//
-	maxInstances: 10,
-	//
-	// If you have trouble getting all important capabilities together, check out the
-	// Sauce Labs platform configurator - a great tool to configure your capabilities:
-	// https://docs.saucelabs.com/reference/platforms-configurator
-	//
-	capabilities: [{
-		// maxInstances can get overwritten per capability. So if you have an in-house Selenium
-		// grid with only 5 firefox instances available you can make sure that not more than
-		// 5 instances get started at a time.
-		maxInstances: process.env.TRAVIS ? 1 : 5,
-		//
-		browserName: 'chrome',
-		'goog:chromeOptions': {
-			// to run chrome headless the following flags are required
-			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
-			args: ['--headless', '--disable-gpu'],
-			// args: ['--disable-gpu'],
-		}
-	}],
-	//
-	// port to find chromedriver
-	port: 9515, // default
-	// ===================
-	// Test Configurations
-	// ===================
-	// Define all options that are relevant for the WebdriverIO instance here
-	//
-	// Level of logging verbosity: trace | debug | info | warn | error
-	logLevel: 'error',
-	//
-	// Warns when a deprecated command is used
-	deprecationWarnings: true,
-	//
-	// If you only want to run your tests until a specific amount of tests have failed use
-	// bail (default is 0 - don't bail, run all tests).
-	bail: 0,
-	//
-	// Set a base URL in order to shorten url command calls. If your `url` parameter starts
-	// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
-	// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
-	// gets prepended directly.
-	baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
-	path: '',
-	//
-	// Default timeout for all waitFor* commands.
-	waitforTimeout: 10000,
-	//
-	// Default timeout in milliseconds for request
-	// if Selenium Grid doesn't send response
-	connectionRetryTimeout: 90000,
-	//
-	// Default request retries count
-	connectionRetryCount: 3,
-	//
-	// Test runner services
-	// Services take over a specific job you don't want to take care of. They enhance
-	// your test setup with almost no effort. Unlike plugins, they don't add new
-	// commands. Instead, they hook themselves up into the test process.
-	services: ['chromedriver'],
-	// options
-	chromeDriverArgs: ['--port=9515'], // default
-	// Framework you want to run your specs with.
-	// The following are supported: Mocha, Jasmine, and Cucumber
-	// see also: https://webdriver.io/docs/frameworks.html
-	//
-	// Make sure you have the wdio adapter package for the specific framework installed
-	// before running any tests.
-	framework: 'mocha',
-	//
-	// Test reporter for stdout.
-	// The only one supported by default is 'dot'
-	// see also: https://webdriver.io/docs/dot-reporter.html
-	reporters: ['dot', 'spec'],
-
-	//
-	// Options to be passed to Mocha.
-	// See the full list at http://mochajs.org/
-	mochaOpts: {
-		ui: 'bdd',
-		timeout: 60000
-	},
-	//
-	// =====
-	// Hooks
-	// =====
-	// WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
-	// it and to build services around it. You can either apply a single function or an array of
-	// methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
-	// resolved to continue.
-	/**
-	 * Gets executed once before all workers get launched.
-	 * @param {Object} config wdio configuration object
-	 * @param {Array.<Object>} capabilities list of capabilities details
-	 */
-	// onPrepare: function (config, capabilities) {
-	// },
-	/**
-	 * Gets executed just before initialising the webdriver session and test framework. It allows you
-	 * to manipulate configurations depending on the capability or spec.
-	 * @param {Object} config wdio configuration object
-	 * @param {Array.<Object>} capabilities list of capabilities details
-	 * @param {Array.<String>} specs List of spec file paths that are to be run
-	 */
-	// beforeSession: function (config, capabilities, specs) {
-	// },
-	/**
-	 * Gets executed before test execution begins. At this point you can access to all global
-	 * variables like `browser`. It is the perfect place to define custom commands.
-	 * @param {Array.<Object>} capabilities list of capabilities details
-	 * @param {Array.<String>} specs List of spec file paths that are to be run
-	 */
-	before: function (capabilities, specs) {
-		browser.addCommand("isFocusedDeep", function () {
-			return browser.execute(function (elem) {
-				let activeElement = document.activeElement;
-
-				while (activeElement.shadowRoot) {
-					if (activeElement.shadowRoot.activeElement) {
-						activeElement = activeElement.shadowRoot.activeElement;
-					} else {
-						break;
-					}
-				}
-				return elem === activeElement;
-			}, this);
-		}, true);
-
-		browser.addCommand("setProperty", function(property, value) {
-			return browser.execute((elem, property, value) => {
-				return elem[property] = value;
-			}, this, property, value);
-		}, true);
-
-		browser.addCommand("setAttribute", function(attribute, value) {
-			return browser.execute((elem, attribute, value) => {
-				return elem.setAttribute(attribute, value);
-			}, this, attribute, value);
-		}, true);
-
-		browser.addCommand("removeAttribute", function(attribute) {
-			return browser.execute((elem, attribute) => {
-				return elem.removeAttribute(attribute);
-			}, this, attribute);
-		}, true);
-
-		browser.addCommand("hasClass", function(className) {
-			return browser.execute((elem, className) => {
-				return elem.classList.contains(className);
-			}, this, className);
-		}, true);
-
-		browser.addCommand("getStaticAreaItemClassName", function(selector) {
-			return browser.execute(async (selector) => {
-				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
-				return staticAreaItem.host.classList[0];
-			}, selector);
-		}, false);
-	},
-	/**
-	 * Runs before a WebdriverIO command gets executed.
-	 * @param {String} commandName hook command name
-	 * @param {Array} args arguments that command would receive
-	 */
-	beforeCommand: function (commandName, args) {
-		const waitFor = [
-			"$",
-			"$$",
-			"getAttribute",
-			"getCSSProperty",
-			"getHTML",
-			"getProperty",
-			"getSize",
-			"getStaticAreaItemClassName", // custom
-			"getText",
-			"getValue",
-			"hasClass", // custom
-			"isDisplayed",
-			"isDisplayedInViewport",
-			"isEnabled",
-			"isExisting",
-			"isFocused",
-			"isFocusedDeep", // custom
-			"shadow$",
-			"shadow$$",
-		];
-		if (waitFor.includes(commandName)) {
-			browser.executeAsync(function (done) {
-				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
-			});
-		}
-	},
-
-	/**
-	 * Hook that gets executed before the suite starts
-	 * @param {Object} suite suite details
-	 */
-	// beforeSuite: function (suite) {
-	// },
-	/**
-	 * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-	 * @param {Object} test test details
-	 */
-	// beforeTest: function (test) {
-	// },
-	/**
-	 * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
-	 * beforeEach in Mocha)
-	 */
-	// beforeHook: function () {
-	// },
-	/**
-	 * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
-	 * afterEach in Mocha)
-	 */
-	// afterHook: function () {
-	// },
-	/**
-	 * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-	 * @param {Object} test test details
-	 */
-	// afterTest: function (test) {
-	// },
-	/**
-	 * Hook that gets executed after the suite has ended
-	 * @param {Object} suite suite details
-	 */
-	// afterSuite: function (suite) {
-	// },
-
-	/**
-	 * Runs after a WebdriverIO command gets executed
-	 * @param {String} commandName hook command name
-	 * @param {Array} args arguments that command would receive
-	 * @param {Number} result 0 - command success, 1 - command error
-	 * @param {Object} error error object if any
-	 */
-	afterCommand: function (commandName, args, result, error) {
-
-		// url -> set configuration first
-		if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
-			browser.execute(function() {
-				window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
-			});
-		}
-
-		const waitFor = [
-			"addValue",
-			"clearValue",
-			"click",
-			"doubleClick",
-			"dragAndDrop",
-			"keys",
-			"pause",
-			"removeAttribute", // custom
-			"setAttribute", // custom
-			"setProperty", // custom
-			"setValue",
-			"setWindowSize",
-			"touchAction",
-			"url"
-		];
-		if (waitFor.includes(commandName)) {
-			browser.executeAsync(function (done) {
-				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
-			});
-		}
-	},
-	/**
-	 * Gets executed after all tests are done. You still have access to all global variables from
-	 * the test.
-	 * @param {Number} result 0 - test pass, 1 - test fail
-	 * @param {Array.<Object>} capabilities list of capabilities details
-	 * @param {Array.<String>} specs List of spec file paths that ran
-	 */
-	// after: function (result, capabilities, specs) {
-	// },
-	/**
-	 * Gets executed right after terminating the webdriver session.
-	 * @param {Object} config wdio configuration object
-	 * @param {Array.<Object>} capabilities list of capabilities details
-	 * @param {Array.<String>} specs List of spec file paths that ran
-	 */
-	// afterSession: function (config, capabilities, specs) {
-	// },
-	/**
-	 * Gets executed after all workers got shut down and the process is about to exit.
-	 * @param {Object} exitCode 0 - success, 1 - fail
-	 * @param {Object} config wdio configuration object
-	 * @param {Array.<Object>} capabilities list of capabilities details
-	 * @param {<Object>} results object containing test results
-	 */
-	// onComplete: function(exitCode, config, capabilities, results) {
-	// },
-	/**
-	 * Gets executed when a refresh happens.
-	 * @param {String} oldSessionId session ID of the old session
-	 * @param {String} newSessionId session ID of the new session
-	 */
-	//onReload: function(oldSessionId, newSessionId) {
-	//}
-}

package/lib/documentation/index.js

@@ -1,165 +0,0 @@
-const cssVariables = {};
-const template = require('./templates/template').template;
-const sinceTemplate = require('./templates/api-component-since').template;
-const propertiesTemplate = require('./templates/api-properties-section').template;
-const slotsTemplate = require('./templates/api-slots-section').template;
-const eventsTemplate = require('./templates/api-events-section').template;
-const methodsTemplate = require('./templates/api-methods-section').template;
-const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
-const Handlebars = require('handlebars/dist/handlebars.min.js');
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-const beautify = require("json-beautify");
-
-
-const apiJSONPath = path.normalize(process.argv[2]);
-const api = JSON.parse(fs.readFileSync(apiJSONPath));
-
-fs.writeFileSync(apiJSONPath, beautify(api, null, 2, 100));
-
-const entries = api['symbols'];
-const compiledHandlebars = Handlebars.compile(template);
-const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
-const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
-const sinceMarker = "<!--since_tag_marker-->";
-
-const getComponentByName = name => {
-	return entries.find(element => {
-		return element.basename === name;
-	})
-};
-
-const getCSSVarsByName = name => {
-	return cssVariables[name] || [];
-};
-
-const capitalize = str => {
-	return str.replace(/^./, str => str.toUpperCase());
-};
-
-Handlebars.registerHelper('toLowerCase', function (str) {
-	return str ? str.toLowerCase() : "";
-});
-
-Handlebars.registerHelper('toKebabCase', function (str) {
-	const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-	return kebab !== str ? kebab : undefined;
-});
-
-Handlebars.registerHelper('checkEven', function (iIndex) {
-	return (iIndex % 2 === 0) ? "api-table-roll-even" : "api-table-roll-odd";
-});
-
-Handlebars.registerPartial('properties', propertiesTemplate);
-Handlebars.registerPartial('slots', slotsTemplate);
-Handlebars.registerPartial('events', eventsTemplate);
-Handlebars.registerPartial('methods', methodsTemplate);
-Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
-
-mkdirp.sync(`dist/test-resources/api`);
-
-let entriesAPI = [];
-
-const appendCSSVarsAPI = entry => {
-	entry.cssVariables = getCSSVarsByName(entry.basename);
-	return entry;
-}
-
-const componentHasEntityItem = (component, entity, name) => {
-	return component[entity].some(x => x && x.name === name);
-};
-const removeEmpty = arr => arr.filter(x => x);
-
-const calculateAPI = component => {
-	if (entriesAPI.indexOf(component.basename) !== -1) {
-		return component;
-	}
-	const entities = ["properties", "slots", "events", "methods", "cssVariables"];
-
-	// Initialize all entities with [] if necessary, and remove undefined things, and only leave public things
-	entities.forEach(entity => {
-		component[entity] = removeEmpty(component[entity] || []).filter(x => x.visibility === "public");
-	});
-
-	component = appendCSSVarsAPI(component);
-
-	let parent = getComponentByName(component.extends);
-	if (parent) {
-		let parentComponent = calculateAPI(parent);
-		entities.forEach(entity => {
-			parentComponent[entity].forEach( x => {
-				if (!componentHasEntityItem(component, entity, x.name)) {
-					component[entity].push(x);
-				}
-			});
-		});
-	}
-
-	entriesAPI.push(component.basename);
-
-	return component;
-};
-
-const appendAdditionalEntriesAPI = entry => {
-	if (entry.appenddocs) {
-		const additionalEntries = entry.appenddocs.split(" ");
-		entry.additionalDocs = [];
-
-		additionalEntries.forEach(entryName => {
-			let additionalEntry = getComponentByName(entryName);
-			additionalEntry = calculateAPI(additionalEntry);
-			entry.additionalDocs.push(additionalEntry);
-		});
-	}
-
-	return entry;
-}
-
-const generateSamplePage = entry => {
-	let content = "";
-
-	try {
-		content = fs.readFileSync(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
-	} catch (err) { }
-
-	if (content) {
-		entry.slots.forEach(slotData => {
-			if (!slotData.type.startsWith("Node") && !slotData.type.startsWith("HTMLElement")) { // interface -> don't show in documentation
-				slotData.type = "HTMLElement" + (slotData.type.endsWith("[]") ? "[]" : "");
-			}
-		});
-		const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
-		const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
-
-		content = content.replace('<!-- JSDoc marker -->', APIReference);
-		content = content.replace(sinceMarker, EntitySince);
-
-		content = content.replace(linkMatcher, match => {
-			const component = linkMatcher.exec(match)[2];
-
-			// reset the regex
-			linkMatcher.lastIndex = 0;
-
-			return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
-		});
-
-		fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content, (err) => {
-			// console.log(err);
-		});
-	}
-}
-
-const generateComponentAPI = entry => {
-	// (1) calculate the API
-	entry = calculateAPI(entry);
-
-	// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
-	entry = appendAdditionalEntriesAPI(entry);
-
-	// (3) generate sample page
-	generateSamplePage(entry);
-}
-
-entries.forEach(generateComponentAPI);
-entriesAPI = [];

package/lib/documentation/templates/api-component-since.js

@@ -1,3 +0,0 @@
-module.exports = {
-	template: `{{#if this.since}}v{{this.since}}{{/if}}`
-};

package/lib/documentation/templates/api-css-variables-section.js

@@ -1,24 +0,0 @@
-module.exports = {
-    template: `
-      {{#if cssVariables}}
-        <h3 class="comment-api-title" >CSS variables</h3>
-        <p class="small-space-top">You can use the following CSS varialbes to change the component styling.</p>
-  
-        <div class="small-space-top api-table">
-          <div class="head api-table-header-roll">
-            <div class="cell api-table-header-cell">Name</div>
-            <div class="cell api-table-header-cell">Description</div>
-          </div>
-  
-          {{#each cssVariables}}
-            <div class="row {{checkEven @index}}">
-              <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-              <div class="cell api-table-content-cell api-table-content-cell-description">
-                  {{{this.description}}}
-              </div>
-            </div>
-          {{/each}}
-  
-        </div>
-      {{/if}}`
-};

package/lib/documentation/templates/api-events-section.js

@@ -1,35 +0,0 @@
-module.exports = {
-  template: `
-    {{#if events}}
-      <h3 class="comment-api-title space-top">Events</h3>
-      <p class="small-space-top" >This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as <code>addEventListener</code>. </p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each events}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">
-            {{{this.description}}}
-            {{#if this.since}}
-                <div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
-            {{/if}}
-            </div>
-          </div>
-
-          {{#each this.parameters}}
-            <tr class="api-table-event-param">
-              <div class="api-table-content-event-params-wrapper">
-                <div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-                <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
-              </div>
-            </tr>
-          {{/each}}
-        {{/each}}
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-methods-section.js

@@ -1,26 +0,0 @@
-module.exports = {
-  template: `
-    {{#if methods}}
-      <h3 class="comment-api-title space-top">Methods</h3>
-      <p class="small-space-top" >This Web Component exposes public methods. You can invoke them directly on the Web Component instance.</p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each methods}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
-          </div>
-
-          {{#each this.parameters}}
-            <div class="cell api-table-content-cell api-table-content-cell-bold api-table-param-name">{{this.name}}</div>
-            <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
-          {{/each}}
-        {{/each}}
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-properties-section.js

@@ -1,40 +0,0 @@
-module.exports = {
-  template: `
-    {{#if properties}}
-      <h3 class="comment-api-title" >Properties/Attributes</h3>
-      <p class="small-space-top" >You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.</p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Type</div>
-          <div class="cell api-table-header-cell">Default Value</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each properties}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">
-              {{this.name}}
-              {{#if this.readonly}}
-                (readonly)
-              {{/if}}
-                <br>
-              {{#if (toKebabCase this.name)}}
-                <code>{{toKebabCase this.name}}</code>
-              {{/if}}
-            </div>
-            <div class="cell api-table-content-cell">{{this.type}}</div>
-            <div class="cell api-table-content-cell">{{this.defaultValue}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">
-                {{{this.description}}}
-                {{#if this.since}}
-                    <div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
-                {{/if}}
-            </div>
-          </div>
-        {{/each}}
-
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-slots-section.js

@@ -1,28 +0,0 @@
-module.exports = {
-  template: `
-  {{#if slots}}
-    <h3 class="comment-api-title space-top" >Slots</h3>
-	<p class="small-space-top" >
-	  This Element provides slot(s). This means it can display its child nodes.<br>
-	  Unless targeting the default slot, use the <code>slot</code> attribute to define the destination slot for each child.<br>
-	  Text, along with HTML Elements with no <code>slot</code> attribute, goes the the <code>default</code> slot.
-	</p>
-
-    <div class="small-space-top api-table">
-      <div class="head api-table-header-roll">
-        <div class="cell api-table-header-cell">Slot</div>
-        <div class="cell api-table-header-cell">Type</div>
-        <div class="cell api-table-header-cell">Description</div>
-      </div>
-
-      {{#each slots}}
-        <div class="row {{checkEven @index}}">
-          <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-          <div class="cell api-table-content-cell">{{this.type}}</div>
-          <div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
-        </div>
-      {{/each}}
-
-    </div>
-  {{/if}}`
-};