Use Webpack & modernize Dropkick #346

Robdel12 · 2017-07-24T04:29:41Z

What is this?

I hated the gulp setup I made 3 years ago so I decided to use webpack and modernize this repo like it badly needs.

What changed?

Use webpack to compile ES6 files
Changed dropkick to an ES6 class
Rewrote tests to use karma & mocha
Cross browser testing with browser stack
/lib changed to /src
/build changed to /dist
Use circleci 2.0 for testing
Use yarn for dependencies
Use at least node 4
Improved test coverage
Changed the docs generation to documentation.js

TODOs

Finish porting tests
Update documentation
Update README & Contributing
Switch to circle for testing
Fill out PR description with all the different changes

It's an ES6 class now! :D

This is such a better testing setup

Robdel12 · 2017-07-24T14:49:50Z

tests/dropkick-test.js

+import Dropkick from '../src/dropkick.js';
+
+
+function buildSelect(id, options) {


Move this to test utils

Also do an after each clean up of the selects that were built

Robdel12 · 2017-07-24T14:51:08Z

tests/mobile-test.js

+//   assert.equal(navigator.userAgent, "Android");
+
+//   dk.refresh();
+// });


This can probably go away and use browser stack to run our tests on mobile devices

Should add this comment to the file so it doesn't get lost. 😉

I reached out to browser stack to see if we can get an account to run tests. I’ve got the setup going locally but I’m about to run out of test free test runs

Robdel12 · 2017-07-24T14:52:06Z

tests/iframe-test.js

 //   var dk = new Dropkick("#normal_select");

 //   dk.open();
 //   assert.equal(dk.isOpen, true);
 //   $(".body").trigger("click");
 //   assert.equal(dk.isOpen, false);
-});
+// });


This probably can get moved into the main test file and create a helper that builds / cleans up iframe creation

Robdel12 · 2017-07-24T14:52:17Z

tests/src/runner.html

-  <script src="../../lib/polyfills/indexof.js"></script>
-  <script src="../../lib/dropkick.js"></script> -->
-  <script src="../../build/js/dropkick.min.js"></script>
+  <script src="../../dist/dropkick.js"></script>
  <script src="jquery-1.11.2.js"></script>
  <script src="../../node_modules/qunitjs/qunit/qunit.js"></script>
  <script src="../unit/tests.js"></script>


Delete this

You've been great Travis, I promise. But CircleCi 2.0 is way better. I'm sorry.

Fix package.json typo

wwilsman · 2017-07-25T03:12:32Z

dist/index.html

+    <script>
+     var select = document.getElementById('normal_select');
+     var dropkick = new Dropkick(select);
+     console.log(dropkick);


wwilsman · 2017-07-25T03:13:36Z

dist/index.html

+     var select = document.getElementById('normal_select');
+     var dropkick = new Dropkick(select);
+     console.log(dropkick);
+     function close() {


Will dropkick.close() not work in the onclick up above?

Yea, this was me hacking around before the test suite was up

wwilsman · 2017-07-25T03:15:54Z

karma.conf.js

+    config.singleRun = true;
+    config.browsers = ['Chrome_travis_ci'];
+  }
+};


A lot of these options are defaults that we could safely remove.

wwilsman · 2017-07-25T03:20:17Z

tests/mobile-test.js

+//   assert.equal(navigator.userAgent, "Android");
+
+//   dk.refresh();
+// });


Should add this comment to the file so it doesn't get lost. 😉

wwilsman · 2017-07-25T03:25:02Z

webpack.config.js

+
+// I hate this, but I guess you can't pass disable to uglify..
+const plugins = [ extractSass ];
+isProduction ? plugins.push(new UglifyJSPlugin()) : null ;


If you don't like this, what about this?

I thought it was tidy and reusable. Food for thought ¯\_(ツ)_/¯

It felt more dirty than being able to do:

new UglifyJsPlugin({ disable: !isProduction })

But I guess this isn’t terrible.

Also I realize the ternary is moot. Just do

isProduction && plugins.push(...);

Or explicitly

if (isProduction) { plugins.push(...); }

Robdel12 · 2017-07-27T22:02:30Z

karma.conf.js

+  // CI config
+  if (process.env.TRAVIS || process.env.CI) {
+    config.singleRun = true;
+    config.browsers = ['Chrome_travis_ci'];


This should include the browser stack launchers too

The browserstack tests are a little slow. If you want to run them you can by running `yarn test-browserstack`.

Robdel12 · 2017-07-30T04:40:35Z

@wwilsman wanna give one last go?

wwilsman · 2017-07-30T16:36:02Z

webpack.config.js

+
+// I hate this, but I guess you can't pass disable to uglify..
+const plugins = [ extractSass ];
+isProduction ? plugins.push(new UglifyJSPlugin()) : null ;


Also I realize the ternary is moot. Just do

isProduction && plugins.push(...);

Or explicitly

if (isProduction) { plugins.push(...); }

Also removed unnessary comment at the top of dropkick

wwilsman · 2017-07-30T17:37:16Z

🎉

Robdel12 added 5 commits July 20, 2017 22:59

Use webpack over gulp

be41c32

Passing tests from ES6-ification

03e0cd4

It's an ES6 class now! :D

WIP: refactor tests to mocha

625144d

This is such a better testing setup

Update travis.yml

c1d2b90

WIP: Porting tests to new Mocha setup

fde5020

Robdel12 commented Jul 24, 2017

View reviewed changes

Add circle config

a0f7e3c

Robdel12 force-pushed the webpack branch 2 times, most recently from 2e303c1 to c3b4ee8 Compare July 24, 2017 20:54

Add chrome to circle config

33f00d4

Robdel12 force-pushed the webpack branch from c3b4ee8 to 33f00d4 Compare July 24, 2017 20:54

Robdel12 added 6 commits July 24, 2017 16:27

Remove travis config

cad0502

You've been great Travis, I promise. But CircleCi 2.0 is way better. I'm sorry.

Add some docs, write cache tests, finish porting tests

5cf4870

Update Contributing.md, add jquery test, add iframe test

c57d6e2

Update documentation and use documentation.js to generate

124e200

Add markdown docs in addition to html docs

b32d536

Update status badge to CircleCI

82986b8

Fix package.json typo

Robdel12 force-pushed the webpack branch from 874ec95 to 82986b8 Compare July 25, 2017 02:28

Robdel12 changed the title ~~WIP: Use Webpack & modernize Dropkick~~ Use Webpack & modernize Dropkick Jul 25, 2017

Include CSS in tests

78b95c9

Robdel12 requested a review from wwilsman July 25, 2017 03:09

wwilsman requested changes Jul 25, 2017

View reviewed changes

Add browserstack testing

9badf76

Robdel12 commented Jul 27, 2017

View reviewed changes

Robdel12 added 5 commits July 27, 2017 20:37

Enable browser stack testing on CI

df547bf

Write mobile tests && hide browser stack tests behind flag

94d6e9b

The browserstack tests are a little slow. If you want to run them you can by running `yarn test-browserstack`.

Move browser stack test badge to related part of README

c5756b3

Remove 💩 console.log

e85572f

Update example docs & add deploy command

ea0a390

wwilsman approved these changes Jul 30, 2017

View reviewed changes

Clean up isProduction check in webpack config

c0d950f

Also removed unnessary comment at the top of dropkick

Robdel12 merged commit 6700d37 into master Jul 30, 2017

This was referenced Jul 30, 2017

fix if selOpt is undefined #345

Merged

iFrame tests need to be reworked #264

Closed

Robdel12 deleted the webpack branch July 30, 2017 18:01

This was referenced Oct 13, 2017

Fix iframe detection (issue #264) #344

Closed

More robust tests #272

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Webpack & modernize Dropkick #346

Use Webpack & modernize Dropkick #346

Robdel12 commented Jul 24, 2017 •

edited

Loading

Robdel12 Jul 24, 2017 •

edited

Loading

Robdel12 Jul 24, 2017 •

edited

Loading

Robdel12 Jul 24, 2017

wwilsman Jul 25, 2017

Robdel12 Jul 25, 2017

Robdel12 Jul 24, 2017

Robdel12 Jul 24, 2017

wwilsman Jul 25, 2017

wwilsman Jul 25, 2017

Robdel12 Jul 25, 2017

wwilsman Jul 25, 2017

Robdel12 Jul 25, 2017 •

edited

Loading

wwilsman Jul 25, 2017

wwilsman Jul 25, 2017

Robdel12 Jul 25, 2017

wwilsman Jul 30, 2017

Robdel12 Jul 27, 2017

Robdel12 commented Jul 30, 2017

wwilsman Jul 30, 2017

wwilsman commented Jul 30, 2017

		import Dropkick from '../src/dropkick.js';


		function buildSelect(id, options) {

Use Webpack & modernize Dropkick #346

Use Webpack & modernize Dropkick #346

Conversation

Robdel12 commented Jul 24, 2017 • edited Loading

What is this?

What changed?

TODOs

Robdel12 Jul 24, 2017 • edited Loading

Choose a reason for hiding this comment

Robdel12 Jul 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Robdel12 Jul 25, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Robdel12 commented Jul 30, 2017

Choose a reason for hiding this comment

wwilsman commented Jul 30, 2017

Robdel12 commented Jul 24, 2017 •

edited

Loading

Robdel12 Jul 24, 2017 •

edited

Loading

Robdel12 Jul 24, 2017 •

edited

Loading

Robdel12 Jul 25, 2017 •

edited

Loading