The Wix viewer is not a website - it's a platform that runs tens of millions of user websites for years while maintaining backward compatibility. Automatic testing of an environment like that is obviously a challenge. For testing the Wix viewer we've been using several automatic-testing frameworks, reached all of their possible roadblocks, and found insights that help us choose the right testing framework for the right problem. In the talk, we'll go through the challenges and the frameworks, one by one - node with JSDOM, Karma, puppeteer+JEST, and Selenium - see what problem brought us to try them, where they are strong and where they fall short, and what we use them for today.

2. Hi.
I am Noam
Lithuania
Ukraine
Vilnius
Kyiv
Dnipro
Wix Engineering Locations
Israel
Tel-Aviv
Be’er Sheva

3. Wix Editor Wix Viewer

4. Wix components
are Complex.

5. Wix components
are Complex.
React & MobX

6. Wix components
are Complex.
React & MobX
TDD

7. A simple component
▪ Appear on scroll-up
▪ Disappear on scroll-down
▪ When >1000 pixels from top
▪ Fade after 1 sec timeout
▪ Only in portrait mode

8. Traditional React
Unit Tests

9. React Unit Tests
Jasmine, JSDOM, ReactTestUtils
const component = renderIntoDocument(<BackToTopBtton />);
expect(component.className).toEqual('hidden');
component.onWindowScroll(0, 2000);
expect(component.className).toEqual('hidden');
component.onWindowScroll(0, 1800);
expect(component.className).toEqual('visible');
await wait(1000);
expect(component.className).toEqual('hidden');

10. ✔ Fast and stable
End up not testing much.
✘ Component becomes white-box
✘ Spies and mocks everywhere
✘ HOC inflation
React Unit Tests
Jasmine, JSDOM, ReactTestUtils

11. Selenium

12. E2E Tests
WDIO (Selenium)
browser.url('a-site-with-btt-button.wix.com');
expect(browser.isVisible('#bttButton')).toBeFalsy();
browser.scroll(0, 2000);
expect(browser.isVisible('#bttButton')).toBeFalsy();
browser.scroll(0, 1800);
expect(browser.isVisible('#bttButton')).toBeTruthy();
await wait(1000);
expect(browser.isVisible('#bttButton')).toBeFalsy();

13. ✔ Tests the feature!
High value with high cost.
✘ A bit icky to set up and use
✘ Usually end up testing too much
E2E Tests
WDIO (Selenium)

14. Karma

15. Browser Unit Test
Karma, Jasmine
const component = React.render(<BackToTopButton />, myContainer);
expect(getComputedStyle(component).visibility).toEqual('hidden');
scrollTo(0, 2000);
expect(getComputedStyle(component).visibility).toEqual('hidden');
scrollTo(0, 1800);
expect(getComputedStyle(component).visibility).toEqual('visible');
await wait(1000);
expect(getComputedStyle(component).visibility).toEqual('hidden');

16. Karma’s
Missing API !
const component = React.render(<BackToTopButton />, myContainer);
expect(getComputedStyle(component).visibility).toEqual('hidden');
scrollTo(0, 2000);
expect(getComputedStyle(component).visibility).toEqual('hidden');
scrollTo(0, 1800);
expect(getComputedStyle(component).visibility).toEqual('visible');
await wait(1000);
expect(getComputedStyle(component).visibility).toEqual('hidden');
rotateScreenToLandscape();

17. ✘ iframes vs. messy test environments
Good for some use-cases.
Know the limitations
✘ Missing API for interactions
✘ Setup feels a bit outdated
✔ Reliable
Browser Unit Test
Karma, Jasmine

18. Puppeteer

19. Integration Tests
Puppeteer, JEST
injectLibraries(page)
browser.emulateMobilePortrait()
const component = page.evaluate(() =>
React.render(<BackToTopButton />, container))
const getVisibility = () =>
page.evaluate(comp => getComputedStyle(comp).visibility, component)
expect(getVisibility().toEqual('hidden'))
page.scrollTo(0, 2000)
expect(getVisibility().toEqual('hidden'), comp)
page.scrollTo(0, 1800)
expect(getVisibility().toEqual('visible'), comp)
browser.emulateMobileLandscape()

20. Our new favorite.
Is that because it’s new and cool?
✔ A middle ground between Selenium and Karma
✘ Not cross-browser (yet)
✘ Not always easy to debug
✔ Can mix-and-match E2E/units
✔✘ Good API, but not a test framework!
Integration Tests
Puppeteer, JEST

21. Doesn’t test much JSDOM Unit Tests
Reliable but limited Karma Browser Unit Tests
Our new favorite Puppeteer Integration Tests
High cost, high value Selenium e2e Tests
Oversimplified Conclusions
for testing UI Components

22. Doesn’t test much JSDOM Unit Tests
Reliable but limited Karma Browser Unit Tests
Our new favorite Puppeteer Integration Tests
High cost, high value Selenium e2e Tests
Components are not units.
Integration tests are key.

23. Doesn’t test much JSDOM Unit Tests
Reliable but limited Karma Browser Unit Tests
Our new favorite Puppeteer Integration Tests
High cost, high value Selenium e2e Tests
Components are not units.
…and cover cross-browser corner cases with e2e tests.
So focus on integration tests

24. Back to our ‘simple’
component’s behavior.

25. State Unit Test
Split your state code from components
describe(‘BackToTop state', async () => {
it(‘should appear when scrolling up, and disappear’() => {
const bttStateMachine = backToTopButtonStateMachine.get();
expect(bttStateMachine.visible).toBeFalsy();
bttStateMachine.scrollTo(2000);
expect(bttStateMachine.visible).toBeFalsy();
bttStateMachine.scrollTo(1800);
expect(bttStateMachine.visible).toBeTruthy();
bttStateMachine.handleTimeout();
expect(bttStateMachine.visible).toBeFalsy();
});

26. Thank You
linkedin/
noamrosenthal
github.com/noamr@realnoamnoamr@wix.com