Custom Header is not displayed in DOM content when using Enzyme or React Testing Library - ag-grid

We are using custom headers in ag-grid community version. We have written unit tests in both Enzyme and React testing Library.
Till ag-grid-community version "21.2.2", we are able to see the below customheader in DOM content.
<div class="ag-react-container">
<div>
<div class="customHeaderLabel">SanMake</div>
</div>
</div>
From version "22.1.0", we are unable to see the above DOM content in the unit tests. Could you please help with the solution. As we are having several unit tests written for custom headers, all the unit tests are failing - when we try to upgrade version to "22.1.0".

Related

Using Svelte JS framework with a Web Component library, how can I accomplish two-binding with the custom elements via the bind:value directive?

Note: There is a GitHub issue open on the Svelte repo for this very question.
https://github.com/sveltejs/svelte/issues/4838
While I understand that this may or may not someday become a feature of Svelte, what I am asking is how I can create a workaround today to support a third-party web component library like Shoelace or UI5, or Ionic with two-way binding?
Synopsis:
I have set up a Svelte app and successfully added a Web Component Library (Ex: Shoelace).
I write a line of code that uses two-way binding like:
<sl-input name="name" type="text" label="Name" bind:value={name}/>
I cannot two-way bind (bind:value={}) because the Svelte compiler doesn't recognize the valid bindings for the custom web components.
If there were a wrapper library that you know of, or some other thing I could do to make it work, that would be great.
I am not sure if this will work with libraries but it is worth a shot. For my custom component I just followed this answer.
Add this in your custom component:
<script>
export let onValueChange;
export let value;
$: onValueChange(value);
</script>
And add this when using the component (it will give an error until you add this)
<custom-component onValueChange="{(x) => value = x}"/>

Integrating React Component in a Binding.scala application

I would like to integrate react-table which is a React Component (can be seen in action here) in a Binding.scala application. I am however fairly new to both React and Binding.scala, and as such was wondering if there were any guides out there on how to proceed? Or if anyone has already done something similar?
PS: note that the gitter channel for Binding.scala specifically asks for general questions to be asked on here
I recently created some adapters for React and Binding.scala Interoperability. See https://github.com/Atry/ReactToBindingHtml.scala
The usage is basically as simple as import com.yang_bo.ReactToBindingHtml.Implicits._
import com.yang_bo.ReactToBindingHtml.Implicits._
val reactElement: ReactElement = ???
#html val realDom: Binding[Node] = {
// real DOM fieldset element
<fieldset>
<legend>
I am an `#html` literal that contains a React component
</legend>
{ reactElement }
</fieldset>
}

Protractor Testing not working

The question is related to protractor testing. I am testing an application using Protractor. I want to inspect one element but unable to get the solution. The HTML code for the element to be inspected is :
<span class="ng-binding"> Admitted(7)</span>
As in selenium we do
element(by.class....) is not possible here in protractor. So Can any one help me in this.
You can also inspect in protractor as
element(by.css('span ng-binding'))
or
element(by.css('ng-binding'));
If there are more than one element with class name "ng-binding",
then use
element.all(by.css('ng-binding'))
to inspect element.

Custom Lift tags don't work

The following types of tags in Lift do not seem to work for me:
<lift:snippet type="MyClass:render" />
<lift:MyClass.render/>
<lift:MyClass/>
Using these tags results in a Class Not Found error. If I attempt to call a class using
<div class=lift:myclass.mymethod />
it can work. Or if I call it using span tags. For instance, the Hello World example in Pollak's Simply Lift works for me, successfully displaying the Howdy method with the following code:
<span class="lift:helloWorld.howdy">
Welcome to your Lift app at <span id="time">Time goes here</span>
</span>
Currently, my problem is coming from attempting to implement Exploring Lift's (aka The Lift Book) OpenID example in Chapter 13.1. I have downloaded OpenID4Java using sbt as well as the lift-openid library. That example can be found at http://exploring.liftweb.net/master/index-13.html. I have implemented the change to the Boot class, and created the OpenID class and the SimpleOpenIDVendor class. But creating an html file containing
<lift:OpenID.form>
<openId:renderForm/>
</lift:OpenID.form>
causes the following error to be displayed in the browser:
Error processing snippet: openid.form
Reason: Class Not Found
XML causing this error:
<lift:openid.form xmlns="http://www.w3.org/1999/xhtml">
<openid:renderform>
</openid:renderform></lift:openid.form>
The class OpenID was placed in a package that starts with the package code, which is being implicitly found by Lift. It is included in the Boot.scala file with the line
LiftRules.addToPackages("code")
So, I am at a loss. Any ideas?
Note that other lift tags such as lift:bind-at and lift:surround and the like work fine.
As dave posted under my original comment, the problem was the HTML5 parser. Lift is case-sensitive, and cannot find a class with varying case. Since the HTML5 parser automatically makes tags lowercase, you can't use custom lift tags anymore. Instead, you have to use something like
<div class="Lift:MyClass.render"></div>
Note that you CANNOT have
<div class="Lift:MyClass.render" />
as HTML5 apparently does not support such tags.
My OpenID4Java problem is therefore resolved by using:
<div class="lift:OpenID.renderForm">
</div>
Why I don't need to use openid.form still is uncertain. It could be possible I'm implementing it slightly off, but I confirmed that it will take me to an openid login page if I put in the openid link, so it is indeed functional.
Sources:
http://groups.google.com/forum/#!topic/liftweb/H-xe1uRLW1c
https://groups.google.com/group/liftweb/browse_thread/thread/3948df1eee6ec271/ (thanks fmpwizard)

The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form>

Here is my form:
<form action="j_security_check">
<h:panelGrid columns="2" bgcolor="#eff5fa" cellspacing="5" frame="box" styleClass="center">
<h:outputLabel value="User ID:"/>
<h:inputText id="j_username" tabindex="1" />
<h:outputLabel value="Password:"/>
<h:inputSecret id="j_password"/>
<h:outputLabel value=""/>
<h:commandButton id="login" value="Login"/>
</h:panelGrid>
</form>
It work fine with Glassfish 3.0.1, but since Glassfish 3.1 b2 it shows this warning as a FacesMessage in the JSF page:
The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form>
If I change the <form action="j_security_check"> to <h:form>, it does not fix it, I have to place the <h:form> inside the <h:panelGrid>.
This is just a Warning not an Error. Warnings are usually there to inform the developer about unforeseen situations/conditions which might not immediately cause technical errors/problems. Anything may just work flawlessly, but the behaviour/results may probably not be as the developer intented. A newbie developer may for example accidently have used <form> instead of <h:form>. Warnings like this are then helpful.
In your particular case, you are simply forced to use <form> because of the need to submit to a non-JSF service. You as a more experienced developer know that it's legitimately valid. You can just ignore this warning. This warning will only appear when javax.faces.PROJECT_STAGE is set to Development anyway and not appear when it is set to Production.
However, that it still displays the warning when there's another component like panelgrid in between the form and its input children, is a bug to me. I'd report it to the Mojarra guys. It look like as if it is checking the immediate parent only and not all of the parents. Update: it has been fixed as per Mojarra 2.1.3/2.2, see also issue 2147.
This is by the way not Glassfish specific. The newer GF version of course ships with a newer Mojarra version which has those warnings implemented. See also issue 1663.
Related questions:
The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form>
This was suggested to me by Oleg from the PrimeFaces forum and works:
<h:form id="login" prependId="false"
onsubmit="document.getElementById('login').action='j_security_check';">
Regards,
Brendan.
It only shows if you are in JSF Development based on your web config.
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
When you change it to Production it wont show anymore
If anyone will find this usefull one day,
i had same error and the problem was that i have primefaces component
<p:something ....
and that component was not inside <h:form> element
I'm using Mojarra 2.1.27 and find out that this is my mistakes. However its just very hard to find what the mistakes was. Hopefully someone from Mojarra could add component id to the warning messages.
Here is what I did to found out the component: (which also posted to https://code.google.com/p/primefaces/issues/detail?id=1586#c48)
I trace it by downloading the Mojarra source code and adding break point to com.sun.faces.context.FacesContextImpl class in method:
public void addMessage(String clientId, FacesMessage message).
when the break point catch, open the Debugging window or call stack window to find out that it was called by class
com.sun.faces.application.view.FormOmittedChecker
in method
private static void addFormOmittedMessage(FacesContext context)
which is previously called by method
public static void check(FacesContext context).
inside the check method there is parameter variable component.
You can get the component id from Watch or variable window and then trace it back to your html page and code.
Its a hard way, but hope you can find the root of the problems. It will be much more simpler if the warning message also display the problematic component id
In my case, this warning message was displayed in p:messages which I've put in dialog to show validation errors, so I've just included severity="error"in p:messages and warning message was gone.