i am currently in a situation, where I am not able to fully test one of my components, because it renders a fluentUi DropDown and I have trouble to test if the correct items are bound to the dropdown.
What I wanted to try is to mock the fluent ui DropDown, but I do not get very far.
As far as I understood, it should be possible to mock a node module like this:
let module = require.requireActual("#fluentUi/react");
module.DropDown= jest.fn((props: IDropDownProps) => { return <>... some content</>; });
jest.mock("#fluentUi/react", () => { return module; });
But this does not have any impact on my tests. Am I on the right track or did I misunderstand something?
Thanks
I have investigated on this topic a bit more and ended up publishing a little example, where I am mocking the ui fabric modal.
It works fine. The mock only renders its properties, so I can assert within the snapshot, if the real life Modal gets consumed correctly.
https://github.com/Link631/MockingModulesWithJest/tree/master/mocking_with_jest
Related
I am struggling to understand, and don't find an example to exactly match what I am trying to achieve. Which is to have an MS Outlook ribbon bar icon, which when clicked displays a Dialogue Box. I played about with a demo, threw out superfluous functionality and got a Hello World going - but it is JQuery and I want to use to use AngularJs, to reuse much of an existing app.
Firstly, the example manifests all seem to have something like
<DesktopFormFactor>
<FunctionFile resid="functionFile" />
This seems to be for functions which are invoked when the user clicks an icon on the ribbon bar. Would I be correct to assume that I don't need that, if I just use a <script src=> tag to include an such files of functions?
My app will have only a single view, so whereas in the demo all *.js files have something like
// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
Would I be correct to assume that I need only have such call one, in the controller of my sole view?
Sorry if this seems pretty basic stuff, but all of the demos & docs seem to be close to what I want, but not exactly. Happy holidays!
Use of FunctionFile
FunctionFile specifies the source code file for operations that an add-in exposes through add-in commands(Ribbon buttons) that execute a JavaScript function instead of displaying UI.
Add-ins can decide either to display some UI in task pane or execute a javascript function in background. For UI-less add-ins, you will have to specify a FunctionFile.
In your case, FunctionFile can be ignored.
Use of Office.initialize
Office Add-ins include the Office.js library and the library expects your start-up code not to call any APIs until the library is fully loaded. There are two ways that your code can ensure that the library is loaded.
Use Office.initialize: An initialize event fires when the Office.js library is fully loaded and ready for user interaction. You can assign a handler to it.
Use Office.onReady: Office.onReady() is an asynchronous method that returns a Promise object while it checks to see if the Office.js library is fully loaded.
Examples:
Office.initialize = function () {
// Office is ready
};
Or
Office.onReady(function(info) {
if (info.host === Office.HostType.Outlook) {
// Based on host, decide what to display.
}
if (info.platform === Office.PlatformType.PC) {
// Make minor UI changes, if required.
}
});
In your case, you can use initialize/onReady once.
I know we should use unit tests for our reactjs components. But what I also want, is some way to manually test our components in isolation. Because we are working on small sprints in which we must deliver some finished component before having the page that first uses that component. And I want to see that full component really working (i.e. test integration with css and sub-components).
So to start with, I would like to see that new component rendered in black page that doesn't require that component directly, but to take that component name/path from a query-string parameter. And then I plan to add to that page some generic component configuration (e.g. a textbox with json representing the props to pass to that component).
The first problem I'm facing now is about how to configure webpack, webpack-dev-middleware, or webpack-dev-server to be able to load a component passed by parameter.
Anyone know how to that? Or a better way to handle this?
I would try something like this:
Set up an entry point that uses require.context.
Invoke require within that context based on your querystring. You should have you React component now. Render that through React.
In order to generate the test controls I would include the meta within the component using JSON Schema. The form controls could be then generated using some form generator such as plexus-form or tcomb-form.
I am guessing this is more of a groovy issue due to the geb implementation, but I'm wondering if there is any way to get intellisense to work with the geb page objects. I am also new to Java/Groovy (primarily C# development in the past) so there could be some things I'm just not quite understanding. I'm using Intellij, but I'd be happy if there is any IDE that could give me what I wanted.
As far as I can tell, Geb's implementation is that they have a Browser Class with a Page property and any methods or properties that are executed without the context of a specific Page instance will at runtime trigger a MissingMethod or MissingProperty exception, which Geb handles and re-routes to a corresponding method or property in the Page class that is currently set via the Page property in the Browser Class.
What this means for development is that when we're creating test cases, the IDE is unaware of which page instance is the current Browser Page property, thus no intellisense.
We experimented with creating instances of the pages and explicitly calling them, and also making our helper functions within the page classes static, both of which led to other issues.
For our shop, this is pretty much a deal breaker, but before we give up I wanted to see if any Geb or Groovy experts could offer some advice on how to get intellisense working, or could give us an indication of whether it is even possible.
EDIT: I found within the geb documentation a section on Strong Typing and IDE support that looked promising: http://www.gebish.org/manual/current/ide-and-typing.html#ide_support however, the examples provided fail. I pasted the example directly from geb documentation below, with comments showing where/why it fails:
HomePage homePage = browser.to HomePage //browser.to returns null, so this fails
homePage.loginButton.click()
LoginPage loginPage = browser.at LoginPage //browser.at returns boolean so this fails
SecurePage securePage = loginPage.login("user1", "password1")
//The only thing that I got to work, which seems messy is:
browser.to HomePage
HomePage homePage = browser.page
homePage.loginButton.click()
Ok... So, I had an old version of Geb somehow being pulled from my gradle cache. After fixing that problem and actually using Geb 0.9.2, the documented usage worked correctly: http://www.gebish.org/manual/current/ide-and-typing.html#ide_support
I am new to web programming and of course to YUI.
I tried using the overlay, chart and node-menunav.
Wanted to know if there is any option of creating these widgets using dynamic data coming in JSON format and updating the widgets as the new data comes in?
For us all the properties will come in JSON data from server and then using that data we need to render menubars, charts, property browser. Now i am not finding how to proceed with this requirement.
Thanks.
There is no default way of syncing widgets via Ajax. The only widget that comes by default with ways of updating its data is the DataTable widget. For the rest, and even for DataTable's attributes, you need to do it yourself.
However, if the data and widgets are complicated enough, you should consider using the YUI App Framework. The combination of Models and Views will help you a lot for creating complex layouts with widgets. Model will give you a way to link attributes to a JSON backend easily, specially if you're using a RESTful API endpoint. And View will give you tools for setting up the markup and reacting to events.
The Model's load and change events will let you know when the data updates. So in your view you'll be able to react to these events and set the corresponding attributes in your widgets:
var MyView = Y.Base.create('myView', Y.View, [], {
initializer: function () {
this.get('model').on('change', this._updateWidgets, this);
},
_updateWidgets: function () {
var model = this.get('model');
this.someWidget.set('someAttr', mode.get('someAttr'));
}
});
But as I said there is no right way of doing this. You can use whatever technique you like. The App framework is just a set of basic components that you can use to structure you application. It's designed for flexibility so it can accommodate many ways of using it. Other ways could use IO directly or use DataSources combined with Widget Plugins. This is a question with many correct answers.
Hi i was wondering if there is a module for nodejs which allows for simplistic widget creation in combination with mongoose as a datasource to create nice JQuery library (such as dojo or YUI) widgets.
for example when i setup my schema it would be nice to do something like (note code not runnable just pseudo)
var carSchema = {
carname: "String",
registration: "String",
mileage: "Number"}
methodCallback = function() {
car.find({}, ....) {
return results;
}
}
model.register("car", carSchema);
res.send(model.createWidget("listview", options, methodCallback()));
where createWidgets returns the html list view code and paging for the cars from the result i return in my callback. it would be nice if it integrated with REST so if i delete an item from the listview then it actions this on a connection to another method.
basically i want to try and remove all the difficulty of populating, deleting, updating, a widget on client side development.
"remove all the difficulty of populating, deleting, updating, a widget on client side development."
seems not very realistic as you always have to specify some specific CURD logic based on your needs.
For pure front end part, you may try AngularJS, which provide easy to use RESTful CURD service http://docs.angularjs.org/tutorial/step_11
if you are into more giant framework of full stack javascript (may not be Nodejs, Mongoose, Jquery widget), wakanda http://www.wakanda.org/features/studio may have something you are looking for as provide some widget integration with datasource.