I'm trying to write automated tests for Hashify Editor. Here are the sorts of assertions I'd like to make:
Assert that a textarea matches a particular selector.
Assert that the textarea is currently empty.
Type "_" into the textarea. Assert that it now contains __, and that the caret is positioned between the two underscores.
Type "hello" into the textarea. Assert that it now contains _hello_, and that the caret is positioned before the second underscore.
Type "_" into the textarea. Assert that it still contains _hello_, and that the caret is now positioned after the second underscore.
I've spent the day playing with Soda and Zombie.js, trying to get this work in either. I've managed to get close with Soda:
soda = require 'soda'
browser = soda.createClient ...
browser
.chain
.session()
.open('/')
.typeKeys('editor', '_')
.assertValue('editor', '__')
This assertion success, but the following doesn't:
.typeKeys('editor', 'hello')
.assertValue('editor', '_hello_')
# ERROR: Actual value '__' did not match '_hello_'
Using .type fails in a different manner:
.type('editor', 'hello')
.assertValue('editor', '_hello_')
# ERROR: Actual value 'hello' did not match '_hello_'
The suggestion on #275 of assaf/zombie got my hopes up, but I wasn't able to trigger the textarea's keypress handler using this approach.
Perhaps I'm going about this in the wrong way. Has anyone had success testing keypress handlers using Node? What's the best tool for the job?
Related
I'm writing a test that checks the input of 2 fields, one is type text and the other is type number.
I can grab the text input without issue and test it:
textInput = getAllByPlaceholderText('name');
userEvent.type(textInput[0], 'username');
This works perfectly when I check the test with screen.debug();
But the number input is very different.
numInput = getAllByRole('spinbutton');
userEvent.type(numInput[0], '1');
This doesnt change the value when checking the debugger.
I've been searching online for an answer but failed to find anything, could someone help?
I'm guessing the userEvent needs changing but since any actual users can simply type into this box should .type still work?
I have no idea why this is the case but
userEvent.type(textInput[0], 'username');
userEvent.type(numInput[0], '1');
The above only shows textInput as having a value.
userEvent.type(numInput[0], '1');
userEvent.type(textInput[0], 'username');
This shows them both as having a value, no idea why but hey, its working.
I'm experimenting with SSR since I've never touched the subject before and want to learn more about it. I've built a simple SSR and it works fine, except when I add some variables in the mix.
This works fine:
<span>msg: hello</span>
This cast an error:
const txt = 'hello';
...
<span>msg: {txt}</span>
Warning: Text content did not match. Server: "msg: hello" Client: "msg: "
If I check the doc request this is what I get from localhost:
<span>msg: hello</span>
and when I inspect element:
<span>
"msg: "
"hello"
</span>
My initial thinking is that the hydration does not read the next line, and just see "msg: ", even tho, it looks fine in the dom and all the data is correct.
I can, however make it work with a templatestring <span>{`msg: $txt}`}</span>
but I have several cases where I check what to print with a function.
Anyone got more information on this one, how can I make React hydration to be more open minded and check for the next line?
check if you use renderToString, and not renderToStaticMarkup.
Similar problem: https://lihautan.com/hydrating-text-content/
I have a step like this:
Then(/^I can see the Eligible Bugs list "([^"]*)"$/) do |bugs|
bugs_list = bugs.split(", ")
assert page.has_css?(".eligible-bugs", :visible => true)
within(".eligible-bugs") do
bugs_list.each do |bug|
assert page.has_content?(bug)
end
end
end
But the step fail sometimes at the " within(".eligible-bugs") do" with the error 'Unable to find css ".eligible-bugs"'
I feel it is odd.
for the assertion has been passed. it means the css is visible.
why within cannot find css? How it happen.
But the step fail sometimes at the " within(".eligible-bugs") do" with the error 'Unable to find css ".eligible-bugs"'
I feel it is odd.
for the assertion has been passed. it means the css is visible.
why within cannot find css? How it happen.
BTW, I have set my max wait time to 5.
Capybara.default_max_wait_time = 5
The only way that should happen, is if the page is dynamically changing while you're running the test - sometime during your check for all bugs content on the page it is changing and the '.eligible-bugs' element is going way. The test and the browser run separately, so how/why it is happening depends on what else your page is doing in the browser, it would also depend on what steps have come before this in the test.
Also, note that it's not necessarily disappearing between the has_css? and the within statement first running. If it disappears at any point during the code inside the within running it could throw the same error as it attempts to reload the '.eligible-bugs' element.
From the title of the question I assume the list that you want to check is the result of a search or filtering action. If it is, does that action remove the existing '.eligible-bugs' element and then after some time replace it with a new one returned from an ajax request or something? If that is the case then, since you control the test data, you should be waiting for the correct results count to show, thereby ensuring any element replacements have completed, before checking for the text. How you do that would depend on the exact makeup of the page, but if each eligible bug was a child of '.eligible-bugs' and had a class of '.eligible-bug' I would write your test something like
Then(/^I can see the Eligible Bugs list "([^"]*)"$/) do |bugs|
bugs_list = bugs.split(", ")
assert_css(".eligible-bugs > .eligible_bug", count: bugs_list.size) # wait until the expected number of results have shown up
within(".eligible-bugs") do
bugs_list.each do |bug|
assert_content(bug)
end
end
end
L20N is setup in my ReactJS project and I am calling getSync on the context after its ready event has fired (so things should be good to go). However, rather than my expected string including other Entity values and variable expansion, I get the raw Entity string.
The string I get looks like this:
{{$user.name}} - {{appName}}
But of course, I'm expecting something like this:
Ben Taylor - My Cool App
I have tried to recreate the problem in this plunker. Unfortunately, it works fine! When you run it, the alert box shows the expected L20N expanded string.
What could cause the Entity value to be returned raw? I have a valid context and there are no errors in inspector, so it appears all is configured fine. I'm wondering if there is some interaction with something else I'm doing that is breaking L20N. Any ideas appreciated!
I am unable to include the app I'm working on, but needless to say it has more moving parts. It is a React app based on this template.
If there is some sort of error in your .l20n file (the extension formerly known as .lol) then the getSync call will return the raw string value. In my case the error was to quote the keys in an L20n dictionary.
If you have context data like { user: { type: "Awesome" } } then the following does not work and calling getSync for useTheShout will return the unprocessed string value (including the text {{shout}}):
<shout[$user.type] {
"Awesome": "HEY AWESOME USER!",
"Loser": "i can't be bothered to shout at you loser..."
}>
<useTheShout "I'm gonna shout the following: {{shout}}">
Removing the quote marks from the dictionary key names will make this work, as follows:
<shout[$user.type] {
Awesome: "HEY AWESOME USER!",
Loser: "i can't be bothered to shout at you loser..."
}>
<useTheShout "I'm gonna shout the following: {{shout}}">
Update: You can avoid the pain by logging using the error and warning event emitters.
I was automating the an application (using Protractor) and I have come across situation where I wanted to select the an option from the type ahead using the DOWN arrow button from the Keyboard. Here is how I am approaching to this action.
After typing part into the text field I am getting the reference of each option that appear in the type ahead.
Now, I am using .each() method of protractor to iterate through each of the option to look for the required option.
I'm making the script to hit DOWN arrow button to iterate through each option in the type ahead.
Suppose there are 10 options displayed in the type ahead and the option that I need to select is at 5th position. Now when I reach the 5th position I am selecting the option but each() function still continues.
I want the loop to terminate when required option is selected. Something like BREAK statement in FOR loops.
BTW I have tried the above scenario with FOR loop but unable to use BREAK statement within then() handler.
Please let me know how to cope up with this situation.
You could throw an exception to terminate the loop. Put the loop inside try and use catch to wrangle your results. You can also just use a boolean variable to indicate that you have found a match and ignore everything after that point. I would just use a for loop though.
Edit:
You could add a variable to hold an action before the allBenchmarks.each
var action
Then inside the test
if(dataValue == optionToSelect){
action = function() {benchmark.click(); ...}
}
After the loop exits call the action
if (action) action()