One of the primary goals for testing software is to have confidence that your software works as intended, but this doesn't give much insight into the quality of the software. Is it accessible? How about performant? Is the code we're sending necessary? Answering these questions in an automated fashion today is hard, but that will be changing in the future. In this talk, we'll explore how recent changes in technology give us a foundation to start answering the questions posed above and so much more. We'll look at a near future where we have confidence that our software is functional and works well.

2. @trentmwillis #dotjs
Working Well:
The Future of Web
Testing
|Trent Willis @trentmwillis
QUnit Project Lead

3. @trentmwillis #dotjs
Testing Gives Us Confidence
That Software Works

4. @trentmwillis #dotjs
Testing Should Give Us Confidence
That Software Works Well

5. @trentmwillis #dotjs
Works Well:

6. @trentmwillis #dotjs
Works Well:
Accessible
Performant
Necessary

7. @trentmwillis #dotjs
chrome

8. @trentmwillis #dotjs
chrome --headless

9. @trentmwillis #dotjs
Chrome DevTools Protocol

10. @trentmwillis #dotjs
chrome --headless
+
Chrome DevTools Protocol
=
New Possibilities

11. @trentmwillis #dotjs
Puppeteer

12. @trentmwillis #dotjs
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.content();
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

13. @trentmwillis #dotjs
QUnit-In-Browser

14. @trentmwillis #dotjs
const title = 'Home page successfully renders';
const url = 'https://localhost:8000/';
QUnit.test.inBrowser(title, url, function(assert) {
const content = document.getElementById('content');
assert.ok(content, 'main content is rendered!');
});

15. @trentmwillis #dotjs
How is this the future?

16. @trentmwillis #dotjs
How is this the future?
Less about “how”
More about “what”

17. @trentmwillis #dotjs
Accessibility

18. @trentmwillis #dotjs
axe-core

19. @trentmwillis #dotjs
QUnit.test.inBrowser(title, {
url,
injections: ['node_modules/axe-core/axe.min.js']
}, async function(assert) {
const content = document.getElementById('content');
const results = await axe.run(content);
assert.equal(results.violations.length, 0);
});

20. @trentmwillis #dotjs
const pages = [ /* pages in site */ ];
pages.forEach(page => {
QUnit.test.inBrowser(`${title} - ${page}`, {
url: page,
injections: ['node_modules/axe-core/axe.min.js']
}, async function(assert) {
const content = document.getElementById('content');
const results = await axe.run(content);
assert.equal(results.violations.length, 0);
});
});

21. @trentmwillis #dotjs
Performance

22. @trentmwillis #dotjs
macro-benchmark

23. @trentmwillis #dotjs
ember-macro-benchmark

24. @trentmwillis #dotjs

25. @trentmwillis #dotjs
Code Coverage

26. @trentmwillis #dotjs
Code Usage

27. @trentmwillis #dotjs

28. @trentmwillis #dotjs
await Profiler.startPreciseCoverage();
// Trigger some action
const { result } = await Profiler.takePreciseCoverage();
// Assert against results or track over time

29. @trentmwillis #dotjs
Functionality

30. @trentmwillis #dotjs
Functionality + Quality

31. @trentmwillis #dotjs
The Future Is
Accessible

32. @trentmwillis #dotjs
The Future Is
Performant

33. @trentmwillis #dotjs
The Future Is
Necessary

34. @trentmwillis #dotjs
The Future Is
Bright
|Trent Willis @trentmwillis
QUnit Project Lead