Testing

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+/node_modules

README.md

@@ -1 +1,11 @@
 # Lab 5 - Starter
+Rona Darabi, Emily Gorial
+
+[Expose page](https://ronadarabi.github.io/Lab5_Starter/expose.html)
+
+[Explore page](https://ronadarabi.github.io/Lab5_Starter/explore.html)
+
+
+1. We would not use a unit test to test the 'message' feature of a messaging application because the feature essentially is the entire application, and the whole ppoint of unit testing is to test the functionality of individual features of the application.
+2. We would use a unit test to test the the 'max message length' feature of the application because it is an individual component of the application that does not rely on other features.
+

__tests__/sum.test.js

@@ -1,5 +1,10 @@
 // sum.test.js
+import { sum } from '../code-to-unit-test/sum';
 
 test('adds 1 + 2 to equal 3', () => {
-  // TODO
+  expect(1 + 2).toBe(3);
+});
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1,2)).toBe(3);
 });

__tests__/unit.test.js

@@ -9,3 +9,83 @@ import {
 } from '../code-to-unit-test/unit-test-me';
 
 // TODO - Part 2
+
+// isPhoneNumber
+// false
+test('short phone number', () => { 
+  expect(isPhoneNumber('562310619')).toBe(false);
+});
+test('improper format', () => { 
+  expect(isPhoneNumber('5623106190')).toBe(false); 
+});
+// true
+test('valid', () => { 
+  expect(isPhoneNumber('(562)310-9121')).toBe(true);
+});
+test('space', () => { 
+  expect(isPhoneNumber('(000) 000-0000')).toBe(true);
+});
+
+// isEmail 
+// false 
+test('numbers', () => { 
+  expect(isEmail('111@111.111')).toBe(false);
+});
+test('too long', () => { 
+  expect(isEmail('thisis@notanemail.fake')).toBe(false);
+});
+// true
+test('valid', () => { 
+  expect(isEmail('rdarabi@ucsd.edu')).toBe(true);
+});
+test('cutoff', () => { 
+  expect(isEmail('rdarab@ucs.ed')).toBe(true);
+});
+
+// isStrongPassword 
+// false 
+test('first character number', () => { 
+  expect(isStrongPassword('1bad')).toBe(false);
+});
+test('question mark invalid ', () => { 
+  expect(isStrongPassword('ehhh?')).toBe(false);
+});
+// true
+test('number, letters', () => { 
+  expect(isStrongPassword('thisisbetter1')).toBe(true);
+});
+test('underscore, different capitalization, number', () => { 
+  expect(isStrongPassword('thisIsBest_1')).toBe(true);
+});
+
+// isDate 
+// false 
+test('YYYY/XX/XX', () => { 
+  expect(isDate('2024/10/23')).toBe(false);
+});
+test('X/X/YY', () => { 
+  expect(isDate('1/1/23')).toBe(false);
+});
+// true
+test('X/X/YYYY', () => { 
+  expect(isDate('1/1/2023')).toBe(true);
+});
+test('X/XX/YYY', () => { 
+  expect(isDate('9/30/2024')).toBe(true);
+});
+
+// isHexColor 
+// false 
+test('no #', () => { 
+  expect(isHexColor('ffc0b')).toBe(false);
+});
+test('1 character', () => { 
+  expect(isHexColor('#1')).toBe(false);
+});
+// true
+test('valid 6 character', () => { 
+  expect(isHexColor('#ffc0cb')).toBe(true);
+});
+test('valid 3 character', () => { 
+  expect(isHexColor('#fff')).toBe(true);
+});

assets/scripts/explore.js

@@ -1,7 +1,40 @@
 // explore.js
-
 window.addEventListener('DOMContentLoaded', init);
-
-function init() {
-  // TODO
+function init()
+{
+  const voiceSelect= document.getElementById('voice-select');
+  const talkButton= document.querySelector('button');
+  const speakInput= document.getElementById('text-to-speak');
+  const faceImage = document.querySelector('img');
+  let allVoices =[];
+  function populateVoices()
+  {
+  allVoices = speechSynthesis.getVoices();
+  voiceSelect.innerHTML = '<option value= "select" disabled> Select Voice:</option>';
+  allVoices.forEach(voice => {
+    const option = document.createElement('option');
+    option.textContent = voice.name;
+    option.setAttribute('data-lang', voice.lang);
+    option.setAttribute('data-name', voice.name);
+    voiceSelect.appendChild(option);
+  });
+}
+ if(speechSynthesis.onvoiceschanged !== undefined)
+   {
+       speechSynthesis.onvoiceschanged = populateVoices;
+   }
+  function speaking() {
+    const selected= voiceSelect.selectedOptions[0].getAttribute('data-name');
+    const voiceSelected = voiceSelect.value;
+        const utterance = new SpeechSynthesisUtterance(speakInput.value);
+        utterance.voice = allVoices.find(voice => voice.name === selected);
+        utterance.onstart = () => {
+      faceImage.src = './assets/images/smiling-open.png';
+    };
+    utterance.onend = () => {
+      faceImage.src = './assets/images/smiling.png';
+    };
+    window.speechSynthesis.speak(utterance);
+  }
+   talkButton.addEventListener('click', speaking)
 }

assets/scripts/expose.js

@@ -3,5 +3,50 @@
 window.addEventListener('DOMContentLoaded', init);
 
 function init() {
-  // TODO
+  // Variables 
+  const hornSelect = document.getElementById('horn-select');
+  const img = document.querySelector('img');
+  const aud = document.querySelector('audio');
+  const vol = document.getElementById('volume');
+  const volimg = document.getElementById('volume-controls').querySelector('img');
+  const computerVol = document.querySelector('audio'); 
+  const but = document.querySelector('button'); 
+  const jsConfetti = new JSConfetti(); 
+  // Set image and audio based on dropdown selection
+  hornSelect.addEventListener('change',() =>  { 
+    const hornSelected = hornSelect.value;
+    if (hornSelected=="air-horn") { 
+      img.src = "assets/images/air-horn.svg";
+      aud.src = "assets/audio/air-horn.mp3";
+    } else if (hornSelected=='car-horn') { 
+      img.src = "assets/images/car-horn.svg";
+      aud.src = "assets/audio/car-horn.mp3";
+    } else if (hornSelected=='party-horn') { 
+      img.src = "assets/images/party-horn.svg";
+      aud.src = "assets/audio/party-horn.mp3";
+    }
+  });
+  // Set volume icon based on input 
+  vol.addEventListener('change',() => { 
+    const volSelected = vol.value; 
+    if ((volSelected==0)) { 
+      volimg.src = "assets/icons/volume-level-0.svg";
+    } else if ((volSelected >= 1)&(volSelected < 33)) { 
+      volimg.src = "assets/icons/volume-level-1.svg";
+    } else if ((volSelected >= 33)&(volSelected < 67)) { 
+      volimg.src = "assets/icons/volume-level-2.svg";
+    } else if ((volSelected >= 67)) { 
+      volimg.src = "assets/icons/volume-level-3.svg";
+    }
+    computerVol.volume = volSelected/100;
+  });
+  // Play audio upon button click 
+  but.addEventListener('click', () => { 
+    aud.play(); 
+    const hs = hornSelect.value; 
+    if (hs=='party-horn') { 
+      jsConfetti.addConfetti(); 
+    }
+  }); 
+
 }

code-to-unit-test/unit-test-me.js

@@ -18,6 +18,7 @@ export function isStrongPassword(password) {
   return pwRegex.test(password);
 }
 
+
 // 	This regular expressions matches dates of the form XX / XX / YYYY where
 // XX can be 1 or 2 digits long and YYYY is always 4 digits long.
 export function isDate(date) {
@@ -30,3 +31,4 @@ export function isHexColor(color) {
   const colorRegex = /^\#?[A-Fa-f0-9]{3}([A-Fa-f0-9]{3})?$/;
   return colorRegex.test(color);
 }
+

package.json

@@ -0,0 +1,13 @@
+{
+  "devDependencies": {
+    "jest": "^29.7.0"
+  },
+  "scripts": {
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+  },
+  "type": "module",
+    "jest": {
+      "transform": {},
+      "verbose": true
+    }
+}