Merge pull request #93 from talvbansal/dayjs

Replace moment.js with day.js

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    ["env", {
+      "modules": "commonjs",
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "ie >= 10"]
+      }
+    }],
+    "stage-2"
+  ],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["istanbul"]
+    }
+  }
+}

package.json

@@ -8,22 +8,51 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
+    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue",
+    "test": "jest"
+  },
+  "jest": {
+    "verbose": true,
+    "moduleNameMapper": {
+      "^vue$": "vue/dist/vue.common.js"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
+    },
+    "globals": {
+      "NODE_ENV": "test"
+    },
+    "moduleDirectories": [
+      "node_modules",
+      "resources/assets/js"
+    ]
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.12",
     "axios": "^0.16.2",
+    "babel-jest": "^23.0.0-alpha.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-stage-2": "^6.24.1",
     "bootstrap-notify": "^3.1.3",
     "cross-env": "^5.0.1",
+    "dayjs": "^1.7.7",
     "dropzone": "^4.3.0",
     "eslint": "^4.19.0",
     "eslint-plugin-vue": "^4.3.0",
     "gulp": "^3.9.1",
     "hammerjs": "^2.0.8",
+    "jest": "^22.4.2",
+    "jest-vue-preprocessor": "^1.4.0",
     "laravel-mix": "^1.0",
     "lodash": "^4.16.2",
-    "moment": "^2.17.1",
     "node": "8.9.4",
     "vue": "^2.3.0",
+    "vue-jest": "^2.2.1",
     "vue-touch2": "^1.0.0"
   }
 }

resources/assets/js/components/MediaManager.vue

@@ -108,7 +108,7 @@
                           </a>
                         </td>
                         <td>folder</td>
-                        <td>{{ folder.modified.date | moment('DD/MM/YYYY') }}</td>
+                        <td>{{ folder.modified.date | formatDate('DD/MM/YYYY') }}</td>
                       </tr>
 
                       <tr 
@@ -134,7 +134,7 @@
 
                         </td>
                         <td> {{ file.mimeType }}</td>
-                        <td> {{ file.modified.date | moment('DD/MM/YYYY') }}</td>
+                        <td> {{ file.modified.date | formatDate('DD/MM/YYYY') }}</td>
                       </tr>
                     </tbody>
                   </table>

resources/assets/js/components/subcomponents/PreviewSideBar.vue

@@ -38,7 +38,7 @@
         </tr>
         <tr>
           <td class="description">Uploaded On</td>
-          <td class="file-value">{{ currentFile.modified.date | moment }}</td>
+          <td class="file-value">{{ currentFile.modified.date | formatDate }}</td>
         </tr>
       </tbody>
     </table>
@@ -61,7 +61,6 @@ import fileManagerMixin from "./../../mixins/file-manager-mixin";
 export default{
 
 	filters: {
-
 		// Take any integer of bytes and convert it into something more human readable...
 		humanFileSize: function (size) {
 			let i = Math.floor(Math.log(size) / Math.log(1024));

resources/assets/js/components/subcomponents/TopToolBar.vue

@@ -20,7 +20,7 @@
       <button 
         class="btn btn-primary btn-icon-text" 
         type="button" 
-        title="Add Folder" 
+        title="Add folder"
         @click="openModalCreateFolder()">
         <i class="icon-folder-plus"/>
         <span class="hidden-xs">Add folder</span>

resources/assets/js/media-manager.js

@@ -7,29 +7,12 @@ require("./base");
 
 window.Vue = require("vue");
 
-/**
- * Moment is a javascript library that we can use to format dates
- * It's similar to Carbon in PHP so we mostly use it to format
- * dates that are returned from our Laravel Eloquent models
- */
-window.moment = require("moment");
-
 /**
  * Register Vue components...
  */
 window.Vue.component("media-modal", require("./components/MediaModal.vue"));
 window.Vue.component("media-manager", require("./components/MediaManager.vue"));
 
-// Date formatting filter...
-window.Vue.filter("moment", function (date, format) {
-
-	if (!date) return null;
-
-	if (!format) format = "DD/MM/YYYY LTS";
-
-	return window.moment(date).utc().format(format);
-});
-
 /**
  * If it doesn't already exist, register a separate empty vue instance that
  * is attached to the window, we can use it to listen out for and handle

resources/assets/js/mixins/file-manager-mixin.js

@@ -1,6 +1,15 @@
 import { isEmpty } from "lodash";
+import dayjs from "dayjs";
 
 export default {
+	filters:{
+		formatDate: (date, format = "DD/MM/YYYY hh:mm:ss A") => {
+			if (!date) return null;
+
+			return dayjs(date).format(format);
+		}
+	},
+
 	methods: {
 		getItemName: (file) => {
 			if(isEmpty(file)){

tests/Frontend/Jest/PreviewSideBar.test.js

@@ -0,0 +1,43 @@
+import { shallow } from "@vue/test-utils";
+import PreviewSideBar from "./../../../resources/assets/js/components/subcomponents/PreviewSideBar.vue";
+import dayjs from "dayjs";
+
+describe("Preview Sidebar", () => {
+    const wrapper = shallow(PreviewSideBar);
+
+    it("it shows a file summary", () => {
+        wrapper.setProps({
+            currentFile:{
+                name: "TestFile.jpg",
+                size: (1024 * 1024 * 32),
+                mimeType: "image/jpg",
+                webPath: "https://localhost/TestFile.jpg",
+                relativePath: "/TestFile.jpg",
+                modified: {
+                    date: dayjs("2018-03-19")
+                }
+            }
+        });
+
+        expect(wrapper.html().indexOf(
+            `<img id="easel-preview-image" src="https://localhost/TestFile.jpg" class="img-responsive center-block">`
+        ) !== -1).toBe(true);
+
+        expect(wrapper.html().indexOf(
+            `<td class="description">Name</td> <td class="file-value">TestFile.jpg</td>`
+        ) !== -1).toBe(true);
+
+        expect(wrapper.html().indexOf(
+            `<td class="description">Size</td> <td class="file-value">32 MB</td>`
+        ) !== -1).toBe(true);
+
+        expect(wrapper.html().indexOf(
+            `<td class="description">URL</td> <td class="file-value"><a href="https://localhost/TestFile.jpg" target="_blank" rel="noopener">/TestFile.jpg</a></td>`
+        ) !== -1).toBe(true);
+
+        expect(wrapper.html().indexOf(
+            `<td class="description">Uploaded On</td> <td class="file-value">19/03/2018 12:00:00 AM</td>`
+        ) !== -1).toBe(true);
+    })
+
+});

tests/Frontend/Jest/TopToolBar.test.js

@@ -0,0 +1,67 @@
+import { shallow } from "@vue/test-utils";
+import TopToolBar from "./../../../resources/assets/js/components/subcomponents/TopToolBar.vue";
+
+describe("TopToolBar", () => {
+    const wrapper = shallow(TopToolBar);
+
+    it("it has the correct buttons", () => {
+        const toolBarAsText = wrapper.text();
+        expect(toolBarAsText).toContain("Upload");
+        expect(toolBarAsText).toContain("Add folder");
+
+        expect(toolBarAsText).toContain("Refresh");
+
+        expect(toolBarAsText).toContain("Move");
+        expect(toolBarAsText).toContain("Delete");
+        expect(toolBarAsText).toContain("Rename");
+    })
+
+    it("emits the open-modal-create-folder event when add folder button is clicked", () => {
+        const reloadButton = wrapper.find("button[title='Add folder']");
+        reloadButton.trigger("click");
+        expect(wrapper.emitted("open-modal-create-folder")).toBeTruthy();
+    })
+
+    it("emits the reload-folder event when reload button is clicked", () => {
+        const reloadButton = wrapper.find("button[title='Refresh']");
+        reloadButton.trigger("click");
+        expect(wrapper.emitted("reload-folder")).toBeTruthy();
+    })
+
+    it("emits the open-modal-move-item event when move button is clicked", () => {
+        wrapper.setProps({
+            currentFile : {
+                name: "/test.jpg",
+            }
+        })
+
+        const reloadButton = wrapper.find("button[title='Move']");
+        reloadButton.trigger("click");
+        expect(wrapper.emitted("open-modal-move-item")).toBeTruthy();
+    })
+
+    it("emits the open-modal-delete-item event when delete button is clicked", () => {
+        wrapper.setProps({
+            currentFile : {
+                name: "/test.jpg",
+            }
+        })
+
+        const reloadButton = wrapper.find("button[title='Delete']");
+        reloadButton.trigger("click");
+        expect(wrapper.emitted("open-modal-delete-item")).toBeTruthy();
+    })
+
+    it("emits the open-modal-rename-item event when rename button is clicked", () => {
+        wrapper.setProps({
+            currentFile : {
+                name: "/test.jpg",
+            }
+        })
+
+        const reloadButton = wrapper.find("button[title='Rename']");
+        reloadButton.trigger("click");
+        expect(wrapper.emitted("open-modal-rename-item")).toBeTruthy();
+    })
+
+});

webpack.mix.js

@@ -1,5 +1,4 @@
-const webpack = require('webpack');
-let mix = require('laravel-mix');
+let mix = require("laravel-mix");
 
 /*
  |--------------------------------------------------------------------------
@@ -8,16 +7,6 @@ let mix = require('laravel-mix');
  |
  */
 
-mix.webpackConfig({
-    plugins: [
-        new webpack.ContextReplacementPlugin(
-            // The path to directory which should be handled by this plugin
-            /moment[\/\\]locale/,
-            // A regular expression matching files that should be included
-            /(en-gb)\.js/
-        )
-    ]
-});
-mix.sass('resources/assets/sass/media-manager.scss', 'public/css/')
-    .js('resources/assets/js/media-manager.js', 'public/js/')
-    .copy('resources/assets/fonts', 'public/fonts/')
+mix.sass("resources/assets/sass/media-manager.scss", "public/css/")
+	.js("resources/assets/js/media-manager.js", "public/js/")
+	.copy("resources/assets/fonts", "public/fonts/");