Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

JavaScript Testing Every Day

up1
January 27, 2024

JavaScript Testing Every Day

JavaScript Testing Every Day

up1

January 27, 2024
Tweet

More Decks by up1

Other Decks in Technology

Transcript

  1. © 2017 - 2024 Siam Chamnankit Company Limited. All rights

    reserved. JavaScript Testing 0-7 (Every day)
  2. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 4 JavaScript Testing 0-7 (Every day)
  3. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 5 Start with Question
  4. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 6 https://web.facebook.com/groups/ThaiPGAssociateSociety/posts/2487756734768914
  5. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 11 JavaScript Testing
  6. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 13 Ice-Cream Cone https://alisterscott.github.io/TestingPyramids.html
  7. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 14 Testing Pyramid https://alisterscott.github.io/TestingPyramids.html
  8. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 15 Cupcake https://www.thoughtworks.com/insights/blog/introducing-software-testing-cupcake-anti-pattern
  9. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 16 Testing Trophy https://www.testingjavascript.com/
  10. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 17 Testing === Confidence level
  11. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 18 Testing === Activity Testing !== Phase
  12. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 19 Testing Fast feedback
  13. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 20 Fast Isolated Repeatable Self-validate
  14. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 21 Test-First vs Test-Last ?
  15. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 22 ทำ ก่ อนแ ล้ ว ค่ อย คิ ด test คิ ด test ก่ อน แ ล้ ว ค่ อย ท
  16. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 23 https://github.com/goldbergyoni/javascript-testing-best-practices
  17. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 24 http://www.growing-object-oriented-software.com/ What to do ?
  18. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 25 http://www.growing-object-oriented-software.com/ How to do ?
  19. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 26 Iterative and Incremental Process
  20. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 28 Iterative and incremental process Time Feature 1
  21. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 29 Iterative and incremental process Time Feature 1 Done = coded and tested
  22. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 30 Iterative and incremental process Time Feature 1 Feature 1 Feature 2 Done = coded and tested
  23. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 31 Iterative and incremental process Time Feature 1 Feature 1 Feature 2 Feature 1 Feature 2 Feature 3 Done = coded and tested
  24. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 32 Iterative and incremental process Time Feature 1 Feature 1 Feature 2 Feature 1 Feature 2 Feature 3 Feature 1 Feature 2 Feature 3 Feature 4 Done = coded and tested
  25. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 33 Iterative and incremental process Time Feature 1 Feature 1 Feature 2 Feature 1 Feature 2 Feature 3 Feature 1 Feature 2 Feature 3 Feature 4 Done = coded and tested
  26. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 34 Current state of Testing ?
  27. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 35 https://wingman-sw.com/
  28. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 36 https://wingman-sw.com/
  29. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 37 We need Automation !!
  30. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 38 Iterative and incremental process Time Feature 1 Feature 1 Feature 2 Feature 1 Feature 2 Feature 3 Feature 1 Feature 2 Feature 3 Feature 4 Done = coded and tested Automation done Automation done Automation done Automation done
  31. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 39 Continuous Testing
  32. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 40 JavaScript Testing
  33. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 41 https://github.com/goldbergyoni/javascript-testing-best-practices
  34. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 42 Frontend Backend Full stack JavaScript Developer !!
  35. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 43 Frontend Backend HTTPs REST gRPC tRPC …
  36. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 44 Frontend Backend HTTPs REST gRPC tRPC … DB External System
  37. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 45 What and Why to Test ?
  38. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 46 Frontend Backend HTTPs REST gRPC tRPC … End-to-End Testing
  39. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 47 How to test ? 1. Setup external system 2. Setup database 3. Deploy Backend 4. Deploy Frontend 5. Testing Process
  40. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 48 End-to-End Testing High level of confidence Fast Isolated Repeatable Self-validate
  41. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 50 Need more stable ???
  42. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 51 Need more speed and feedback ???
  43. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 52 Frontend Backend HTTPs REST gRPC tRPC … Isolated !!
  44. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 53 Frontend testing Backend testing
  45. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 54 Frontend HTTPs REST gRPC tRPC … Frontend Testing Mock Backend
  46. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 55 Frontend Frontend Testing Mock Backend Mock Service Worker Axios mock adapter
  47. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 56 Example Web Browser testing with Playwright const { chromium } = require('playwright'); let browser; let page; beforeAll(async () => { browser = await chromium.launch(); }); afterAll(async () => { await browser.close(); }); afterEach(async () => { await page.close(); });
  48. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 57 Example Mocking API with Playwright beforeEach(async () => { page = await browser.newPage(); // Mock the API response await page.route('**/api/login', route => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ success: true }), })); });
  49. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 58 Example Hard code !! it('should login successfully', async () => { await page.goto('http://localhost:3000/login'); await page.fill('#username', 'testuser'); await page.fill('#password', 'testpass'); await page.click('#login-button'); // Check for success message await page.waitForSelector('#success-message'); });
  50. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 59 Separate data test from test case module.exports = { url: 'http://localhost:3000/login', username: 'testuser', password: 'testpass', usernameSelector: '#username', passwordSelector: '#password', loginButtonSelector: '#login-button', successMessageSelector: '#success-message' }; const testData = require('./testData'); it('should login successfully', async () => { await page.goto(testData.url); await page.fill(testData.usernameSelector, testData.username); await page.fill(testData.passwordSelector, testData.password); await page.click(testData.loginButtonSelector); // Check for success message await page.waitForSelector(testData.successMessageSelector); }); Data test Test case
  51. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 60 Snapshot testing with Playwright it('should login successfully', async () => { … // Take a screenshot await page.screenshot({ path: 'screenshot.png' }); // Check for success message expect(screenshot).toMatchImageSnapshot({ // allow for up to 1% difference failureThreshold: 0.01, // use percent-based comparison failureThresholdType: 'percent', // set a custom threshold for pixel matching customDiffConfig: { threshold: 0.1 }, // use a top-to-bottom comparison instead of left-to-right diffDirection: 'vertical', }); });
  52. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 61 Frontend Testing with Mock High level of confidence !! Fast Isolated Repeatable Self-validate
  53. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 62 Backend Backend Testing Mock Database Mock External system
  54. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 63 Backend Backend Testing Mock Database Mock External system newman SuperTest Mock Service Worker Axios mock adapter
  55. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 64 Example SuperTest and Nock const request = require('supertest'); const nock = require('nock'); const expect = require('chai').expect; const app = require('../app'); // your express app
  56. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 65 Example Mocking external system with Nock describe('API Tests', function() { beforeEach(function() { nock('https://api.yourdomain.com') .get('/endpoint') .reply(200, { message: 'success' }); }); it('tests our API', function(done) { request(app) .get('/api/endpoint') .end(function(err, res) { expect(res.body.message).to.be.equal('success'); done(); }); });
  57. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 66 Example API testing with SuperTest describe('API Tests', function() { beforeEach(function() { nock('https://api.yourdomain.com') .get('/endpoint') .reply(200, { message: 'success' }); }); it('tests our API', function(done) { request(app) .get('/api/endpoint') .end(function(err, res) { expect(res.body.message).to.be.equal('success'); done(); }); });
  58. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 67 Backend Testing with Mock High level of confidence !! Fast Isolated Repeatable Self-validate
  59. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 68 Frontend Backend Isolated Testing
  60. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 69 Isolated Testing High level of confidence !! Fast Isolated Repeatable Self-validate
  61. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 71 Ensure new releases Don’t break the APIs
  62. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 72 Frontend Backend HTTPs REST gRPC tRPC … Contract Testing
  63. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 73 PACT Contract Testing https://docs.pact.io/
  64. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 74 Frontend HTTPs Example Backend POST /login { "user": "admin", "pass": "admin" } Response = 200 (Success) { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9" } Response = 404 (Data not found) { "message": "Data not found" } API specification
  65. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 75 Create Contract with PACT const { Pact, Matchers } = require('@pact-foundation/pact'); const { expect } = require('chai'); const axios = require('axios'); const { like } = Matchers; const provider = new Pact({ consumer: 'Frontend', provider: 'Backend', port: 1234, }); describe('Pact with Provider', () => { before(() => provider.setup()); after(() => provider.finalize()); }); Setup contract test
  66. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 76 Create Contract with PACT describe('when a request to login is made', () => { before(() => { return provider.addInteraction({ uponReceiving: 'a request to login', withRequest: { method: 'POST', path: '/login', body: { user: 'somkiat', pass: '1234', }, }, willRespondWith: { status: 200, body: { message: like('success'), token: like('jwt token'), }, }, Define contract by case (success)
  67. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 77 Create Contract with PACT it('will receive the correct response', async () => { const response = await axios.post('http://localhost:1234/login', { user: 'somkiat', pass: '1234', }); expect(response.status).to.eql(200); expect(response.data).to.have.property('message', 'success'); expect(response.data).to.have.property('token'); }); Write test case + mock api Output :: contract file (YAML)
  68. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 78 Contract file { "consumer": { "name": "Consumer" }, "provider": { "name": "Provider" }, "metadata": { "pactSpecification": { "version": "3.0.0" } } } "interactions": [ { "description": "a request to login", "request": { "method": "POST", "path": "/login", "body": { "user": "somkiat", "pass": "1234" }, "headers": { "Content-Type": "application/json" } }, "response": { "status": 200, "body": { "message": "success", "token": "jwt token" }, "headers": { "Content-Type": "application/json" } } } ]
  69. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 79 Upload contract file to Broker const { Publisher } = require('@pact-foundation/pact-node'); const path = require('path'); const opts = { pactFilesOrDirs: [path.resolve(process.cwd(), 'pacts')], pactBroker: 'http://localhost:8000', // replace with the Pact Broker URL consumerVersion: '1.0.0', // replace with the consumer version }; new Publisher(opts).publishPacts() .then(() => console.log('Pact contract publishing complete!')) .catch(e => console.error('Pact contract publishing failed: ', e));
  70. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 80 PACT Broker https://docs.pact.io/pact_broker
  71. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 81 PACT Broker https://docs.pact.io/pact_broker
  72. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 82 Verify all contract from provider const { Verifier } = require('@pact-foundation/pact'); const path = require('path'); const opts = { provider: 'Provider', providerBaseUrl: 'http://localhost:8080', // replace with the provider base URL pactBrokerUrl: 'http://localhost:8000', // replace with the Pact Broker URL publishVerificationResult: true, providerVersion: '1.0.0', // replace with the provider version }; describe('Pact Verification', () => { it('should validate the expectations of Matching Service', () => { return new Verifier(opts).verifyProvider().then(output => { console.log('Pact Verification Complete!') console.log(output) }); }); });
  73. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 83 Contract Testing High level of confidence !! Fast Isolated Repeatable Self-validate
  74. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 84 Testing === Confidence level
  75. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 86 Need more testing ?
  76. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 87 Snapshot testing Unit testing Component testing Property- based testing ….
  77. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 88 Continuous Testing === More Confidence
  78. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 89 Back to Basic Why to test What to test When/How to test
  79. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 90 Learn from your mistake
  80. JavaScript Testing © 2017 - 2024 Siam Chamnankit Company Limited.

    All rights reserved. 91 Bug-Driven Development