From 27aef0d5e9c6e5d9a9ba425674f933130261ebe4 Mon Sep 17 00:00:00 2001
From: xianbin <1169411465@qq.com>
Date: Tue, 7 Jul 2020 17:39:25 +0800
Subject: [PATCH] =?UTF-8?q?temporary:=E6=B5=8B=E8=AF=95jest=E4=BB=A3?=
=?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 2 +-
jest.config.js | 185 ++
lib/imgZoom.0.4.1.js | 229 ++
package.json | 4 +-
src/imgZoom.js | 129 +-
src/imgZoom.test.js | 7 +
src/index.html | 1 -
static/imgZoom.js | 6 +-
webpack.config.js | 2 +-
yarn.lock | 7482 ++++++++++++++++++++++++++++++++++++++++++
10 files changed, 7963 insertions(+), 84 deletions(-)
create mode 100644 jest.config.js
create mode 100644 lib/imgZoom.0.4.1.js
create mode 100644 src/imgZoom.test.js
create mode 100644 yarn.lock
diff --git a/index.html b/index.html
index ab2d7a7..f545449 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-Document
\ No newline at end of file
+Document
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..6ef0c4b
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,185 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+ // All imported modules in your tests should be mocked automatically
+ // automock: false,
+
+ // Stop running tests after `n` failures
+ // bail: 0,
+
+ // The directory where Jest should store its cached dependency information
+ // cacheDirectory: "C:\\Users\\lixianbin\\AppData\\Local\\Temp\\jest",
+
+ // Automatically clear mock calls and instances between every test
+ clearMocks: true,
+
+ // Indicates whether the coverage information should be collected while executing the test
+ // collectCoverage: false,
+
+ // An array of glob patterns indicating a set of files for which coverage information should be collected
+ // collectCoverageFrom: undefined,
+
+ // The directory where Jest should output its coverage files
+ // coverageDirectory: undefined,
+
+ // An array of regexp pattern strings used to skip coverage collection
+ // coveragePathIgnorePatterns: [
+ // "\\\\node_modules\\\\"
+ // ],
+
+ // A list of reporter names that Jest uses when writing coverage reports
+ // coverageReporters: [
+ // "json",
+ // "text",
+ // "lcov",
+ // "clover"
+ // ],
+
+ // An object that configures minimum threshold enforcement for coverage results
+ // coverageThreshold: undefined,
+
+ // A path to a custom dependency extractor
+ // dependencyExtractor: undefined,
+
+ // Make calling deprecated APIs throw helpful error messages
+ // errorOnDeprecated: false,
+
+ // Force coverage collection from ignored files using an array of glob patterns
+ // forceCoverageMatch: [],
+
+ // A path to a module which exports an async function that is triggered once before all test suites
+ // globalSetup: undefined,
+
+ // A path to a module which exports an async function that is triggered once after all test suites
+ // globalTeardown: undefined,
+
+ // A set of global variables that need to be available in all test environments
+ // globals: {},
+
+ // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+ // maxWorkers: "50%",
+
+ // An array of directory names to be searched recursively up from the requiring module's location
+ // moduleDirectories: [
+ // "node_modules"
+ // ],
+
+ // An array of file extensions your modules use
+ // moduleFileExtensions: [
+ // "js",
+ // "json",
+ // "jsx",
+ // "ts",
+ // "tsx",
+ // "node"
+ // ],
+
+ // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+ // moduleNameMapper: {},
+
+ // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+ // modulePathIgnorePatterns: [],
+
+ // Activates notifications for test results
+ // notify: false,
+
+ // An enum that specifies notification mode. Requires { notify: true }
+ // notifyMode: "failure-change",
+
+ // A preset that is used as a base for Jest's configuration
+ // preset: undefined,
+
+ // Run tests from one or more projects
+ // projects: undefined,
+
+ // Use this configuration option to add custom reporters to Jest
+ // reporters: undefined,
+
+ // Automatically reset mock state between every test
+ // resetMocks: false,
+
+ // Reset the module registry before running each individual test
+ // resetModules: false,
+
+ // A path to a custom resolver
+ // resolver: undefined,
+
+ // Automatically restore mock state between every test
+ // restoreMocks: false,
+
+ // The root directory that Jest should scan for tests and modules within
+ // rootDir: undefined,
+
+ // A list of paths to directories that Jest should use to search for files in
+ // roots: [
+ // ""
+ // ],
+
+ // Allows you to use a custom runner instead of Jest's default test runner
+ // runner: "jest-runner",
+
+ // The paths to modules that run some code to configure or set up the testing environment before each test
+ // setupFiles: [],
+
+ // A list of paths to modules that run some code to configure or set up the testing framework before each test
+ // setupFilesAfterEnv: [],
+
+ // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+ // snapshotSerializers: [],
+
+ // The test environment that will be used for testing
+ // testEnvironment: "jest-environment-jsdom",
+
+ // Options that will be passed to the testEnvironment
+ // testEnvironmentOptions: {},
+
+ // Adds a location field to test results
+ // testLocationInResults: false,
+
+ // The glob patterns Jest uses to detect test files
+ // testMatch: [
+ // "**/__tests__/**/*.[jt]s?(x)",
+ // "**/?(*.)+(spec|test).[tj]s?(x)"
+ // ],
+
+ // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+ // testPathIgnorePatterns: [
+ // "\\\\node_modules\\\\"
+ // ],
+
+ // The regexp pattern or array of patterns that Jest uses to detect test files
+ // testRegex: [],
+
+ // This option allows the use of a custom results processor
+ // testResultsProcessor: undefined,
+
+ // This option allows use of a custom test runner
+ // testRunner: "jasmine2",
+
+ // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+ // testURL: "http://localhost",
+
+ // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+ // timers: "real",
+
+ // A map from regular expressions to paths to transformers
+ // transform: undefined,
+
+ // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+ // transformIgnorePatterns: [
+ // "\\\\node_modules\\\\"
+ // ],
+
+ // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+ // unmockedModulePathPatterns: undefined,
+
+ // Indicates whether each individual test should be reported during the run
+ // verbose: undefined,
+
+ // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+ // watchPathIgnorePatterns: [],
+
+ // Whether to use watchman for file crawling
+ // watchman: true,
+};
diff --git a/lib/imgZoom.0.4.1.js b/lib/imgZoom.0.4.1.js
new file mode 100644
index 0000000..7f522b8
--- /dev/null
+++ b/lib/imgZoom.0.4.1.js
@@ -0,0 +1,229 @@
+/*!
+ * imgZoom JavaScript Library v0.4.1
+ * Date: 2020-06-16 09:47
+ */
+"use strict";
+var imgZoom = (function(){
+
+ //判断是否在电脑端
+ function isPE() {
+ return /Android|webOS|iPhone|ipod|ipad|BlackBerry/i.test(navigator.userAgent);
+ }
+
+ //创建函数
+ function create(url) {
+ var imgwidth = img.width;
+ if (img.width == "auto") {
+ imgwidth = 1000;
+ }
+ var body = document.getElementsByTagName('body')[0];
+ var imgb = document.createElement('div');
+ body.appendChild(imgb);
+ imgb.innerHTML = '';
+ if (window.innerWidth <= 1024 || window.innerHeight <= 630) {
+ if (img.width == "auto") {
+ resize();
+ }
+ }
+ }
+
+ //打开窗口
+ function open(event) {
+ if (event && event.src) {
+ var imgz = document.getElementById('_imgzoom');
+ var imgs = document.getElementsByClassName('imgZoom');
+ if (!imgz && imgs.length > 0) {
+ create(event.src);
+ bing();
+ } else {
+ var _imgz = document.getElementById('_imgzoom');
+ var dom1 = document.getElementById('net');
+ var dom2 = document.getElementById('imgzoom_imglink');
+ dom1.src = event.src;
+ dom2.href = event.src;
+ _imgz.parentElement.style.display = "block";
+ _imgz.style.top = "50%";
+ _imgz.style.left = "50%";
+ _imgz.style.width = img.width + 'px';
+ }
+ } else {
+ console.error('缺少参数 src:Missing parameters "src"');
+ }
+ }
+
+ //绑定事件
+ function bing() {
+ lastnext('last');
+ lastnext('next');
+ mouseWheel();
+ imgMove();
+ }
+
+ //前进后退
+ function lastnext(name) {
+ var dom = document.getElementById('_imgzoom').getElementsByClassName(name)[0];
+ dom.addEventListener('mousemove', function () {
+ dom.getElementsByTagName('p')[0].style.display = "block";
+ });
+ dom.addEventListener('mouseout', function () {
+ dom.getElementsByTagName('p')[0].style.display = "none";
+ });
+ dom.addEventListener('mousedown', function (event) {
+ event.stopPropagation();
+ });
+ dom.addEventListener('click', function (event) {
+ var imgurl = document.getElementById('net').src;
+ var arrs = document.getElementsByClassName('imgZoom');
+ for (var i = 0; i < arrs.length; i++) {
+ if (name == 'next') {
+ if (arrs[i].src == imgurl && i < arrs.length - 1) {
+ document.getElementById('net').src = arrs[i + 1].src;
+ document.getElementById('imgzoom_imglink').href = arrs[i + 1].src;
+ break;
+ } else {
+ document.getElementById('net').src = arrs[0].src;
+ document.getElementById('imgzoom_imglink').href = arrs[0].src;
+ }
+ } else {
+ if (arrs[i].src == imgurl && i > 0) {
+ document.getElementById('net').src = arrs[i - 1].src;
+ document.getElementById('imgzoom_imglink').href = arrs[i - 1].src;
+ break;
+ } else {
+ document.getElementById('net').src = arrs[arrs.length - 1].src;
+ document.getElementById('imgzoom_imglink').href = arrs[arrs.length - 1].src;
+ }
+ }
+ }
+ });
+ }
+
+ //滚轮事件
+ function mouseWheel() {
+ var dom = document.getElementById('_imgzoom');
+ dom.addEventListener('mousewheel', function (event) {
+ event.preventDefault();
+ Detail(event, dom);
+ });
+ dom.addEventListener('DOMMouseScroll', function (event) {
+ event.preventDefault();
+ Detail(event, dom);
+ });
+ }
+
+ //放大缩小
+ function Detail(e, dom) {
+ e=e||window.event
+ if (e.wheelDelta < 0) {
+ var w = Math.round(dom.offsetWidth * 0.9);
+ var h = Math.round(dom.offsetHeight * 0.9);
+ if (w > 360 || h > 270) {
+ dom.style.width = w + 'px';
+ }
+ } else {
+ var _w = Math.round(dom.offsetWidth * 1.1);
+ var _h = Math.round(dom.offsetHeight * 1.1);
+ if (_w < 82500 || _h < 46500) {
+ dom.style.width = _w + 'px';
+ }
+ }
+ }
+
+ //优化显示：调整大小
+ function resize(event) {
+ event=event||window.event
+ event.preventDefault? event.preventDefault(): event.returnValue = false;
+ var url = document.getElementById('net').src;
+ var dom = document.getElementById('_imgzoom');
+ var img = new Image();
+ img.src = url;
+ if (img.complete) {
+ size();
+ } else {
+ img.onload = function () {
+ size();
+ };
+ }
+ function size() {
+ var x = window.innerWidth / window.innerHeight;
+ var y = img.width / img.height;
+ if (x >= y) {
+ var num = (window.innerHeight - 70) * img.width / img.height;
+ dom.style.width = num + 'px';
+ } else {
+ dom.style.width = window.innerWidth - 40 + 'px';
+ }
+ dom.style.top = "50%";
+ dom.style.left = "50%";
+ }
+ }
+
+ //移动事件
+ function imgMove() {
+ var dom = document.getElementById('_imgzoom');
+ var screenX, screenY;
+ dom.addEventListener('mousedown', function (e) {
+ e.preventDefault();
+ screenX = e.screenX;
+ screenY = e.screenY;
+ window.addEventListener('mousemove', position);
+ });
+ window.addEventListener('mouseup', function (e) {
+ window.removeEventListener('mousemove', position);
+ });
+ function position(e) {
+ var x = e.screenX - screenX;
+ var y = e.screenY - screenY;
+ screenX = e.screenX;
+ screenY = e.screenY;
+ var top = dom.offsetTop;
+ var left = dom.offsetLeft;
+ dom.style.top = top + y + 'px';
+ dom.style.left = left + x + 'px';
+ }
+ }
+
+ //设置选项
+ function option(e) {
+ if (e && e.width) {
+ img.width = e.width;
+ }
+ }
+
+ //关闭窗口
+ function hideMenu() {
+ var _imgzoom = document.getElementById('_imgzoom');
+ if (_imgzoom) {
+ _imgzoom.parentElement.style.display = "none";
+ }
+ }
+ var img = {
+ width: 'auto',
+ top: '50%',
+ left: '50%'
+ };
+ if (isPE()) {
+ console.warn('手机端兼容性未适配，可能出现未知错误！！');
+ }
+
+ // 添加点击监控
+ document.addEventListener('click', function (event) {
+ var even = event || window.event;
+ var target = even.target || even.srcElement;
+ if (target.nodeName == "IMG" && target.className == "imgZoom") {
+ open(target);
+ }
+ if (target.className == "imgzoom_shadow" || target.className == "imgzoom_close") {
+ hideMenu();
+ }
+ if (target.className == "imgzoom_resize") {
+ resize(event);
+ }
+ });
+ return{
+ option:img,
+ open:open,
+ resize:resize,
+ close:hideMenu
+ }
+})()
\ No newline at end of file
diff --git a/package.json b/package.json
index 24f6d88..2fc958a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"scripts": {
"build": "webpack -p",
"start": "node start.min.js",
- "server": "webpack-dev-server"
+ "server": "webpack-dev-server",
},
"repository": {
"type": "git",
@@ -18,6 +18,7 @@
"url": "https://github.com/lixianbin1/imgZoom/issues"
},
"homepage": "https://github.com/lixianbin1/imgZoom#readme",
+ "publishConfig": { "registry": "https://npm.pkg.github.com/" },
"devDependencies": {
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
@@ -27,6 +28,7 @@
"clean-webpack-plugin": "^3.0.0",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
+ "jest": "^26.0.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
diff --git a/src/imgZoom.js b/src/imgZoom.js
index 7f522b8..7c45fe7 100644
--- a/src/imgZoom.js
+++ b/src/imgZoom.js
@@ -3,15 +3,16 @@
* Date: 2020-06-16 09:47
*/
"use strict";
-var imgZoom = (function(){
-
- //判断是否在电脑端
- function isPE() {
- return /Android|webOS|iPhone|ipod|ipad|BlackBerry/i.test(navigator.userAgent);
- }
-
- //创建函数
- function create(url) {
+var img = {
+ width: 'auto',
+ top: '50%',
+ left: '50%'};
+//判断是否在电脑端
+function isPE() {
+ return /Android|webOS|iPhone|ipod|ipad|BlackBerry/i.test(navigator.userAgent);
+}
+//创建函数
+function create(url) {
var imgwidth = img.width;
if (img.width == "auto") {
imgwidth = 1000;
@@ -24,11 +25,9 @@ var imgZoom = (function(){
if (img.width == "auto") {
resize();
}
- }
- }
-
- //打开窗口
- function open(event) {
+ }}
+//打开窗口
+function open(event) {
if (event && event.src) {
var imgz = document.getElementById('_imgzoom');
var imgs = document.getElementsByClassName('imgZoom');
@@ -48,19 +47,15 @@ var imgZoom = (function(){
}
} else {
console.error('缺少参数 src:Missing parameters "src"');
- }
- }
-
- //绑定事件
- function bing() {
+ }}
+//绑定事件
+function bing() {
lastnext('last');
lastnext('next');
mouseWheel();
- imgMove();
- }
-
- //前进后退
- function lastnext(name) {
+ imgMove();}
+//前进后退
+function lastnext(name) {
var dom = document.getElementById('_imgzoom').getElementsByClassName(name)[0];
dom.addEventListener('mousemove', function () {
dom.getElementsByTagName('p')[0].style.display = "block";
@@ -95,11 +90,9 @@ var imgZoom = (function(){
}
}
}
- });
- }
-
- //滚轮事件
- function mouseWheel() {
+ });}
+//滚轮事件
+function mouseWheel() {
var dom = document.getElementById('_imgzoom');
dom.addEventListener('mousewheel', function (event) {
event.preventDefault();
@@ -108,11 +101,9 @@ var imgZoom = (function(){
dom.addEventListener('DOMMouseScroll', function (event) {
event.preventDefault();
Detail(event, dom);
- });
- }
-
- //放大缩小
- function Detail(e, dom) {
+ });}
+//放大缩小
+function Detail(e, dom) {
e=e||window.event
if (e.wheelDelta < 0) {
var w = Math.round(dom.offsetWidth * 0.9);
@@ -126,11 +117,9 @@ var imgZoom = (function(){
if (_w < 82500 || _h < 46500) {
dom.style.width = _w + 'px';
}
- }
- }
-
- //优化显示：调整大小
- function resize(event) {
+ }}
+//优化显示：调整大小
+function resize(event) {
event=event||window.event
event.preventDefault? event.preventDefault(): event.returnValue = false;
var url = document.getElementById('net').src;
@@ -155,11 +144,9 @@ var imgZoom = (function(){
}
dom.style.top = "50%";
dom.style.left = "50%";
- }
- }
-
- //移动事件
- function imgMove() {
+ }}
+//移动事件
+function imgMove() {
var dom = document.getElementById('_imgzoom');
var screenX, screenY;
dom.addEventListener('mousedown', function (e) {
@@ -180,34 +167,26 @@ var imgZoom = (function(){
var left = dom.offsetLeft;
dom.style.top = top + y + 'px';
dom.style.left = left + x + 'px';
- }
- }
+ }}
- //设置选项
- function option(e) {
+
+//设置选项
+function option(e) {
if (e && e.width) {
img.width = e.width;
- }
- }
-
- //关闭窗口
- function hideMenu() {
+ }}
+//关闭窗口
+function hideMenu() {
var _imgzoom = document.getElementById('_imgzoom');
if (_imgzoom) {
_imgzoom.parentElement.style.display = "none";
- }
- }
- var img = {
- width: 'auto',
- top: '50%',
- left: '50%'
- };
- if (isPE()) {
- console.warn('手机端兼容性未适配，可能出现未知错误！！');
- }
-
- // 添加点击监控
- document.addEventListener('click', function (event) {
+ }}
+
+if (isPE()) {
+ console.warn('手机端兼容性未适配，可能出现未知错误！！');
+}
+// 添加点击监控
+document.addEventListener('click', function (event) {
var even = event || window.event;
var target = even.target || even.srcElement;
if (target.nodeName == "IMG" && target.className == "imgZoom") {
@@ -218,12 +197,12 @@ var imgZoom = (function(){
}
if (target.className == "imgzoom_resize") {
resize(event);
- }
- });
- return{
- option:img,
- open:open,
- resize:resize,
- close:hideMenu
- }
-})()
\ No newline at end of file
+ }});
+
+var imgZoom={
+ option:img,
+ open:open,
+ resize:resize,
+ close:hideMenu,
+}
+export default imgZoom;
\ No newline at end of file
diff --git a/src/imgZoom.test.js b/src/imgZoom.test.js
new file mode 100644
index 0000000..b937cc3
--- /dev/null
+++ b/src/imgZoom.test.js
@@ -0,0 +1,7 @@
+import imgZoom from './imgZoom';
+
+
+test('测试加载',()=>{
+ expect(imgZoom.open()).toBe(undefined);
+})
+
diff --git a/src/index.html b/src/index.html
index f7a655d..6065275 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,5 @@
-
