Problems with applications using Material UI

[shilman]

Issue by treyspiva
Tuesday Mar 07, 2017 at 14:45 GMT
Originally opened as storybook-eol/storyshots#83

---

Our application uses Material UI. I am trying to test the application UI Structure using Story Shots. However, I am running into a few problems. Some I have worked around, however one I have not.

Able to Work Around
In material-ui/src/internal/EnhancedButton.js they are doing a few things during the componentDidMount event. Examples are:

• call injectStyle, uses document.createElement and document.body.appendChild to create the style element.
• call listenForTabPresses, which calls Events.on and passes in the window object. The Events class calls the following methods addEventListener, removeEventListener, attachEvent, and detachEvent

However, since Story Shots does not have a DOM the window and document objects was not present. I was able to get past these problems by providing a global mock.

global.document = {
    createElement: function () {
        return {}
    },
    body: {
        appendChild: function () {
        }
    },
    getElementById: function() {return null;},
    addEventListener: function() {},
    removeEventListener: function() {},
    attachEvent: function() {},
    detachEvent: function() {}
}
global.window = {
    addEventListener: function() {},
    removeEventListener: function() {},
    attachEvent: function() {},
    detachEvent: function() {}
};

Not Able to Work Around
Some components are using refs. For example in the DropDownMenu.js they are using a ref to get the components rootNode.

<div ... ref={(node) => { this.rootNode = node; }}  ...>
   ...
</div>

Since Story Shots does not have a DOM the node is undefined. Therefore this.rootNode is undefined and the component throws an error when rendering.

Does anyone know of any workarounds to the ref problem?

[tmeasday]

Hi @treyspiva -- if you are still having this problem, you may be able to get some way round this problem by providing a custom test function to storyshots and then using a custom createNodeMock.

Let me know how that goes