Storybook.js provides a framework for
viewing and working with UI components.
https://storybook.js.org/
This patch adds the Storybook.js UI library to Popups for
the purposes of viewing multiple previews at once.
This enables viewing page previews in the following states:
- with thumbnails
- without thumbnails
- with SVG thumbnails
- with narrow thumbnails
- with white background thumbnails
- in RTL languages
- in non-latin languages
- disambiguation popups
Storybook also allows users to change the image or text
of a popup through a GUI.
This patch sets up Storybook as a "mini" repo inside
the.storybook folder with a seperate package.json file
to avoid incompatibilities with the current webpack/babel
(or even Node) versions used in the Popups repo.
Storybook requires at least Node v8.3 to run.
(an .nvmrc file with 11.3.0 has been added to the .stories dir).
To start:
`cd .storybook && npm install && npm run start`.
Bug: T205989
Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
Remove the LoaderOptionsPlugin and DefinePlugin from the Webpack
configuration. These plugins *do not* alter production or development
build products or appear to impact Redux interaction.
Bug: T212527
Change-Id: I4ca2bde2346011167f86f7f4a331048a2e92263b
Copy learnings from MobileFrontend's Webpack configuration. If nothing
else, the files are more consistent and easier to diff. When the change
to rename source maps is excluded, the build products are identical.
The following changes were copied:
- DRY up the output directory and source map extension as variables. For
the latter, rename the source map from ".json" to ".map.json". Without
renaming, the build products are unchanged.
- Reduce verbosity. Only report warnings and errors.
- Fail to build when an error occurs.
- Update ordering and add comments for easier reasoning and diffing with
MobileFrontend.
Bug: T212527
Change-Id: Icf11dff91358ad021932aa209c65ed8aac77d12b
As far as I can see this is not an integration test, because linkTitle.js
does not interact with the document (in contrast to footerLink.js, which
does).
Change-Id: I8b611263020fe597efb63d8a0080b996ffc7dde4
I figured a single "@covers ::__construct" in PopupsContextTest should
be enough, especially since this constructor is super trivial.
There is nothing to test in NullLogger. I also removed the duplicated
documentation as it does not really apply, and is still available in the
base class.
Change-Id: I9a2e4b06e5bfd015efa4a92ba802c942290ec49d
Due to loosely versioned dependencies, master's resources/dist is out of
date. This won't be an issue when package-lock is supported. Rebuild the
assets as a workaround.
Change-Id: I2bb8eab5b849616f5ae96a7915f8f1a9069109a6
Replace $.noop dependency with inline empty function.
The tests relied on a single function instance to pass. A toString()
comparison of the noop function cannot be used as they differ when
coverage is enabled.
Change-Id: I641801593beb240a8f7d06e388a0e41dc8a25bc6
Some comments are copy-pasted from other, unrelated code. Documenting
a PHPUnit test file as being a "module test" is, I would argue, somewhat
pointless.
Change-Id: Iac28dc9c7b3e321b682e94c6a48efb2db41ca5f7
According to https://tools.wmflabs.org/coverme/?repo=Extension%3APopups
these might be relevant to cover, and already are, but the required
@covers tags have been forgotten.
Note that the MWEventLogger class does not have a dedicated test. This
is fine because it is exclusively used by the factory (as it should),
can be considered part of it, and in this case it's fine if one test
covers both.
However, none of the log() methods is covered by any test. This is for
a later patch.
Change-Id: Ic1391f7a921d76796c4648ba59df64e793c8feae
redux | 3.6.0 | 4.0.1
redux-thunk | 2.2.0 | 2.3.0
Upgrading these two dependencies caused the build size to increase from
from 12.2 KB to 12.4 KB (gzip) and so the bundlesize was adjusted
accordingly in our package.json.
Additionally, our linters flagged two rules that were then turned off in
.eslintrc.es5.json.
Looks like the changes in Redux were mostly cosmetic with much work
dedicated to typescript definitiions and dropping support of private
imports [1].
The changes to redux-thunk only involved changing typescript typings and
should not affect us. [2]
The upgrade was tested locally and did not appear to break anything.
[1] https://github.com/reduxjs/redux/issues/1342#issue-130452197
[2] https://github.com/reduxjs/redux-thunk/releases/tag/v2.3.0
Bug: T209314
Change-Id: I35284793ca0c72914d9b9b2e7c28dd407bafd4d8
webpack | 4.1.1 | 4.27.1
webpack-cli | 2.0.12 | 3.1.2
The upgrade of webpack modified our build files and included these
side effects:
* Our linter flagged the usage of bitwise operators in the build files
so I turned that off in our build file lint config (.eslintrc.es5.json)
* Our build file's size increased slightly from 12.1 KB to 12.13 KB
(gzip) so the package.json's bundlesize was updated accordingly.
No deleterious effects were noticed to popups running locally, but the
jump in webpack version included these notable changes:
* Switch from uglify-es to terser minimizer [1]
[1] https://github.com/webpack/webpack/releases/tag/v4.26.0
The upgrade for webpack-cli was a major version jump, but the params
that we pass to it in our package.json file appear to work as before.
Bug: T209314
Change-Id: I1403f2c4d354cf54554a740f8c23176bf80fd3c6
wdio-mocha-framework | 0.6.1 | 0.6.3
wdio-spec-reporter | 0.1.4 | 0.1.5
webdriverio | 4.13.1 | 4.14.1
Selenium tests were tested locally with these upgrades and passed.
Note: I had some difficulty in upgrading wdio-mocha-framework to the
latest version 0.6.4 on my mac os (10.14) and experienced a `'utility'
file not found` error when npm installed the 'fibers' package. This
appears to be a known problem relating to node-gyp and older versions of
node. [1] Running the following suggested command [2] worked
for me:
`CXXFLAGS="-mmacosx-version-min=10.9" LDFLAGS="-mmacosx-version-min=10.9" npm i`
However, it was a hassle. Therefore, I chose to upgrade to only
0.6.3 in which this problem doesn't occur.
[1] https://github.com/nodejs/node-gyp/issues/1564
[2] https://github.com/nodejs/node-gyp/issues/1564#issuecomment-436609523
Bug: T209314
Change-Id: I0657ca5db4747b4ebb7aa0d01e2aeb97d6b2a7d0
MobileFrontend uses the npm package 'pre-commit' to execute pre-commit
hooks but Popups was using 'husky'. This commit rectifies that for
consistency.
Bug: T209314
Change-Id: I56e841d6dc6739ffe040cb930ddf0ebce3905a9f
The following upgrade was made:
stylelint-config-wikimedia | 0.4.3 | 0.5.0
The upgraded version stylelint-config-wikimedia includes stylelint as a
dependency (no longer a peer dependency) [1] so our stylelint dependency was
removed.
As a result of this upgrade, several of our .less files were flagged by
the linter and corrected in this patch.
[1] https://github.com/wikimedia/stylelint-config-wikimedia/blob/v0.5.0/package.json#L36
Bug: T209314
Change-Id: Ic6d4b1caf60f4e03fa60076a2ae74d6639117f25
The following upgrade was made:
eslint-config-wikimedia | 0.8.1 | 0.9.0
The upgrade of eslint-config-wikimedia removes the need of
eslint-plugin-qunit as a peerDependency because it is now a hard
dependency [1] so it was removed in our package.json.
It appears the biggest change in the upgrade was the use of separate
profiles [2]. Given this, our root .eslintrc.json was updated to extend
from 'wikimedia/client'.
Several test files were flagged by the upgraded linter and were fixed in
this patch. Additionally, our build file was flagged for having too many
statements on one line. This rule was turned off in .eslintrc.es5.json
[1] https://github.com/wikimedia/eslint-config-wikimedia/blob/master/package.json#L48
[2] https://github.com/wikimedia/eslint-config-wikimedia/blob/master/CHANGELOG.md#090--2018-11-19
Bug: T209314
Change-Id: I29db72e77f04a327bc9c2b558c6d53849287bb80
The following upgrades were made:
bundlesize | 0.15.3 | 0.17.0
clean-webpack-plugin | 0.1.19 | 1.0.0
grunt-contrib-watch | 1.0.1 | 1.1.0
nyc | 12.0.2 | 13.1.0
These potentially breaking changes were listed for nyc (but were not
observed):
* "--hook-run-in-context, and --hook-run-in-this-context are no longer
true by default (they should be enabled if you're using a library like
requirejs)."[1]
[1] https://github.com/istanbuljs/nyc/blob/master/CHANGELOG.md#breaking-changes
Bug: T209314
Change-Id: Iaf705d4e6cdde1e3d3103f1c154a8fb172815535
Webpack's `-d` option is an alias for
`--debug --devtool cheap-module-eval-source-map --output-pathinfo`[0]
which overrode the `devtool` specified in the config. Specify
`--mode=development` which appears to be better supported than `-d`,
although the distinction is poorly documented[1]. The build products are
identical for `--mode=development --debug --output-pathinfo` and simply
`--mode=development` so the latter is used.
For consistency, replace `-p`, an alias for
`--optimize-minimize --define process.env.NODE_ENV=production`[0],
where `--optimize-minimize` is documented[2] as:
Minimize JavaScript and switches loaders to minimizing UglifyJsPlugin
and LoaderOptionsPlugin.
With `--mode=production` which is documented[3] as:
Sets process.env.NODE_ENV on DefinePlugin to value production. Enables
FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,
OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin.
This change has already been made to MobileFrontend in c10f87d89.
[0] https://webpack.js.org/api/cli/#shortcuts
[1] https://medium.com/webpack/webpack-4-released-today-6cdb994702d4#dfa8
[2] https://webpack.js.org/api/cli/#optimize-options
[3] https://webpack.js.org/concepts/mode/#usage
Change-Id: I7a7ffc913592f0b18e091bb219a7fc75873d4d7a
FETCH_COMPLETE_TARGET_DELAY is used to introduce an artificial delay to
HTTP requests as needed. However, FETCH_START_DELAY is always accounted
for so it makes sense to define FETCH_COMPLETE_TARGET_DELAY with it. The
docs are updated to draw the distinction between total delay and API
response delay.
Change-Id: I4cddc89b8090d54db0dd85f270441cab17c54993
The project ESLint configuration unintentionally inherited unwanted
configuration from MediaWiki, which allows global jQuery usage. Cap the
project's ESLint hierarchy at the project root.
Change-Id: I5177d306feface7fcce0867c624bbcf9e74f19fc
