This project is a development utility for Marko UI components. On launch, it automatically detects all components in your Marko application and allows you to browse through them, rendering all declared use cases or states. Scenarios can be written in fixtures that represent the backend responses or props from the parent component. As a result, component development becomes way faster, regression testing easier and visual defects can be spotted early.
First, add marko-playground to your project by running the following command:
yarn add --dev marko-playground#ornpm i --save-dev marko-playground
Now you can start the playground via
yarn marko-playground#ornpm run marko-playground
When marko-playground detects a UI component, it reads its states from the directory
<component>/test/fixtures. If no state (or fixture) has been found, it falls back to an empty state and renders the component accordingly.
Additional states can be defined with the following directory structure (which is also used by marko-tester):
<component>/test/⤷ fixtures/⤷ default.json⤷ another-use-case.json
Example of default.json
The marko-playground tool can be configured by adding a
test/playground/config.json to your project.
If no file is found, the following default configuration is used instead:
// Playground will listen on this port, override it with environment variable PORT:"port": 8080// Widget components will be searched starting from this directory,// override with COMPONENTS_ROOT_DIR"componentsRootDir": "./src/components"// Widget playground's template will be searched in this directory relative// to component's directory, override with PLAYGROUND_DIR:"playgroundDir": "test/playground"// Lasso config, override with LASSO_CONFIG indicating local lasso config JSON file:"lasso":"plugins":"lasso-less""lasso-marko""outputDir": "static""bundlingEnabled": false"minify": false"fingerprintsEnabled": false
Lasso flags support
You can pass flags to lasso page by setting environment variable
FLAGS, for example:
If you don't like the standard component template used in playground, you can use your own.
Simply put it in you component's
test/playground directory and name it
You can always change the location of the template by changing the config property
playgroundDir or environment variable
The UI component detection is based on Marko's configuration and respect's the configuration's
Usually, you have a
marko.json in your project (or rely on the defaults which is the
components directory). The marko file looks like this:
If you have a separate component project, your
marko.json should look similar to this:
That file usually resides in the root directory (marko documentation.)
For more diagnostic messages set environment variable
DEBUG to truthy value like
Git clone this repo, then install everything:
Then start playground with test components:
yarn start#ornpm start
Tests can be executed via:
yarn test#ornpm test
Copyright 2018 eBay Inc. Developer(s): Timur Manyanov
Use of this source code is governed by an MIT-style license that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.