I'm new into testcafe. I have a react app which was made by create-react-app, and I'm trying to do very simple function:
await t.expect(ReactSelector('ReactHighcharts').exists.ok()
I figured out that no matter what component I put inside the selector I get flase.
When I explored more, I saw that react-scripts probably minifies/uglifies by his webpack, my code, and that's
why I can't get the DOM.
Am I right? if yes - how can I disable it? if not, I'd like to understand why the DOM is unreachable.
You can explicitly set the displayName property for a component or consider testing the dev build.
https://reactjs.org/docs/react-component.html#displayname
Related
I am trying to write a tool that open's a website and interacts with and triggers the drag/drop behavior. I am seeing Input.dragIntercepted, Input.dispatchDragEvent functions in the documentation. But when I use these functions, I am getting a ... is not a function error. Probably, I am not using them in a proper way.
How can I use these functions to trigger drag and drop behavior of the web application? I did not find any example that shows usage of these functions.
First of all, Input.dragIntercepted really isn't a function. It's an event that will be fired, but only if you enable it, using Input.setInterceptDrags with enable set as true.
This is documented both here and here.
I love React, it has quickly become my favorite development tool. It is a fantastic library that creates the kind of flexibility I've always dreamed about.
That said, I'm having a very hard time getting Facebook login to work with React in production.
I have tried all of the following methods. In all three cases, I implemented the examples exactly as shown in the code using the simplest possible technique:
https://github.com/seeden/react-facebook
https://github.com/keppelen/react-facebook-login
http://jslancer.com/blog/2017/11/27/facebook-google-login-react/
Everything works great in development. :)
When I create the production build using create-react-app and push it live, it breaks and reports: Error: Facebook is not initialized or Uncaught TypeError: Cannot read property 'login' of undefined where undefined is FB.
Basically it seems like the Facebook javascript SDK is not loaded or initialized.
The first two links above are for existing component libraries, but the third is a custom implementation that places the Facebook initialization code in the index.html file and creates an event listener. The results are the same in all three examples.
It is as if something about the create-react-app compression method is obfuscating the variables to the point that Facebook can no longer work, or at least is not available to the react code. This includes all calls to window.FB as recommended in many tutorials.
I've been working at this for a couple of weeks now (off and on) and am now turning to the hive mind. Anyone have any ideas on how to get Facebook to actually work with Facebook's own code library (React)? It seems so painfully odd that it causes this much trouble and I have been unable to find a clear solution that works in production.
Most of the debugging steps are already mentioned in the comments section.
Here are the steps laid down:
1) Check the network tab in your browser's console and see if the request to load FB's SDK is successful or not
2) Most common culprit is some extension like Ad-Blocker blocking such async requests which loads JS on your web page. Disable it or try it incognito mode
3) Other common mistake I have seen is forgetting to use the FB.init({ // config }); function - which is the actual call which initializes the fb sdk and makes available the FB variable globally.
I want to deploy this example on glitch. I've added package.js and index.js to my glitch project and built successfully.
However, the code is missing a section to listen for HTTPS requests. In most node.js/express webapps, there is code to indicate which paths trigger which functions, but this is missing from the example. Can you explain to me how it should work and why that part is missing from this example?
It's not clear what do you mean by "the code is missing a section to listen" as the only main feature of index.js is to listen to requests and return information.
I suggest you check index.js and make sure that you getting requests to your end point on glitch.
Also, it would be helpful if you can share your glitch project over here at SO so we could see what you are doing.
Btw, you might want to double check that you have all the packages
I also created this simple example on Glitch - It's returning the current bitcoin price. Feel free to remix it and use the code there for your own action.
Good luck!
The part that "listens to requests" is
// The Entry point to all our actions
const actionMap = new Map();
actionMap.set(ACTION_PRICE, priceHandler);
actionMap.set(ACTION_TOTAL, totalHandler);
actionMap.set(ACTION_BLOCK, blockCountHandler);
actionMap.set(ACTION_MARKET, marketCaptHandler);
actionMap.set(ACTION_INTERVAL, intervalHandler);
assistant.handleRequest(actionMap);
where each ACTION is an action(in an intent) in Dialogflow and the handler is the corresponding function in your code.
I'd recommend you take a look at
https://codelabs.developers.google.com/codelabs/assistant-codelab/index.html?index=..%2F..%2Findex#0
If you want a good example of an assistant app, though this uses firebase instead of glitch.
What can cause the start render to be delayed even after the load event has fired?
Look at this webpagetest result
This is most probably a bug. For the moment, the iPhone instance on WebPageTest is quite recent and the author is still improving it:
The iOS support is just becoming stable though it's still under VERY active development so don't be surprised if there are a few rough edges (and a lot more limitations than the android testing).
- Patrick Meenan, 09-09-2015
The android tests are much more reliable.
If you check the page you tested without javascript (F1 > Disable Javascript in Chrome DevTools), you can see that most images are lazy-loaded, which mean they are loaded via a JS script checking if the images are in the viewport. As you can see, without JS the load time line is well after all assets loaded.
Also for other assets, like JS, you can add an async or defer attribute to de-synchronize your scripts loads.
Finally, some scripts can be even deliberately loaded after the load event using an attachment on the window load event to write <script> tags in the body when it's triggered as loadJS do for example.
You should read that by the way to better understand how rendering and events timing work.
My question is very basic on one hand but on the other hand the general situation is more complex, plus I cannot really get any working sample.
I'm developing/maintaing a web-application which is currently in transition from GWT code base into Ember.js.
Most of the newer code already relies on Ember.js and I think it's really awesome.
The problem is we cannot use Ember Router as all the request are being handled by the GWT.
In order to enabled the application run in this unusual configuration we have special JavaScript files that create our Ember main objects (Controllers & Models) for us.
As you can imagine navigation between tabs is cumbersome and is handled by GWT who creates Ember objects when needed. We are in transit toward a brave new world Ember Router and all.
But in the meantime, this is the problem I'm facing right now.
The user clicks a link which opens a page that contains some Ember based table.
The data is retrieved form the server using some Ajax code. Upon success it spawns a forEach loop which tries to pushObject all the received date into our Ember based components.
My problem happens when the user quickly switches between tabs. In this case the first list of object has not finished rendering yet and suddenly there's a new set of objects to handle. This causes Ember to throw errors like:
"Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. "
and
"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."
Is it possible to prevent the loop from trying to render?
I've tried checking if the controller in question is already inDOM and it is, is there a way to notify Ember this object is no longer valid?
Sorry for a lengthy question and lack of running sample.
I'd probably modify the switch tab code to only execute afterRender has completed, that way you aren't mucking with ember objects while they are being used.
Ember.run.scheduleOnce('afterRender', this, function(){
// call GWT switch tab routine
});
Thank you Daniel and Márcio Rodrigues Correa Júnior. eventually what I did is to add a patch that would check the current context of the application (in my case the currently selected tab). If upon receiving the AJAX response the application is in the correct context (meaning the user haven't change the tab) go on. Otherwise just ignore the response and do not try to render it.
Now it seems to be working