I am trying to write tests for one of our rich text components which was implemented with slate js editor in react js. So when writing tests, I am retrieveing the element div[contenteditable='true'], but not able to simulate events like change, blur, focus. The handlers attached to editor component are not getting called. I tried multiple combinations, but no luck. Can someone please help on this? Is it possible to simulate events for contenteditable element using testing library (contenteditable is implemented using slatejs)?
Like you've discovered, contenteditable isn't supported by JSDOM. React Testing Library (RTL) is built on top of JSDOM, so it's not possible to test the Slate editor properly with RTL until JSDOM implements support for contenteditable.
Use a browser automation library together with Testing Library
Your options are then to use a tool that creates a real browser context. Testing Library have integrations with many tools that do exactly that: TestCafe, Cypress, Nightwatch, Puppeteer.
You can also use the above tools on their own, without Testing Library.
I've solved this using Puppeteer, and there are two approaches:
Run a local server and tell Puppeteer to go to something like localhost:3000
Set the content directly with page.setContent(htmlString)
(1) is the most common, and you'll find many guides for this since it's a common approach for end-to-end testing (google search).
(2) is a little trickier because you will have to transform and bundle your source for each test, and then inject it as HTML into the browser page. I prefer this approach because the testing experience is much more similar to using RTL. I've created a repository with an example of this setup with the Slate editor here: https://github.com/marcusstenbeck/puppeteer-react-testing-template/
Related
I am trying to automate UI testing of the extension for VS Code that has certain actions brought out into the SideBarView section as webview, self-written HTML that I want to access via Selenium webdriver (I use vscode-extension-tester package that provides almost every API necessary and is fantastically helpful, btw).
There's no problem accessing html from VS Code's DevTools, for example a button is exposed as "vscode-button" tag inside a webview's "iframe" tag, so I assume finding it by xpath might work:
let webElement = await driver.findElement(By.xpath('//vscode-button[contains(#onclick, "loadMarkers")]'));
But when I run Extension host for testing, its DOM does not contain webview code, so findElement() returns "undefined". If I understand correctly, it only has a reference to the webview tag with the pointer to vscode extension that handles webview content, so I have to switch to that webview somehow. Page source shows only "div" with webview link inside an "iframe":
<div id="webview-<id>"...
<iframe name="<id>" class="webview ready"... src="vscode-webview...;extensionId=<id>...;purpose=webviewView"...></iframe>
Haven't found anything in VS Code API document, currently reading about Electron webview API to understand if there are any other suggestions.
Vscode-extension-tester API provides switching to webview context from a different object, however. So I wondered if there is a generic way to do so.
https://github.com/redhat-developer/vscode-extension-tester/wiki/WebView
p.s. I began working on automated testing just a while ago, so I may miss something obvious (that would be great to have a solution at hand), but it looks like there are no easy ways to solve my problem at the moment. Would appreciate any help you can provide.
I am working on a React-Python/Flask app which takes input bpmn diagram image from user & through python scripts convert it into bpmn file which then can be downloaded through flask api on user's device. I am working on react UI. Now i have to edit the diagrams & apply some visualization to them. So how can i integrate yFiles for html BPMN editor in my app. I have already downloaded its evaluation package from yworks.com & integrated the pack in React following the demos. But now i am stuck because there are not much tutorials available specifically for yFiles with react. When i searched for it, i found lots of tutorials of bpmn.js with react. Please help me with how can i go about it. I am new to yFiles I have looked into yFiles evaluation pack tutorials and i still dont know how to go about it in react. Also i have to use yFiles only due to client's requirement. Thank you for any help.
yFiles for HTML is not a React component - in fact it's a plain JavaScript component, that is not based on any third party framework or even software.
This doesn't mean that you cannot integrate it into React or Angular or Vue.js or any other well-behaved JavaScript client framework. In fact yFiles has been built to support the integration into all of these frameworks and if it doesn't work with a specific framework, this usually indicates a short-coming or more likely a bug in the third party framework, rather than in yFiles! After all yFiles is just this: plain JavaScript that manages a part of your HTML5 DOM (one div element and all it children, to be precise), a few lines of CSS and the rest is just JavaScript. If your UI library can provide these basic requirements (and React does, of course), yFiles can be made to run with that framework.
As you said, there are these various integration samples available that show how to integrate third party frameworks and yFiles (both with yFiles being a "client" as well as yFiles hosting DOM snippets created and maintained by these third party frameworks: https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit
For React, there is actually an additional repo on GitHub (which is not part of the evaluation package): https://github.com/yWorks/yfiles-react-integration-basic
React is very opinionated about the way an application or component should work. yFiles does not follow the React approach (and I honestly believe it would be a bad idea if it did), but the component you build can. The idea is to create a custom React component that internally uses yFiles for HTML for the visualization, the editing, and the handling of the BPMN editor. Just like you would encapsulate a native HTML5 textarea and two buttons into a React component, you encapsulate the "div" that is used by yFiles to manage the BPMN visualization and editor.
The BPMN demo does not use React. In fact it uses plain old HTML and does not use any real framework for the UI. This means you need to (and can) take that code and wrap it into a custom React component.
With the node module version of yFiles for HTML and the es6 style sample code, this should not be too difficult. After all it's just JavaScript without any further dependencies.
There are no additional tutorials for yFiles in the context of React. However that should not be much of a problem as any tutorial that shows how to wrap a generic JavaScript component or how to create a new one from scratch should be applicable.
If you run into a specific issue, post your question here (if it's about React) or contact the support team at yWorks if you are sure this is a problem specific to yFiles and not a generic JavaScript problem. Of course StackOverflow might work, too, in the yFiles case, however there aren't that many yFiles developers that hang around at StackOverflow, I think. Most of the time it's me or someone from the yWorks team, anyway.
I have a React UI library that has a documentation site with interactive examples that run with CodeMirror + Babel.
The examples are written within the library repository itself and are read by the client side JS (CodeMirror) of the documentation site when the page is loaded.
I would like add tests to the project's CI server that runs when pull requests are created in order to guarantee the documentation site examples will run without deploying the documentation site itself.
What would be the best way to go about this?
Could it be implemented within a test framework like Mocha? I'd assume you could setup CodeMirror with text inside of it and then search the DOM for nodes that rendered.
Would a try/catch statement be needed? I've not found a hasError API within CodeMirror. Errors tend to bubble up the into the console and block further rendering on the page.
Can you help me with understanding and finding right way to start tests with using "mobile" methods (e.g. tap, swipe)?
I'm working with RF with ExtendedSelenium2Library, hybrid app (angularjs) is running with ionic. Simple tests with clicking elements are working properly. But what if I want to use tap or swipe (appium, ios library)? How to configure it? I've read many articles about it, but no idea how to start it up.
I will appreciate your help with this.
Selenum2Library supports a concept of actions.
You'll need to expose the inner selenium 2 library in your own package (I did that by extending the existing package and importing my extension instead - but you can also use a keyword that returns the internal library - there is one in selenium2library), and then you can create new keywords that adhere to the concept of actions.
http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/interactions/Actions.html
https://techblog.polteq.com/en/perform-a-sequence-of-actions-with-selenium-webdriver/
Very open ended, apologies in advance.
I've been going through the docs and searching google incessantly, but I'm wondering what steps I would need to take to use react with a non-browser JavaScript environment.
Some context on the environment:
The environment uses JavaScript to run a UI, it has http capabilities.
There is no html, css, document, window, HTMLElement, etc.
The environment does have the notion of a hierarchy, changes to the object hierarchy in JS cross the bridge and trigger a render through a graphics platform like OpenGL for instance. The environment does get input via keys and or a mouse.
If there's a roadmap to do this or something like an architecture diagram to refer to, that'd be fantastic.
Any help/advice is appreciated.
thanks in advance,
-dylan
ReactJS work with DOM, so environment need to have DOM structure, that means no HTML no DOM. Or you can use server render of React component, but you will get a string as result.
Read more here:
React.renderComponentToString