Using Testing and testing controls

[bibble235]

Firstly very new to Retool so please be kind.

I have written a query to populate a table

const data = [{
  "id": 1,
  "name": "Hanson Deck",
  "email": "hanson@deck.com",
  "sales": 37
}, {
  "id": 2,
  "name": "Sue Shei",
  "email": "sueshei@example.com",
  "sales": 550
}]

table1.setData(data)

Then I write a unit test

await query1.trigger()
assertCondition(table1.data['0'].id === 1)

and it fails with

TypeError: Cannot read properties of undefined (reading id)

We would be useful to be able to log to the console too. Sorry if this is already possible.

[jocen]

Hi @bibble235, welcome to retool community!

What data are you setting in table1? I would suggest you add a return data on your JS Query and then add {{query1.data}} on table1's Data field. I do think you need a data reference point for the component. You can check the left panel (cmd+b or ctrl+b) and go to table1. You'll see that data is null hence your TypeError message.

Set Data overrides the records in the table but it only works if you have already store a main data point in the component. I.e. query1.data is referenced by the table component and then create query2.data for setData which alters the value of table1 component.

On logging into console, you can add a console.log(text) in your JS Query. When you run it, make sure you have your dev tools up on your browser and click the console tab. It writes the text, query name, and the line number (with added count since it is being wrapped by retool).

Do all that make sense? Let me know if it helps

[bibble235]

Thanks for the quick response. The demo query does work and written to demonstrate the problem. I want to test the table contents after setting them. It is the testing tool I want to work.

Hope this makes sense II

P.S. I should add, I know you can do console.log for JS querys but for the Unit Testing this does not work or I am doing something very wrong

[jocen]

@bibble235, oh lol, it's on beta testing still. You might want to ask those who brought you in to test the feature. I have the same for workflows (another feature on beta, much like zapier). So yeah, I'm too assuming I could help here haha

[everett_smith]

Hey all, I'm chiming in from support here @jocen thanks for stepping in to help @bibble235 I've tested this out on my end and it appears to be working correctly.

I am able to reproduce that error if I haven't saved the query.

You could also try refreshing the page after adding the table component and seeing if that resolves the issue.

If neither of those suggestions help, could you share a screenshot (similar to mine) of your setup?

[bibble235]

So I think yours is working because you have ran it once, and therefore the table is already populate.

Here are my screenshots with reduced data to help fit

Start with an empty table

If you run the query (Note added clearing of the table first)

Check the console.log (this should gaurantee the test as we print out table1.data['0'].id

Lets run the test with the final test commented out

Finally lets run the original test uncommenting the line

I want to test the state of all of the controls after running the script. This is a demo to convey my intentions. Let me know if you want the JSON export.

Thanks

[bibble235]

I have not seen an update for this. It would be great to know if you are looking into this or not. That way I can save time monitoring progress

[everett_smith]

Hi bibble235, I'm sorry for the very long delay here.

In line 2 of your test the await query1.trigger() resolves before the promise chain on lines 28 - 32 of your query resolves. However, this looks like a bug on our end since waitForCondition should continue testing for success, and allow this promise chain to resolve before returning a failure. So waitForCondition is clearly not working as expected here. We've passed along a report of this to engineering and I'll let you know of any updates on the issue. Thank you for flagging this for us!

In the meantime, if you add an await in front of your promise chain on line 28 then your test should work as expected.

Let me know if you have any more questions!

[bibble235]

Hey thanks for replying and glad to have helped improving the unit testing.

Maybe I am missing something with the work around but if I do as suggested, add an await before table1.setData I get the following

Note the line number is not the same because I cut the data down but the JS script lines are the same.

Thanks.

[everett_smith]

Hey bibble235, top-level await in JS queries is a feature that was added in a recent Retool version. Can you share what version of Retool you're running, it's likely that you don't have this feature yet?

[bibble235]

The version I am using is 2.82.39

And it does not allow "await" in a query here. However the unit test now works.