Scripts: New scripts package containing test command #62

gziolo · 2018-01-09T12:28:58Z

This is another try since in #55 we decided that all existing plugin commands i18n and readme can be implemented using WP-CLI.

Why

Command-line interfaces like WP-CLI or create-react-app help to turn bootstrapping an app into a pleasant experience, but it is still not enough to keep it easy to maintain in the long run. Developers are left on their own to keep all configurations and dependent tools up to date. This problem multiplies when they own more than one project which shares the same setup. Fortunately, there is another pattern that can simplify maintainers life – reusable scripts. This idea boils down to moving all the necessary configurations and scripts to one single tool dependency. In most cases, it should be possible to accomplish all tasks using the default settings, but some customization is allowed, too. With all that in place updating all projects becomes a very straightforward task. Some existing examples that I found are:

You can read more about the idea behind this PR in my blog post Starter kit and reusable scripts.

How

This implementation is based on the react-scripts.

The end goal would be to run it as:

wp-scripts test

To include you would have to include in devDependencies only this:

"@wordpress/scripts": "1.0.0"

We should also consider providing reusable scripts that could allow to flawlessly incorporate more advanced JavaScript tooling like build step, code transpilation, linting and so on. The testing command is just an example I started with because I'm the most familiar with the Jest setup.

Testing

I'm not quite sure how to test it for external usage before this package is published. However, this package is locally used to test the entire repository using npm test command. You can also run this script from the root folder using ./packages/scripts/bin/wp-scripts.js test.

codecov · 2018-01-09T12:46:22Z

Codecov Report

Merging #62 into master will decrease coverage by 4.97%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master      #62      +/-   ##
==========================================
- Coverage   78.52%   73.55%   -4.98%     
==========================================
  Files          21       23       +2     
  Lines         340      363      +23     
  Branches       71       76       +5     
==========================================
  Hits          267      267              
- Misses         61       79      +18     
- Partials       12       17       +5

Impacted Files	Coverage Δ
packages/scripts/bin/wp-scripts.js	`0% <0%> (ø)`
packages/scripts/scripts/test-script.js	`0% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3d50441...0e7988f. Read the comment docs.

ahmadawais · 2018-01-09T15:27:31Z

@gziolo this is so on point with what I have been trying to build lately. A go to tool that takes care of all these deps and provides an easy + updateable solution with zero configuration. Would love to contribute.

gziolo · 2018-01-09T17:23:48Z

@ahmadawais, you are welcome to contribute. Is there something specific you would like to tackle first?

gziolo · 2018-01-21T09:17:48Z

@ntwb or @adamsilverstein, do you know if it can be unit tested somehow or is it enough that it works as expected as long as the tests for the whole repository work using wp-scripts test we are good? If yes, we should ignore codecov complaints.

I moved Babel setup from Gutenberg, but ignored i18n part which is its own story. I think we should tackle it separately when moving i18n to packages. I will open a follow-up PR where I extract Babel configuration to its own preset package.

I will also create another preset for Jest config to make sure we share the same defaults between packages and Gutenberg. At the moment wp-scripts will always use local config files, so this isn't a blocker.

- @wordpress/a11y@1.0.4 - @wordpress/autop@1.0.2 - @wordpress/babel-preset-default@1.0.1-0 - @wordpress/dom-ready@1.0.1 - @wordpress/hooks@1.1.2 - @wordpress/jest-console@1.0.1 - @wordpress/scripts@1.0.1-0 - @wordpress/url@1.0.1

jaswrks · 2018-01-23T23:13:57Z

❤️ Nice! In a way, this seems like the very beginning of WP-CLI.js.

adamsilverstein · 2018-01-24T01:50:38Z

I'm not sure how you would add tests, you would want to run the script command itself and look for the expected output but I've never tried anything like that with the testing frameworks I have used. I'm curious though and will try to do some research.

ahmadawais · 2018-01-24T07:10:45Z

@adamsilverstein I am also curious about that? Figuring out how I can add automated testing to create-guten-block that tests cgb + it's WordPress counter part.

ntwb

I think this is great, I originally didn't grok the exact purpose of these scripts and who would benefit from them, I do now ❤️

I've suggested 1.0.0-alpha.0, if we can update that and add a couple of minor verbiage tweaks then it's ready to merge and should be published ASAP 🎉

p.s. Apologies for my delay reviewing this :)

ntwb · 2018-01-25T09:51:53Z

packages/scripts/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@wordpress/scripts",
+	"version": "1.0.1-0",


I'm not a fan of this naming schema, I'd much prefer we use "prerelease" tags, alpha, beta, rc etc

https://docs.npmjs.com/all#prerelease-tags 1.1.0-alpha.0, 1.2.4-beta.1, etc.,

How about for starters we use 1.0.0-alpha.0 here now, I'm keen to iterate on these quickly by integrating them into some of the other repos I work on, we can publish these updates frequently to npm using this npm compatible semantic version nomenclature (https://docs.npmjs.com/all#caret-ranges-123-025-004)

I will publish 1.0.0 soon and stick with alpha in the future. I'm still learning how to use Lerna. Thanks for a good hint :)

via https://github.com/lerna/lerna#--cd-version

"If you have any packages with a prerelease version number (e.g. 2.0.0-beta.3) and you run lerna publish with --cd-version and a non-prerelease version increment (major / minor / patch), it will publish those packages in addition to the packages that have changed since the last release."

That should work for Lerna and 1.0.0-alpha.0 by my reading

How about using the --canary command? That's more granular and being used by other popular projects like CRA and I am using it on CGB create-guten-block.

lerna publish --independent --npm-client=npm --canary

We have this in npm run publish:dev:
https://github.com/WordPress/packages/blob/master/package.json#L36

"publish:dev": "npm run build-clean && npm run build && lerna publish --npm-tag next"

We might want to revisit how it's configured to simplify the process.

ntwb · 2018-01-25T09:52:56Z

packages/jest-console/package.json

@@ -5,6 +5,7 @@
 	"author": "WordPress",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
+		"wordpress",


Happy to ignore this unrelated change and pretend I didn't see it 😏

Yeah, we should just add wordpress keyword to all package.json files in its own PR.

ntwb · 2018-01-25T09:56:27Z

packages/scripts/README.md

+
+## Setup
+
+This is a CLI and exposes a bin called `wp-scripts` so you can call it directly. However this module is designed to be configured using `scripts` section in the `package.json` file of your project. Example configuration:


A couple of minor verbiage tweaks please:
• "exposes a binary called" <- Use binary over bin
• "designed to be configured using the scripts" < Added the

ntwb · 2018-01-25T10:04:22Z

packages/scripts/README.md

+
+### `wp-scripts test`
+
+Launches the test runner. It uses [Jest](https://facebook.github.io/jest/) behind the scenes and you are allowed to use all its [CLI options](https://facebook.github.io/jest/docs/en/cli.html). You can also run `./node_modules/.bin/wp-scripts --help` or `npm run test:help` (if you use `package.json` setup shared above) to view all available options.


A couple of minor verbiage tweaks please:
• "...behind the scenes and you are able to utilize all of its CLI options."
• "...setup shared above) to view all of the available options."

ntwb · 2018-01-25T10:15:39Z

packages/scripts/package.json

+	"keywords": [
+		"wordpress",
+		"scripts",
+		"reusable-scripts"


Can we add wordpress-scripts please 🙏

(It would fit in nicely listed here: https://github.com/reyronald/awesome-toolkits#other)

Sure thing :)

gziolo · 2018-01-25T11:07:35Z

@ntwb thanks your review, the last missing part is Jest preset and we can update Gutenberg repository. I will open another PR tomorrow. Unfortunately setting preset for Jest isn't as convenient as in case of Babel.

gziolo added Technical Prototype [Status] In Progress labels Jan 9, 2018

gziolo self-assigned this Jan 9, 2018

gziolo mentioned this pull request Jan 9, 2018

Scripts: New package with scripts for plugins #55

Closed

gziolo added the [Package] Scripts label Jan 9, 2018

gziolo force-pushed the add/scripts-jest branch from 349e92a to 4696b5f Compare January 9, 2018 12:44

gziolo requested review from aaronjorbin, ntwb, aduth and youknowriad January 9, 2018 12:44

gziolo mentioned this pull request Jan 9, 2018

Framework: Should we use Prettier? WordPress/gutenberg#2819

Closed

gziolo mentioned this pull request Jan 11, 2018

Use prettier to provide a format command WordPress/gutenberg#4374

Closed

gziolo requested a review from adamsilverstein January 12, 2018 18:22

gziolo force-pushed the add/scripts-jest branch 4 times, most recently from 61d3605 to 61ee6f0 Compare January 21, 2018 09:10

gziolo removed the [Status] In Progress label Jan 21, 2018

gziolo requested a review from pento January 21, 2018 09:12

gziolo changed the title ~~Scripts: New scripts package containing test command~~ Scripts: New scripts package containing test command Jan 21, 2018

gziolo force-pushed the add/scripts-jest branch from 61ee6f0 to 7b7de10 Compare January 21, 2018 09:48

gziolo mentioned this pull request Jan 21, 2018

Babel-preset-default: Add new package containing the default Babel configuration #66

Merged

gziolo force-pushed the add/scripts-jest branch 2 times, most recently from f72dda2 to 67a0aea Compare January 23, 2018 09:15

gziolo added 2 commits January 23, 2018 10:33

Scripts: initial commit with scripts package containing test command

02bd8ba

Publish

91cb59c

- @wordpress/a11y@1.0.4 - @wordpress/autop@1.0.2 - @wordpress/babel-preset-default@1.0.1-0 - @wordpress/dom-ready@1.0.1 - @wordpress/hooks@1.1.2 - @wordpress/jest-console@1.0.1 - @wordpress/scripts@1.0.1-0 - @wordpress/url@1.0.1

gziolo force-pushed the add/scripts-jest branch from b0da1ab to 91cb59c Compare January 23, 2018 11:10

ntwb approved these changes Jan 25, 2018

View reviewed changes

Scripts: Minor changes before publishing to npm

0e7988f

gziolo merged commit 7ee6367 into master Jan 25, 2018

gziolo deleted the add/scripts-jest branch January 25, 2018 11:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scripts: New scripts package containing test command #62

Scripts: New scripts package containing test command #62

gziolo commented Jan 9, 2018 •

edited

Loading

codecov bot commented Jan 9, 2018 •

edited

Loading

ahmadawais commented Jan 9, 2018

gziolo commented Jan 9, 2018

gziolo commented Jan 21, 2018 •

edited

Loading

jaswrks commented Jan 23, 2018

adamsilverstein commented Jan 24, 2018

ahmadawais commented Jan 24, 2018

ntwb left a comment •

edited

Loading

ntwb Jan 25, 2018

gziolo Jan 25, 2018

ntwb Jan 25, 2018

ahmadawais Jan 25, 2018

gziolo Jan 25, 2018 •

edited

Loading

ntwb Jan 25, 2018

gziolo Jan 25, 2018

ntwb Jan 25, 2018

ntwb Jan 25, 2018

ntwb Jan 25, 2018

gziolo Jan 25, 2018

gziolo commented Jan 25, 2018


		## Setup

		This is a CLI and exposes a bin called `wp-scripts` so you can call it directly. However this module is designed to be configured using `scripts` section in the `package.json` file of your project. Example configuration:


		### `wp-scripts test`

		Launches the test runner. It uses [Jest](https://facebook.github.io/jest/) behind the scenes and you are allowed to use all its [CLI options](https://facebook.github.io/jest/docs/en/cli.html). You can also run `./node_modules/.bin/wp-scripts --help` or `npm run test:help` (if you use `package.json` setup shared above) to view all available options.

Scripts: New scripts package containing test command #62

Scripts: New scripts package containing test command #62

Conversation

gziolo commented Jan 9, 2018 • edited Loading

Why

How

Testing

codecov bot commented Jan 9, 2018 • edited Loading

Codecov Report

ahmadawais commented Jan 9, 2018

gziolo commented Jan 9, 2018

gziolo commented Jan 21, 2018 • edited Loading

jaswrks commented Jan 23, 2018

adamsilverstein commented Jan 24, 2018

ahmadawais commented Jan 24, 2018

ntwb left a comment • 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

gziolo Jan 25, 2018 • 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

gziolo commented Jan 25, 2018

gziolo commented Jan 9, 2018 •

edited

Loading

codecov bot commented Jan 9, 2018 •

edited

Loading

gziolo commented Jan 21, 2018 •

edited

Loading

ntwb left a comment •

edited

Loading

gziolo Jan 25, 2018 •

edited

Loading