i'm trying to be adventurous and im trying to get 100% code coverage on my personal project. and i cant the documentation that explains how to simulate a click event using jest, enzyme and react-native.
<Screen.TopBar>
<Toolbar
leftElement="arrow-back"
onLeftElementPress={() => router.pop()}
centerElement={pageName}
/>
</Screen.TopBar>
this is just the top part of it, but im trying to simulate a click on that element.
const wrapper = mount(
<MockProvider store={store}>
<ThemeProvider uiTheme={uiTheme}>
<Category />
</ThemeProvider>
</MockProvider>
);
expect(wrapper.find('Toolbar').length).toBe(1);
i get an error:
ReferenceError: document is not defined
at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:73:15)
at renderWithOptions (node_modules/enzyme/build/react-compat.js:187:26)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
at mount (node_modules/enzyme/build/mount.js:19:10)
at Object.<anonymous> (app/screens/category/tests/Category.test.js:32:30)
so my question is how do i select the toolbar so that i can click on the button in the Toolbar component.
Mount only works for react-dom and not for react-native.
Related
I am using webpack, babel, typescript, newest React version. Could not see placeholder and could not set value when I am using Input component. This is very simple code.
When I look at Chrome debugger, I don't see placeholder there. Something with my environment but I could not figure out what could be the issue.
I actually created couple new environment and it worked there. I also cut everything out from my current enviroment - all libraries that are not used, all code and all styles. Just left one module with that simple code.
import * as React from "react";
import { Input } from 'semantic-ui-react';
const LotcheckApp = () => {
return (
<>
<Input placeholder='Search...' size='large' />
</>
);
};
export default LotcheckApp;
There is no error messages - just could not see placeholder and could not set value.
I found this implementation here but its using enzyme.
Unit testing React click outside component
Adding an event to window does not work either:
window.addEventListener('click', () => {
console.log('click on window');
});
Has anyone came across this issue above using jest and "#testing-library/react"?
as #Giorgio mentioned:
fireEvent.click(document)
//or
userEvent.click(document.body);
I'd like to provide an up-to-date answer which follows the same principle as what #eduardomoroni proposed.
The fireEvent hasn't worked for me and so I've managed to achieve it with the userEvent api.
userEvent.click(document.body);
Also, as typescript complains document cannot be passed to the click event handler. Instead, the body is a better solution.
Argument of type 'Document' is not assignable to parameter of type 'TargetElement'.
Test passes in headed mode, but always fails in headless mode
I am trying to perform a test on the w2ui field of type "list"
Ideally, when we click on this w2ui list element, a drop-down (overlay) is generated with the select options and then we select an option.
But while running the test in headless mode, this drop-down is not generated.
Code To reproduce the issue:-
Code for the webpage:
Link to HTML code
Save the code provided in the above link in the file "test_webpage.html". Place this HTML file in the directory where cypress.json is located.
Code of Cypress Test:
describe('W2UI List Test', function() {
it('Click List Field', function() {
cy.visit('test_webpage.html');
cy.get('.w2ui-select').siblings('.w2ui-field-helper').should('be.visible').click();
cy.wait(2000);
cy.get('#w2ui-overlay tr[index=0]').should('be.visible').click();
});
});
Test Fail ScreenShot
Yes, there is a bug in Cypress currently where certain mouse events are not properly simulated when the Test Runner window is not the active window. This is being worked on here: https://github.com/cypress-io/cypress/issues/1909#issuecomment-395995180 , This is being worked on
In the meantime, you can change your test code to this, for example:
cy.get('.w2ui-select').siblings('.w2ui-field-helper').click()
cy.contains('Barack Obama').click()
Cypressautomatically checks for actionability before clicking, so no need for should('be.visible')
I am trying to show Loading animation using Ionic2 for long service progress report:
this.loading = this.loadingCtrl.create({
content: 'Please wait...',
spinner: 'ripple' // <<------ Is that correct?
});
this.loading.present();
The result is a text box without any spinner.
This is 09/22/2016 Ionic2 using latest beta (11) and I cannot actually find any example like above anywhere. Could this be a future feature documented but not yet implemented?
I am talking about the Ionic2 LoadingController documentations here
Is ripple a custom spinner? Otherwise, you can check the by default available spinners here:
ios
ios-small
bubbles
circles
crescent
dots
The spinner name should be passed in the spinner property, and any
optional HTML can be passed in the content property. If you do not
pass a value to spinner the loading indicator will use the spinner
specified by the mode. To set the spinner name across the app, set the
value of loadingSpinner in your app's config. To hide the spinner, set
loadingSpinner: 'hide' in the app's config or pass spinner: 'hide' in
the loading options
So another option, would be to just use the specified spynner according to the mode like this:
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loading.present();
Thing is it might be that the Ionic team just put a way of extending the Loading control using a custom spinner, meaning that you have to put a SVG file name to the property.
It just looks obvious that you can put there one of the built-in spinner names.
Then again, it is reasonable to keep the app's design straight with the same spinner in all loaders. Guess that could be more bolded in the docs...
Here's the fiddle. Here's the gist with the contents of my local file.
As you can see, the HTML and JavaScript are identical, and I'm loading identical versions of the jQuery, Handlebars.js, and Ember.js libraries. It works as expected locally, but does not render the application template on jsFiddle.net.
I see the following error in the Web Console:
[19:44:18.202] Error: assertion failed: You must pass at least an object and event name to Ember.addListener # https://github.com/downloads/emberjs/ember.js/ember-latest.js:51
BTW-To test the gist as a local HTML file, make sure to run it behind a web server or your browser won't download the JavaScript libs. If you have thin installed (ruby webserver), go to the directory it's in and run thin -A file start, then navigate to localhost:3000/jsfiddle-problem.html in your browser.
If you set the "Code Wrap" configuration on your fiddle to one of the options other than "onLoad" your application will work. Here is an example.
The reason for this is Ember initializes an application when the jQuery ready event fires (assuming you have not set Ember.Application.autoinit to false). With the jsFiddle "Code Wrap" configuration set to "onLoad" your application is introduced to the document after the jQuery ready event has fired, and consequently after Ember auto-initializes.
See the snippet below from ember-latest, taken on the day of this writing, which documents Ember auto-initialization being performed in a handler function passed to $().ready.
if (this.autoinit) {
var self = this;
this.$().ready(function() {
if (self.isDestroyed || self.isInitialized) return;
self.initialize();
});
}
This was strange - I couldn't get your fiddle working, specifically your {{controller.foo}} call until I disabled autoinit. I am guessing when using jsfiddle the application initialize kicks off before seeing your router. I also noticed with your fiddle the router was not logging any output even when you had enableLogging set to true.
I updated your fiddle to not use autoinit, http://jsfiddle.net/zS5uu/4/. I know a new version of ember-latest was released today, I wonder if anything about initialization changed.