I recently migrated an app to mui v4, which I love.
Also done is updating our test suite that runs with jest/enzyme. For example I now favor mount instead of shallow.
One problem is that I cannot find a way to test icons presence.
I am using all latest version of material-ui, react and tooling like jest/enzyme, etc, at the time of writing
In MUI source code, I see things like this in the spec files:
wrapper.find('svg[data-mui-test="KeyboardArrowLeftIcon"]'
Here is in createSvgIcon source how this prop declared:
<SvgIcon {...props} data-mui-test={`${displayName}Icon`} ref={ref}>
HOWEVER, I cannot find any reference to that data-mui-test prop in my own node_modules file in #material-ui/icons/utils/createSvgIcon.js:
var Component = _react.default.memo(_react.default.forwardRef(function (props, ref) {
return _react.default.createElement(_SvgIcon.default, (0, _extends2.default)({
ref: ref
}, props), path);
}));
And, as a matter of fact, wrapper.debug() in the tests shows that the prop is absent from the DOM:
[...]
<svg
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
color={[undefined]}
aria-hidden="true"
role="presentation">
[...]
Questions
Why is data-mui-test prop is removed from generated npm module code?
Is this still the right way to test icons presence? (as suggested here by mui team member)
The standard testing technique of data-testid works for these icons, i.e.:
<Warning color="warning" data-testid="warning-icon" />
Then in your test
expect(documentBody.getByTestId('warning-icon')).toBeInTheDocument();
Related
I notice that in Material UI Dialog, sometimes it doesn't display the correct layout. For example:
These are the same component. However, it displays different styles. The second style is the one I want it to be. It's really inconsistent. Sometimes it displays the second one, but sometimes it shows the first one. Does anyone know what's going on? I didn't override any textfield styles at all, I just override the global primary colour and font.
My textfield component:
<TextField
error = {error.firstName? true: false}
label="First name" variant="outlined"
name = "user.firstName"
value = {props.newUser.firstName}
onChange = {e => {
props.setUser((prevUser) => ({
...prevUser,
...{firstName: e.target.value} }
));
}}
helperText = {error.firstName && error.firstName}
fullWidth
/>
Are you currently migrating to v5? If yes, I would guess that you still have #material-ui/core in your bundle because it is a peer dependency of some other dependency that you have.
Try running yarn why #material-ui/core (or npm ls #material-ui/core) and check if this is the case.
You would need to upgrade the dependencies that depend on #material-ui/core to the specific version that depends on #mui/material.
I'm creating an electron-app that uses Microsoft fluent-ui lib. I have added the reference #fluentui/react": "^7.107.1 to the package.json file. When I then create a Dropdown like this
<Dropdown
label='Time zone'
onChange={(e, option) => this.updateTimeZone(..)}
/>
The caret with the drop down icon is missing.
When inspecting the element, it seems as the i-tag is empty and does not have the right font applied in the css-class, when compared to examples in the documentation.
Could someone see what I'm doing wrong?
By default, the Fabric icons are not added to your bundle, in order to save bytes for scenarios where you don't care about icons, or you only care about a subset.
To make them available, you may initialize them as such:
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
initializeIcons(/* optional base url */);
After update from v3 to v4.8.3 do not work customizing components. My goal is to override Select component to get text color 'red'.
const styles = theme => ({ temp: { fontSize: 12, color: "red" })
...
<Select classes={{ root: classes.temp }} ....> ...</Select>
but MuiInputBase-input class always stay on top.
https://i.imgur.com/JGK7J89.png
I see that there are diffrents in styles loading by html head import, my current version(v4) is:
https://i.imgur.com/gAlECET.png
I see that import is doubled, and overrides my custom style.
On v3 all mui styles imports was placed on top of list and not mixed vs custom styles. I cant find more info to get solution and reason of doubling imports. where error may arise?
edit:
i must give some more details...
Problem appered after a big legacy project was updated. For represet my problem, i cut most of code and create demo on codesandbox .
Unfortunately it work fine on codesandbox, and dont let see a problem. if i download zip and start it - i have my problem. Tried on two machine ubuntu 18.04 and MacOS, both have that problem - colour red dont applied to second select. Some more detail are in issue if it will helpfull for someone. Reason in solution below
I have created sandbox for you where you can see the overwritten menu items.
Code sandbox: https://codesandbox.io/s/override-select-component-material-ui-c1io6?fontsize=14&hidenavigation=1&theme=dark
The reason was that nested component has wrong import statement. Wrong import that was work "properly" in v3 for some reason:
import InputBase from "#material-ui/core/InputBase/InputBase";
must be:
import InputBase from "#material-ui/core/InputBase";
becouse it, my styles was overriding by base style
Visual Studio Code with Native Script does not recognise Native Script components sometimes in the component XML. I have one from the official tutorial and in it the ActionBar is recognized - but GridLayout is not:
'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
XML looks like this:
<ActionBar title="Groceries">
<!-- On iOS devices, <ActionItem>s are placed from left to right in sequence; you can override that (as the code above does) by providing an ios.position attribute. -->
<ActionItem text="Share" (tap)="share()" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
<!-- add-bar necessary since we moved the page up 20 over the status bar on iOS-->
<GridLayout row="0" columns="*, auto" class="add-bar">
<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" (returnPress)="add()" col="0"></TextField>
<Image src="res://add" (tap)="add()" col="1"></Image>
</GridLayout>...
It seems totally arbitrary since for example StackLayout is no problem in another XML in same project.
As suggested in the error log make sure that you have included NO_ERRORS_SCHEMA in the respective NgModule (if using lazily loaded modules include the schema there as well)
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
#NgModule({
schemas: [NO_ERRORS_SCHEMA],
//... more code follows here
Side note: it might be just an incomplete snippet but still... the parent GridLayout does not have an enclosing tag
In my case, it was happening just for one component html though NO_ERRORS_SCHEMA was included in respective module of that file, deleting and creating that file solved the issue for me strange but it did happen.
JSDoc outputs a date in the footer of each page:
<footer>
Documentation generated by JSDoc 3.2.0 on Fri Jan 17 2014 14:30:54 GMT-0800 (PST)
</footer>
So whenever I rebuild my library, all the documentation files look like they've changed to Git. That's not desirable -- I only want to commit these docs when they actually change in content.
Can I cause JsDoc to not output this footer at all?
I submitted a PR for this issue (https://github.com/jsdoc3/jsdoc/pull/916), and it's now on the 3.3.0 branch.
This change was not published to NPM at the time I'm writing this answer, but you can require the 3.3.0 branch from git:
"jsdoc": "git+https://git#github.com/jsdoc3/jsdoc.git#releases/3.3"
Afterwards, you can add the following field to your config file:
{
...
"templates": {
...
"default": {
"includeDate": false
}
},
...
}
Notice this option is only available for the default jsdoc template.
I have some modest experience with creating jsdoc 3 templates and I've looked at the code to check what you are asking. Here is what I found:
<footer> is hardcoded in the default template's layout.tmpl file. By hardcoded, I mean the element itself is not optional.
I've not seen any code in the default template's publish.js file that would somehow remove <footer> when processing layout.tmpl.
So to remove this footer you'd have to use a customized template or do some sort of post-processing on the files generated by jsdoc 3.
With versions prior to 3.3.0, removing <footer> from the template would mean copying the whole default template and making the change to layout.tmpl. Version 3.3.0, which is currently in alpha, will provide the possibility to basically tell jsdoc 3 to use the default template but with a different layout.tmpl file, which will make customizing templates much easier.