2 files changed, 127 insertions, 15 deletions
diff --git a/webAO/client/__tests__/setEmote.test.js b/webAO/client/__tests__/setEmote.test.js
new file mode 100644
index 0000000..d81c2cc
--- /dev/null
+++ b/webAO/client/__tests__/setEmote.test.js
@@ -0,0 +1,115 @@
+import setEmote from '../setEmote';
+import Client from '../../client';
+import fileExistsSync from '../../utils/fileExistsSync';
+import transparentPng from '../../constants/transparentPng';
+
+jest.mock('../../client');
+jest.mock('../../utils/fileExistsSync');
+
+describe('setEmote', () => {
+  const AO_HOST = '';
+  Client.mockReturnValue({
+    lastChar: 'long',
+    chatmsg: {
+      name: 'byte',
+    },
+  });
+  const client = new Client('127.0.0.1');
+  const firstExtension = '.gif';
+
+  test('Should have a client_def_char_img with a valid source', () => {
+    fileExistsSync.mockReturnValue(true);
+    document.body.innerHTML = `
+      <img id="client_def_char_img" />
+    `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'def');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+    expect(document.getElementById('client_def_char_img').src).toEqual(expected);
+  });
+  test('Should have a client_pro_char_img to have a valid src', () => {
+    document.body.innerHTML = `
+      <img id="client_pro_char_img" />
+
+    `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'pro');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+    expect(document.getElementById('client_pro_char_img').src).toEqual(expected);
+  });
+  test('Should have a client_wit_char_img', () => {
+    document.body.innerHTML = `
+      <img id="client_wit_char_img" />
+  `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'wit');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+
+    expect(document.getElementById('client_wit_char_img').src).toEqual(expected);
+  });
+  test('Should have a client_def_pair_img', () => {
+    document.body.innerHTML = `
+<img id="client_def_pair_img" />
+
+`;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'def');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+
+    expect(document.getElementById('client_def_pair_img').src).toEqual(expected);
+  });
+  test('Should have a client_pro_pair_img', () => {
+    document.body.innerHTML = `
+<img id="client_pro_pair_img" />
+
+`;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'pro');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+
+    expect(document.getElementById('client_pro_pair_img').src).toEqual(expected);
+  });
+  test('Should have a client_wit_pair_img', () => {
+    document.body.innerHTML = `
+<img id="client_wit_pair_img" />
+
+`;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'wit');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+
+    expect(document.getElementById('client_wit_pair_img').src).toEqual(expected);
+  });
+  test('Should have a client_char_img', () => {
+    document.body.innerHTML = `
+    <img id="client_char_img" />
+
+    `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'notvalid');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+
+    expect(document.getElementById('client_char_img').src).toEqual(expected);
+  });
+  test('Should have a client_pair_img', () => {
+    document.body.innerHTML = `
+      <img id="client_pair_img" />
+      `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'notvalid');
+    const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
+
+    expect(document.getElementById('client_pair_img').src).toEqual(expected);
+  });
+  test('Should handle .png urls differently', () => {
+    fileExistsSync.mockReturnValueOnce(false);
+    document.body.innerHTML = `
+    <img id="client_pair_img" />
+    `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', 'prefixNotValid', 1, 'notvalid');
+    const expected = 'http://localhost/characters/salanto/coding.png';
+
+    expect(document.getElementById('client_pair_img').src).toEqual(expected);
+  });
+  test('Should replace character if new character responds', () => {
+    fileExistsSync.mockReturnValue(false);
+    document.body.innerHTML = `
+    <img id="client_pair_img" />
+    `;
+    setEmote(AO_HOST, client, 'salanto', 'coding', 'prefixNotValid', 1, 'notvalid');
+    const expected = transparentPng;
+    expect(document.getElementById('client_pair_img').src).toEqual(expected);
+  });
+});
diff --git a/webAO/client/setEmote.js b/webAO/client/setEmote.js
index 16c95be..4bbaab7 100644
--- a/webAO/client/setEmote.js
+++ b/webAO/client/setEmote.js
@@ -1,3 +1,4 @@
+import transparentPng from '../constants/transparentPng';
 import fileExistsSync from '../utils/fileExistsSync';
 
 /**
@@ -10,22 +11,18 @@ const setEmote = (AO_HOST, client, charactername, emotename, prefix, pair, side)
   const characterFolder = `${AO_HOST}characters/`;
   const acceptedPositions = ['def', 'pro', 'wit'];
   const position = acceptedPositions.includes(side) ? `${side}_` : '';
+  const emoteSelector = document.getElementById(`client_${position}${pairID}_img`)
+  const extensionsMap = [
+    '.gif',
+    '.png',
+    '.apng',
+    '.webp'
+  ];
 
-  const gif_s = document.getElementById(`client_${position}${pairID}_gif`);
-  const png_s = document.getElementById(`client_${position}${pairID}_png`);
-  const apng_s = document.getElementById(`client_${position}${pairID}_apng`);
-  const webp_s = document.getElementById(`client_${position}${pairID}_webp`);
-  const extensionsMap = {
-    '.gif': gif_s,
-    '.png': png_s,
-    '.apng': apng_s,
-    '.webp': webp_s,
-  };
-
-  for (const [extension, htmlElement] of Object.entries(extensionsMap)) {
+  for (const extension of extensionsMap) {
     // Hides all sprites before creating a new sprite
     if (client.lastChar !== client.chatmsg.name) {
-      htmlElement.src = transparentPNG;
+      emoteSelector.src = transparentPng;
     }
     let url;
     if (extension === '.png') {
@@ -35,8 +32,8 @@ const setEmote = (AO_HOST, client, charactername, emotename, prefix, pair, side)
     }
     const exists = fileExistsSync(url);
     if (exists) {
-      htmlElement.src = url;
-      return;
+      emoteSelector.src = url;
+      break;
     }
   }
 };