please write unit tests in javascript using jest framework for a register page $($attached is a picture of the html code $)$ the javascript and css code are pasted below, the test cases are also pasted below. Please USE THE CODES I PASTED HERE TO CREATE UNIT TESTS. js code: document.getElementById$("$registerForm$").$addEventListener$("$submit$",$ function$($event$)\{$

event.preventDefault$()$;

var usernameOrEmail $=$ document.getElementById$("$usernameOrEmail$").$value;

var password $=$ document.getElementById$("$password$").$value;var confirmPassword $=$ document.getElementById$("$confirmPassword$").$value; if $(!$isValidEmail$($usernameOrEmail$))\{$showNotification$("$Please enter a valid email address."$)$;

return;$\}$if $(!$isPasswordValid$($password$,$ confirmPassword$))\{$showNotification$("$Password must contain at least one lowercase letter, one uppercase letter, one special character, one number, and be at least $8$ characters long. Passwords must match."$)$;return;

$\}$if $($password $!==$ confirmPassword$)\{$

showNotification$("$Passwords do not match."$)$;

return;$\}$showNotification$("$Registration successful!"$)$;

$\})$;function isValidEmail$($email$)\{$var emailPattern $=/^[^\backslash$s@$]+$@$[^\backslash$s@$]+\backslash .[^\backslash$s@$]+$$$/$;

return emailPattern.test$($email$)$;$\}$function isPasswordValid$($password$)\{$var passwordPattern $=/^(?=.*\backslash$d$)(?=.*[$a$-$z$])(?=.*[$A$-$Z$])(?=.*[!$@#$$\%^$&$*()\_+])[$a$-$zA$-$Z$\backslash$d$!$@#$$\%^$&$*()\_+]\{8,\}$$$/$;return passwordPattern.test$($password$)$;$\}$function updatePasswordRequirements$($requirementsMet$)\{$var requirementsList $=$ document.getElementByIpasswordRequirements"$)$;if $($requirementsMet$)\{$requirementsList$.$classList.add$("$requirements$-$met"$)$;$\}$ else $\{$requirementsList$.$classList.remove$("$requirements$-$met"$)$;$\}\}$function showNotification$($message$)\{$

var notification $=$ document.getElementById$("$notification$")$;

notification.innerText $=$ message;

notification.style.display $=$ "block";setTimeout$($function$()\{$notification$.$style.display $=$ "none";$\},3000)$;$\}$var showPasswordCheckbox $=$ document.getElementById$("$showPassword$")$;var passwordField $=$ document.getElementById$("$password$")$;

showPasswordCheckbox.addEventListener$("$change$",$ function$()\{$passwordField$.$type $=$ this.checked $?$ "text" : "password";

$\})$;passwordField.addEventListener$("$input$",$ function$()\{$

var password $=$ this.value.trim$()$;

if $($password $!=="")\{$document$.$getElementById$("$passwordRequirementsText$").$style.display $=$ "block";updatePasswordRequirements$($isPasswordValid$($password$))$;$\}$ else $\{$document$.$getElementById$("$passwordRequirementsText$").$style.display $=$ "none";updatePasswordRequirements$($false$)$;$\})$;function updatePasswordRequirements$($requirementsMet$)\{$var requirementsList$=$document.getElementById$("$passwordRequirements$")$if $($requirementsMet$)\{$requirementsList$.$classList.add$("$requirements$-$met"$)$;$\}$ else requirementsList.classList.remove$("$requirements$-$met"$)$;$\}\}$

this the css code:body $\{$

font$-$family: Arial, sans$-$serif;

background$-$image: url$(\text{'}$books$\_$wp$.$jpg$\text{'})$;

background$-$size: cover;

background$-$repeat: no$-$repeat;margin: $0$;padding: $0$;display: flex;justify$-$content: center;align$-$items: center;height: $100$vh;$\}.$container $\{$position: relative;background: linear$-$gradient$($to bottom, crimson, #fff$)$;border$-$radius: $10$px;box$-$shadow: $0020$px rgba$(0,0,0,0\mathrm{.}2)$;padding: $20$px;width: $500$px;$\}$h$1\{$margin$-$bottom: $20$px;color: #$333$;text$-$align: center;$\}.$form$-$group $\{$margin$-$bottom: $15$px;$\}$input$[$type$=$"text"$],$input$[$type$=$"password"$]\{$width: calc$(100\%-24$px$)$;padding: $10$px;border: $1$px solid #ccc;border$-$radius: $5$px;background$-$color: #f$9$f$9$f$9$;color: #$333$;$\}$button$[$type$=$"submit"$]\{$background$-$color: #$0070$ff;color: #fff;padding: $10$px $20$px;border: none;border$-$radius: $5$px;cursor: pointer;position: absolute;bottom: $20$px;right: $20$px;$\}$button$[$type$=$"submit"$]$:hover $\{$background$-$color: #$0050$cc;$\}.$notification $\{$position: absolute;top: $20$px;left: $50\%$;transform: translateX$(-50\%)$;background$-$color: #$333$;color: #fff; padding: $10$px $20$px;border$-$radius: $5$px;display: none;$\}.$show$-$passwordcontainer $\{$

position: relative;

margin$-$top: $10$px;

text$-$align: right$\}$

test cases:# TEST CASES TO VERIFY THE "REGISTRATION" PAGE

## Page specific tests:$+$ The first test will be trying to register with something that is not an email address. Success if the page shows the $$please enter a valid email address$$ notification, failure if the registration is successful.$+$ The second test will be trying to use a password that does not meet the requirements. Success if the page shows the $$Password do not meet the requirements or passwords do not match$$ notification, failure if the registration is successful.$+$ The third test will be trying to register with two different passwords. Success if the page shows the $$Password do not meet the requirements or passwords do not match$$ notification, failure if the registration is successful.$+$ The fourth test is clicking on the show password button. Success if the password is shown, failure if the password is not shown.