Commit e38f535
committed
feat(fxa-settings): React pairing pages with dual-mode E2E coverage and CMS theming
Because: The Backbone /pair flow is being migrated to React in fxa-settings,
and we need parity in functionality, telemetry, copy, relying-party CMS
theming, and unsupported-browser messaging while keeping regression coverage
on both stacks during the transition.
This commit:
- Implements React pages for /pair, /pair/supp[/allow|/wait_for_auth],
/pair/auth/[allow|totp|wait_for_supp|complete], /pair/failure, and
/pair/unsupported, including the choice screen and Glean parity with
the Backbone equivalents
- Wires the React pair routes through fxa-content-server with the
showReactApp.pairRoutes feature flag and fullProdRollout
- Adds Marionette-driven E2E happy-path and 2FA tests against React
pairing (pairingFlow.spec.ts) and a parallel Backbone suite
(pairingFlowBackbone.spec.ts) gated on the same flag
- Adds negative-path E2E coverage for both stacks: supplicant cancel
and channel-server WebSocket disconnect
(pairingFlow{,Backbone}Negative.spec.ts)
- Adds a non-Firefox unsupported-browser E2E test that spoofs the UA
and runs against either stack
- Aligns React Pair/Failure copy with the Backbone wording via -v2 FTL
ids so Fluent falls back to the new English strings until upstream
l10n catches up
- Rewrites Pair/Unsupported branch logic to mirror the Backbone template
one-for-one: adds the missing mobile unsupportedPairHtml instructions
("Connecting your mobile device with your Mozilla account... visit
firefox.com/pair") for both mobile Firefox and mobile non-Firefox
users, fixes the desktop Firefox fallback to show "Oops! Something
went wrong" instead of the stray system-camera message, and keeps the
Unsupported page stack-agnostic
- Adds CMS theming to Pair/Index in strict parity with the Backbone
pair/index.js fetchCmsConfig path: wires useCmsInfoState into the
component, passes cmsInfo to AppLayout for background, header logo,
favicon, and page title, and swaps the three primary CTAs for
CmsButtonWithFallback. Other React pair pages remain unthemed to
match Backbone
- Adds a ChoiceScreenWithCmsTheming Storybook variant and five CMS
unit tests in Pair/Index; five new UA-spoofing unit tests for
Pair/Unsupported covering every branch (desktop non-Firefox, mobile
Firefox, mobile non-Firefox, mobile with system camera, desktop
Firefox fallback)
- Hardens PairingSupplicantIntegration by routing handleClose and
handleChannelError through a shared fail helper that guards against
duplicate terminal-state transitions and normalizes error shapes,
fixing a race the new disconnect tests would otherwise hit
- Addresses reviewer feedback: tightens Pair/Supp/Allow selectors to
#supp-approve-btn (now set on both React and Backbone Confirm buttons
with the same id, proving both page render and interactivity in one
check); expands the page.addInitScript WebSocket wrapper comments
with the WHY (Playwright 1.44.1 has no routeWebSocket) and a no-leak
note (page-scoped, torn down with the fixture); rewrites the
misleading "1006" comment in the disconnect helper with accurate
close semantics; documents the query-fix.js hash-preservation line
specifically for the pair supplicant flow; adds an inline note on
Config.version being optional so the appDisplayVersion fallback is
justified
- Fixes a pre-existing race in completeSupplicantApproval by waiting
for /oauth/success directly instead of polling "URL is not
/pair/supp/allow", which could catch the intermediate
/pair/supp/wait_for_auth state
- Simplifies several pair pages as a follow-up cleanup: extracted
MobileChoice type in Pair/Index, removed single-use helpers in
Pair/Supp, collapsed empty branches and redundant renames in
SuppAllow and SuppWaitForAuth, narrowed sessionToken and reused
the existing error helper in AuthAllow
- Adds shared test helpers and selectors in
packages/functional-tests/lib/pairing-{constants,helpers}.ts and a
Marionette + Playwright pairing fixture1 parent ed4693b commit e38f535
File tree
88 files changed
+7094
-1560
lines changed- packages
- functional-tests
- lib
- fixtures
- tests
- pairing
- unit
- fxa-content-server/server
- config
- lib
- routes/react-app
- fxa-settings
- public
- src
- components
- App
- DeviceInfoBlock
- images
- lib
- channels
- glean
- integrations
- models/integrations
- pages
- ConnectAnotherDevice
- Index
- Pair
- AuthAllow
- AuthComplete
- AuthTotp
- AuthWaitForSupp
- Failure
- Index
- Success
- SuppAllow
- SuppWaitForAuth
- Supp
- Unsupported
- __mocks__
- Signin
- Signup
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
88 files changed
+7094
-1560
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
27 | 27 | | |
28 | 28 | | |
29 | 29 | | |
30 | | - | |
31 | | - | |
| 30 | + | |
| 31 | + | |
32 | 32 | | |
33 | 33 | | |
34 | 34 | | |
35 | 35 | | |
| 36 | + | |
| 37 | + | |
36 | 38 | | |
37 | 39 | | |
38 | 40 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
180 | 180 | | |
181 | 181 | | |
182 | 182 | | |
| 183 | + | |
| 184 | + | |
| 185 | + | |
| 186 | + | |
| 187 | + | |
| 188 | + | |
| 189 | + | |
| 190 | + | |
| 191 | + | |
| 192 | + | |
| 193 | + | |
| 194 | + | |
| 195 | + | |
| 196 | + | |
| 197 | + | |
| 198 | + | |
| 199 | + | |
| 200 | + | |
| 201 | + | |
| 202 | + | |
| 203 | + | |
| 204 | + | |
| 205 | + | |
| 206 | + | |
| 207 | + | |
| 208 | + | |
| 209 | + | |
| 210 | + | |
| 211 | + | |
| 212 | + | |
| 213 | + | |
| 214 | + | |
| 215 | + | |
| 216 | + | |
| 217 | + | |
| 218 | + | |
| 219 | + | |
| 220 | + | |
| 221 | + | |
| 222 | + | |
| 223 | + | |
| 224 | + | |
| 225 | + | |
| 226 | + | |
| 227 | + | |
| 228 | + | |
| 229 | + | |
| 230 | + | |
| 231 | + | |
| 232 | + | |
| 233 | + | |
| 234 | + | |
| 235 | + | |
183 | 236 | | |
184 | 237 | | |
185 | 238 | | |
| |||
197 | 250 | | |
198 | 251 | | |
199 | 252 | | |
200 | | - | |
| 253 | + | |
| 254 | + | |
| 255 | + | |
201 | 256 | | |
202 | 257 | | |
203 | 258 | | |
| |||
243 | 298 | | |
244 | 299 | | |
245 | 300 | | |
246 | | - | |
| 301 | + | |
247 | 302 | | |
248 | 303 | | |
249 | 304 | | |
250 | 305 | | |
251 | | - | |
| 306 | + | |
252 | 307 | | |
253 | 308 | | |
254 | 309 | | |
| |||
261 | 316 | | |
262 | 317 | | |
263 | 318 | | |
264 | | - | |
| 319 | + | |
265 | 320 | | |
266 | 321 | | |
267 | 322 | | |
268 | 323 | | |
269 | 324 | | |
270 | 325 | | |
271 | 326 | | |
272 | | - | |
| 327 | + | |
273 | 328 | | |
274 | 329 | | |
275 | 330 | | |
| |||
315 | 370 | | |
316 | 371 | | |
317 | 372 | | |
318 | | - | |
| 373 | + | |
319 | 374 | | |
320 | 375 | | |
321 | 376 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
16 | 16 | | |
17 | 17 | | |
18 | 18 | | |
19 | | - | |
| 19 | + | |
20 | 20 | | |
21 | 21 | | |
22 | 22 | | |
| 23 | + | |
23 | 24 | | |
24 | 25 | | |
25 | 26 | | |
| |||
30 | 31 | | |
31 | 32 | | |
32 | 33 | | |
33 | | - | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
34 | 43 | | |
35 | 44 | | |
36 | 45 | | |
37 | 46 | | |
38 | 47 | | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
39 | 66 | | |
0 commit comments