Queries topic

import 'package:react/react.dart' as react;
import 'package:react_testing_library/react_testing_library.dart' as rtl;
import 'package:test/test.dart';

main() {
  final exampleVDom = react.nav({},
    react.ul({},
      react.li({}, 'Item 1'),
      react.li({}, 'Item 2'),
      react.li({}, 
        'Item 3',
        react.ul({},
          react.li({}, 'Item 3.1'),
          react.li({}, 'Item 3.2'),
        ),
      ),
    ),
  );
  
  test('', () {
    final view = rtl.render(exampleVDom);
    
    // Succeeds, there is only one in the react tree.
    final goodNavQuery = view.getByRole('nav');
    // This is identical to the first query, but shows how 
    // the top level queries must specify a container. 
    final moreVerboseNavQuery = 
        rtl.getByRole(view.container, 'nav');
    
    // Fails, there is more than one element with the list role 
    // in the default scope used by the `RenderResult` instance 
    // returned from `rtl.render`. If we want to get only the 
    // nested list, we should use a more tightly scoped query
    // like the one shown next.
    final badSubListQuery = view.getByRole('list');
    
    // Succeeds, there is only one list nested within the" "Item 3" item.
    final goodSubListQuery = 
        rtl.within(view.getByText('Item 3')).getByRole('list');
    
    // Lets say that our test above also renders an element that displays an 
    // overlay / "portal" dialog of some kind that renders in its own tree. 
    // This is where the `screen` queries come in handy - it allows you to 
    // easily query the entire document for something.
    final documentQueryOutsideTheReactTree = rtl.screen.getByRole('dialog');
    
    // If querying the entire document is too broad, you can still easily 
    // query outside the scope of the react tree rendered in the test 
    // by specifying a container using `within`:
    final scopedQueryOutsideTheReactTree = 
        rtl.within(someElementWhereYouExpectTheDialog).getByRole('dialog');
  });
}