I'm using reactJS and testcafe as one of the testing frameworks.
I've a default configuration - 'showCalculatedValue' set to true(it is always passed a prop), for my application component for which the testcafe test case runs fine.
However, I need to set that config - 'showCalculatedValue' (through props) to false in testcafe and then run another test case.
And yes, that config doesn't require any sort of action to trigger.
It is all about if you want to have it as a feature or not.
It is just that when 'showCalculatedValue' is set to true, it renders a specific dom element and when it is not, it doesn't render that element.
So my question is, how could I pass in new props in testcafe to set that 'showCalculated' value to false?
I do not know how your config works, but I assume that you can modify it on the client side somehow. If so, I suggest you take a look at the ClientFunctions mechanism. Using ClientFunctions, you will be able to run your custom JS-code with TestCafe.
If this does not help, please share a sample project with a detailed explanation with us.
Related
I am new to React and recently I found out there is the tool called storybook which basically helps to test our React components in isolated manner. However, I also found out that storybook is used when we test our React application, that is, there happens the comparison of snapshots. The question is what is the reason for testing the difference of snapshots? I mean, is it like we create a certain component and create a snapshot for it to ensure that other developers do not change that component accidentally, that is, snapshot in storybook helps us ensure there is no accidental change of components that we created. Is it true?
You create snapshot tests to ensure that your Components renders correctly given a certain input.
This is a way to make sure your code still behaves the way it was intended to. It's to ensure you don't accidentally break something in your code base, but also to alert you when anything changes.
An example:
Say I have a component called ProfileLink that generates a link to a user account:
function ProfileLink(props) {
return <a href ={get_url(user.id)}>{props.user.profileName}</a>;
}
and somewhere else I have a function called get_url:
function get_url(id) {
return "www.example.com/user/" + id;
}
Now, to ensure that my ProfileLink is always working, I can create snapshot, and everytime my tests run, the snapshot will be compared to the current rendered component.
Say someone were to change the get_url function, they might not be aware that it's used in ProfileLink, but as soon as the tests are run, you'll know that something has changed in the ProfileLink component as well.
Can i change input value populated from component state from console by using something like document.getElementById('someId').value="some_value" in react
Yes you can.
Whatever the Library/Framework you are using to build your DOM, it will eventually produce DOM, thus, it will be available and accessed as: window, document and everything inside of them.
So, doing the following will update value of the field that matches with the parameter given to the getElementById.
document.getElementById('someId').value="some_value"
I suggest you use React Developer Tools to trace and edit value of state
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Hope this help!
Having an issue where a 3rd party library is setting document.body.innerHTML, and that causes setState to stop seeming to work fully. In React tools in chrome and when debugging it updates the state object correctly, but the rendered output does not update.
Cannot figure out what is going on here, no error occurs, stepping through the debugger nothing stands out to me. At first I was also using dangerouslySetInnerHTML, but the issue seems to be occurring on normal jsx value injection too.
Example here, if you modify the value of const ModifyBody = true; to false and it works as expected, but with the document.body.innerHTML = it doesn't update.
https://codepen.io/eibwen/pen/gjBxrZ
Just to restate it, its a third party library doing the body.innerHTML. Specifically its a library to create a medium.com-like popup when selecting text, if you happened to know a library that could do this with better compatibility with TypeScript/React I'd be all ears on that too
I'm using angularJS and migrating to ui-router v1. I'm trying to get deep state redirects working like they used to in the previous version of ui-router.
I've successfully implemented the DSRPlugin in my config modules, and deep state redirects are firing and work as expected. However, I'm unable to reset the deep state. I need to be able to reset the deep state on a button click, which means logic within my component. Previously I could inject $deepStateRedirect into my controllers and simply call $deepStateRedirect.reset({}), but I'm no longer able to inject $deepStateRedirect. How can I access the reset method in ui-router v 1?
I have also noticed that when using DSR as a config object you can specify a function to determine if the redirect occurs. I could alternatively use this to determine whether to do the redirect or not, but the documentation is lacking. It shows that I should return a truthy value to do the redirect or a falsey value to prevent the redirect. In testing, returning true or false only causes a transition error: "i.state is not a function".
I'm not using a build process, just plain script includes.
Anyone have any ideas on how to make this work through either of the above methods?
This may not be the best practice way of doing the reset, but I found a solution after logging out various ui-router objects.
Inside of your controller you must inject the $uiRouter object. Then, you can set a variable to $uiRouter._plugins["deep-state-redirect"]. The reset() and other methods are available on the plugin's prototype.
You can then use that object and call those methods similar to how it worked in the previous version when injecting $deepStateRedirect.
var $deepStateRedirect = $uiRouter._plugins["deep-state-redirect"];
$deepStateRedirect.reset({});
I found this only in the source code and then in the documentation: https://ui-router.github.io/ng1/docs/latest/classes/core.uirouter.html#getplugin
The more correct way is to use UIRouter#getPlugin(pluginName), that is
var $deepStateRedirect = $uiRouter.getPlugin('deep-state-redirect');
$deepStateRedirect.reset(...);
I'm new to Angular and I have the following problem.
I'm trying to create a component that can be active. I currently set it up so it detects if an attribute called active exists and sets its internal state accordingly.
<page active page-id="page-1"></page>
The problem emerged when I wanted to remove the active state. How should I go about it? Should I switch to css classes? Or maybe use a directive?
This seems a little 'hacky' but, first you need to get the element somehow and access the attribute Map directly and just remove it like,
HTML
<page active page-id="page-1" id="page_one"></page>
Dart
querySelector('#page_one').attributes.remove("active");
https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart:html.Element#id_attributes