JavaScript Testing Every Day

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

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

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(); });

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 }), })); });

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'); });

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

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', }); });

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

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(); }); });

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(); }); });

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

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

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)

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)

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" } } } ]

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));

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) }); }); });

JavaScript Testing Every Day

JavaScript Testing Every Day

Transcript

More Decks by up1

Other Decks in Technology

Featured