Javascript Coding
lhao811
Assignment4.zippicker.css
/* CSS for the Advanced requirement */
spinner.css
/* CSS for the Stretch requirement */
templater.css
body { font-family: 'Arial', sans-serif; } table { border-collapse: collapse; } th, td { text-align: left; padding: 8px; height: 20px; } th { background-color: #4CAF50; color: white; } tr:hover {background-color:#f5f5f5;} #hidden { display: none; }
picker.html
spinner.html
templater.html
| {{H1}} | {{H2}} | {{H3}} |
|---|---|---|
| {{R11}} | {{R12}} | {{R13}} |
| {{R21}} | {{R22}} | {{R23}} |
| {{R31}} | {{R32}} | {{R33}} |
| {{R41}} | {{R42}} | {{R43}} |
| {{R51}} | {{R52}} | {{R53}} |
{ "H1":"Name", "H2":"Address", "H3":"Age", "R31":"Billy", "R22":"14a Main St.", "R53":"32" }
By Tag By Id
DatePicker.js
Picker.js
/** * CSE183 Assignment 4 - Advanced */ class Picker { /** * Create a date picker * @param {string} containerId id of a node the Picker will be a child of */ constructor(containerId) { } }
Spinner.js
/** * CSE183 Assignment 4 - Stretch */ class Spinner { } module.exports = Spinner;
Templater.js
/** * CSE183 Assignment 4 - Basic */ class Templater { /** * Replace the contents of {{ }} tagged table header and data * elements in document with values found in the supplied JSON * @param {object} document * @param {string} json with propeties matching tags in document */ byTag(document, json) { } /** * Replace the contents of table header and data elements in * in document with id'd content found in the supplied JSON * @param {object} document * @param {string} json with propeties matching element ids in document */ byId(document, json) { } }
picker.test.js
const puppeteer = require('puppeteer'); function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function firstDate(relative) { let date = new Date(); date.setMonth(date.getMonth()+relative); date.setDate(1); return date.getDay(); } test('Month', async () => { const browser = await puppeteer.launch({ // headless: false, // devtools: true }); const page = await browser.newPage(); await page.goto(`file://${__dirname}/picker.html`); const num = Math.max(1,Math.floor(Math.random()*28)); for (let i = 0; i < num; i++) { await page.click('#next'); } sleep(1000); // very sloppy syncronisation method :( const elem = await page.$("#d"+(firstDate(num)+num-1)); const cont = await (await elem.getProperty('textContent')).jsonValue(); expect(cont).toBe(''+num); await browser.close(); });
templater.test.js
const puppeteer = require('puppeteer'); const fs = require('fs') function age() { return 20 + Math.floor(Math.random() * 60); } const fnames = ['John', 'Paul', 'George', 'Ringo']; const lnames = ['Lennon', 'McCartney', 'Harrison', 'Starr']; function nam() { return fnames[Math.floor(Math.random()*fnames.length)] + ' ' + lnames[Math.floor(Math.random()*lnames.length)]; } function add() { return age() + ' Penny Lane'; } function generate() { return { H1: 'Name', H2: 'Address', H3: 'Age', R11: nam(), R12: add(), R13: '' + age(), R21: nam(), R22: add(), R23: '' + age(), R31: nam(), R32: add(), R33: '' + age(), R41: nam(), R42: add(), R43: '' + age(), R51: nam(), R52: add(), R53: '' + age() }; } function randomTag() { return 'T' + (1000 + Math.floor(Math.random() * 9000)); } function randomise(sparse) { const content = fs.readFileSync(`${__dirname}/templater.html`, {encoding:'utf8', flag:'r'}); const data = generate(); let result = content; var json = '{'; let map = new Map(); let empty = []; for (let prop in data) { let tag = randomTag(); result = result.replace('"'+prop+'"', '"'+tag+'"'); if (sparse && (Math.random() < 0.5)) { empty.push(tag); delete data[prop]; } else { if (json.length > 1) { json += ','; } json += '"' +tag +'":"' + data[prop] + '"'; } map[tag] = prop; } json += '}'; fs.writeFile(`${__dirname}/tagged.templater.html`, result, 'utf8', function (err) { if (err) return console.log(err); }); return {data: data, obf: JSON.parse(json), map: map, empty: empty}; } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function basic(byTag, sparse) { const all = randomise(sparse); const data = all.data; const obf = all.obf; const map = all.map; const empty = all.empty; const browser = await puppeteer.launch({ //headless: false, //devtools: true }); const page = await browser.newPage(); await page.goto(`file://${__dirname}/tagged.templater.html`); await page.$eval('#json', el => el.value = ''); const json = await page.$("#json"); await json.focus(); await page.keyboard.type(JSON.stringify(byTag?data:obf)); await page.click('#'+(byTag?'byTag':'byId')); sleep(2000); // very sloppy syncronisation method for (let prop in obf) { const elem = await page.$("#"+prop); const cont = await (await elem.getProperty('textContent')).jsonValue(); expect(cont).toBe(obf[prop]); } for (let prop of empty) { const elem = await page.$("#"+prop); const cont = await (await elem.getProperty('textContent')).jsonValue(); expect(cont).toBe(''); } await browser.close(); fs.unlinkSync(`${__dirname}/tagged.templater.html`); } test('By Tag Dense', async () => { await basic(true,false); }); test('By Tag Sparse', async () => { await basic(true,true); }); test('By ID Dense', async () => { await basic(false,false); }); test('By ID Sparse', async () => { await basic(true,true); });
.eslintrc.js
module.exports = { 'env': { 'browser': true, 'es2021': true, }, 'extends': [ 'google', ], 'parserOptions': { 'ecmaVersion': 12, }, 'rules': { }, "ignorePatterns": [ "*.test.js" ], };
package.json
{ "name": "cse183-assignment4", "version": "1.0.0", "description": "CSE183 Assignment 4 - JavsScript II", "repository": "none", "dependencies": {}, "devDependencies": { "eslint": "^7.11.0", "eslint-config-google": "^0.14.0", "jest": "^26.5.3", "puppeteer-core": "^5.3.1", "puppeteer": "^5.3.1" }, "jest": { "collectCoverage": false }, "scripts": { "lint": "./node_modules/.bin/eslint *.js", "test": "jest" }, "author": "David Harrison <[email protected]>", "license": "UNLICENSED" }
spinner.test.js
const puppeteer = require('puppeteer'); function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function thisMonth(relative) { const months = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]; let date = new Date(); date.setMonth(date.getMonth()+relative); return months[date.getMonth()]; } test('Current Date', async () => { const browser = await puppeteer.launch({ headless: false, devtools: true }); const page = await browser.newPage(); await page.goto(`file://${__dirname}/spinner.html`); const num = Math.max(1,Math.floor(Math.random()*6)); for (let i = 0; i < num; i++) { await page.click('#prevMonth'); } const month = thisMonth(-num); sleep(1000); // very sloppy syncronisation method :( const elem = await page.$("#month"); const cont = await (await elem.getProperty('textContent')).jsonValue(); expect(cont).toBe(month); await browser.close(); });
