import * as React from "react" ; import { render } from "../render" ; import { focus } from "../focus" ; import { useAllEvents } from "./useAllEvents" ; test ( "focus" , async ( ) => { const stack = [ ] as any [ ] ; const Test = ( ) => { const ref1 = React . useRef < HTMLButtonElement > ( null ) ; const ref2 = React . useRef < HTMLButtonElement > ( null ) ; useAllEvents ( ref1 , stack ) ; useAllEvents ( ref2 , stack ) ; return ( < > < button ref = { ref1 } > button1 < /button> < button ref = { ref2 } > button2 < /button> < />); } ; const { getByText } = render ( < Test />); const button1 = getByText ( "button1" ) ; const button2 = getByText ( "button2" ) ; focus ( button1 ) ; expect ( button1 ) . toHaveFocus ( ) ; focus ( button2 ) ; expect ( button2 ) . toHaveFocus ( ) ; expect ( stack ) . toMatchInlineSnapshot ( `
    Array [
      "focus button1",
      "focusin button1",
      "blur button1",
      "focusout button1",
      "focus button2",
      "focusin button2",
    ]
  ` ) ; } ) ; test ( "focus disabled" , async ( ) => { const stack = [ ] as any [ ] ; const Test = ( ) => { const ref = React . useRef < HTMLButtonElement > ( null ) ; useAllEvents ( ref , stack ) ; return ( < button ref = { ref } disabled > button < /button>); } ; const { getByText } = render ( < Test />); const button = getByText ( "button" ) ; focus ( button ) ; expect ( button ) . not . toHaveFocus ( ) ; expect ( stack ) . toMatchInlineSnapshot ( `Array []` ) ; } ) ; test ( "focus readOnly" , async ( ) => { const stack = [ ] as any [ ] ; const Test = ( ) => { const ref = React . useRef < HTMLInputElement > ( null ) ; useAllEvents ( ref , stack ) ; return < input ref = { ref } readOnly aria - label = "input" / > ; } ; const { getByLabelText } = render ( < Test />); const input = getByLabelText ( "input" ) ; focus ( input ) ; expect ( input ) . toHaveFocus ( ) ; expect ( stack ) . toMatchInlineSnapshot ( `
    Array [
      "focus input",
      "focusin input",
    ]
  ` ) ; } ) ;