@stylable/dom-test-kit


@stylable/dom-test-kit is comprised of a single class, StylableDOMUtil, which exposes several DOM related testing utilities.

Example

``css
/ my-component.st.css /
.root {}

.part {
-st-states: loading;
}
`

`ts
/ test.ts /
import { StylableDOMUtil } from '@stylable/dom-test-kit';
import * as stylesheet from './my-component.st.css';

const domUtil = new StylableDOMUtil(stylesheet, document.body);
const partElement = domUtil.select('.part');

if (partElement) {
domUtil.hasStyleState(partElement, 'loading');
}
`

What does it do?

> Note: currently all of the provided utilities support only simplified Stylable selectors, consisting only of class and pseudo-class selectors.

$3

Initialize the StylableDOMUtil by providing a source stylesheet that would function as the base for all testing utilities. You may pass a DOM root element to serve as the default entry point for the select methods,

$3

Select the first element in the DOM that matches the provided Stylable selector.

$3

Select all elements in the DOM that match the provided Stylable selector.

$3

Transforms a Stylable selector to its target vanilla CSS.

$3

Check whether the provided element has the corresponding state set. This method can also receive a third optional param to validate the state active value.

$3

Get an element state value if exists, null` if it does not.

License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.