Documentation
develop
developPrimary versionrte_2xvuepress-migration
develop
developPrimary versionrte_2xvuepress-migration
  • Cubbles documentation
  • First steps
    • Generate a project
    • Create a webpackage
    • Create an elementary component
    • Create a compound component
      • Compound slot initialization
  • Runtime extension - RTE
    • User guide
      • RTE Integration
      • The Cubbles TAG API
        • The Cubbles Dependency API
      • The Cubbles Javascript API
        • Interacting with Cubbles from the outside
        • Adding dynamic connections
        • Interacting with Elementary Cubbles from the inside
      • The RTE Processing
        • RTE initialization and rendering timeline
      • The Cubbles IFrame API
        • The Cubbles IFrame Resizer API
      • The Cubbles mutation based start event API
      • FAQs
        • How to manually resolve dependency conflicts?
        • How to create a component instance dynamically?
        • How to render HTML Markup coming from input slot?
        • How to replace a dependency when declaring a component instance?
        • How to synchronize multiple dataflows between component instances?
        • How to handle the copyValue flag for non serializable instances?
    • Contributor guide
      • CIF processing
  • Developing with the vanilla boilerplate
    • Creating a new project
    • Developing elementaries using the vanilla boilerplate
    • Developing compounds using the vanilla boilerplate
    • Using the vanilla boilerplate scripts
  • Coder devtools - CDT
    • User guide
      • Create Cubbles artifacts
      • Upload a Webpackage
      • Generate a README file
      • Rename an artifact
      • Configure network proxy
      • Validate the manifest.webpackage file
      • Change active webpackage
      • Bulk upload of webpackages
      • Release a webpackage
      • Update the RTE version of a webpackage
      • Prepare a webpackage to be released
      • Update webpackage to the next development version
      • Generate a test environment for a component
      • Testing Cubbles components
      • Validate sources
      • Create a demo webpackage
    • Contributor guide
      • Checklist for releasing a new webpackage.modelVersion
  • Terms and concepts
    • Webpackage
    • Artifacts
    • User roles
    • Base
Powered by GitBook
On this page
  • Purpose
  • Steps
  • Outcome
  • The npm module version
  • Further details
  1. Coder devtools - CDT
  2. User guide

Generate a test environment for a component

PreviousUpdate webpackage to the next development versionNextTesting Cubbles components

Last updated 6 years ago

The CDT offers the _generateArtifactWctScaffold task to generate unit tests for your Cubbles components, which is based on web-component-tester v. 4.2.2. You can test your cubbles components using Mocha as test framework and Chai for assertions.

Purpose

To show how to generate a test environment for your Cubbles components using the _generateArtifactWctScaffold and how to test them.

Steps

First, you should run the task within the CDT folder (normally it is called devtools) as follows:

grunt _generateArtifactWctScaffold

Then, a list of the components of the current active webpackage will be displayed. You should choose the component to be tested typing its index. In the example below, we have chosen to generate a test environment for the second component of the list:

? Please choose the artifact
  1) elem-one
  2) compound-two
(Move up and down to reveal more choices)
  Answer: 2

Outcome

A folder called test will be generated in the folder of the selected component.

The folder will contain the following files:

  • index.html: the index webpage to run the tests in a browser.

  • [artifactId]-test.html: a webpage containing the component to be tested and importing the required scripts.

  • [artifactId[-test.js: script to write the unit tests of your component.

  • grunt-wct-test-config.js, mocha-config.js and wct.conf.js: configuration files for the test environment of the component.

After generating the files, you will get a message similar to the one presented below:

info: finished generation files in: ../../my-first-project/webpackages/my-second-webpackage/compound-two/test

The npm module version

You can use an npm module that serves the same purposes called cubx-wct-scaffolder. The module can be used from the command line or in a node script.

Further details

To know how to write unit tests for you components check this tutorial.

Component test generated folder