How to test DOM elements with CSSTate

The clones had seen how i make tests with CSSTate

To be short with general definition of what csstate is, i will quote its repository description below:

Simple library for handling different css states and properties. Made for testing css related things with mocha or something like this.

csstate can help with:

  • Restore different states/presets of predefined stylesheets
  • CSS selector based properties can be changed (removed/inserted/replaced) any time
  • Restore previous state for next test case
  • Run tests in preferred browsers using karma

For an instance, lets test following pagination component and create test for such case:

landscape x portrait screen of the pagination component

Reset rules for each test:

Then we can change anything inside of our tests, every test will run with default rules.

The test should pass, but

This test will fall, beacuse our .pagination component does not support smaller screens.

It is very very simple test case csstate can help with.

CSSTate is wery handy for testing different components and tools, look at the test files of move-into-view i made using csstate.

Feel free to ask me questions, see my another posts and my github profile maybe you will find something interesting for you.

Thank you !