Add testing and refactor code

src/functions/constructLayerToDna/functions/cleanDna/functions/removeQueryStrings/index.js

@@ -0,0 +1,6 @@
+function removeQueryStrings (_dna) {
+  const query = /(\?.*$)/;
+  return _dna.replace(query, "");
+}
+
+module.exports = removeQueryStrings;

src/functions/constructLayerToDna/functions/cleanDna/functions/removeQueryStrings/index.test.js

@@ -0,0 +1,9 @@
+const removeQueryStrings = require("./index");
+const { mockDataInput, mockDataOutput } = require("./inputOutputData.js");
+
+describe("removeQueryStrings cero", () => {
+  test("removeQueryStrings", () => {
+    const resultInputFalse = removeQueryStrings(mockDataInput);
+    expect(resultInputFalse).toStrictEqual(mockDataOutput);
+  });
+});

src/functions/constructLayerToDna/functions/cleanDna/functions/removeQueryStrings/inputOutputData.js

@@ -0,0 +1,4 @@
+const mockDataInput = "0:Black#1.png";
+const mockDataOutput = "0:Black#1.png";
+module.exports.mockDataInput = mockDataInput;
+module.exports.mockDataOutput = mockDataOutput;

src/functions/constructLayerToDna/functions/cleanDna/index.js

@@ -0,0 +1,8 @@
+const removeQueryStrings = require("./functions/removeQueryStrings");
+
+function cleanDna (_str) {
+  const withoutOptions = removeQueryStrings(_str);
+  return Number(withoutOptions.split(":").shift());
+}
+
+module.exports = cleanDna;

src/functions/constructLayerToDna/functions/cleanDna/index.test.js

@@ -0,0 +1,9 @@
+const cleanDna = require("./index");
+const { mockDataInput, mockDataOutput } = require("./inputOutputData.js");
+
+describe("cleanDna cero", () => {
+  test("cleanDna", () => {
+    const resultInputFalse = cleanDna(mockDataInput);
+    expect(resultInputFalse).toStrictEqual(mockDataOutput);
+  });
+});

src/functions/constructLayerToDna/functions/cleanDna/inputOutputData.js

@@ -0,0 +1,5 @@
+const mockDataInput = "0:Black#1.png";
+const mockDataOutput = 0;
+
+module.exports.mockDataInput = mockDataInput;
+module.exports.mockDataOutput = mockDataOutput;

src/functions/constructLayerToDna/index.js

@@ -0,0 +1,19 @@
+const cleanDna = require("./functions/cleanDna");
+
+function constructLayerToDna (_dna = "", _layers = []) {
+  const DNA_DELIMITER = "-";
+
+  return _layers.map((layer, index) => {
+    const selectedElement = layer.elements.find(
+      (e) => e.id === cleanDna(_dna.split(DNA_DELIMITER)[index])
+    );
+    return {
+      name: layer.name,
+      blend: layer.blend,
+      opacity: layer.opacity,
+      selectedElement: selectedElement
+    };
+  });
+};
+
+module.exports = constructLayerToDna;

src/functions/constructLayerToDna/index.test.js

@@ -0,0 +1,9 @@
+const constructLayerToDna = require("./index");
+const { mockDataInputOne, mockDataInputTwo, mockDataOutput } = require("./inputOutputData.js");
+
+describe("constructLayerToDna cero", () => {
+  test("constructLayerToDna", () => {
+    const resultInputFalse = constructLayerToDna(mockDataInputOne, mockDataInputTwo);
+    expect(resultInputFalse).toStrictEqual(mockDataOutput);
+  });
+});

src/functions/constructLayerToDna/inputOutputData.js

@@ -0,0 +1,228 @@
+const mockDataInputOne = "0:Black#1.png-0:Red#50.png-2:Small#60.png-0:Shapes#100.png-0:High#20.png-2:Middle#50.png";
+
+const mockDataInputTwo = [
+  {
+    id: 0,
+    elements: [
+      {
+        id: 0,
+        name: "Black",
+        filename: "Black#1.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Background/Black#1.png",
+        weight: 1
+      }
+    ],
+    name: "Background",
+    blend: "source-over",
+    opacity: 1,
+    bypassDNA: false
+  },
+  {
+    id: 1,
+    elements: [
+      {
+        id: 0,
+        name: "Red",
+        filename: "Red#50.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Eyeball/Red#50.png",
+        weight: 50
+      },
+      {
+        id: 1,
+        name: "White",
+        filename: "White#50.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Eyeball/White#50.png",
+        weight: 50
+      }
+    ],
+    name: "Eyeball",
+    blend: "source-over",
+    opacity: 1,
+    bypassDNA: false
+  },
+  {
+    id: 2,
+    elements: [
+      {
+        id: 0,
+        name: "Large",
+        filename: "Large#20.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Iris/Large#20.png",
+        weight: 20
+      },
+      {
+        id: 1,
+        name: "Medium",
+        filename: "Medium#20.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Iris/Medium#20.png",
+        weight: 20
+      },
+      {
+        id: 2,
+        name: "Small",
+        filename: "Small#60.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Iris/Small#60.png",
+        weight: 60
+      }
+    ],
+    name: "Iris",
+    blend: "source-over",
+    opacity: 1,
+    bypassDNA: false
+  },
+  {
+    id: 3,
+    elements: [
+      {
+        id: 0,
+        name: "Shapes",
+        filename: "Shapes#100.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Shine/Shapes#100.png",
+        weight: 100
+      }
+    ],
+    name: "Shine",
+    blend: "source-over",
+    opacity: 1,
+    bypassDNA: false
+  },
+  {
+    id: 4,
+    elements: [
+      {
+        id: 0,
+        name: "High",
+        filename: "High#20.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Bottom lid/High#20.png",
+        weight: 20
+      },
+      {
+        id: 1,
+        name: "Low",
+        filename: "Low#40.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Bottom lid/Low#40.png",
+        weight: 40
+      },
+      {
+        id: 2,
+        name: "Middle",
+        filename: "Middle#40.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Bottom lid/Middle#40.png",
+        weight: 40
+      }
+    ],
+    name: "Bottom lid",
+    blend: "source-over",
+    opacity: 1,
+    bypassDNA: false
+  },
+  {
+    id: 5,
+    elements: [
+      {
+        id: 0,
+        name: "High",
+        filename: "High#30.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Top lid/High#30.png",
+        weight: 30
+      },
+      {
+        id: 1,
+        name: "Low",
+        filename: "Low#20.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Top lid/Low#20.png",
+        weight: 20
+      },
+      {
+        id: 2,
+        name: "Middle",
+        filename: "Middle#50.png",
+        path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Top lid/Middle#50.png",
+        weight: 50
+      }
+    ],
+    name: "Top lid",
+    blend: "source-over",
+    opacity: 1,
+    bypassDNA: false
+  }
+];
+
+const mockDataOutput = [
+  {
+    name: "Background",
+    blend: "source-over",
+    opacity: 1,
+    selectedElement: {
+      id: 0,
+      name: "Black",
+      filename: "Black#1.png",
+      path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Background/Black#1.png",
+      weight: 1
+    }
+  },
+  {
+    name: "Eyeball",
+    blend: "source-over",
+    opacity: 1,
+    selectedElement: {
+      id: 0,
+      name: "Red",
+      filename: "Red#50.png",
+      path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Eyeball/Red#50.png",
+      weight: 50
+    }
+  },
+  {
+    name: "Iris",
+    blend: "source-over",
+    opacity: 1,
+    selectedElement: {
+      id: 2,
+      name: "Small",
+      filename: "Small#60.png",
+      path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Iris/Small#60.png",
+      weight: 60
+    }
+  },
+  {
+    name: "Shine",
+    blend: "source-over",
+    opacity: 1,
+    selectedElement: {
+      id: 0,
+      name: "Shapes",
+      filename: "Shapes#100.png",
+      path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Shine/Shapes#100.png",
+      weight: 100
+    }
+  },
+  {
+    name: "Bottom lid",
+    blend: "source-over",
+    opacity: 1,
+    selectedElement: {
+      id: 0,
+      name: "High",
+      filename: "High#20.png",
+      path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Bottom lid/High#20.png",
+      weight: 20
+    }
+  },
+  {
+    name: "Top lid",
+    blend: "source-over",
+    opacity: 1,
+    selectedElement: {
+      id: 2,
+      name: "Middle",
+      filename: "Middle#50.png",
+      path: "/home/arty/Documents/Platzi/multiple_art/hashlips_art_engine/layers/Top lid/Middle#50.png",
+      weight: 50
+    }
+  }
+];
+
+module.exports.mockDataInputOne = mockDataInputOne;
+module.exports.mockDataInputTwo = mockDataInputTwo;
+module.exports.mockDataOutput = mockDataOutput;

src/main.js

@@ -13,6 +13,7 @@ const shuffle = require(`${basePath}/node_modules/lodash/shuffle`);
 const saveMetaDataSingleFile = require(`${basePath}/src/functions/saveMetaDataSingleFile`);
 const filterDNAOptions = require(`${basePath}/src/functions/filterDNAOptions`);
 const buildSetup = require(`${basePath}/src/functions/buildSetup`);
+const constructLayerToDna = require(`${basePath}/src/functions/constructLayerToDna`);
 
 const {
   format,
@@ -40,7 +41,6 @@ ctx.imageSmoothingEnabled = format.smoothing;
 const metadataList = [];
 let attributesList = [];
 const dnaList = new Set();
-const DNA_DELIMITER = "-";
 
 let hashlipsGiffer = null;
 
@@ -55,12 +55,6 @@ const getRarityWeight = (_str) => {
   return nameWithoutWeight;
 };
 
-const cleanDna = (_str) => {
-  const withoutOptions = removeQueryStrings(_str);
-  const dna = Number(withoutOptions.split(":").shift());
-  return dna;
-};
-
 const cleanName = (_str) => {
   const nameWithoutExtension = _str.slice(0, -4);
   const nameWithoutWeight = nameWithoutExtension.split(rarityDelimiter).shift();
@@ -180,10 +174,8 @@ const addAttributes = (_element) => {
 
 const loadLayerImg = async (_layer) => {
   try {
-    return new Promise(async (resolve) => {
-      const image = await loadImage(`${_layer.selectedElement.path}`);
-      resolve({ layer: _layer, loadedImage: image });
-    });
+    const image = await loadImage(`${_layer.selectedElement.path}`);
+    return ({ layer: _layer, loadedImage: image });
   } catch (error) {
     console.error("Error loading image:", error);
   }
@@ -218,33 +210,6 @@ const drawElement = (_renderObject, _index, _layersLen) => {
   addAttributes(_renderObject);
 };
 
-const constructLayerToDna = (_dna = "", _layers = []) => {
-  return _layers.map((layer, index) => {
-    const selectedElement = layer.elements.find(
-      (e) => e.id === cleanDna(_dna.split(DNA_DELIMITER)[index])
-    );
-    return {
-      name: layer.name,
-      blend: layer.blend,
-      opacity: layer.opacity,
-      selectedElement: selectedElement
-    };
-  });
-};
-
-/**
- * Cleaning function for DNA strings. When DNA strings include an option, it
- * is added to the filename with a ?setting=value query string. It needs to be
- * removed to properly access the file name before Drawing.
- *
- * @param {String} _dna The entire newDNA string
- * @returns Cleaned DNA string without querystring parameters.
- */
-const removeQueryStrings = (_dna) => {
-  const query = /(\?.*$)/;
-  return _dna.replace(query, "");
-};
-
 const isDnaUnique = (_DnaList = new Set(), _dna = "") => {
   const _filteredDNA = filterDNAOptions(_dna);
   return !_DnaList.has(_filteredDNA);
@@ -291,46 +256,45 @@ const startCreating = async () => {
           loadedElements.push(loadLayerImg(layer));
         });
 
-        await Promise.all(loadedElements).then((renderObjectArray) => {
-          debugLogs && console.log("Clearing canvas");
-          ctx.clearRect(0, 0, format.width, format.height);
-          if (gif.export) {
-            hashlipsGiffer = new HashlipsGiffer(
-              canvas,
-              ctx,
+        const renderObjectArray = await Promise.all(loadedElements);
+        debugLogs && console.log("Clearing canvas");
+        ctx.clearRect(0, 0, format.width, format.height);
+        if (gif.export) {
+          hashlipsGiffer = new HashlipsGiffer(
+            canvas,
+            ctx,
               `${buildDir}/gifs/${abstractedIndexes[0]}.gif`,
               gif.repeat,
               gif.quality,
               gif.delay
-            );
-            hashlipsGiffer.start();
-          }
-          if (background.generate) {
-            drawBackground();
-          }
-          renderObjectArray.forEach((renderObject, index) => {
-            drawElement(
-              renderObject,
-              index,
-              layerConfigurations[layerConfigIndex].layersOrder.length
-            );
-            if (gif.export) {
-              hashlipsGiffer.add();
-            }
-          });
+          );
+          hashlipsGiffer.start();
+        }
+        if (background.generate) {
+          drawBackground();
+        }
+        renderObjectArray.forEach((renderObject, index) => {
+          drawElement(
+            renderObject,
+            index,
+            layerConfigurations[layerConfigIndex].layersOrder.length
+          );
           if (gif.export) {
-            hashlipsGiffer.stop();
+            hashlipsGiffer.add();
           }
-          debugLogs && console.log("Editions left to create: ", abstractedIndexes);
-          saveImage(abstractedIndexes[0]);
-          addMetadata(newDna, abstractedIndexes[0]);
-          saveMetaDataSingleFile(abstractedIndexes[0], metadataList);
-          console.log(
+        });
+        if (gif.export) {
+          hashlipsGiffer.stop();
+        }
+        debugLogs && console.log("Editions left to create: ", abstractedIndexes);
+        saveImage(abstractedIndexes[0]);
+        addMetadata(newDna, abstractedIndexes[0]);
+        saveMetaDataSingleFile(abstractedIndexes[0], metadataList);
+        console.log(
             `Created edition: ${abstractedIndexes[0]}, with DNA: ${sha1(
               newDna
             )}`
-          );
-        });
+        );
 
         dnaList.add(filterDNAOptions(newDna));