GroupBy Elements View SDK containing pre-built web components for for creating e-commerce application interfaces.
To clone this repo with submodules run:
git clone --recursive https://github.com/groupby/elements-view
or if the repo is already cloned and you want to install submodules only, run:
git submodule update --init
Run the ./scripts/setup.sh
script to build all of the Elements-View packages.
./scripts/setup.sh
To demo all components and their interaction with the Logic Layer, open demo/demo.html
in a browser. Note that Beacons functionality will only work if the demo is served with an HTTP server such as http-server
.
The following commands are run in the context of an individual package contained within the Elements-View monorepo. The individual Web component packages can be found within the packages/web-components/@groupby
directory.
To build an individual package, run the following command:
yarn build
To build an individual package in response to changes within the src
directory, run the following command:
yarn dev
Tests are run with Mocha, Chai, and Sinon with the Karma test runner in a browser environment. The following browsers are currently tested:
- Chrome
To run the tests for all web component packages together, run the following command:
yarn test
To run unit tests for a specific web component package, navigate to its directory and use one of the following commands based on the desired testing flow:
- To run the unit tests for a specific package once:
yarn test
- To run the unit tests for a specific package and watch the
src
andtest
directories to rerun the tests after any changes:
yarn tdd
- To run the interaction tests for a specific package once:
yarn test:interaction
- To run the interaction tests for a specific package and watch the
src
andtest
directories to rerun the tests after any changes:
yarn tdd:interaction
- To run both the unit and interaction tests for a specific package once:
yarn test:all
Test coverage is also provided using Istanbul.
When starting a new component, create new setup.ts
and utils.ts
files in its new tests
directory. These files will make the same files from the root test-tools
directory available through imports and exports.
Ex.
- utils.ts
export * from '../../../../../test-tools/utils';
- setup.ts
import '../../../../../test-tools/setup';
Keywords from the testing frameworks can then be imported to your test files from utils.ts
.
Functional tests are run with Testcafe, which run in each browser environment configured. The following browsers are currently tested:
- Chrome
- Firefox
To run the tests for all browsers together, run the following command in the root directory:
yarn test:functional:all
- To run the tests for Chrome only:
yarn test:functional:chrome
- To run the tests for Firefox only:
yarn test:functional:firefox
Styled themes are available for components in the ./themes
folder. These can be viewed and developed by using Storybook and by running two active terminal processes:
yarn storybook
yarn dev:themes
These will run Storybook and watch the ./themes
directory for all changes to .scss
files. Themes can be toggled in the CSS Resources
addon tab.
This project ships with an ESLint configuration to enforce a consistent code style across *.ts
files.
The following commands are run in the context of an individual package contained within the Elements-View monorepo. The individual web component packages can be found within the packages/web-components/@groupby
directory.
To lint files for an individual package, navigate to its directory and use one of the following commands.
- To lint the files under the
src
directory for an individual package:
yarn lint:scripts
- To lint the files under the
stories
directory for an individual package:
yarn lint:stories
- To lint the files under the
test
directory for an individual package:
yarn lint:tests
To run the automated lint fixes for an individual package, navigate to its directory and use one of the following commands.
- To run automated lint fixes on the files under the
src
directory for an individual package:
yarn lint:scripts:fix
- To run automated lint fixes on the files under the
stories
directory for an individual package:
yarn lint:stories:fix
- To run automated lint fixes on the files under the
test
directory for an individual package:
yarn lint:tests:fix
To lint all the Elements-View packages at once, run the following commands at the root of the monorepo:
- To lint all files within each package's
src
andstories
directories:
yarn lint:scripts
- To lint all files within each package's
test
directory:
yarn lint:tests
- To run automated lint fixes on all files within each package's
src
andstories
directories:
yarn lint:script:fix
- To run automated lint fixes on all files within each package's
test
directory:
yarn lint:tests:fix
The following command will generate documentation for each module in the packages
directory. It uses TypeDoc and outputs to the docs
directory.
yarn docs
To bundle the Elements-View packages, run the following command at the root of the monorepo:
yarn bundle
The resulting bundles can be found within the dist
directory at the root of the repo.
The command to run the storybook application is:
yarn storybook
To create a new story, in the component directory create a new directory called stories/
and in that directory write the stories in index.ts
.
/packages/web-components/@groupby/
|-- component
| |-- src
| | |-- index.ts
| |-- stories
| | |-- index.ts
Storybook reference links:
* One note about using knobs is that you have to use the text
method for defining array
or object
properties for lit-element.