@stylable/dom-test-kit
v6.1.1
Published
Stylable DOM testing utilities
Downloads
7,924
Keywords
Readme
@stylable/dom-test-kit
@stylable/dom-test-kit
is comprised of a single class, StylableDOMUtil
, which exposes several DOM related testing utilities.
Example
/* my-component.st.css */
.root {}
.part {
-st-states: loading;
}
/* 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
andpseudo-class
selectors.
constructor(style: RuntimeStylesheet, root?: Element)
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,
select(selector?: string, element?: Element): Element | null
Select the first element
in the DOM that matches the provided Stylable selector
.
selectAll(selector?: string, element?: Element): Element[] | null
Select all elements
in the DOM that match the provided Stylable selector
.
scopeSelector(selector?: string): string
Transforms a Stylable selector
to its target vanilla CSS.
hasStyleState(element: Element, stateName: string, param: StateValue = true): boolean
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.
getStyleState(element: Element, stateName: string): string | null
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.