Files
flipper/desktop/flipper-plugin/src/ui/__tests__/NUX.node.tsx
Michel Weststrate 2b0e93a063 Introduce NUX element
Summary:
allow-large-files

This diff introces the `NUX` element that can be wrapped around any other element to give a first-time usage hint.

Hint dismissal is stored by taking a hash of the hint contents, and scoped per plugin.

Users can reset the 'read' status in the settings page

Example usage:

```
<NUX
  title="Use bookmarks to directly navigate to a location in the app."
  placement="right">
  <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
</NUX>
```

Reviewed By: nikoant

Differential Revision: D24622276

fbshipit-source-id: 0265634f9ab50c32214b74f033f59482cd986f23
2020-11-06 08:23:42 -08:00

48 lines
1.3 KiB
TypeScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {TestUtils} from 'flipper-plugin';
import React from 'react';
import {getNuxKey} from '../NUX';
test('nuxkey computation', () => {
expect(getNuxKey('test')).toMatchInlineSnapshot(
`"flipper:n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is0V1sFbDwCgg="`,
);
expect(getNuxKey('test')).toMatchInlineSnapshot(
`"flipper:n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is0V1sFbDwCgg="`,
);
expect(getNuxKey('test2')).toMatchInlineSnapshot(
`"flipper:YDA64iuZiGG847KPM+7BvnWKITyGyTwHbb6fVYwRx1I="`,
);
expect(getNuxKey(<div>bla</div>)).toMatchInlineSnapshot(
`"flipper:myN0Mqqzs3fPwYDKGEQVG9XD9togJNWYJiy1VNQOf18="`,
);
expect(getNuxKey(<div>bla2</div>)).toMatchInlineSnapshot(
`"flipper:B6kICeYCJMWeUThs5TWCLuiwCqzr5cWn67xXA4ET0bU="`,
);
});
test('nuxkey computation with plugin', () => {
const res = TestUtils.startPlugin({
Component() {
return null;
},
plugin() {
return {};
},
});
expect(
getNuxKey('test', (res as any)._backingInstance),
).toMatchInlineSnapshot(
`"TestPlugin:n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is0V1sFbDwCgg="`,
);
});