node incorrectly being returned as an empty array

[asnaseer-resilient]

We have a React component named EditableCallRoutingTableDialog that contains within it another of our React components named EditableCallRoutingTable. The relevant snippets showing the code for these components is shown below. We added a call to React.useEffect in the EditableCallRoutingTable component as follows:

  React.useEffect(() => {
    console.log(resq$$('EditableCallRoutingTabl*', document.getElementById('root')));
  }, []);

in order to see what resq$$ returns for our components and got this output:

r(2) [{…}, {…}]
0:
children: [{…}]
name: "EditableCallRoutingTableDialog"
node: div.MuiDialog-root
props: {announcements: Array(11), routes: Array(2), rows: Array(1), basicRoutingService: false, dialogOpen: true, …}
state: {memoizedState: {…}, baseState: null, baseQueue: null, queue: null, next: {…}}
[[Prototype]]: Object
1:
children: (2) [{…}, {…}]
isFragment: true
name: "EditableCallRoutingTable"
node: []
props: {announcements: Array(11), routes: Array(2), rows: Array(1), basicRoutingService: false, editedCells: Set(0), …}
state: {memoizedState: {…}, baseState: null, baseQueue: null, queue: null, next: {…}}
[[Prototype]]: Object
length: 2
lastIndex: (...)
lastItem: (...)
[[Prototype]]: e

From the output above for EditableCallRoutingTableDialog we see that the node field is returned as div.MuiDialog-root which matches what we expected.

However, the node field for the EditableCallRoutingTable seems to be an empty array when we expected it to be a div.

If we remove the Snackbar component from the end of the EditableCallRoutingTable code then the node is returned as:

node: div.MuiPaper-root.MuiCard-root.makeStyles-tableContainer-2595.MuiPaper-elevation1.MuiPaper-rounded

which looks correct.

Are we using your library incorrectly or is this a bug?

We are using:

• react 16.14.0
• @material-ui/core 4.12.4
• resq 1.10.2

Code Snippet for EditableCallRoutingTableDialog

...
export const EditableCallRoutingTableDialog: React.FC<EditableCallRoutingTableDialogProps> = ({
  announcements,
  routes,
  rows,
  basicRoutingService,
  dialogOpen,
  onRefreshAnnouncementsClicked,
  onUploadAnnouncementClicked,
  useLazyGetAnnouncementSignedGetUrlQuery,
  onSaveClick,
  onCancelClick
}) => {
  ...

  return (
    <Dialog
      PaperProps={{ classes: paperClasses }}
      fullScreen
      maxWidth={false}
      open={!!dialogOpen}
      onClose={() => false}
      disableEscapeKeyDown
    >
      <DialogTitle className={classes.dialogTitle} title="Edit" />
      <DialogContent className={classes.dialogContent}>
        <section className={classes.headerContents}>...</section>
        <EditableCallRoutingTable
          announcements={announcements}
          routes={routes}
          rows={rows}
          basicRoutingService={basicRoutingService}
          editedCells={editedCells}
          changedRows={changedRows}
          changedRouteOrdinals={changedRouteOrdinals}
          setHasChanged={setHasChanged}
          onRefreshAnnouncementsClicked={onRefreshAnnouncementsClicked}
          onUploadAnnouncementClicked={onUploadAnnouncementClicked}
          useLazyGetAnnouncementSignedGetUrlQuery={useLazyGetAnnouncementSignedGetUrlQuery}
        />
      </DialogContent>
    </Dialog>
  );
};

Code Snippet for EditableCallRoutingTable

...
export const EditableCallRoutingTable: React.FC<EditableCallRoutingTableProps> = ({
  announcements,
  routes,
  rows,
  basicRoutingService,
  editedCells,
  changedRows,
  changedRouteOrdinals,
  setHasChanged,
  onRefreshAnnouncementsClicked,
  onUploadAnnouncementClicked,
  useLazyGetAnnouncementSignedGetUrlQuery
}) => {
  ...
  React.useEffect(() => {
    console.log(resq$$('EditableCallRoutingTabl*', document.getElementById('root')));
  }, []);

  return (
    <>
      <Card className={classes.tableContainer}>
        <div className={classes.table}>
          <DataTable customStyles={rdtCustomStyles(theme, disabledColumns)} columns={columns} data={data} />
        </div>
      </Card>
      <Snackbar
        variant="error"
        message={getAnnouncementSignedGetUrlQueryResult.error?.message}
        show={!!playingAudio && !!getAnnouncementSignedGetUrlQueryResult.error?.message}
        verticalAnchor="top"
        onClose={() => setPlayingAudio(undefined)}
      />
    </>
  );
};

[baruchvlz]

Hey @asnaseer-resilient, thanks for using the library. I would like to apologize for the tardiness of the response.

Your EditableCallRoutingTable component is a React.Fragment which doesn't have a HTML representation thus showing an empty node. If you look at the children property you will see that it has 2 elements in the array which would be your Card and Snackbar.

[asnaseer-resilient]

@baruchvlz I thought the library would realise that this is a fragment and, as you said, would therefore not have a HTML representation and therefore just return the children directly. We are using this library indirectly as we use CodeceptJs for our end-to-end testing and the current behaviour breaks some of our tests.

Would it possible to change the behaviour of how this library treats fragments?

[baruchvlz]

would therefore not have a HTML representation and therefore just return the children directly.

@asnaseer-resilient It does, on the children property. The node property is reserved for the HTML element.

The reason the node is reserved for the HTML Element is so you can do DOM api functionality against it (querySelector, styles, etc..).

[asnaseer-resilient]

Ok - I will get in touch with the authors of CodeceptJs to see if they can amend their use of your library to fix the issues we are seeing.