Testing

.github/workflows/main.yml

@@ -0,0 +1,13 @@
+name: Unit Tests # name of the test
+
+on: [push] # the Github Action will activate "on" the event that you "push" to the repo
+
+jobs: # the things being executed
+  tests: # the name of your status check, will become important when you do branch protection
+    runs-on: ubuntu-latest # which device on Github's server that you are running the Actions on
+    steps:
+      - uses: actions/checkout@v4 # using version 4 of Actions
+      - name: Install Dependencies
+        run: npm install
+      - name: Unit Test
+        run: npm test ./__tests__/sum.test.js # the actual testing line

.gitignore

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

README.md

@@ -1 +1,12 @@
 # Lab 5 - Starter
+Reisandy Lamdjani
+
+Nicholas Quach
+
+[Expose](https://reisandylamdjani.github.io/Lab5_Starter/expose.html)
+
+[Explore](https://reisandylamdjani.github.io/Lab5_Starter/explore.html)
+
+1. We would use unit testing to test the "message" feature as it is something that a user can do. We want the "message" to be able to write and send a message to another user. The receiving end of the text is in another test
+
+2. We would use unit testing to test the "max message length" because it is a hard coded number that can be tested. We can test to see the result of a message with more than 80 and less than 80 characters.

__tests__/sum.test.js

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

__tests__/unit.test.js

@@ -0,0 +1,130 @@
+// unit.test.js
+
+import {
+  isPhoneNumber,
+  isEmail,
+  isStrongPassword,
+  isDate,
+  isHexColor,
+} from '../code-to-unit-test/unit-test-me';
+
+// TODO - Part 2
+
+// isPhoneNumber
+
+// True tests
+test('verify that each component in the phone number has 3 digts, 3 digits, then 4 digits', () => {
+  let phoneNumber = "222-222-2222";
+  expect(isPhoneNumber(phoneNumber)).toBe(true);
+});
+
+test('allowing parenthesis in the area code section', () => {
+  let phoneNumber = "(626)-222-2222";
+  expect(isPhoneNumber(phoneNumber)).toBe(true);
+});
+
+// False Tests
+test('cannot accept characters in the phone number', () => {
+  let phoneNumber = "aaa-aaa-aaaa";
+  expect(isPhoneNumber(phoneNumber)).toBe(false);
+});
+
+test('having no hypens', () => {
+  let phoneNumber = "2222222";
+  expect(isPhoneNumber(phoneNumber)).toBe(false);
+});
+
+
+// isEmail
+
+// True tests
+test('allow any characters before the @ symbol', () => {
+  let email = "fsdkfasjkfasdf@gmail.com";
+  expect(isEmail(email)).toBe(true);
+});
+
+test('having 3 characters after the . is correct', () => {
+  let email = "fsdkfasjkfasdf@gmail.com";
+  expect(isEmail(email)).toBe(true);
+});
+
+// False tests
+test('doesnt allow other symbol', () => {
+  let email = "123!gmail.com";
+  expect(isEmail(email)).toBe(false);
+});
+
+test('would fail if there is not the @ symbol', () => {
+  let email = "123gmail.com";
+  expect(isEmail(email)).toBe(false);
+});
+
+// isStrongPassword
+
+test('first character is letter, contains letters, numbers and underscore with length under 15', () => {
+  let pass = "A8__29Bsz"
+  expect(isStrongPassword(pass)).toBe(true);
+});
+
+test('first character is letter, contains numbers, all upper case letters', () => {
+  let pass = "A9999BDH"
+  expect(isStrongPassword(pass)).toBe(true);
+});
+
+// FALSE TESTS
+test('length is under 4 characters', () => {
+  let pass = "AB"
+  expect(isStrongPassword(pass)).toBe(false);
+});
+
+test('first letter is not a letter', () => {
+  let pass = "90909BHDCD"
+  expect(isStrongPassword(pass)).toBe(false);
+});
+
+// isDate
+
+test('date with two digit month', () => {
+  let date = "01/12/2021"
+  expect(isDate(date)).toBe(true);
+});
+
+test('date with one digit month', () => {
+  let date = "3/21/2009"
+  expect(isDate(date)).toBe(true);
+});
+
+
+// FALSE TESTS
+test('year is only 2 digits long', () => {
+  let date = "03 / 21 / 09"
+  expect(isDate(date)).toBe(false);
+});
+
+test('not in correct format', () => {
+  let date = "03-21-2009"
+  expect(isDate(date)).toBe(false);
+});
+
+// isHexColor
+
+test('six digit hex color', () => {
+  let hexColor = "#1a2b3c"
+  expect(isHexColor(hexColor)).toBe(true);
+});
+
+test('three digit hex color', () => {
+  let hexColor = "789"
+  expect(isHexColor(hexColor)).toBe(true);
+});
+
+// FALSE TESTS
+test('color digits not in range of alphabet of hex color', () => {
+  let hexColor = "#GHIJKL"
+  expect(isHexColor(hexColor)).toBe(false);
+});
+
+test('four digit hex color, which is wrong', () => {
+  let hexColor = "#1234"
+  expect(isHexColor(hexColor)).toBe(false);
+});

assets/scripts/explore.js

@@ -2,6 +2,53 @@
 
 window.addEventListener('DOMContentLoaded', init);
 
+let voices = [];
+const synth = window.speechSynthesis;
 function init() {
-  // TODO
+  let voiceSelect = document.getElementById("voice-select");
+
+  function populateVoiceList() {
+    voices = synth.getVoices();
+    for (let i = 0; i < voices.length; i++) {
+      const option = document.createElement("option");
+      option.textContent = `${voices[i].name} (${voices[i].lang})`;
+
+      if (voices[i].default) {
+        option.textContent += " — DEFAULT";
+      }
+
+      option.setAttribute("data-lang", voices[i].lang);
+      option.setAttribute("data-name", voices[i].name);
+      voiceSelect.appendChild(option);
+    }
+  }
+
+  populateVoiceList();
+  if (speechSynthesis.onvoiceschanged !== undefined) {
+    speechSynthesis.onvoiceschanged = populateVoiceList;
+  }
+
+  let img = document.querySelector("#explore img");
+  let button = document.querySelector("#explore button");
+  const inputTxt = document.getElementById("text-to-speak");
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+    const selectedOption =
+      voiceSelect.selectedOptions[0].getAttribute("data-name");
+    for (let i = 0; i < voices.length; i++) {
+      if (voices[i].name === selectedOption) {
+        utterThis.voice = voices[i];
+      }
+    }
+
+    synth.speak(utterThis);
+    inputTxt.blur();
+
+    img.src = "assets/images/smiling-open.png";
+    utterThis.addEventListener("end", (event) => {
+      img.src = "assets/images/smiling.png";
+    }) 
+  });
+
 }

assets/scripts/expose.js

@@ -4,4 +4,66 @@ window.addEventListener('DOMContentLoaded', init);
 
 function init() {
   // TODO
+  const hornSelect = document.getElementById("horn-select");
+  let hornImage = document.querySelector("#expose img");
+
+  hornSelect.addEventListener("change", (event) => {
+    console.log(event);
+    if(event.target.value == "air-horn") {
+      hornImage.src = "assets/images/air-horn.svg";
+    }
+    else if(event.target.value == "car-horn") {
+      hornImage.src = "assets/images/car-horn.svg";
+    }
+    else if(event.target.value == "party-horn") {
+      hornImage.src = "assets/images/party-horn.svg";
+    }
+  });
+
+  let volumeControl = document.getElementById("volume");
+  let volumeImage = document.querySelector("#volume-controls img");
+  let audioLevel = document.querySelector("#expose audio");
+
+  volumeControl.addEventListener("input", (event) => {
+    if(volumeControl.value == 0) {
+      volumeImage.src = "assets/icons/volume-level-0.svg";
+      audioLevel.volume = (volumeControl.value) / 100;
+    }
+    else if(volumeControl.value > 0 && volumeControl.value < 33) {
+      volumeImage.src = "assets/icons/volume-level-1.svg";
+      audioLevel.volume = (volumeControl.value) / 100;
+      console.log(audioLevel.volume);
+    }
+    else if(volumeControl.value >= 33 && volumeControl.value < 67) {
+      volumeImage.src = "assets/icons/volume-level-2.svg";
+      audioLevel.volume = (volumeControl.value) / 100;
+      console.log(audioLevel.volume);
+
+    }
+    else {
+      volumeImage.src = "assets/icons/volume-level-3.svg";
+      audioLevel.volume = (volumeControl.value) / 100;
+      console.log(audioLevel.volume);
+
+    }
+  });
+  const jsConfetti = new JSConfetti()
+
+  let button = document.querySelector("#expose button");
+  button.addEventListener("click", (event) => {
+    if(hornSelect.value == "party-horn") {
+      audioLevel.src = "assets/audio/party-horn.mp3"
+      audioLevel.play()
+      jsConfetti.addConfetti()
+    }
+    else if(hornSelect.value == "air-horn") {
+      audioLevel.src =  "assets/audio/air-horn.mp3"
+      audioLevel.play()
+    }
+    else if(hornSelect.value == "car-horn") {
+      audioLevel.src =  "assets/audio/car-horn.mp3"
+      audioLevel.play()
+    }
+
+  });
 }

code-to-unit-test/sum.js

@@ -0,0 +1,3 @@
+export function sum(a, b) {
+  return a + b;
+}

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

@@ -0,0 +1,32 @@
+// matches valid phone numbers
+export function isPhoneNumber(phoneNumber) {
+  const phoneRegex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/;
+  return phoneRegex.test(phoneNumber);
+}
+
+// matches valid emails
+export function isEmail(email) {
+  const emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
+  return emailRegex.test(email);
+}
+
+/**
+ * The password's first character must be a letter, it must contain at least * 4 characters and no more than 15 characters and no characters other than * * letters, numbers and the underscore may be used
+ */
+export function isStrongPassword(password) {
+  const pwRegex = /^[a-zA-Z]\w{3,14}$/;
+  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) {
+  const dateRegex = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
+  return dateRegex.test(date);
+}
+
+// Matches valid 3 or 6 character hex codes used for HTML or CSS.
+export function isHexColor(color) {
+  const colorRegex = /^\#?[A-Fa-f0-9]{3}([A-Fa-f0-9]{3})?$/;
+  return colorRegex.test(color);
+}