fs-api-js - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

 {
   "name": "fs-api-js",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "src/main.js",
@@ -12,2 +12,4 @@ "repository": "https://github.com/sourcelair/fs-api-js",
     "jest": "^23.4.1",
+    "jest-fetch-mock": "^1.6.5",
+    "jsdoc": "^3.5.5",
     "prettier": "^1.13.7",
@@ -19,7 +21,13 @@ "prettier-check": "^2.0.0",
     "test": "jest",
-    "format": "prettier src/*.js --write",
+    "format": "prettier {src,demo}/*.{js,css} --write",
     "watch": "watchify src/main.js --verbose --standalone fsApi -o dist/fsapi.js",
     "start": "browser-sync start --server --watch --files 'dist/*' 'index.html'  --port $PORT",
-    "lint": "prettier-check src/*.js"
+    "lint": "prettier-check {src,demo}/*.{js,css}"
+  },
+  "jest": {
+    "automock": false,
+    "setupFiles": [
+      "./src/setupJest.js"
+    ]
   }
 }

src/main.js

@@ -0,12 +1,28 @@
+/**Takes a list of items and converts them into an unordered list.
+ * @param {array} listItems - The list of the items.
+ * @returns {HTMLUListElement} the list that will be appended into a container
+ */
 function convertItemsToUnorderedList(listItems) {
   const ulElement = document.createElement("ul");
   listItems.forEach(item => {
+    const handler = document.createElement("span");
+    handler.classList.add("fs-api-directory-handler");
+
     const liElement = document.createElement("li");
     liElement.classList.add("fs-api-entry", `fs-api-${item.type}`);
+    if (item.type === "directory") {
+      handler.textContent = "›";
+    }
     const nameElement = document.createElement("span");
+    if (item.type === "directory") {
+      handler.addEventListener("click", function() {
+        toggleDirectory(nameElement);
+      });
+    }
     nameElement.textContent = item.name;
     nameElement.classList.add("fs-api-entry-name");
+    liElement.appendChild(handler);
     liElement.appendChild(nameElement);
     if (item.children) {
-      renderInput(item.children, liElement);
+      module.exports.renderInput(item.children, liElement);
     }
@@ -18,2 +34,29 @@ ulElement.appendChild(liElement);
 
+/**Takes the clicked element and toggles the directory.
+ * @param {HTMLSpanElement} nameElement - The clicked element.
+ */
+function toggleDirectory(nameElement) {
+  if (nameElement.parentNode.classList.contains("fs-api-directory-collapse")) {
+    nameElement.parentNode.classList.remove("fs-api-directory-collapse");
+  } else {
+    nameElement.parentNode.classList.add("fs-api-directory-collapse");
+  }
+}
+
+/**Selects the clicked element and unselects any other that might be selected
+ * @param {HTMLLIElement} clickedElement - The item that is going to be selected
+ * @param {HTMLElement} rootContainer - The container in which the click occured*/
+function selectEntry(clickedElement, rootContainer) {
+  rootContainer
+    .querySelectorAll(".fs-api-selected")
+    .forEach(entry => entry.classList.remove("fs-api-selected"));
+  clickedElement.classList.add("fs-api-selected");
+}
+/**Takes 2 words and compares them case insensitively.
+ * @param {object} a - The first file.
+ * @param {object} b - The second file
+ * @param {string} a.name - The first word of the comparison.
+ * @param {string} b.name - The second word of the comparison.
+ * @returns {number} 1 if a > b, 0 if a == b and -1 if a < b.
+ */
 function alphabeticCompare(a, b) {
@@ -24,4 +67,9 @@ const firstName = a.name.toUpperCase();
 }
+/**Takes an input containing the files' characteristics and a container
+ * in which the final list will be appended.
+ * @param {object} input - The input containing the files in .json form.
+ * @param {HTMLElement} container - The container that will contain the list of files.
+ * */
 
-function renderInput(input, container) {
+module.exports.renderInput = function(input, container) {
   const dirItems = input.filter(inputEl => inputEl.type === "directory"),
@@ -34,5 +82,17 @@ fileItems = input.filter(inputEl => inputEl.type === "file");
   ulElement.classList.add("fs-api-tree");
+  container.addEventListener("click", function(e) {
+    selectEntry(e.target.parentNode, container);
+  });
   container.appendChild(ulElement);
-}
+};
 
-module.exports.render = renderInput;
+/**Takes the url containing the files' data and converts them into json form.
+ * @param {string} url - The url from which the data will be extracted.
+ * @param {HTMLElement} container - The container that will contain the list of files.
+ * */
+
+module.exports.renderUrl = async function(url, container) {
+  const response = await fetch(url);
+  const payload = await response.json();
+  module.exports.renderInput(payload, container);
+};

src/main.spec.js

 const fsapi = require("./main");
 
-test("Checks HTMLElements", () => {
+test("Checks fs-api-js", () => {
   const input = [
@@ -56,3 +56,3 @@ {
   const container = document.createElement("div");
-  fsapi.render(input, container);
+  fsapi.renderInput(input, container);
 
@@ -64,10 +64,10 @@ const trees = container.querySelectorAll("ul");
   }
-  expect(rootTree.children[0].children[0].textContent).toBe("Dir");
-  expect(rootTree.children[1].children[0].textContent).toBe("FinalDir");
-  expect(rootTree.children[2].children[0].textContent).toBe("AnotherFile.html");
-  expect(rootTree.children[3].children[0].textContent).toBe("SFile.sth");
-  expect(rootTree.children[4].children[0].textContent).toBe("test.go");
-  expect(rootTree.children[5].children[0].textContent).toBe("Troll.go");
-  expect(trees[1].children[0].children[0].textContent).toBe("package.json");
-  expect(trees[1].children[1].children[0].textContent).toBe("yarn.lock");
+  expect(rootTree.children[0].children[1].textContent).toBe("Dir");
+  expect(rootTree.children[1].children[1].textContent).toBe("FinalDir");
+  expect(rootTree.children[2].children[1].textContent).toBe("AnotherFile.html");
+  expect(rootTree.children[3].children[1].textContent).toBe("SFile.sth");
+  expect(rootTree.children[4].children[1].textContent).toBe("test.go");
+  expect(rootTree.children[5].children[1].textContent).toBe("Troll.go");
+  expect(trees[1].children[0].children[1].textContent).toBe("package.json");
+  expect(trees[1].children[1].children[1].textContent).toBe("yarn.lock");
 
@@ -90,3 +90,3 @@ for (const ulElement of trees) {
     for (const child of tree.children) {
-      expect(child.children[0].classList.contains("fs-api-entry-name")).toBe(
+      expect(child.children[1].classList.contains("fs-api-entry-name")).toBe(
         true
@@ -96,3 +96,57 @@ );
     }
+    if (tree.previousSibling) {
+      //At first we expect from the li not to contain the "collapse" class, since its contents are diplayed.
+      expect(
+        tree.parentNode.classList.contains("fs-api-directory-collapse")
+      ).toBe(false);
+      //We click the handler.
+      tree.parentNode.firstChild.click();
+      //Now we expect that the list collapses
+      expect(
+        tree.parentNode.classList.contains("fs-api-directory-collapse")
+      ).toBe(true);
+      //We click the handler.
+      tree.parentNode.firstChild.click();
+      //Now we expect for the folders' contents to be displayed.
+      expect(
+        tree.parentNode.classList.contains("fs-api-directory-collapse")
+      ).toBe(false);
+    }
   }
+
+  const entries = container.querySelectorAll(".fs-api-entry");
+  entries[2].children[1].click();
+  let selected = container.querySelectorAll(".fs-api-selected");
+  expect(selected.length).toBe(1);
+  expect(entries[2].classList.contains("fs-api-selected")).toBe(true);
+  entries[4].children[1].click();
+  selected = container.querySelectorAll(".fs-api-selected");
+  expect(selected.length).toBe(1);
+  expect(entries[4].classList.contains("fs-api-selected")).toBe(true);
 });
+
+describe("#renderUrl", () => {
+  it("Should call `fetch` with the appropriate argument and pass payload to `renderInput`", async function() {
+    const payload = [
+      {
+        name: "main.go",
+        absolute_path: "/mnt/project/main.go",
+        type: "file",
+        children: null
+      }
+    ];
+    const url = "/api/fs/";
+    fetch.mockResponseOnce(JSON.stringify(payload));
+
+    const container = document.createElement("div");
+
+    fsapi.renderInput = jest.fn();
+
+    await fsapi.renderUrl(url, container);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(url);
+    expect(fsapi.renderInput).toHaveBeenCalledTimes(1);
+    expect(fsapi.renderInput).toHaveBeenCalledWith(payload, container);
+  });
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13304

increased by61.71%

Number of package files

12

increased by33.33%

Lines of code

302

increased by147.54%

Worsened metrics

Dev dependency count

8

increased by33.33%

Number of medium supply chain risk alerts

5

increased byInfinity%

No dependency changes