update step2~4

Hyodong-Kim · Nov 14, 2019 · 8930082 · 8930082
1 parent e08f015
commit 8930082
Show file tree

Hide file tree

Showing 9 changed files with 4,835 additions and 0 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,6 @@
+.git
+.gitignore
+node_modules
+coverage
+.travis.yml
+yarn.lock
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+  - node
+dist: trusty
+install: yarn install
+notifications:
+  email: false
+sudo: false
+cache: yarn
+script:
+  - yarn test
+after_script:
+  - yarn add coveralls
+  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
diff --git a/index.js b/index.js
@@ -0,0 +1,29 @@
+'use strict';
+
+//- ";"理由は例えば、チェインできるように保険でつけとく
+//- チェインは $(".test").fadeToggle().addClass()とか
+
+;(function ($) {
+
+	$.fn.myplugin = function(config) {
+
+		if(!config) {
+			config = {};
+		};
+
+		const target = config.target || '.myplugin-target';
+		const addClass = config.addClass || 'on';
+		const fade = config.fade || false;
+
+		this.on('click', function() {
+			$(target).toggleClass(addClass);
+			if(fade) {
+				$(target).fadeToggle(1000);
+			}
+		});
+
+		return this;
+
+	}
+
+})(jQuery);
diff --git a/index.test.js b/index.test.js
@@ -0,0 +1,57 @@
+'use strict';
+
+// 自作モジュールのテストで使用するものたち
+global.$ = require('jquery');
+global.jQuery = require('jquery');
+require('./index.js');
+
+// describe：複数のテストをグループとしてまとめる機能、使わなくてもテストはできる
+describe('テストグループ', () => {
+
+	// テスト用のDOMを生成
+	document.body.innerHTML =
+	'<button class="myplugin-button">ボタン</button>' +
+	'<h1 class="myplugin-target">ターゲット</h1>';
+
+	// テスト内容①
+	test('通常テスト', () => {
+
+		// 生成したDOMに自作プラグインを適用
+		$('.myplugin-button').myplugin({
+			target: '.myplugin-target',
+			addClass: 'is-active'
+		});
+
+		// clickイベントを強制発火させる
+		$('.myplugin-button').click();
+
+		// テスト内容（.myplugin-targetのクラスの文字列一致を判定）
+		expect($('.myplugin-target').attr('class')).toBe('myplugin-target is-active');
+
+		// 次のテストのためにクラスを削除
+		$('.myplugin-target').removeClass('is-active');
+
+	});
+
+	// テスト内容②
+	test('フェードテスト', () => {
+		$('.myplugin-button').myplugin({
+			target: '.myplugin-target',
+			addClass: 'is-active',
+			fade: true
+		});
+		$('.myplugin-button').click();
+		setTimeout(function() {
+			expect($('.myplugin-target').attr('style')).toBe('display: none;');
+		}, 1000);
+		$('.myplugin-target').removeClass('is-active');
+	});
+
+	// テスト内容③：配列を渡さずに実行した際に初期設定のクラスが追加されるか判定
+	test('初期値テスト', () => {
+		$('.myplugin-button').myplugin();
+		$('.myplugin-button').click();
+		expect($('.myplugin-target').attr('class')).toBe('myplugin-target on');
+	});
+
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@name/jquery-test",
+  "version": "0.1.0",
+  "description": "test module",
+  "keywords": [
+    "lyzon",
+    "jquery-plugin"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lyzon/"
+  },
+  "author": "lyzon",
+  "scripts": {
+    "start": "node server.js",
+    "test": "jest  --coverage"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "jest": "^24.9.0"
+  },
+  "dependencies": {
+    "jquery": "^3.4.1"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,16 @@
+'use strict';
+
+const browserSync = require('browser-sync');
+
+browserSync({
+	notify: false,
+	port: 8000,
+	ui: {
+		port: 8001
+	},
+	files: ['./test/**/*.*'],
+	server: {
+		baseDir: './',
+		directory: true
+	}
+});
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+		<title>TEST</title>
+		<style>
+			.is-active { color: #F00; }
+		</style>
+	</head>
+	<body>
+		<div class="container pt-5">
+			<div class="row">
+				<div class="col-6">
+					<button class="myplugin-button">ボタン</button>
+					<h1 class="myplugin-target">ターゲット</h1>
+				</div>
+				<div class="col-6">
+						<button class="myplugin-button2">ボタン２</button>
+						<h1 class="myplugin-target2">ターゲット２</h1>
+					</div>
+			</div>
+		</div>
+		<script src="myplugin.js" type="module"></script>
+	</body>
+</html>
diff --git a/test/myplugin.js b/test/myplugin.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import "../index.js";
+
+$('.myplugin-button').myplugin({
+	target: '.myplugin-target',
+	addClass: 'is-active'
+});
+
+$('.myplugin-button2').myplugin({
+	target: '.myplugin-target2',
+	addClass: 'is-active',
+	fade: true
+});