registration tests

package.json

@@ -16,6 +16,7 @@
     "css-minimizer-webpack-plugin": "^2.0.0",
     "dart-sass": "^1.25.0",
     "jest": "^26.6.3",
+    "jest-fetch-mock": "^3.0.3",
     "jsdom": "^16.5.3",
     "mini-css-extract-plugin": "^1.6.0",
     "sass-loader": "^11.0.1",

templates/auth/css/forms.scss

@@ -15,8 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../reset';
-@import '../vars';
+@import '../../reset';
+@import '../../vars';
 
 body {
   background-color: $backdrop;

templates/auth/login/ts/index.ts

@@ -15,11 +15,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import VIEWS from '../../views/v1/routes';
+import VIEWS from '../../../views/v1/routes';
 
-import isBlankString from '../../utils/isBlankString';
-import genJsonPayload from '../../utils/genJsonPayload';
-import getFormUrl from '../../utils/getFormUrl';
+import isBlankString from '../../../utils/isBlankString';
+import genJsonPayload from '../../../utils/genJsonPayload';
+import getFormUrl from '../../../utils/getFormUrl';
 
 //import '../forms.scss';
 

templates/auth/register/emailExists.ts

@@ -1,60 +0,0 @@
-/*
- * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import ROUTES from '../../api/v1/routes';
-
-import genJsonPayload from '../../utils/genJsonPayload';
-
-const checkEmailExists = async () => {
-  let email = <HTMLInputElement>document.getElementById('email');
-  let val = email.value;
-  let payload = {
-    val,
-  };
-
-  //  return fetch(ROUTES.emailExists, genJsonPayload(payload)).then(res => {
-  //    if (res.ok) {
-  //      res.json().then(data => {
-  //        if (data.exists) {
-  //          console.log(email.className);
-  //          email.className += ' form__in-field--warn';
-  //          alert('Email taken');
-  //        }
-  //
-  //        return data.exists;
-  //      });
-  //    } else {
-  //      res.json().then(err => alert(`error: ${err.error}`));
-  //    }
-  //  });
-  //
-
-  let res = await fetch(ROUTES.emailExists, genJsonPayload(payload));
-  if (res.ok) {
-    let data = await res.json();
-    if (data.exists) {
-      email.className += ' form__in-field--warn';
-      alert('Email taken');
-    }
-    return data.exists;
-  } else {
-    let err = await res.json();
-    alert(`error: ${err.error}`);
-  }
-};
-
-export {checkEmailExists};

templates/auth/register/ts/emailExists.test.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import fetchMock from 'jest-fetch-mock';
+
+import emailExists from './emailExists';
+
+import {mockAlert, getRegistrationFormHtml} from '../../../setUpTests';
+
+fetchMock.enableMocks();
+mockAlert();
+
+beforeEach(() => {
+  fetchMock.resetMocks();
+});
+
+it('finds exchange', async () => {
+  fetchMock.mockResponseOnce(JSON.stringify({exists: true}));
+
+  document.body.innerHTML = getRegistrationFormHtml();
+  const emailField = <HTMLInputElement>document.getElementById('email');
+  emailField.setAttribute('value', 'test@a.com');
+
+  expect(await emailExists()).toBe(true);
+
+  fetchMock.mockResponseOnce(JSON.stringify({exists: false}));
+  expect(await emailExists()).toBe(false);
+});

templates/auth/register/ts/emailExists.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import ROUTES from '../../../api/v1/routes';
+
+import genJsonPayload from '../../../utils/genJsonPayload';
+
+const emailExists = async () => {
+  const email = <HTMLInputElement>document.getElementById('email');
+  const val = email.value;
+  const payload = {
+    val,
+  };
+
+  const res = await fetch(ROUTES.emailExists, genJsonPayload(payload));
+  if (res.ok) {
+    const data = await res.json();
+    if (data.exists) {
+      email.className += ' form__in-field--warn';
+      alert('Email taken');
+      return data.exists;
+    }
+    return data.exists;
+  } else {
+    const err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+};
+
+export default emailExists;

templates/auth/register/ts/index.ts

@@ -15,14 +15,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import VIEWS from '../../views/v1/routes';
+import VIEWS from '../../../views/v1/routes';
 
-import isBlankString from '../../utils/isBlankString';
-import genJsonPayload from '../../utils/genJsonPayload';
+import isBlankString from '../../../utils/isBlankString';
+import genJsonPayload from '../../../utils/genJsonPayload';
 
 import userExists from './userExists';
-import {checkEmailExists} from './emailExists';
-import getFormUrl from '../../utils/getFormUrl';
+import emailExists from './emailExists';
+import getFormUrl from '../../../utils/getFormUrl';
 
 //import '../forms.scss';
 
@@ -55,7 +55,7 @@ const registerUser = async (e: Event) => {
   if (!email.replace(/\s/g, '').length) {
     email = null;
   } else {
-    exists = await checkEmailExists();
+    exists = await emailExists();
     if (exists) {
       return;
     }

templates/auth/register/ts/userExists.test.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import fetchMock from 'jest-fetch-mock';
+
+import userExists from './userExists';
+
+import {mockAlert, getLoginFormHtml} from '../../../setUpTests';
+
+fetchMock.enableMocks();
+mockAlert();
+
+beforeEach(() => {
+  fetchMock.resetMocks();
+});
+
+it('finds exchange', async () => {
+  fetchMock.mockResponseOnce(JSON.stringify({exists: true}));
+
+  document.body.innerHTML = getLoginFormHtml();
+  const usernameField = <HTMLInputElement>document.querySelector('#username');
+  usernameField.value = 'test';
+  expect(await userExists()).toBe(true);
+
+  fetchMock.mockResponseOnce(JSON.stringify({exists: false}));
+  expect(await userExists()).toBe(false);
+});

templates/auth/register/ts/userExists.ts

@@ -15,46 +15,30 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import ROUTES from '../../api/v1/routes';
+import ROUTES from '../../../api/v1/routes';
 
-import genJsonPayload from '../../utils/genJsonPayload';
+import genJsonPayload from '../../../utils/genJsonPayload';
 
-//export const checkUsernameExists = async () => {
-async function userExists() {
-  let username = <HTMLInputElement>document.getElementById('username');
-  let val = username.value;
-  let payload = {
+const userExists = async () => {
+  const username = <HTMLInputElement>document.getElementById('username');
+  const val = username.value;
+  const payload = {
     val,
   };
 
-  //  return fetch(ROUTES.usernameExists, genJsonPayload(payload)).then(res => {
-  //    if (res.ok) {
-  //      res.json().then(data => {
-  //        if (data.exists) {
-  //          username.className += ' form__in-field--warn';
-  //          alert('Username taken');
-  //        }
-  //        return data.exists;
-  //      });
-  //    } else {
-  //      res.json().then(err => alert(`error: ${err.error}`));
-  //    }
-  //  });
-  //
-
-  let res = await fetch(ROUTES.usernameExists, genJsonPayload(payload));
+  const res = await fetch(ROUTES.usernameExists, genJsonPayload(payload));
   if (res.ok) {
-    let data = await res.json();
+    const data = await res.json();
     if (data.exists) {
       username.className += ' form__in-field--warn';
       alert('Username taken');
     }
     return data.exists;
   } else {
-    let err = await res.json();
+    const err = await res.json();
     alert(`error: ${err.error}`);
   }
   return false;
-}
+};
 
 export default userExists;

templates/index.ts

@@ -17,20 +17,20 @@
 
 import {Router} from './router';
 
-import * as login from './auth/login';
-import * as register from './auth/register';
-import * as panel from './panel/index';
-import * as addSiteKey from './panel/sitekey/add/';
+import * as login from './auth/login/ts/';
+import * as register from './auth/register/ts/';
+import * as panel from './panel/ts/index';
+import * as addSiteKey from './panel/sitekey/add/ts';
 
 import VIEWS from './views/v1/routes';
 
-import './auth/forms.scss';
-import './panel/main.scss';
+import './auth/css/forms.scss';
+import './panel/css/main.scss';
 import './panel/header/sidebar/main.scss';
 import './panel/taskbar/main.scss';
 import './panel/help-banner/main.scss';
-import './panel/sitekey/add/main.scss';
-import './panel/sitekey/list/main.scss';
+import './panel/sitekey/add/css/main.scss';
+import './panel/sitekey/list/css/main.scss';
 
 import './errors/main.scss';
 

templates/panel/css/main.scss

@@ -15,9 +15,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../reset';
-@import '../vars';
-@import '../components/button';
+@import '../../reset';
+@import '../../vars';
+@import '../../components/button';
 
 main {
   margin-left: 14%;

templates/panel/sitekey/add/css/main.scss

@@ -15,10 +15,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../reset';
-@import '../../../vars';
-@import '../../../components/button';
-@import '../../../components/forms';
+@import '../../../../reset';
+@import '../../../../vars';
+@import '../../../../components/button';
+@import '../../../../components/forms';
 
 .sitekey-form {
   display: flex;

templates/panel/sitekey/add/ts/form.ts

@@ -17,12 +17,12 @@
 
 import {LEVELS} from './levels';
 
-import isBlankString from '../../../utils/isBlankString';
-import getFormUrl from '../../../utils/getFormUrl';
-import genJsonPayload from '../../../utils/genJsonPayload';
-import isNumber from '../../../utils/isNumber';
+import isBlankString from '../../../../utils/isBlankString';
+import getFormUrl from '../../../../utils/getFormUrl';
+import genJsonPayload from '../../../../utils/genJsonPayload';
+import isNumber from '../../../../utils/isNumber';
 
-import VIEWS from '../../../views/v1/routes';
+import VIEWS from '../../../../views/v1/routes';
 
 const SITE_KEY_FORM_CLASS = 'sitekey-form';
 const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);

templates/panel/sitekey/add/ts/levels/getLevelFields.ts

@@ -18,7 +18,7 @@
 import {Level} from './index';
 import CONST from '../const';
 
-import isNumber from '../../../../utils/isNumber';
+import isNumber from '../../../../../utils/isNumber';
 
 /** Fetches level from DOM using the ID passesd and validates */
 const getLevelFields = (id: number) => {

templates/panel/sitekey/list/css/main.scss

@@ -15,9 +15,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../reset';
-@import '../../../vars';
-@import '../../../components/box';
+@import '../../../../reset';
+@import '../../../../vars';
+@import '../../../../components/box';
 
 .sitekey-list__box {
   @include box;

templates/setUpTests.ts

@@ -0,0 +1,111 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/** get login form HTML */
+export const getLoginFormHtml = () =>
+  `
+  <form method="POST" action="/something" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        required=""
+        autofocus="true"
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        required=""
+      />
+      <!--
+          <a class="form__pw-recovery" -href="/recovert/password"
+            >Forgot password?</a
+          >
+          -->
+    </label>
+        <input type="submit" class="form__submit-button" value="Sign in" />
+  </form>
+`;
+
+/** get registration form HTML */
+export const getRegistrationFormHtml = () => `
+  <form method="POST" action="/api/v1/signup"  class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        id="username"
+        required
+        autofocus="true"
+      />
+    </label>
+
+    <label class="form__in-group" for="username"
+      >Email(optional)
+      <input
+        class="form__in-field"
+        id="email"
+        type="email"
+        name="email"
+        id="email"
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        id="password"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Re-enter Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password-check"
+        name="password-check"
+        id="password-check"
+        required
+      />
+    </label>
+        <input type="submit" class="form__submit-button" value="Sign up" />
+  </form>
+`;
+
+export const mockAlert = () => {
+  delete window.alert;
+
+  window.alert = (x: any) => console.log(x);
+};

templates/utils/getFromUrl.test.ts

@@ -16,44 +16,18 @@
  */
 
 import getFormUrl from './getFormUrl';
+import {getLoginFormHtml} from '../setUpTests';
 
 'use strict';
 
 const formClassName = 'form__box';
 const formURL = '/api/v1/signin';
 
-document.body.innerHTML = `
-  <form method="POST" action="${formURL}" class="${formClassName}" id="form">
-    <label class="form__in-group" for="username"
-      >Username
-      <input
-        class="form__in-field"
-        id="username"
-        type="text"
-        name="username"
-        required=""
-        autofocus="true"
-      />
-    </label>
+document.body.innerHTML = getLoginFormHtml();
 
-    <label for="password" class="form__in-group"
-      >Password
-      <input
-        class="form__in-field"
-        type="password"
-        id="password"
-        name="password"
-        required=""
-      />
-      <!--
-          <a class="form__pw-recovery" -href="/recovert/password"
-            >Forgot password?</a
-          >
-          -->
-    </label>
-        <input type="submit" class="form__submit-button" value="Sign in" />
-  </form>
-`;
+const form = document.querySelector('form');
+form.action = formURL;
+form.className = formClassName;
 
 it('getFromUrl workds', () => {
   const name = `.${formClassName}`;

templates/utils/isBlankString.test.ts

@@ -16,12 +16,11 @@
  */
 
 import isBlankString from './isBlankString';
+import {mockAlert} from '../setUpTests';
 
 'use strict';
 
-delete window.alert;
-
-window.alert = (x: any) => console.log(x);
+mockAlert();
 
 it('getFromUrl workds', () => {
   expect(isBlankString('test', 'username')).toBe(false);

yarn.lock

@@ -1650,6 +1650,13 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+cross-fetch@^3.0.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
+  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
+  dependencies:
+    node-fetch "2.6.1"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -3390,6 +3397,14 @@ jest-environment-node@^26.6.2:
     jest-mock "^26.6.2"
     jest-util "^26.6.2"
 
+jest-fetch-mock@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz#31749c456ae27b8919d69824f1c2bd85fe0a1f3b"
+  integrity sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==
+  dependencies:
+    cross-fetch "^3.0.4"
+    promise-polyfill "^8.1.3"
+
 jest-get-type@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
@@ -4146,6 +4161,11 @@ nise@^4.1.0:
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
 
+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -4831,6 +4851,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+promise-polyfill@^8.1.3:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.0.tgz#367394726da7561457aba2133c9ceefbd6267da0"
+  integrity sha512-k/TC0mIcPVF6yHhUvwAp7cvL6I2fFV7TzF1DuGPI8mBh4QQazf36xCKEHKTZKRysEoTQoQdKyP25J8MPJp7j5g==
+
 prompts@^2.0.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"