fluentui-react-native/apps/win32
UI-Fabric-RN-Bot b01fdace21 applying package updates 2024-07-15 20:20:36 +00:00
..
nuget Publish Win32 FluentTester NuGet Package to Internal Office Feed (#1376) 2022-01-26 11:04:13 -07:00
src [Proposal] Order imports using the eslint import plugin (#2632) 2023-02-24 11:59:20 -08:00
.eslintrc.js Rename internal eslint-config-rules package (#1152) 2021-11-11 15:02:31 -08:00
.gitattributes Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07:00
.gitignore fix(ios): fix autolinking FRNAvatar and FRNDatePicker (#2225) 2022-10-12 14:49:40 +02:00
.npmignore Remove dist from excluded files in tester-win32 and add script to download dependencies for tester (#380) 2020-08-10 10:54:44 -07:00
.watchmanconfig Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07:00
CHANGELOG.json applying package updates 2024-04-15 19:08:13 +00:00
CHANGELOG.md applying package updates 2024-04-15 19:08:13 +00:00
README.md Update Fluent UI Tester instructions for win32 (#3330) 2024-01-02 14:36:58 -05:00
app.json Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07:00
babel.config.js Update to RN 0.73 (#3543) 2024-04-11 10:32:42 -07:00
index.js Move win32 RN to 0.62 and pull in updated tester (#199) 2020-05-11 13:07:07 -07:00
just.config.js Remove references to uifabricshared (#1342) 2022-01-13 18:29:21 -06:00
metro.config.js Enable @typescript-eslint/consistent-type-imports (#2581) 2023-02-01 13:57:33 -08:00
package.json applying package updates 2024-07-15 20:20:36 +00:00
react-native.config.js RNIcon (#442) 2020-10-23 15:12:12 -07:00
tsconfig.json Upgrade Appium to v2 and Fix Local E2E Testing (#3072) 2023-09-06 14:42:48 -07:00

README.md

Running the FluentUI Tester on Win32

FluentUI Tester is the test app that we use to test our FluentUI components during development.

Launch FluentUI Tester app on Win32

  1. Make sure you've installed the Standard React Native dependencies and Node.js from the Prerequisites section.

  2. Next, clone and build the repo. If you already have a clone of the repo, make sure you've pulled the latest from the main branch (run git pull from your clone's main branch). You can verify you have the latest commits by running git log which lists all the commits from your branch with dates. Ensure commits are from a recent date or match the latest commits here. To exit the git log view, press the letter 'q' (for "quit").

  3. Then go into apps\win32 folder:

cd apps\win32
  1. Build the FluentUI Tester bundle:
yarn bundle
  1. Launch the FluentUI Tester app:
yarn run-win32
  1. You will see the FluentUI Tester show up in a new window.

Image of Fluent Tester

Debug FluentUI Tester app with direct debugging

Note: we recommend using Visual Studio Code for direct debugging.

  1. Follow steps #1-3 above.
  2. Build the FluentUI Tester bundle with dev option. This will ensure source map is included in the bundle.
yarn bundle-dev
  1. Launch the FluentUI Tester app:
yarn run-win32
  1. Inside ReactTest, open the debug option menu and select the checkbox Use Direct Debugger

Image of Fluent Tester debug menu location

  1. In Visual Studio Code, open the debug pane and select Debug Fabric Tester option from the "Run And Debug" dropdown.

Image of Visual Studio Code debug pane

  1. At this time, VS Code will attach to the JS runtime and you can start debugging. For more information on debugging in VS Code, please see Visual Studio Code documentation.

Dependencies

Dependencies are managed by @rnx-kit/align-deps. If you're looking to upgrade react-native, use the interactive upgrade command:

yarn rnx-align-deps --set-version

This command will ensure that all relevant packages are bumped correctly.

You can read more about this tool here: @rnx-kit/align-deps design document