Skip to content
Snippets Groups Projects
Commit 84f16af3 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

Merge branch 'rtl/welcome-modal' into 'dev' 

test(rtl): welcome modal

See merge request !1059
parents 57581d16 0374df5e
Branches
No related tags found
2 merge requests!10622.7 Release,!1059test(rtl): welcome modal
Hide whitespace changes
Inline Side-by-side
src/components/WelcomeModal/WelcomeModal.spec.tsx
+ 34
− 38
View file @ 84f16af3
import { Button, IconButton } from '@material-ui/core' import { render, screen } from '@testing-library/react'
import { mount } from 'enzyme' import userEvent from '@testing-library/user-event'
import toJson from 'enzyme-to-json'
import React from 'react' import React from 'react'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice' import * as profileActions from 'store/profile/profile.slice'
...@@ -41,58 +40,55 @@ jest.mock('services/profile.service') ...@@ -41,58 +40,55 @@ jest.mock('services/profile.service')
const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile') const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
describe('WelcomeModal component', () => { describe('WelcomeModal component', () => {
beforeEach(() => {
jest.clearAllMocks()
})
const store = createMockEcolyoStore() const store = createMockEcolyoStore()
it('should be rendered correctly', () => { it('should be rendered correctly', () => {
const component = mount( const { baseElement } = render(
<Provider store={store}> <Provider store={store}>
<WelcomeModal open={true} /> <WelcomeModal open={true} />
</Provider> </Provider>
) )
expect(toJson(component)).toMatchSnapshot() expect(baseElement).toMatchSnapshot()
expect(screen.getByRole('dialog')).toBeInTheDocument()
}) })
it('should not be rendered', () => { it('should not be rendered', () => {
const component = mount( const { container } = render(
<Provider store={store}> <Provider store={store}>
<WelcomeModal open={false} /> <WelcomeModal open={false} />
</Provider> </Provider>
) )
expect(toJson(component)).toMatchSnapshot() expect(container.firstChild).toBeNull()
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
}) })
it('should send mail and update profile when user click on the ok button', async () => { describe('should test modal interactivity', () => {
const component = mount( beforeEach(() => {
<Provider store={store}> render(
<WelcomeModal open={true} /> <Provider store={store}>
</Provider> <WelcomeModal open={true} />
) </Provider>
component.find(Button).first().simulate('click') )
expect(mockSendMail).toHaveBeenCalled() })
expect(updateProfileSpy).toHaveBeenCalledWith({ it('should send mail and update profile when user click on the ok button', async () => {
isFirstConnection: false, await userEvent.click(screen.getAllByRole('button')[1])
onboarding: { expect(mockSendMail).toHaveBeenCalled()
isWelcomeSeen: true, expect(updateProfileSpy).toHaveBeenCalledWith({
}, isFirstConnection: false,
onboarding: {
isWelcomeSeen: true,
},
})
}) })
})
it('should send mail and update profile when modal is closed by user', async () => { it('should send mail and update profile when modal is closed by user', async () => {
const component = mount( await userEvent.click(screen.getAllByRole('button')[0])
<Provider store={store}> expect(mockSendMail).toHaveBeenCalled()
<WelcomeModal open={true} /> expect(updateProfileSpy).toHaveBeenCalledWith({
</Provider> isFirstConnection: false,
) onboarding: {
component.find(IconButton).first().simulate('click') isWelcomeSeen: true,
expect(mockSendMail).toHaveBeenCalled() },
expect(updateProfileSpy).toHaveBeenCalledWith({ })
isFirstConnection: false,
onboarding: {
isWelcomeSeen: true,
},
}) })
}) })
}) })
src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+ 105
− 1399
View file @ 84f16af3
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WelcomeModal component should be rendered correctly 1`] = ` exports[`WelcomeModal component should be rendered correctly 1`] = `
<Provider <body
store={ style="padding-right: 0px; overflow: hidden;"
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
> >
<WelcomeModal <div
open={true} aria-hidden="true"
/>
<div
class="MuiDialog-root modal-root"
role="presentation"
style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
> >
<WithStyles(ForwardRef(Dialog)) <div
aria-labelledby="accessibility-title" aria-hidden="true"
classes={ class="MuiBackdrop-root"
Object { style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
"paper": "modal-paper", />
"root": "modal-root", <div
} data-test="sentinelStart"
} tabindex="0"
onClose={[Function]} />
open={true} <div
class="MuiDialog-container MuiDialog-scrollPaper"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
> >
<ForwardRef(Dialog) <div
aria-labelledby="accessibility-title" aria-labelledby="accessibility-title"
classes={ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
Object { role="dialog"
"container": "MuiDialog-container",
"paper": "MuiDialog-paper modal-paper",
"paperFullScreen": "MuiDialog-paperFullScreen",
"paperFullWidth": "MuiDialog-paperFullWidth",
"paperScrollBody": "MuiDialog-paperScrollBody",
"paperScrollPaper": "MuiDialog-paperScrollPaper",
"paperWidthFalse": "MuiDialog-paperWidthFalse",
"paperWidthLg": "MuiDialog-paperWidthLg",
"paperWidthMd": "MuiDialog-paperWidthMd",
"paperWidthSm": "MuiDialog-paperWidthSm",
"paperWidthXl": "MuiDialog-paperWidthXl",
"paperWidthXs": "MuiDialog-paperWidthXs",
"root": "MuiDialog-root modal-root",
"scrollBody": "MuiDialog-scrollBody",
"scrollPaper": "MuiDialog-scrollPaper",
}
}
onClose={[Function]}
open={true}
> >
<ForwardRef(Modal) <div
BackdropComponent={ id="accessibility-title"
Object {
"$$typeof": Symbol(react.forward_ref),
"Naked": Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"children": [Function],
"className": [Function],
"classes": [Function],
"invisible": [Function],
"open": [Function],
"transitionDuration": [Function],
},
"render": [Function],
},
"displayName": "WithStyles(ForwardRef(Backdrop))",
"options": Object {
"defaultTheme": Object {
"breakpoints": Object {
"between": [Function],
"down": [Function],
"keys": Array [
"xs",
"sm",
"md",
"lg",
"xl",
],
"only": [Function],
"up": [Function],
"values": Object {
"lg": 1280,
"md": 960,
"sm": 600,
"xl": 1920,
"xs": 0,
},
"width": [Function],
},
"direction": "ltr",
"mixins": Object {
"gutters": [Function],
"toolbar": Object {
"@media (min-width:0px) and (orientation: landscape)": Object {
"minHeight": 48,
},
"@media (min-width:600px)": Object {
"minHeight": 64,
},
"minHeight": 56,
},
},
"overrides": Object {},
"palette": Object {
"action": Object {
"activatedOpacity": 0.12,
"active": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.26)",
"disabledBackground": "rgba(0, 0, 0, 0.12)",
"disabledOpacity": 0.38,
"focus": "rgba(0, 0, 0, 0.12)",
"focusOpacity": 0.12,
"hover": "rgba(0, 0, 0, 0.04)",
"hoverOpacity": 0.04,
"selected": "rgba(0, 0, 0, 0.08)",
"selectedOpacity": 0.08,
},
"augmentColor": [Function],
"background": Object {
"default": "#fafafa",
"paper": "#fff",
},
"common": Object {
"black": "#000",
"white": "#fff",
},
"contrastThreshold": 3,
"divider": "rgba(0, 0, 0, 0.12)",
"error": Object {
"contrastText": "#fff",
"dark": "#d32f2f",
"light": "#e57373",
"main": "#f44336",
},
"getContrastText": [Function],
"grey": Object {
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"50": "#fafafa",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"A100": "#d5d5d5",
"A200": "#aaaaaa",
"A400": "#303030",
"A700": "#616161",
},
"info": Object {
"contrastText": "#fff",
"dark": "#1976d2",
"light": "#64b5f6",
"main": "#2196f3",
},
"primary": Object {
"contrastText": "#fff",
"dark": "#303f9f",
"light": "#7986cb",
"main": "#3f51b5",
},
"secondary": Object {
"contrastText": "#fff",
"dark": "#c51162",
"light": "#ff4081",
"main": "#f50057",
},
"success": Object {
"contrastText": "rgba(0, 0, 0, 0.87)",
"dark": "#388e3c",
"light": "#81c784",
"main": "#4caf50",
},
"text": Object {
"disabled": "rgba(0, 0, 0, 0.38)",
"hint": "rgba(0, 0, 0, 0.38)",
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)",
},
"tonalOffset": 0.2,
"type": "light",
"warning": Object {
"contrastText": "rgba(0, 0, 0, 0.87)",
"dark": "#f57c00",
"light": "#ffb74d",
"main": "#ff9800",
},
},
"props": Object {},
"shadows": Array [
"none",
"0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
"0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
"0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
"0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
],
"shape": Object {
"borderRadius": 4,
},
"spacing": [Function],
"transitions": Object {
"create": [Function],
"duration": Object {
"complex": 375,
"enteringScreen": 225,
"leavingScreen": 195,
"short": 250,
"shorter": 200,
"shortest": 150,
"standard": 300,
},
"easing": Object {
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
"easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
"sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
},
"getAutoHeightDuration": [Function],
},
"typography": Object {
"body1": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1rem",
"fontWeight": 400,
"letterSpacing": "0.00938em",
"lineHeight": 1.5,
},
"body2": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.875rem",
"fontWeight": 400,
"letterSpacing": "0.01071em",
"lineHeight": 1.43,
},
"button": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.875rem",
"fontWeight": 500,
"letterSpacing": "0.02857em",
"lineHeight": 1.75,
"textTransform": "uppercase",
},
"caption": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.75rem",
"fontWeight": 400,
"letterSpacing": "0.03333em",
"lineHeight": 1.66,
},
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": 14,
"fontWeightBold": 700,
"fontWeightLight": 300,
"fontWeightMedium": 500,
"fontWeightRegular": 400,
"h1": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "6rem",
"fontWeight": 300,
"letterSpacing": "-0.01562em",
"lineHeight": 1.167,
},
"h2": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "3.75rem",
"fontWeight": 300,
"letterSpacing": "-0.00833em",
"lineHeight": 1.2,
},
"h3": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "3rem",
"fontWeight": 400,
"letterSpacing": "0em",
"lineHeight": 1.167,
},
"h4": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "2.125rem",
"fontWeight": 400,
"letterSpacing": "0.00735em",
"lineHeight": 1.235,
},
"h5": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1.5rem",
"fontWeight": 400,
"letterSpacing": "0em",
"lineHeight": 1.334,
},
"h6": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1.25rem",
"fontWeight": 500,
"letterSpacing": "0.0075em",
"lineHeight": 1.6,
},
"htmlFontSize": 16,
"overline": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.75rem",
"fontWeight": 400,
"letterSpacing": "0.08333em",
"lineHeight": 2.66,
"textTransform": "uppercase",
},
"pxToRem": [Function],
"round": [Function],
"subtitle1": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1rem",
"fontWeight": 400,
"letterSpacing": "0.00938em",
"lineHeight": 1.75,
},
"subtitle2": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.875rem",
"fontWeight": 500,
"letterSpacing": "0.00714em",
"lineHeight": 1.57,
},
},
"zIndex": Object {
"appBar": 1100,
"drawer": 1200,
"mobileStepper": 1000,
"modal": 1300,
"snackbar": 1400,
"speedDial": 1050,
"tooltip": 1500,
},
},
"name": "MuiBackdrop",
},
"propTypes": Object {
"classes": [Function],
"innerRef": [Function],
},
"render": [Function],
"useStyles": [Function],
}
}
BackdropProps={
Object {
"transitionDuration": Object {
"enter": 225,
"exit": 195,
},
}
}
className="MuiDialog-root modal-root"
closeAfterTransition={true}
disableEscapeKeyDown={false}
onClose={[Function]}
open={true}
> >
<ForwardRef(Portal) onboarding.welcomeModal.accessibility.window_title
disablePortal={false} </div>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
> >
<Portal <svg
containerInfo={ class="styles__icon___23x3R"
<body height="16"
style="padding-right: 0px; overflow: hidden;" width="16"
> >
<div <use
class="MuiDialog-root modal-root" xlink:href="#function () {
role="presentation"
style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
<div
aria-hidden="true"
class="MuiBackdrop-root"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
/>
<div
data-test="sentinelStart"
tabindex="0"
/>
<div
class="MuiDialog-container MuiDialog-scrollPaper"
role="none presentation"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
aria-labelledby="accessibility-title"
class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
role="dialog"
>
<div
id="accessibility-title"
>
onboarding.welcomeModal.accessibility.window_title
</div>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
class="styles__icon___23x3R"
height="16"
width="16"
>
<use
xlink:href="#function () {
return fn.apply(this, arguments); return fn.apply(this, arguments);
}" }"
/> />
</svg> </svg>
</span> </span>
<span <span
class="MuiTouchRipple-root" class="MuiTouchRipple-root"
/> />
</button> </button>
<div <div
class="info" class="info"
> >
<h1 <h1
class="info-header text-24-bold" class="info-header text-24-bold"
> >
onboarding.welcomeModal.title onboarding.welcomeModal.title
</h1> </h1>
<div <div
class="info-content text-16-normal" class="info-content text-16-normal"
> >
<p> <p>
onboarding.welcomeModal.part1 onboarding.welcomeModal.part1
</p> </p>
<p> <p>
onboarding.welcomeModal.part2 onboarding.welcomeModal.part2
</p> </p>
</div> </div>
<div <div
class="info-footer" class="info-footer"
> >
<svg <svg
class="styles__icon___23x3R" class="styles__icon___23x3R"
height="191" height="191"
width="191" width="191"
> >
<use <use
xlink:href="#function () { xlink:href="#function () {
return fn.apply(this, arguments); return fn.apply(this, arguments);
}" }"
/> />
</svg> </svg>
<button <button
aria-label="onboarding.welcomeModal.accessibility.button_valid" aria-label="onboarding.welcomeModal.accessibility.button_valid"
class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0" tabindex="0"
type="button" type="button"
>
<span
class="MuiButton-label"
>
onboarding.welcomeModal.button_valid
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
<div
data-test="sentinelEnd"
tabindex="0"
/>
</div>
</body>
}
> >
<div <span
className="MuiDialog-root modal-root" class="MuiButton-label"
onKeyDown={[Function]}
role="presentation"
style={
Object {
"bottom": 0,
"left": 0,
"position": "fixed",
"right": 0,
"top": 0,
"zIndex": 1300,
}
}
> >
<WithStyles(ForwardRef(Backdrop)) onboarding.welcomeModal.button_valid
onClick={[Function]} </span>
open={true} <span
transitionDuration={ class="MuiTouchRipple-root"
Object { />
"enter": 225, </button>
"exit": 195, </div>
} </div>
} </div>
> </div>
<ForwardRef(Backdrop) <div
classes={ data-test="sentinelEnd"
Object { tabindex="0"
"invisible": "MuiBackdrop-invisible", />
"root": "MuiBackdrop-root", </div>
} </body>
}
onClick={[Function]}
open={true}
transitionDuration={
Object {
"enter": 225,
"exit": 195,
}
}
>
<ForwardRef(Fade)
in={true}
onClick={[Function]}
timeout={
Object {
"enter": 225,
"exit": 195,
}
}
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onClick={[Function]}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={
Object {
"enter": 225,
"exit": 195,
}
}
unmountOnExit={false}
>
<div
aria-hidden={true}
className="MuiBackdrop-root"
onClick={[Function]}
style={
Object {
"opacity": 1,
"visibility": undefined,
}
}
/>
</Transition>
</ForwardRef(Fade)>
</ForwardRef(Backdrop)>
</WithStyles(ForwardRef(Backdrop))>
<Unstable_TrapFocus
disableAutoFocus={false}
disableEnforceFocus={false}
disableRestoreFocus={false}
getDoc={[Function]}
isEnabled={[Function]}
open={true}
>
<div
data-test="sentinelStart"
tabIndex={0}
/>
<ForwardRef(Fade)
appear={true}
in={true}
onEnter={[Function]}
onExited={[Function]}
role="none presentation"
tabIndex="-1"
timeout={
Object {
"enter": 225,
"exit": 195,
}
}
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
role="none presentation"
tabIndex="-1"
timeout={
Object {
"enter": 225,
"exit": 195,
}
}
unmountOnExit={false}
>
<div
className="MuiDialog-container MuiDialog-scrollPaper"
onMouseDown={[Function]}
onMouseUp={[Function]}
role="none presentation"
style={
Object {
"opacity": 1,
"visibility": undefined,
}
}
tabIndex="-1"
>
<WithStyles(ForwardRef(Paper))
aria-labelledby="accessibility-title"
className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
elevation={24}
role="dialog"
>
<ForwardRef(Paper)
aria-labelledby="accessibility-title"
className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
classes={
Object {
"elevation0": "MuiPaper-elevation0",
"elevation1": "MuiPaper-elevation1",
"elevation10": "MuiPaper-elevation10",
"elevation11": "MuiPaper-elevation11",
"elevation12": "MuiPaper-elevation12",
"elevation13": "MuiPaper-elevation13",
"elevation14": "MuiPaper-elevation14",
"elevation15": "MuiPaper-elevation15",
"elevation16": "MuiPaper-elevation16",
"elevation17": "MuiPaper-elevation17",
"elevation18": "MuiPaper-elevation18",
"elevation19": "MuiPaper-elevation19",
"elevation2": "MuiPaper-elevation2",
"elevation20": "MuiPaper-elevation20",
"elevation21": "MuiPaper-elevation21",
"elevation22": "MuiPaper-elevation22",
"elevation23": "MuiPaper-elevation23",
"elevation24": "MuiPaper-elevation24",
"elevation3": "MuiPaper-elevation3",
"elevation4": "MuiPaper-elevation4",
"elevation5": "MuiPaper-elevation5",
"elevation6": "MuiPaper-elevation6",
"elevation7": "MuiPaper-elevation7",
"elevation8": "MuiPaper-elevation8",
"elevation9": "MuiPaper-elevation9",
"outlined": "MuiPaper-outlined",
"root": "MuiPaper-root",
"rounded": "MuiPaper-rounded",
}
}
elevation={24}
role="dialog"
>
<div
aria-labelledby="accessibility-title"
className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
role="dialog"
>
<div
id="accessibility-title"
>
onboarding.welcomeModal.accessibility.window_title
</div>
<WithStyles(ForwardRef(IconButton))
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="modal-paper-close-button"
onClick={[Function]}
>
<ForwardRef(IconButton)
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="modal-paper-close-button"
classes={
Object {
"colorInherit": "MuiIconButton-colorInherit",
"colorPrimary": "MuiIconButton-colorPrimary",
"colorSecondary": "MuiIconButton-colorSecondary",
"disabled": "Mui-disabled",
"edgeEnd": "MuiIconButton-edgeEnd",
"edgeStart": "MuiIconButton-edgeStart",
"label": "MuiIconButton-label",
"root": "MuiIconButton-root",
"sizeSmall": "MuiIconButton-sizeSmall",
}
}
onClick={[Function]}
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="onboarding.welcomeModal.accessibility.button_valid"
centerRipple={true}
className="MuiIconButton-root modal-paper-close-button"
disabled={false}
focusRipple={true}
onClick={[Function]}
>
<ForwardRef(ButtonBase)
aria-label="onboarding.welcomeModal.accessibility.button_valid"
centerRipple={true}
className="MuiIconButton-root modal-paper-close-button"
classes={
Object {
"disabled": "Mui-disabled",
"focusVisible": "Mui-focusVisible",
"root": "MuiButtonBase-root",
}
}
disabled={false}
focusRipple={true}
onClick={[Function]}
>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span
className="MuiIconButton-label"
>
<Icon
icon={[MockFunction]}
size={16}
spin={false}
>
<Component
className="styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
>
<svg
className="styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
>
<use
xlinkHref="#function () {
return fn.apply(this, arguments);
}"
/>
</svg>
</Component>
</Icon>
</span>
<WithStyles(memo)
center={true}
>
<ForwardRef(TouchRipple)
center={true}
classes={
Object {
"child": "MuiTouchRipple-child",
"childLeaving": "MuiTouchRipple-childLeaving",
"childPulsate": "MuiTouchRipple-childPulsate",
"ripple": "MuiTouchRipple-ripple",
"ripplePulsate": "MuiTouchRipple-ripplePulsate",
"rippleVisible": "MuiTouchRipple-rippleVisible",
"root": "MuiTouchRipple-root",
}
}
>
<span
className="MuiTouchRipple-root"
>
<TransitionGroup
childFactory={[Function]}
component={null}
exit={true}
/>
</span>
</ForwardRef(TouchRipple)>
</WithStyles(memo)>
</button>
</ForwardRef(ButtonBase)>
</WithStyles(ForwardRef(ButtonBase))>
</ForwardRef(IconButton)>
</WithStyles(ForwardRef(IconButton))>
<div
className="info"
>
<h1
className="info-header text-24-bold"
>
onboarding.welcomeModal.title
</h1>
<div
className="info-content text-16-normal"
>
<p>
onboarding.welcomeModal.part1
</p>
<p>
onboarding.welcomeModal.part2
</p>
</div>
<div
className="info-footer"
>
<Icon
icon={[MockFunction]}
size={191}
spin={false}
>
<Component
className="styles__icon___23x3R"
height={191}
style={Object {}}
width={191}
>
<svg
className="styles__icon___23x3R"
height={191}
style={Object {}}
width={191}
>
<use
xlinkHref="#function () {
return fn.apply(this, arguments);
}"
/>
</svg>
</Component>
</Icon>
<WithStyles(ForwardRef(Button))
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
"contained": "MuiButton-contained",
"containedPrimary": "MuiButton-containedPrimary",
"containedSecondary": "MuiButton-containedSecondary",
"containedSizeLarge": "MuiButton-containedSizeLarge",
"containedSizeSmall": "MuiButton-containedSizeSmall",
"disableElevation": "MuiButton-disableElevation",
"disabled": "Mui-disabled",
"endIcon": "MuiButton-endIcon",
"focusVisible": "Mui-focusVisible",
"fullWidth": "MuiButton-fullWidth",
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
"label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
"root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
"text": "MuiButton-text",
"textPrimary": "MuiButton-textPrimary",
"textSecondary": "MuiButton-textSecondary",
"textSizeLarge": "MuiButton-textSizeLarge",
"textSizeSmall": "MuiButton-textSizeSmall",
}
}
onClick={[Function]}
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<ForwardRef(ButtonBase)
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
"focusVisible": "Mui-focusVisible",
"root": "MuiButtonBase-root",
}
}
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span
className="MuiButton-label"
>
onboarding.welcomeModal.button_valid
</span>
<WithStyles(memo)
center={false}
>
<ForwardRef(TouchRipple)
center={false}
classes={
Object {
"child": "MuiTouchRipple-child",
"childLeaving": "MuiTouchRipple-childLeaving",
"childPulsate": "MuiTouchRipple-childPulsate",
"ripple": "MuiTouchRipple-ripple",
"ripplePulsate": "MuiTouchRipple-ripplePulsate",
"rippleVisible": "MuiTouchRipple-rippleVisible",
"root": "MuiTouchRipple-root",
}
}
>
<span
className="MuiTouchRipple-root"
>
<TransitionGroup
childFactory={[Function]}
component={null}
exit={true}
/>
</span>
</ForwardRef(TouchRipple)>
</WithStyles(memo)>
</button>
</ForwardRef(ButtonBase)>
</WithStyles(ForwardRef(ButtonBase))>
</ForwardRef(Button)>
</WithStyles(ForwardRef(Button))>
</div>
</div>
</div>
</ForwardRef(Paper)>
</WithStyles(ForwardRef(Paper))>
</div>
</Transition>
</ForwardRef(Fade)>
<div
data-test="sentinelEnd"
tabIndex={0}
/>
</Unstable_TrapFocus>
</div>
</Portal>
</ForwardRef(Portal)>
</ForwardRef(Modal)>
</ForwardRef(Dialog)>
</WithStyles(ForwardRef(Dialog))>
</WelcomeModal>
</Provider>
`;
exports[`WelcomeModal component should not be rendered 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<WelcomeModal
open={false}
>
<WithStyles(ForwardRef(Dialog))
aria-labelledby="accessibility-title"
classes={
Object {
"paper": "modal-paper",
"root": "modal-root",
}
}
onClose={[Function]}
open={false}
>
<ForwardRef(Dialog)
aria-labelledby="accessibility-title"
classes={
Object {
"container": "MuiDialog-container",
"paper": "MuiDialog-paper modal-paper",
"paperFullScreen": "MuiDialog-paperFullScreen",
"paperFullWidth": "MuiDialog-paperFullWidth",
"paperScrollBody": "MuiDialog-paperScrollBody",
"paperScrollPaper": "MuiDialog-paperScrollPaper",
"paperWidthFalse": "MuiDialog-paperWidthFalse",
"paperWidthLg": "MuiDialog-paperWidthLg",
"paperWidthMd": "MuiDialog-paperWidthMd",
"paperWidthSm": "MuiDialog-paperWidthSm",
"paperWidthXl": "MuiDialog-paperWidthXl",
"paperWidthXs": "MuiDialog-paperWidthXs",
"root": "MuiDialog-root modal-root",
"scrollBody": "MuiDialog-scrollBody",
"scrollPaper": "MuiDialog-scrollPaper",
}
}
onClose={[Function]}
open={false}
>
<ForwardRef(Modal)
BackdropComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"Naked": Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"children": [Function],
"className": [Function],
"classes": [Function],
"invisible": [Function],
"open": [Function],
"transitionDuration": [Function],
},
"render": [Function],
},
"displayName": "WithStyles(ForwardRef(Backdrop))",
"options": Object {
"defaultTheme": Object {
"breakpoints": Object {
"between": [Function],
"down": [Function],
"keys": Array [
"xs",
"sm",
"md",
"lg",
"xl",
],
"only": [Function],
"up": [Function],
"values": Object {
"lg": 1280,
"md": 960,
"sm": 600,
"xl": 1920,
"xs": 0,
},
"width": [Function],
},
"direction": "ltr",
"mixins": Object {
"gutters": [Function],
"toolbar": Object {
"@media (min-width:0px) and (orientation: landscape)": Object {
"minHeight": 48,
},
"@media (min-width:600px)": Object {
"minHeight": 64,
},
"minHeight": 56,
},
},
"overrides": Object {},
"palette": Object {
"action": Object {
"activatedOpacity": 0.12,
"active": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.26)",
"disabledBackground": "rgba(0, 0, 0, 0.12)",
"disabledOpacity": 0.38,
"focus": "rgba(0, 0, 0, 0.12)",
"focusOpacity": 0.12,
"hover": "rgba(0, 0, 0, 0.04)",
"hoverOpacity": 0.04,
"selected": "rgba(0, 0, 0, 0.08)",
"selectedOpacity": 0.08,
},
"augmentColor": [Function],
"background": Object {
"default": "#fafafa",
"paper": "#fff",
},
"common": Object {
"black": "#000",
"white": "#fff",
},
"contrastThreshold": 3,
"divider": "rgba(0, 0, 0, 0.12)",
"error": Object {
"contrastText": "#fff",
"dark": "#d32f2f",
"light": "#e57373",
"main": "#f44336",
},
"getContrastText": [Function],
"grey": Object {
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"50": "#fafafa",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"A100": "#d5d5d5",
"A200": "#aaaaaa",
"A400": "#303030",
"A700": "#616161",
},
"info": Object {
"contrastText": "#fff",
"dark": "#1976d2",
"light": "#64b5f6",
"main": "#2196f3",
},
"primary": Object {
"contrastText": "#fff",
"dark": "#303f9f",
"light": "#7986cb",
"main": "#3f51b5",
},
"secondary": Object {
"contrastText": "#fff",
"dark": "#c51162",
"light": "#ff4081",
"main": "#f50057",
},
"success": Object {
"contrastText": "rgba(0, 0, 0, 0.87)",
"dark": "#388e3c",
"light": "#81c784",
"main": "#4caf50",
},
"text": Object {
"disabled": "rgba(0, 0, 0, 0.38)",
"hint": "rgba(0, 0, 0, 0.38)",
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)",
},
"tonalOffset": 0.2,
"type": "light",
"warning": Object {
"contrastText": "rgba(0, 0, 0, 0.87)",
"dark": "#f57c00",
"light": "#ffb74d",
"main": "#ff9800",
},
},
"props": Object {},
"shadows": Array [
"none",
"0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
"0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
"0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
"0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
],
"shape": Object {
"borderRadius": 4,
},
"spacing": [Function],
"transitions": Object {
"create": [Function],
"duration": Object {
"complex": 375,
"enteringScreen": 225,
"leavingScreen": 195,
"short": 250,
"shorter": 200,
"shortest": 150,
"standard": 300,
},
"easing": Object {
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
"easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
"sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
},
"getAutoHeightDuration": [Function],
},
"typography": Object {
"body1": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1rem",
"fontWeight": 400,
"letterSpacing": "0.00938em",
"lineHeight": 1.5,
},
"body2": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.875rem",
"fontWeight": 400,
"letterSpacing": "0.01071em",
"lineHeight": 1.43,
},
"button": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.875rem",
"fontWeight": 500,
"letterSpacing": "0.02857em",
"lineHeight": 1.75,
"textTransform": "uppercase",
},
"caption": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.75rem",
"fontWeight": 400,
"letterSpacing": "0.03333em",
"lineHeight": 1.66,
},
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": 14,
"fontWeightBold": 700,
"fontWeightLight": 300,
"fontWeightMedium": 500,
"fontWeightRegular": 400,
"h1": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "6rem",
"fontWeight": 300,
"letterSpacing": "-0.01562em",
"lineHeight": 1.167,
},
"h2": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "3.75rem",
"fontWeight": 300,
"letterSpacing": "-0.00833em",
"lineHeight": 1.2,
},
"h3": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "3rem",
"fontWeight": 400,
"letterSpacing": "0em",
"lineHeight": 1.167,
},
"h4": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "2.125rem",
"fontWeight": 400,
"letterSpacing": "0.00735em",
"lineHeight": 1.235,
},
"h5": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1.5rem",
"fontWeight": 400,
"letterSpacing": "0em",
"lineHeight": 1.334,
},
"h6": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1.25rem",
"fontWeight": 500,
"letterSpacing": "0.0075em",
"lineHeight": 1.6,
},
"htmlFontSize": 16,
"overline": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.75rem",
"fontWeight": 400,
"letterSpacing": "0.08333em",
"lineHeight": 2.66,
"textTransform": "uppercase",
},
"pxToRem": [Function],
"round": [Function],
"subtitle1": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "1rem",
"fontWeight": 400,
"letterSpacing": "0.00938em",
"lineHeight": 1.75,
},
"subtitle2": Object {
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
"fontSize": "0.875rem",
"fontWeight": 500,
"letterSpacing": "0.00714em",
"lineHeight": 1.57,
},
},
"zIndex": Object {
"appBar": 1100,
"drawer": 1200,
"mobileStepper": 1000,
"modal": 1300,
"snackbar": 1400,
"speedDial": 1050,
"tooltip": 1500,
},
},
"name": "MuiBackdrop",
},
"propTypes": Object {
"classes": [Function],
"innerRef": [Function],
},
"render": [Function],
"useStyles": [Function],
}
}
BackdropProps={
Object {
"transitionDuration": Object {
"enter": 225,
"exit": 195,
},
}
}
className="MuiDialog-root modal-root"
closeAfterTransition={true}
disableEscapeKeyDown={false}
onClose={[Function]}
open={false}
/>
</ForwardRef(Dialog)>
</WithStyles(ForwardRef(Dialog))>
</WelcomeModal>
</Provider>
`; `;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment