The essential news about content management systems and mobile technology.
Powered by Joocial & JoomGap.

We have added a unit testing framework to Stencil. Stencil is a tool for building modern Web Components. Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec.

The goals we had when adding the testing framework were simple: make it easy to understand, and keep the API as small as possible. As a result of this, the testing API has a total of two methods: render() and flush().

render() – The render method takes an object containing a list of components that the Stencil compiler needs to know about and an HTML string. It returns the rendered element.
flush() – The flush method takes an element and causes it to rerender. This is typically done after properties on the element are changed.

Getting Started

In order to get started with unit testing Stencil components, clone the Stencil Component Starter and run npm install. To run the unit tests, use one of the following commands:

npm test – performs a single run of the unit tests
npm run test.watch – runs the unit tests and watches for changes to the source, rerunning the unit test with each saved change

In either case, Jest is used to run the unit tests.

Application Setup

In order to perform unit tests on the components in the a project, some minimal setup is required in the project’s package.json file. The testing packages need to be installed as development dependencies, the npm scripts that run the tests need to be defined, and Jest needs to be configured to compile the sources and the tests properly.

The only packages required in order to run the tests are jest and @types/jest:

  "devDependencies": {    ...    "@types/jest": "^21.1.1",    "jest": "^21.2.1"  },

The two testing related npm scripts are test and test.watch.

  "scripts": {    ...    "test": "jest --no-cache",    "test.watch": "jest --watch --no-cache"  },

The jest setup section specifies the moduleFileExtensions, testRegex, and transform. The only part of the setup that is specific to Stencil is the transform section. Stencil provides a preprocessor script that uses the Stencil compiler to build the source and test files.

  "jest": {    "transform": {    "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js"    },    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",    "moduleFileExtensions": [    "ts",    "tsx",    "js",    "json",    "jsx"    ]  }

That is all of the setup that is required in order to run the unit tests. Since this has already been done in the Stencil Component Starter, if you are using that as a starting point for your project you should not need to do any extra setup.

The Test File

The Stencil Component Starter contains one test file: src/components/my-name/my-name.spec.ts. This file contains one test that just ensures the component can be built, and a group of tests that verify the rendering of the component.

Testing the Component Class

The first test ensures that the component class can be built.

 it('should build', () => {   expect(new MyName()).toBeTruthy(); });

If the component had methods defined on it, the same technique could be used to obtain an object to use to test those methods. For example, if MyName contained a method format() that returned a formatted name, you could test it as such:

 it('should build', () => {   const myName = new MyName();   myName.first = 'Peter'   myName.last = 'Parker';   expect(myName).toEqual('Parker, Peter'); });

Testing the Component Rendering

Tests can also render the component so the structure of the component can be tested. This is accomplished via two functions: render() and flush(). The render() function takes a configuration object consisting of a list of components and and HTML snippet, returning an HTML Element. The flush() function takes an element and applies changes to it. Both functions perform their tasks asynchronously.

Since both of these functions work with HTML elements, the standard HTML Element API is used to manipulate and query the structure of the element.

 describe('rendering', () => {   let element;   beforeEach(async () => {     element = await render({       components: [MyName],       html: '<my-name></my-name>'     });   });   ...   it('should work with both a first and a list name', async () => {     element.first = 'Peter'     element.last = 'Parker';     await flush(element);     expect(element.textContent).toEqual('Hello, my name is Peter Parker (4)');   }); });

Next Steps

In this article we explained the Stencil unit testing framework API, consisting of two functions: render() and flush(). We showed the additions required to the package.json file in order to allow unit testing. Finally we walked through the small sample test that is included in the Stencil Component Starter, and highlighted some of the functionality.

In a future post, I will walk through using this test along with some basic test-driven development in order to extend our component to meet our customer’s new requirements.

Read more

image

Investing in SEO is a must if you want to grow and improve your brand visibility in the online world. SEO helps you to optimize your site for users and search engines making navigation and accessibility of your site easy. Plus, it helps boost your site’s performance by improving your site’s speed, load time, and general functionality.

Read more

Vanilla Template - Beta

This week, we like to present you the long awaited Vanilla template - Beta. The beta is finally here after all the overwhelming responses and welcoming requests that we received. :)

Read more

The connected life has these wonders. In the past week, we released AutoTweet and Joocial 8.16 to support Joomla's Custom Fields. Today, we are releasing AutoTweet and Joocial 8.17 to support two breaking news from the biggest social media outlets:

  • Twitter has expanded the tweet limit of 140 characters to 280 characters. We can already find tweets that are fully embracing the new freedom to write longer texts. We have adjusted the extensions accordingly.
  • Facebook is adding new controls to limit the content of posts to the authors. We are actively following the topic and releasing new versions to be updated with the latest news. In the previous change, Facebook mandates to keep the Open Graph Tags syncronized with Posts of content items (Changes to Facebook post publishing rules). Now, with the release of API 2.11, Facebook has added a validation to associate Pages and Domains. So, posts can only be published to Verified Domains. This control does not affect directly to the extensions, but it is a new configuration step that has been added to the authorization workflow: Facebook Link Ownership Guide.

Support of Twitter's 280 Limit and Facebook's Domain Verification

The new AutoTweet and Joocial 8.17 beta version are available in the Download Area, and the stable versions are going to be released in the next week.

 

Read more

Many applications are built using Webpack. Stencil provides a Webpack plugin that makes it easy to include web components that have been built using Stencil in your Webpack built application.

Please note that the Webpack plugin is not required to use web components built with Stencil in other applications. This plugin just gives you an option to use if your application relies heavily on Webpack.

Installing the Plugin

To install the Stencil Webpack Plugin in your project, use npm (or yarn) and save it as a development dependency. For example:

npm install @stencil/webpack --save-dev

Using the Plugin

Using the Stencil Webpack Plugin is a two-step process. You must import the collections you are using into your project code at some appropriate location depending on the architecture of your application, and you must update the webpack.config.js file to call the plugin which will copy the required files to the output directory for your application.

Importing the Collections

In order to use your component collections within an application, you generally have to import them in some manner. This will result in Webpack adding the appropriate Stencil loader scripting to the appropriate bundle.

Angular

In an Angular application, you should add the component collection imports to the app.module.ts file. You should also make sure you are using the CUSTOM_ELEMENTS_SCHEMA as in the following example.

import { BrowserModule } from '@angular/platform-browser';import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';import { AppComponent } from './app.component';import 'accounting-components';import 'payroll-components';import 'purchasing-components';import 'web-components';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule  ],  providers: [],  bootstrap: [AppComponent],  schemas: [    CUSTOM_ELEMENTS_SCHEMA  ]})export class AppModule { }

Updating webpack.config.js

Once you have the proper Stencil loader scripts bundling with your project, you need to have the collections copied to a known location in the build output so the Stencil loader can load them as needed. This is where the Stencil Webpack Plugin is used.

Important: If you are in an Angular CLI project, you must first eject the project in order to modify the webpack.config.js file.

After installing the plugin, modify your webpack.config.js file as such:

const stencil = require('@stencil/webpack');...  "plugins": [    new stencil.StencilPlugin({      collections: [        'node-modules/accounting-components/dist/accountingcomponents',        'node-modules/payroll-components/dist/payrollcomponents',        'node-modules/purchasing-components/dist/purchasingcomponents',        'node-modules/web-components/dist/webcomponents'    ]}),

The plugin constructor takes a configuration object. At this time, the only property in this object is the collections property. A configuration object is used rather than a simple list of files in order to support the easy addition of options in the future.

The collections property contains an array of component collections you would like to use. If you only have one collection, you can specify just a string instead of an array of strings.

The component collections do not have to be installed in node-modules if you do not want to publish them to an NPM registry (though publishing them to either the public registry or to a private registry is suggested). You could, for example, install them in a web-components directory if so desired. Manually copying the component collections as such is beyond the scope of this document.

Once you have this set up, a build (npm run build for example) will copy the components to a build directory under the output directory for the build following usual Stencil conventions.

Next Steps

To date, this plugin has only been tested with an Angular application. In the future, I hope to demonstrate using this plugin to include web components built with Stencil in applications written using other frameworks such as Vue or React.

Read more