fluentui-react-native/apps/win32
UI-Fabric-RN-Bot d06f0e9e36 📦 applying package updates ***NO_CI*** 2020-12-10 08:37:44 +00:00
..
src 🎨 Add more host colors to the theme.host object on Win32 (#491) 2020-09-28 20:18:54 +00:00
.eslintrc.js Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07:00
.gitattributes Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07:00
.gitignore Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07: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 ***NO_CI*** 2020-10-23 22:27:38 +00:00
CHANGELOG.md 📦 applying package updates ***NO_CI*** 2020-10-23 22:27:38 +00:00
README.md Update Win32 readme again 2020-11-11 09:24:24 -08: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 RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -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 Update RN to 0.62 and make app folders platform specific (#181) 2020-04-24 12:32:32 -07:00
metro.config.js RNIcon (#442) 2020-10-23 15:12:12 -07:00
package.json 📦 applying package updates ***NO_CI*** 2020-12-10 08:37:44 +00:00
react-native.config.js RNIcon (#442) 2020-10-23 15:12:12 -07:00
tsconfig.json UWP E2E Testing (#233) 2020-06-04 16:13:22 -07:00
wdio.conf.js Enhance E2E Reporting + CI Reliability (#325) 2020-07-10 11:51:09 -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 have followed the Getting Started instructions to clone and build the entire FluentUI React Native repository. I.e. from the root of the repo:

  2. 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 FluentUI Tester show up in a new window.

ReactTest image debug menu location

Debug FluentUI Tester app with direct debugging

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

  1. Follow the same step #1 as above.

  2. Follow the same step #2 as above.

  3. 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

ReactTest image debug menu location

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

ReactTest image debug menu location

  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.

Debug FluentUI Tester app with web debugging

  1. Follow the same step #1 as above.
  2. Follow the same step #2 as above.
  3. Start the debug server:
    yarn start
  1. Open Edge or Chrome and navigate to http://localhost:8081/debugger-ui

  2. Open another command prompt and go into the same location experiments\tester and run:

    yarn run-win32-web