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/
Related
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.
In the below example, infoScroller is a UIWebView and println(HTMLDescription) prints a lovely string of HTML. However, the attempt to loadHTMLString gets the runtime error: fatal error: Can't unwrap Optional.None
if let HTMLDescription = self.myData?.content? {
println(HTMLDescription)
infoScroller.loadHTMLString(HTMLDescription, baseURL: nil)
}
I've tried every combination of ! and ? in both the assignment and use of the string but I get this same error every time, though the variable never fails to print out perfectly to the console.
There is another value that I set using the same method and it works fine. Both are strings, but the other one is more simple in that HTMLDescription is multiline and the working one is not.
Edit: The discussion in the comments prompted me to check the infoScroller and it's description as printed in the console is: (#sil_weak UIWebView!) infoScroller =
I'm thinking that's the issue, but I'm not sure what it means or how to fix it.
Edit 2: This has to be the issue. println(infoScroller.description) yields the exact same error.
Got it! This question put me on the path. I was trying to load the content before the view was fully loaded. Moved loadHTMLString() into viewDidLoad(). Stupid simple.
I've just started to play around with node, express and thus, jade. I try to do something like this in a jade template:
my-options = {"this": "something", "that": "something else", "those": "more stuff", "these": "also included"}
form
select(name="myselection")
each option, key in my-options
option(value="#{key}") option
However, all I get is an 500 server error which is not helpfull at all. What am I doing wrong here? Any help would be much appreciated.
Update
I've just figured out, that jade templates themselves cannot contain variable definitions. Thus, the my_options hash needs to be defined in the corresponding router.js file and passed as an parameter to the appropriate result.render() function.
Your first line must be executable JS code and 'my-options' is not a valid JS variable name.
Actually, you can define variables in Jade, you just have to start the line with a hyphen. A - at the start of a line tells Jade to execute the code that follows without outputting it. A = at the start of a line tells Jade to execute the code that follows and output it after it's done.
So for example if you do
- var foo = "bar"
= 2+2
p #{foo}
you will see this in your page source:
4
<p>bar</p>
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?