5b603ab976
Summary: I've decided to migrate [a desktop plugin](https://github.com/bamlab/react-native-performance) to Sandy. When doing so, I decided to rise to the challenge from the [Flipper docs](https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic): `we are going to pretend that we always write unit tests first` 😅 However, I've realized that when creating a plugin with `npx flipper-pkg init`, running `yarn jest` directly after creation actually fails. There are 3 issues solved in the different commits: 1. an absolute import seem to not be resolved, since all the other imports were relative in the file, I changed it as well 2. some dependencies are missing. They used to be included in the `flipper` dependency but when migrating to use `flipper-plugin` instead, they're not present anymore. I don't think this is an ideal fix, I would believe a dependency like a `flipper-dev-environment` including all of those would be more appropriate. So I'm open to suggestions to fix/remove of course 3. jest.config needs to be fixed to run in jsdom environment and ensure we can test the react component ## Changelog Fix: ensure desktop plugin template tests run Pull Request resolved: https://github.com/facebook/flipper/pull/3039 Test Plan: I've cloned the repo and run: ``` cd flipper/desktop/pkg yarn cd ../../.. ./flipper/desktop/pkg/bin/run init ``` I run the tests on the newly package created, but it actually still failed because of the first issue (since it still installed `flipper-plugin` from npm`) However, by adding this patch, it now runs! ```patch diff --git a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js index 2e07ff5..ff3181d 100644 --- a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js +++ b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js @@ -39,7 +39,7 @@ const useAssertStableRef_1 = require("../../utils/useAssertStableRef"); const PluginContext_1 = require("../../plugin/PluginContext"); const lodash_1 = require("lodash"); const useInUnitTest_1 = require("../../utils/useInUnitTest"); -const createDataSource_1 = require("flipper-plugin/src/state/createDataSource"); +const createDataSource_1 = require("../../state/createDataSource"); function DataTable(props) { var _a, _b; const { onRowStyle, onSelect, onCopyRows, onContextMenu } = props; ``` Reviewed By: aigoncharov Differential Revision: D32358207 Pulled By: mweststrate fbshipit-source-id: 7761b4150c24dd5379a24c3c1deeb78bf3dda4ee
flipper-pkg
flipper-pkg is a tool for bundling and publishing Flipper plugins.
Usage
$ npm install -g flipper-pkg
$ flipper-pkg COMMAND
running command...
$ flipper-pkg (-v|--version|version)
flipper-pkg/0.48.0 darwin-x64 node-v12.15.0
$ flipper-pkg --help [COMMAND]
USAGE
$ flipper-pkg COMMAND
...
Commands
flipper-pkg bundle [DIRECTORY]flipper-pkg checksum [DIRECTORY]flipper-pkg help [COMMAND]flipper-pkg init [DIRECTORY]flipper-pkg lint [DIRECTORY]flipper-pkg migrate [DIRECTORY]flipper-pkg pack [DIRECTORY]
flipper-pkg bundle [DIRECTORY]
transpiles and bundles plugin
USAGE
$ flipper-pkg bundle [DIRECTORY]
ARGUMENTS
DIRECTORY [default: .] Path to plugin package directory for bundling. Defaults to the current working directory.
OPTIONS
--production Force env.NODE_ENV=production, enable minification and disable producing source maps.
--watch Watch for plugin source code and bundle it after every change.
EXAMPLE
$ flipper-pkg bundle path/to/plugin
See code: src/commands/bundle.ts
flipper-pkg checksum [DIRECTORY]
computes the total checksum of all the package files
USAGE
$ flipper-pkg checksum [DIRECTORY]
ARGUMENTS
DIRECTORY [default: .] Path to plugin package directory. Defaults to the current working directory.
EXAMPLE
$ flipper-pkg checksum path/to/plugin
See code: src/commands/checksum.ts
flipper-pkg help [COMMAND]
display help for flipper-pkg
USAGE
$ flipper-pkg help [COMMAND]
ARGUMENTS
COMMAND command to show help for
OPTIONS
--all see all commands in CLI
See code: @oclif/plugin-help
flipper-pkg init [DIRECTORY]
initializes a Flipper desktop plugin template in the provided directory
USAGE
$ flipper-pkg init [DIRECTORY]
ARGUMENTS
DIRECTORY [default: .] Path to the directory where the plugin package template should be initialized. Defaults to the
current working directory.
EXAMPLE
$ flipper-pkg init path/to/plugin
See code: src/commands/init.ts
flipper-pkg lint [DIRECTORY]
validates a plugin package directory
USAGE
$ flipper-pkg lint [DIRECTORY]
ARGUMENTS
DIRECTORY [default: .] Path to plugin package directory for linting. Defaults to the current working directory.
EXAMPLE
$ flipper-pkg lint path/to/plugin
See code: src/commands/lint.ts
flipper-pkg migrate [DIRECTORY]
migrates a Flipper desktop plugin to the latest version of specification
USAGE
$ flipper-pkg migrate [DIRECTORY]
ARGUMENTS
DIRECTORY [default: .] Path to the plugin directory. Defaults to the current working directory.
OPTIONS
--no-dependencies Do not add or change package dependencies during migration.
--no-scripts Do not add or change package scripts during migration.
EXAMPLE
$ flipper-pkg migrate path/to/plugin
See code: src/commands/migrate.ts
flipper-pkg pack [DIRECTORY]
packs a plugin folder into a distributable archive
USAGE
$ flipper-pkg pack [DIRECTORY]
ARGUMENTS
DIRECTORY [default: .] Path to plugin package directory to pack. Defaults to the current working directory.
OPTIONS
-o, --output=output [default: .] Where to output the package, file or directory. Defaults to the current working
directory.
--production Force env.NODE_ENV=production, enable minification and disable producing source maps.
EXAMPLE
$ flipper-pkg pack path/to/plugin
See code: src/commands/pack.ts