@material-ui/styles#ThemeProvider JavaScript Examples
The following examples show how to use
@material-ui/styles#ThemeProvider.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: product-list-page.spec.js From horondi_client_fe with MIT License | 6 votes |
describe('ProductListPage with incorrect query', () => {
beforeAll(() => {
isWrongNameFilter = true;
render(
<MockedProvider mocks={mockAllFilteredProducts(isWrongNameFilter)} addTypename>
<ThemeProvider theme={themeValue}>
<Router history={history}>
<ProductListPage width='sm' />
</Router>
</ThemeProvider>
</MockedProvider>
);
});
it('should render not-found-product image', async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
expect(screen.getByTestId('backpack-icon')).toBeDefined();
});
});
Example #2
Source File: home-page-slide-form.spec.js From horondi_admin with MIT License | 6 votes |
describe('component tests without id', () => {
let wrapper = null;
wrapper = mount(
<BrowserRouter>
<ThemeProvider theme={themeValue}>
<HomePageSlideForm
slide={withoutId}
id={slideId}
slideOrder={slideOrder}
/>
</ThemeProvider>
</BrowserRouter>
);
it(`Should render save button with ${CREATE_SLIDE_TITLE} label`, () => {
expect(wrapper.find('button').at(1).text()).toBe(CREATE_SLIDE_TITLE);
});
});
Example #3
Source File: about-us.spec.js From horondi_admin with MIT License | 6 votes |
describe('AboutUs component tests', () => {
beforeEach(() => {
render(
<MockedProvider mocks={aboutUsPageDataMock} addTypename={false}>
<MemoryRouter initialEntries={[routes.pathToAboutUs]}>
<ThemeProvider theme={themeValue}>
<Switch>
<Route path={routes.pathToAboutUs} exact component={AboutUs} />
<Route
path={routes.pathToAboutUsTitleEdit}
exact
component={AboutUsTitleEdit}
/>
<Route
path={routes.pathToAboutUsFooterImgEdit}
exact
component={AboutUsFooterImgEdit}
/>
</Switch>
</ThemeProvider>
</MemoryRouter>
</MockedProvider>
);
});
it('Edit button for editing title successfully navigates to AboutUsTitleEdit page on click', async () => {
const editButtons = await screen.findAllByTestId('edit_btn');
const titleEditButton = editButtons[0];
fireEvent.click(titleEditButton);
expect(await screen.findByText(enTitle)).toBeInTheDocument();
});
it('Edit button for editing section successfully navigates to AboutUsFooterImgEdit page on click', async () => {
const editButtons = await screen.findAllByTestId('edit_btn');
const footerImgEditButton = editButtons[4];
fireEvent.click(footerImgEditButton);
expect(await screen.findByText(imgLabel)).toBeInTheDocument();
});
});
Example #4
Source File: confirm.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 6 votes |
export default function confirm(title, message) {
return new Promise((resolve) => {
function handleClose(isConfirmed) {
d3.select('.confirm-container').remove();
d3.select('#confirmDialog').remove();
resolve(isConfirmed);
}
const dialog = (
<ThemeProvider theme={theme}>
<Dialog open={true} onClose={handleClose} id="confirmDialog">
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{message}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => handleClose(false)} variant="text">
Cancel
</Button>
<Button onClick={() => handleClose(true)} color="primary">
OK
</Button>
</DialogActions>
</Dialog>
</ThemeProvider>
);
d3.select('body')
.append('div')
.classed('confirm-container', true)
.append('div')
.classed('confirm-dialog', true);
ReactDOM.render(dialog, d3.select('.confirm-dialog').node());
});
}
Example #5
Source File: order-history-item.spec.js From horondi_client_fe with MIT License | 6 votes |
describe('OrderHistoryOrder component tests', () => {
beforeEach(() => {
wrapper = render(
<MockedProvider mocks={mock}>
<BrowserRouter>
<ThemeProvider theme={themeValue}>
<OrderHistoryItem order={order} />
</ThemeProvider>
</BrowserRouter>
</MockedProvider>
);
});
it('Should render OrderHistoryOrder', () => {
expect(wrapper).toBeDefined();
});
it('renders 6 cells in a row', () => {
const cells = document.querySelectorAll('td');
expect(cells.length).toBe(6);
});
it('renders delivery status, order number and common price', () => {
expect(screen.getByText(/created/i)).toBeInTheDocument();
expect(screen.getByText(/1634215702438/)).toBeInTheDocument();
expect(screen.getAllByText(/total/i).length).toBe(2);
});
});
Example #6
Source File: order-history-item-product.spec.js From horondi_client_fe with MIT License | 6 votes |
describe('OrderHistoryOrderItem component tests', () => {
beforeEach(() => {
wrapper = render(
<MockedProvider mocks={mockConstructor}>
<BrowserRouter>
<ThemeProvider theme={themeValue}>
<OrderHistoryItemProduct item={item} />
</ThemeProvider>
</BrowserRouter>
</MockedProvider>
);
});
it('Should render OrderHistoryOrderItem', () => {
expect(wrapper).toBeDefined();
});
it('renders 6 cells in a row', () => {
const cells = document.querySelectorAll('td');
expect(cells.length).toBe(6);
});
it('renders <img/>', () => {
const img = document.querySelector('img');
expect(img).toBeTruthy();
});
it('product name is displayed in component', () => {
expect(screen.getByText(new RegExp(translationsKey, 'i'))).toBeInTheDocument();
});
});
Example #7
Source File: order-history-item-product.spec.js From horondi_client_fe with MIT License | 6 votes |
describe('OrderHistoryOrderItem component tests,renders plug for product', () => {
it('Renders plug for product', () => {
render(
<MockedProvider mocks={mockConstructor}>
<BrowserRouter>
<ThemeProvider theme={themeValue}>
<OrderHistoryItemProduct item={nullProduct} />
</ThemeProvider>
</BrowserRouter>
</MockedProvider>
);
expect(screen.getByText('product.notAvailable')).toBeInTheDocument();
});
});
Example #8
Source File: materials.spec.js From horondi_client_fe with MIT License | 6 votes |
describe('Materials component tests', () => {
it('Should render Materials', () => {
useQuery.mockImplementation(() => ({
...useQueryData
}));
const { getByRole } = render(
<ThemeProvider theme={themeValue}>
<Materials />
</ThemeProvider>
);
const mainHeader = getByRole('heading');
expect(mainHeader).toBeInTheDocument();
});
it('should not be rendered', () => {
useQuery.mockImplementation(() => ({
...useQueryDataLoading
}));
const { queryByRole, getByTestId } = render(
<ThemeProvider theme={themeValue}>
<Materials />
</ThemeProvider>
);
const mainHeader = queryByRole('heading');
const loader = getByTestId('loader');
expect(mainHeader).toBeNull();
expect(loader).toBeInTheDocument();
});
});
Example #9
Source File: product-list-page.spec.js From horondi_client_fe with MIT License | 6 votes |
describe('ProductListPage with correct values', () => {
beforeEach(() => {
render(
<MockedProvider mocks={mockAllFilteredProducts(isWrongNameFilter)} addTypename>
<ThemeProvider theme={themeValue}>
<Router history={history}>
<ProductListPage width='sm' />
</Router>
</ThemeProvider>
</MockedProvider>
);
});
it('should render loader', () => {
const loader = screen.findByTestId('loader');
expect(loader).toBeDefined();
});
it('should render products', async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
const products = await screen.getAllByTestId('product');
expect(products).toHaveLength(2);
});
});
Example #10
Source File: promo-code-page.spec.js From horondi_admin with MIT License | 6 votes |
describe('PromoCodePage component test with loading', () => { it('test PromoCodePage component without items starting with LoadingBur', () => { <MockedProvider mocks={mocksWithoutPromocodes} addTypename={false}> <BrowserRouter> <ThemeProvider theme={themeValue}> <PromoCodePage /> </ThemeProvider> </BrowserRouter> </MockedProvider>; expect(LoadingBar).toBeTruthy(); }); it('test delete and edit btn', async () => { render( <MockedProvider mocks={mocks} addTypename={false}> <BrowserRouter> <ThemeProvider theme={themeValue}> <PromoCodePage /> </ThemeProvider> </BrowserRouter> </MockedProvider> ); const btnDelete = await screen.findByTestId('del_btn1'); fireEvent.click(btnDelete); expect(mockOpenSuccessSnackbar).toHaveBeenCalled(); const editBtn = await screen.findByTestId('edit_btn2'); fireEvent.click(editBtn); expect(dispatch).toHaveBeenCalledWith(push()); }); });
Example #11
Source File: index.js From react-code-splitting-2021-04-26 with MIT License | 6 votes |
ReactDOM.render(
<LayoutProvider>
<UserProvider>
<ThemeProvider theme={Themes.default}>
<CssBaseline />
<App />
</ThemeProvider>
</UserProvider>
</LayoutProvider>,
document.getElementById("root"),
);
Example #12
Source File: App.jsx From 8086.js with MIT License | 6 votes |
function App() {
const themeName = useSelector(selectTheme);
const theme = Themes[themeName];
return (
<ThemeProvider theme={theme}>
<Home />
</ThemeProvider>
);
}
Example #13
Source File: index.js From zubhub with GNU Affero General Public License v3.0 | 6 votes |
ReactDOM.render( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <React.StrictMode> <ThemeProvider theme={theme}> <Suspense fallback={null}> <App /> </Suspense> </ThemeProvider> </React.StrictMode> </PersistGate> </Provider>, document.getElementById('root'), );
Example #14
Source File: ThemeWrapper.js From lrc-staking-dapp with MIT License | 6 votes |
ThemeWrapper = ({ children }) => {
const [theme] = useState(themeLRC);
return (
<ThemeProvider theme={theme}>
{ children }
</ThemeProvider>
);
}
Example #15
Source File: App.js From medha-STPC with GNU Affero General Public License v3.0 | 6 votes |
function App(props) {
let id = 0;
id = utilities.setSideBarIndex(window.location.pathname);
const [index, setIndex] = useState(id);
const [loaderStatus, setLoaderStatus] = useState(false);
return (
<LoaderContext.Provider value={{ loaderStatus, setLoaderStatus }}>
<SetIndexContext.Provider value={{ index, setIndex }}>
<ThemeProvider theme={theme}>
<Router>
<AppRouter />
</Router>
</ThemeProvider>
</SetIndexContext.Provider>
</LoaderContext.Provider>
);
}
Example #16
Source File: FieldEditor.spec.js From jafar with MIT License | 6 votes |
describe('FieldEditor', () => {
it('Should render component when props are defined - ok', () => {
const box = {
component: () => {},
props: {
onCancel: () => {},
onSave: () => {},
formId: 'employee',
fieldId: 'firstName',
field: { path: 'firstName' },
fieldIds: ['firstName', 'lastName', 'address'],
},
};
const component = mount(getComponent(box));
expect(component).toMatchSnapshot();
});
function getComponent(props) {
return (<ThemeProvider theme={theme}><FieldEditor {...props} /></ThemeProvider>);
}
});
Example #17
Source File: FormEditor.spec.js From jafar with MIT License | 6 votes |
describe('FormEditor', () => {
it('Should render component when props are defined - ok', () => {
const box = {
component: () => {},
props: {
onCancel: () => {},
onSave: () => {},
form: {
model: {
id: 'employee',
fields: {
firstName: {
path: 'firstName',
},
},
},
},
formIds: ['employee', 'order'],
},
};
const component = mount(getComponent(box));
expect(component).toMatchSnapshot();
});
function getComponent(props) {
return (<ThemeProvider theme={theme}>
<FormEditor {...props} />
</ThemeProvider>);
}
});
Example #18
Source File: Root.jsx From jafar with MIT License | 6 votes |
Root = () => {
return (
<HashRouter basename="/">
<StylesProvider generateClassName={generateClassName}>
<ThemeProvider theme={theme}>
<Styled.GlobalStyle />
<Styled.Header>
<Styled.InternalLink id="logo" to="/">
<Styled.Logo src={require('./jafar.svg')} />
<Styled.LogoText>Jafar | React Editor</Styled.LogoText>
</Styled.InternalLink>
<Styled.HeaderLinks>
<Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink>
<Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink>
</Styled.HeaderLinks>
</Styled.Header>
<Styled.Main id="jafar-react-editor-demos">
<Switch>
<Route exact={true} path="/" component={Home} />
<Route exact={true} path="/form/:id" component={FormEdit} />
<Route exact={true} path="/form/" component={FormList} />
<Route exact={true} path="/field/:id" component={FieldEdit} />
<Route exact={true} path="/field/" component={FieldList} />
</Switch>
</Styled.Main>
</ThemeProvider>
</StylesProvider>
</HashRouter>
);
}
Example #19
Source File: app.js From horondi_admin with MIT License | 6 votes |
App = () => {
const darkMode = useSelector(({ Theme }) => Theme.darkMode);
const themeMode = darkMode ? DARK_THEME : LIGHT_THEME;
const themeValue = theme(themeMode);
const classes = useStyles();
const dispatch = useDispatch();
const validatorMethods = useDeleteValidation(
getAllProductsDataForDeleteValidation
);
const token = getFromLocalStorage(LOCAL_STORAGE.AUTH_ACCESS_TOKEN);
useEffect(() => {
dispatch(checkUserByToken());
if (token) {
dispatch(getEmailQuestionsPendingCount());
}
}, []);
return (
<ThemeProvider theme={themeValue}>
<CssBaseline>
<div className={classes.root}>
<ConnectedRouter history={history}>
<Routes validatorMethods={validatorMethods} />
</ConnectedRouter>
</div>
</CssBaseline>
</ThemeProvider>
);
}
Example #20
Source File: App.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
App = () => {
React.useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side')
if (jssStyles) {
jssStyles.parentNode.removeChild(jssStyles)
}
}, [])
return (
<BrowserRouter>
<ThemeProvider theme={theme}>
<MainRouter/>
</ThemeProvider>
</BrowserRouter>
)}
Example #21
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter />
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #22
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter />
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #23
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter />
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #24
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter/>
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #25
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter/>
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #26
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter />
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #27
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
loadBranchData(req.url).then(data => {
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter data={data}/>
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
}).catch(err => {
res.status(500).send({"error": "Could not load React view with data"})
})
})
Example #28
Source File: express.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
app.get('*', (req, res) => {
const sheets = new ServerStyleSheets()
const context = {}
const markup = ReactDOMServer.renderToString(
sheets.collect(
<StaticRouter location={req.url} context={context}>
<ThemeProvider theme={theme}>
<MainRouter />
</ThemeProvider>
</StaticRouter>
)
)
if (context.url) {
return res.redirect(303, context.url)
}
const css = sheets.toString()
res.status(200).send(Template({
markup: markup,
css: css
}))
})
Example #29
Source File: App.js From telar-cli with MIT License | 6 votes |
function App() {
// Retrieving data from an AJAX request.
// Remember that the function passed to useEffect will run,
// after render is fixed on the screen.
// See https://reactjs.org/docs/hooks-reference.html#useeffect
useEffect(() => {
});
return (
<Router history={browserHistory}>
<Provider store={store}>
<ThemeProvider theme={theme}>
<Master />
<Routes />
<AppSnackbar />
<DialogInfo />
</ThemeProvider>
</Provider>
</Router>
);
}