@material-ui/styles#ThemeProvider JavaScript Examples

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();
  });
});

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);
  });
});

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();
  });
});

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());
  });
}

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);
  });
});

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();
  });
});

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();
  });
});

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();
  });
});

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);
  });
});

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());
  });
});

ReactDOM.render(
  <LayoutProvider>
    <UserProvider>
      <ThemeProvider theme={Themes.default}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </UserProvider>
  </LayoutProvider>,
  document.getElementById("root"),
);

function App() {
    const themeName = useSelector(selectTheme);
    const theme = Themes[themeName];

    return (
        <ThemeProvider theme={theme}>
            <Home />
        </ThemeProvider>
    );
}

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'),
);

ThemeWrapper = ({ children }) => {
  const [theme] = useState(themeLRC);

  return (
    <ThemeProvider theme={theme}>
      { children }
    </ThemeProvider>
  );
}

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>
  );
}

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>);
  }
});

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>);
  }
});

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>
  );
}

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>
  );
}

App = () => {
  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side')
    if (jssStyles) {
      jssStyles.parentNode.removeChild(jssStyles)
    }
  }, [])
  return (
  <BrowserRouter>
      <ThemeProvider theme={theme}>
        <MainRouter/>
      </ThemeProvider>
  </BrowserRouter>
)}

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
    }))
})

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
    }))
})

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
    }))
})

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
    }))
})

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
    }))
})

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
    }))
})

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"})
  })
})

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
    }))
})

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>
  );
}