@mui/material/styles ThemeProvider TypeScript Examples

Source File: Hero.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('Hero', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <Hero icon={'A'} label={'Healthy'} ChannelValueProps={{ value: '96', units: '/100' }} />
            </ThemeProvider>,
            div
        );
    });
    it('should render with the wrapper class', () => {
        const wrapper = mountWithTheme(<Hero ChannelValueProps={{ value: '1' }} label={'test'} icon={'a'} />, theme);
        expect(findByTestId('wrapper', wrapper)).toBeTruthy();
    });
    it('renders without children', () => {
        const wrapper = mountWithTheme(<Hero ChannelValueProps={{ value: '1' }} label={'test'} icon={'a'} />, theme);
        expect(wrapper.find(ChannelValue).length).toEqual(1);
    });
    it('renders with children', () => {
        const wrapper = mountWithTheme(
            <Hero ChannelValueProps={{ value: '1' }} label={'test'} icon={'a'}>
                <ChannelValue value={1} />
                <ChannelValue value={1} />
            </Hero>,
            theme
        );
        expect(wrapper.find(ChannelValue).length).toEqual(2);
    });
});

Source File: _app.tsx From react-hook-form-mui with MIT License

6 votes

export default function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>Demo for MUI react-hook-forms</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  )
}

Source File: index.tsx From cli with Apache License 2.0

6 votes

root.render(
  <StyledEngineProvider injectFirst>
    <ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
      <App />
    </ThemeProvider>
  </StyledEngineProvider>
);

Source File: test-utils.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

mountWithTheme = (tree: any, theme: Theme) => {
    const WrappingThemeProvider = (props: any) => <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
    return mount(tree, { wrappingComponent: WrappingThemeProvider });
}

Source File: layout.tsx From usehooks-ts with MIT License

6 votes

TopLayout: FC = ({ children }) => {
  const matches = useMediaQuery('(prefers-color-scheme: dark)')
  const theme = themes[matches ? 'dark' : 'light']

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

Source File: UserMenu.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('User Menu', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        const avatar = <Avatar />;
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <UserMenu avatar={avatar} />
            </ThemeProvider>,
            div
        );
        ReactDOM.unmountComponentAtNode(div);
    });

    it('renders with icon', () => {
        const avatar = (
            <Avatar data-test={'avatar'}>
                <SendIcon data-test={'send-icon'} />
            </Avatar>
        );
        const wrapper = mountWithTheme(<UserMenu avatar={avatar} />, theme);
        expect(findByTestId('send-icon', wrapper).length).toEqual(1);
    });

    it('runs onOpen function when avatar is clicked', () => {
        const onOpen = jest.fn();
        const avatar = (
            <Avatar data-test={'avatar'}>
                <SendIcon />
            </Avatar>
        );
        const wrapper = mountWithTheme(<UserMenu onOpen={onOpen} avatar={avatar} />, theme);
        const renderedAvatar = findByTestId('avatar', wrapper);
        expect(onOpen).not.toHaveBeenCalled();
        renderedAvatar.simulate('click', { currentTarget: 'test' });
        expect(onOpen).toHaveBeenCalled();
    });
});

Source File: ToolbarMenu.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('ToolbarMenu', () => {
    it('should render without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <ToolbarMenu label={'label'} />
            </ThemeProvider>,
            div
        );
    });

    it('renders with label', () => {
        const wrapper = mountWithTheme(<ToolbarMenu label={'Subtitle'} data-test={'toolbar-menu'} />, theme);
        expect(findByTestId('label', wrapper).length).toEqual(1);
    });

    it('renders with icon', () => {
        const icon = <Trend data-test={'trend-icon'} />;
        const wrapper = mountWithTheme(
            <ToolbarMenu label={'Subtitle'} icon={icon} data-test={'toolbar-menu'} />,
            theme
        );
        expect(findByTestId('trend-icon', wrapper).length).toEqual(1);
    });
});

Source File: index.tsx From SkyOffice with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={muiTheme}>
        <App />
      </ThemeProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

Source File: ListItemTag.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('ListItemTag', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <ListItemTag label={'test'} />
            </ThemeProvider>,
            div
        );
    });

    it('should render list-item-tag wrapper', () => {
        const wrapper = mountWithTheme(<ListItemTag label={'test'} />, theme);
        expect(findByTestId('list-item-tag', wrapper)).toBeTruthy();
    });

    it('renders the correct label text', () => {
        const wrapper = mountWithTheme(<ListItemTag label={'test'} />, theme);
        expect(wrapper.text()).toEqual('test');
    });

    it('renders with correct colors', () => {
        const fontColor = Colors.gold[200];
        const backgroundColor = Colors.green[900];
        const wrapper = mountWithTheme(
            <ListItemTag label={'test'} fontColor={fontColor} backgroundColor={backgroundColor} />,
            theme
        );
        const computedStyle = getComputedStyleFromHTMLString(wrapper.html());

        expect(computedStyle.color).toEqual(color(fontColor).rgb().string());
        expect(computedStyle.backgroundColor).toEqual(color(backgroundColor).rgb().string());
    });
});

Source File: HeroBanner.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('HeroBanner', () => {
    test('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <HeroBanner />,
            </ThemeProvider>,
            div
        );
    });
    it('renders only 4 children', () => {
        const hero = mountWithTheme(
            <HeroBanner>
                <Hero icon={'A'} label={'Healthy'} ChannelValueProps={{ value: '96', units: '/100' }} />
                <Hero icon={'A'} label={'Healthy'} ChannelValueProps={{ value: '96', units: '/100' }} />
                <Hero icon={'A'} label={'Healthy'} ChannelValueProps={{ value: '96', units: '/100' }} />
                <Hero icon={'A'} label={'Healthy'} ChannelValueProps={{ value: '96', units: '/100' }} />
                <Hero icon={'A'} label={'Healthy'} ChannelValueProps={{ value: '96', units: '/100' }} />
            </HeroBanner>,
            theme
        );
        expect(hero.find(Hero).length).toEqual(4);
    });
});

Source File: index.tsx From console with GNU Affero General Public License v3.0

6 votes

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <GlobalCss />
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={theme}>
          <Routes />
        </ThemeProvider>
      </StyledEngineProvider>
    </Provider>
  </React.StrictMode>
);

Source File: Drawer.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('Drawer', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <Drawer open={true} />
            </ThemeProvider>,
            div
        );
        ReactDOM.unmountComponentAtNode(div);
    });

    it('renders all the Drawer child components', () => {
        const wrapper = mountWithTheme(
            <Drawer open={true}>
                <DrawerHeader />
                <DrawerSubheader />
                <DrawerBody />
                <DrawerFooter />
            </Drawer>,
            theme
        );

        expect(wrapper.find(DrawerHeader).length).toEqual(1);
        expect(wrapper.find(DrawerSubheader).length).toEqual(1);
        expect(wrapper.find(DrawerBody).length).toEqual(1);
        expect(wrapper.find(DrawerFooter).length).toEqual(1);
    });
});

Source File: ChannelValue.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

describe('ChannelValue', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <ChannelValue value={'test'} />
            </ThemeProvider>,
            div
        );
        ReactDOM.unmountComponentAtNode(div);
    });
    it('should render with the wrapper class', () => {
        const wrapper = mountWithTheme(<ChannelValue value={1} />, theme);
        expect(findByTestId('wrapper', wrapper)).toBeTruthy();
        wrapper.unmount();
    });
    it('should render value properly', () => {
        const wrapper = mountWithTheme(<ChannelValue value={1} />, theme);
        expect(findByTestId('value', wrapper).length).toEqual(1);
        wrapper.unmount();
    });
    it('should render icon properly', () => {
        let wrapper = mountWithTheme(<ChannelValue icon={<Menu />} value={1} />, theme);
        expect(findByTestId('icon', wrapper).length).toEqual(1);
        wrapper = mountWithTheme(<ChannelValue value={1} />, theme);
        expect(findByTestId('icon', wrapper).length).toEqual(0);
        wrapper.unmount();
    });
    it('should render units properly', () => {
        let wrapper = mountWithTheme(<ChannelValue value={1} units={'X'} />, theme);
        expect(findByTestId('units', wrapper).length).toEqual(1);
        wrapper = mountWithTheme(<ChannelValue value={1} />, theme);
        expect(findByTestId('units', wrapper).length).toEqual(0);
        wrapper.unmount();
    });
});

Source File: _app.tsx From mui-toolpad with MIT License

6 votes

export default function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </QueryClientProvider>
    </CacheProvider>
  );
}

Source File: _app.tsx From bouncecode-cms with GNU General Public License v3.0

6 votes

function MyApp(props) {
  const {Component, pageProps, req} = props;
  const getLayout = Component.getLayout ?? (page => page);
  const apolloClient = useApollo(pageProps, req);

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>BounceCode CMS</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ApolloProvider client={apolloClient}>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <PageLoading />
          <SnackbarProvider>
            {getLayout(<Component {...pageProps} />)}
          </SnackbarProvider>
        </ThemeProvider>
      </ApolloProvider>
    </React.Fragment>
  );
}

Source File: App.tsx From NekoMaid with MIT License

6 votes

AppWrap: React.FC = () => {
  const isDark = useMediaQuery('(prefers-color-scheme: dark)')
  const mode = localStorage.getItem('NekoMaid:colorMode')
  const [darkMode, setDarkMode] = useState(mode ? mode === 'dark' : isDark)
  const primary = (colors as any)[localStorage.getItem('NekoMaid:color') || 'blue']
  ;(document.getElementById('theme-color-meta') as HTMLMetaElement)?.setAttribute('content', primary[500])
  const theme = React.useMemo(() => createTheme({
    typography,
    components: {
      MuiCssBaseline: {
        styleOverrides: {
          body: darkMode ? darkScrollbar() : null
        }
      }
    },
    palette: {
      primary,
      mode: darkMode ? 'dark' : 'light',
      background: darkMode ? { default: '#212121', paper: '#212121' } : { default: '#f4f6f8', paper: '#ffffff' }
    }
  }, (muiLanguages as any)[lang.muiName]), [darkMode])
  return <ThemeProvider theme={theme}>
    <DialogWrapper />
    <Snackbars />
    <App darkMode={darkMode} setDarkMode={setDarkMode} />
  </ThemeProvider>
}

Source File: test-utils.tsx From frontend with MIT License

6 votes

Providers = ({ children }: { children: React.ReactElement }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}

Source File: DebugComponent.tsx From professor-prebid with Apache License 2.0

6 votes

DebugComponent = () => {
  const [tabInfos, setTabInfos] = useState<ITabInfos>(null);
  useEffect(() => {
    const handleStorageChange = async (
      changes: {
        [key: string]: chrome.storage.StorageChange;
      },
      _areaName: 'sync' | 'local' | 'managed'
    ) => {
      const newTabInfos = changes.tabInfos.newValue;
      for (const [_, newTabInfo] of Object.entries(newTabInfos)) {
        const prebids = (newTabInfo as ITabInfo).prebids;
        if (prebids) {
          for (const [_, prebid] of Object.entries(prebids)) {
            prebid.events = await fetchEvents(prebid.eventsUrl);
          }
        }
      }
      setTabInfos(newTabInfos);
    };
    chrome.storage.onChanged.addListener(handleStorageChange);
    loadInitialData(setTabInfos);
    return () => {
      chrome.storage.onChanged.removeListener(handleStorageChange);
    };
  }, []);

  return <ThemeProvider theme={popupTheme}>{tabInfos && <ChromeTabs tabInfos={tabInfos}></ChromeTabs>}</ThemeProvider>;
}

Source File: _app.tsx From Cromwell with MIT License

6 votes

function App(props: AppPropsWithLayout) {
  const pageContext = useAppPropsContext();
  const { Component, emotionCache = clientSideEmotionCache } = props;
  const getLayout = Component.getLayout ?? ((page) => page);
  const theme = getTheme(pageContext.pageProps?.cmsProps?.palette);

  React.useEffect(() => {
    if (!isServer()) {
      getRestApiClient()?.onError((info) => {
        if (info.statusCode === 429) {
          toast.error('Too many requests. Try again later');
        }
      }, '_app');
    }
  }, []);

  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={theme}>
        {getLayout(<>
          {Component && <Component {...(props.pageProps ?? {})} />}
          {!isServer() && document?.body && ReactDOM.createPortal(
            <div className={"global-toast"} ><ToastContainer /></div>, document.body)}
        </>)}
      </ThemeProvider>
    </CacheProvider>
  );
}

Source File: _app.tsx From tams-club-cal with MIT License

5 votes

export default function MyApp(props: MyAppProps) {
    const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
    const [dark, setDark] = useState(false);

    // Set the dark theme on load
    // Both the dark state variable and setDark state function will
    // be passed into the component props
    useEffect(() => {
        // Get the previously saved dark theme choice from cookies
        const cookies = new Cookies();
        const prevDark = cookies.get('dark');

        if (!prevDark) {
            // If it does not exist, use the system dark theme
            const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            setDark(systemDark);
            cookies.set('dark', systemDark, { sameSite: 'strict', path: '/' });
        } else {
            // Otherwise, use the previously set setting
            setDark(prevDark === 'true');
        }
    }, []);

    useEffect(() => {
        const cookies = new Cookies();
        cookies.set('dark', dark, { sameSite: 'strict', path: '/' });
    }, [dark]);

    return (
        <CacheProvider value={emotionCache}>
            <Head>
                <meta name="viewport" content="initial-scale=1, width=device-width" />
                <title>TAMS Club Calendar</title>
                <meta
                    key="description"
                    name="description"
                    content="The TAMS Club Calendar is a fully contained event tracker, club/volunteering database, and general resource center. This is the unofficial club event calendar for the Texas Academy of Mathematics and Science!"
                />
                <meta key="title" property="og:title" content="TAMS Club Calendar" />
                <meta key="type" property="og:type" content="website" />
                <meta key="url" property="og:url" content="https://tams.club/" />
                <meta key="image-0" property="og:image" content="https://cdn.tams.club/social-cover.webp" />
                <meta key="image-1" property="og:image:width" content="1200" />
                <meta key="image-2" property="og:image:height" content="630" />
                <meta key="site-name" property="og:site_name" content="TAMS Club Calendar" />
                <meta key="card" name="twitter:card" content="summary" />
                <meta key="title-1" name="twitter:title" content="TAMS Club Calendar" />
                <meta
                    key="description-1"
                    name="twitter:description"
                    content="The TAMS Club Calendar is a fully contained event tracker, club/volunteering database, and general resource center. This is the unofficial club event calendar for the Texas Academy of Mathematics and Science!"
                />
                <meta key="image-3" name="twitter:image" content="https://cdn.tams.club/social-cover.webp" />

                <meta key="theme-color" name="theme-color" content={theme.palette.primary.main} />
            </Head>
            <StyledEngineProvider injectFirst>
                <ThemeProvider theme={dark ? darkTheme : theme}>
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <CssBaseline />
                        <Menu dark={dark} setDark={setDark} />
                        <Component {...pageProps} />
                    </LocalizationProvider>
                </ThemeProvider>
            </StyledEngineProvider>
        </CacheProvider>
    );
}

Source File: App.tsx From metaplex with Apache License 2.0

5 votes

function App() {
  const colorModeCtx = useColorMode();

  React.useEffect(() => {}, [colorModeCtx.mode]);

  const theme = React.useMemo(() => {
    let mode;
    if (colorModeCtx.mode === 'dark' || !colorModeCtx.mode) {
      mode = 'dark';
    } else {
      mode = 'light';
    }

    return createTheme({
      palette: {
        mode,
      },
    });
  }, [colorModeCtx.mode]);

  const { width } = useWindowDimensions();

  return (
    <div className="App" style={{ backgroundColor: 'transparent' }}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <CssBaseline />
          <Header narrow={width < 670} />
          <Box
            maxWidth="60ch"
            width="calc(100% - 60px)"
            style={{
              marginLeft: 'auto',
              marginRight: 'auto',
            }}
          >
            <Box height="40px" />
            <Switch>
              <Route path="/entanglement/create" component={Create} />
              <Route path="/entanglement/show" component={Show} />
              <Route path="/entanglement/swap" component={Swap} />
              <Route path="/entanglement/search" component={Search} />
              <Route path="/entanglement/wizard" component={Wizard} />
              <Route path="/entanglement/" component={About} />
            </Switch>
            <Box height="80px" />
          </Box>
        </BrowserRouter>
      </ThemeProvider>
    </div>
  );
}

Source File: Provider.tsx From react-pwa with MIT License

5 votes

function CustomThemeProvider({ children }: CustomThemeProviderProps) {
  const [theme] = useTheme();

  return <ThemeProvider theme={createTheme(themes[theme])}>{children}</ThemeProvider>;
}

Source File: Spacer.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

describe('Spacer', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <Spacer />
            </ThemeProvider>,
            div
        );
        ReactDOM.unmountComponentAtNode(div);
    });
    it('renders default properties', () => {
        const wrapper = mountWithTheme(<Spacer />, theme);
        const style = getComputedStyleFromHTMLString(wrapper.find(Spacer).html());
        expect(style.flex).toEqual('1 1 0px');
        expect(style.height).toEqual('auto');
        expect(style.width).toEqual('auto');
    });
    it('renders flex properties', () => {
        let wrapper = mountWithTheme(<Spacer flex={2} />, theme);
        let style = getComputedStyleFromHTMLString(wrapper.find(Spacer).html());
        expect(style.flex).toEqual('2 2 0px');

        wrapper = mountWithTheme(<Spacer flex={3} />, theme);
        style = getComputedStyleFromHTMLString(wrapper.find(Spacer).html());
        expect(style.flex).toEqual('3 3 0px');
        expect(style.height).toEqual('auto');
        expect(style.width).toEqual('auto');
    });
    it('renders static properties', () => {
        const wrapper = mountWithTheme(<Spacer flex={0} width={250} height={100} />, theme);
        const style = getComputedStyleFromHTMLString(wrapper.find(Spacer).html());
        expect(style.flex).toEqual('0 0 auto');
        expect(style.height).toEqual('100px');
        expect(style.width).toEqual('250px');
    });
    it('accepts style overrides', () => {
        const wrapper = mountWithTheme(
            <Spacer style={{ flex: '3 4 100%', display: 'inline', height: '30%', width: '1rem' }} />,
            theme
        );
        const style = getComputedStyleFromHTMLString(wrapper.find(Spacer).html());
        expect(style.flex).toEqual('3 4 100%');
        expect(style.display).toEqual('inline');
        expect(style.height).toEqual('30%');
        expect(style.width).toEqual('1rem');
    });
});

Source File: InfoListItem.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

describe('InfoListItem', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <InfoListItem title={'test'} />
            </ThemeProvider>,
            div
        );
    });

    it('renders with icon', () => {
        let wrapper = mountWithTheme(<InfoListItem hidePadding icon={<PersonIcon />} title="Test" />, theme);
        expect(wrapper.find(PersonIcon).length).toEqual(1);
        wrapper = mountWithTheme(<InfoListItem hidePadding title="Test" />, theme);
        expect(wrapper.find(PersonIcon).length).toEqual(0);
    });

    it('renders correct icon Color', () => {
        // the following two lines are used to resolve a race condition
        let wrapper = mountWithTheme(<InfoListItem title={'Test'} />, theme);
        let testedStyle = getComputedStyleFromHTMLString(wrapper.find(Avatar).html());

        wrapper = mountWithTheme(<InfoListItem title={'Test'} icon={<PersonIcon />} statusColor={'red'} />, theme);
        testedStyle = getComputedStyleFromHTMLString(wrapper.find(Avatar).html());
        expect(testedStyle.color).toEqual('red');
        testedStyle = getComputedStyleFromHTMLString(findByTestId('status-stripe', wrapper).html());
        expect(testedStyle.backgroundColor).toEqual('red');

        wrapper = mountWithTheme(
            <InfoListItem title={'Test'} icon={<PersonIcon />} statusColor={'red'} iconColor={'green'} />,
            theme
        );
        testedStyle = getComputedStyleFromHTMLString(wrapper.find(Avatar).html());
        expect(testedStyle.color).toEqual('green');
        testedStyle = getComputedStyleFromHTMLString(findByTestId('status-stripe', wrapper).html());
        expect(testedStyle.backgroundColor).toEqual('red');

        wrapper = mountWithTheme(
            <InfoListItem title={'Test'} icon={<PersonIcon />} statusColor={'red'} avatar />,
            theme
        );
        testedStyle = getComputedStyleFromHTMLString(wrapper.find(Avatar).html());
        expect(testedStyle.color).toEqual(color(Colors.white['50']).rgb().string());
        expect(testedStyle.backgroundColor).toEqual('red');
        testedStyle = getComputedStyleFromHTMLString(findByTestId('status-stripe', wrapper).html());
        expect(testedStyle.backgroundColor).toEqual('red');

        wrapper = mountWithTheme(
            <InfoListItem title={'Test'} icon={<PersonIcon />} statusColor={'red'} iconColor={'blue'} avatar />,
            theme
        );
        testedStyle = getComputedStyleFromHTMLString(wrapper.find(Avatar).html());
        expect(testedStyle.color).toEqual('blue');
        expect(testedStyle.backgroundColor).toEqual('red');
        testedStyle = getComputedStyleFromHTMLString(findByTestId('status-stripe', wrapper).html());
        expect(testedStyle.backgroundColor).toEqual('red');
    });

    it('renders rightComponent', () => {
        let wrapper = mountWithTheme(<InfoListItem title="Test" chevron />, theme);
        expect(wrapper.find(Chevron).length).toEqual(1);

        wrapper = mountWithTheme(<InfoListItem title="Test" />, theme);
        expect(wrapper.find(Chevron).length).toEqual(0);

        wrapper = mountWithTheme(
            <InfoListItem title="Test" onClick={(): void => {}} rightComponent={<PersonIcon />} />,
            theme
        );
        expect(wrapper.find(Chevron).length).toEqual(0);
        expect(wrapper.find(PersonIcon).length).toEqual(1);
    });
    it('renders leftComponent', () => {
        const wrapper = mountWithTheme(<InfoListItem title="Test" leftComponent={<PersonIcon />} />, theme);
        expect(wrapper.find(PersonIcon).length).toEqual(1);
    });
});

Source File: EmptyState.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

describe('EmptyState', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <EmptyState
                    icon={<PersonIcon />}
                    title="Test"
                    description="Test Description"
                    actions={<Button> Test </Button>}
                />
                ,
            </ThemeProvider>,
            div
        );
    });

    it('renders with frame class', () => {
        const wrapper = mountWithTheme(<EmptyState icon={<PersonIcon />} title="Test" />, theme);
        expect(findByTestId('frame', wrapper)).toBeTruthy();
    });

    it('renders with icon', () => {
        const wrapper = mountWithTheme(<EmptyState icon={<PersonIcon />} title="Test" />, theme);
        expect(wrapper.find(PersonIcon).length).toEqual(1);
    });

    it('renders with text', () => {
        let wrapper = mountWithTheme(
            <EmptyState icon={<PersonIcon />} title="Test" description="Test Description" />,
            theme
        );
        expect(wrapper.find(Typography).length).toEqual(2);
        wrapper = mountWithTheme(<EmptyState icon={<PersonIcon />} title="Test" />, theme);
        expect(wrapper.find(Typography).length).toEqual(1);
    });

    it('renders with actions', () => {
        let wrapper = mountWithTheme(
            <EmptyState
                icon={<PersonIcon />}
                title="Test"
                description="Test Description"
                actions={<Button> Test </Button>}
            />,
            theme
        );
        expect(wrapper.find(Button).length).toEqual(1);
        wrapper = mountWithTheme(
            <EmptyState icon={<PersonIcon />} title="Test" description="Test Description" />,
            theme
        );
        expect(wrapper.find(Button).length).toEqual(0);
    });
});

Source File: AppBar.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

describe('AppBar', () => {
    it('should render without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <AppBar />
            </ThemeProvider>,
            div
        );
    });

    it('should render at the correct default sizes', () => {
        // Dynamic
        let appbar = mountWithTheme(<AppBar />, theme);
        let muiAppbar = appbar.find(MuiAppBar);
        let height = muiAppbar.props().style.height;
        expect(height).toEqual(200);

        // Collapsed
        appbar = mountWithTheme(<AppBar variant={'collapsed'} />, theme);
        muiAppbar = appbar.find(MuiAppBar);
        height = muiAppbar.props().style.height;
        expect(height).toEqual('4rem');

        // Expanded
        appbar = mountWithTheme(<AppBar variant={'expanded'} />, theme);
        muiAppbar = appbar.find(MuiAppBar);
        height = muiAppbar.props().style.height;
        expect(height).toEqual(200);
    });

    it('should render at the correct custom sizes', () => {
        // Dynamic
        let appbar = mountWithTheme(<AppBar expandedHeight={300} collapsedHeight={100} />, theme);
        let muiAppbar = appbar.find(MuiAppBar);
        let height = muiAppbar.props().style.height;
        expect(height).toEqual(300);

        // Collapsed
        appbar = mountWithTheme(<AppBar variant={'collapsed'} expandedHeight={300} collapsedHeight={100} />, theme);
        muiAppbar = appbar.find(MuiAppBar);
        height = muiAppbar.props().style.height;
        expect(height).toEqual(100);

        // Expanded
        appbar = mountWithTheme(<AppBar variant={'expanded'} expandedHeight={300} collapsedHeight={100} />, theme);
        muiAppbar = appbar.find(MuiAppBar);
        height = muiAppbar.props().style.height;
        expect(height).toEqual(300);
    });

    // TESTS FOR CYPRESS
    // 1. should be the correct size on underscroll
    // 1a: underscrolled should be min height
    // 1b. with custom size
    // 2. should be the correect size on overscroll
    // 2a. overscrolled should be max height
    // 2b. with custom size
    // 3. should be the correct size on partial scroll
});

Source File: MessageAttachmentImage.tsx From airmessage-web with Apache License 2.0

5 votes

export default function MessageAttachmentImage(props: {data: ArrayBuffer | Blob, name: string, type: string, partProps: MessagePartProps, tapbacks?: TapbackItem[], stickers?: StickerItem[]}) {
	const [imageURL, setImageURL] = useState<string | undefined>(undefined);
	const [previewOpen, setPreviewOpen] = useState(false);
	
	const theme = createTheme({
		palette: {
			mode: "dark",
			messageIncoming: undefined,
			messageOutgoing: undefined,
			messageOutgoingTextMessage: undefined
		}
	});
	
	useEffect(() => {
		//Creating a new image URL
		const imageURL = URL.createObjectURL(props.data instanceof Blob ? props.data : new Blob([props.data], {type: props.type}));
		
		//Setting the image URL
		setImageURL(imageURL);
		
		//Cleaning up the URL
		return () => URL.revokeObjectURL(imageURL);
	}, [props.data, props.type, setImageURL]);
	
	function downloadFile(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
		//So that we don't dismiss the backdrop
		event.stopPropagation();
		
		if(!imageURL) return;
		downloadURL(imageURL, props.type, props.name);
	}
	
	//All of the styles, without the border radius
	const buttonStyle: Partial<MessagePartProps> = {...props.partProps};
	delete buttonStyle["borderRadius"];
	
	return (
		<React.Fragment>
			<ThemeProvider theme={theme}>
				<Backdrop className={stylesImage.lightboxBackdrop} open={previewOpen} onClick={() => setPreviewOpen(false)}>
					<Toolbar className={stylesImage.lightboxToolbar}>
						<IconButton edge="start">
							<ArrowBack />
						</IconButton>
						<Typography variant="h6" color="textPrimary" style={{flexGrow: 1}}>{props.name}</Typography>
						<Tooltip title="Save">
							<IconButton onClick={downloadFile}>
								<SaveAlt />
							</IconButton>
						</Tooltip>
					</Toolbar>
					<div className={stylesImage.lightboxContainer}>
						<div style={{width: "100%", height: "100%", backgroundImage: `url("${imageURL}")`, backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundSize: "contain"}} />
					</div>
				</Backdrop>
			</ThemeProvider>
			
			<DecorativeMessageBubble element={ButtonBase} className={styles.contentBubble} style={props.partProps} onClick={() => setPreviewOpen(true)} tapbacks={props.tapbacks} stickers={props.stickers}>
				<img src={imageURL} style={{borderRadius: props.partProps.borderRadius}} alt="" />
			</DecorativeMessageBubble>
			
			{/*<ButtonBase className={styles.contentBubble} style={props.partProps} onClick={() => setPreviewOpen(true)}>*/}
			{/*	<img src={imageURL} style={{borderRadius: props.partProps.borderRadius}} alt="" />*/}
			{/*</ButtonBase>*/}
		</React.Fragment>
	);
}

Source File: AppTheme.tsx From airmessage-web with Apache License 2.0

5 votes

export default function AppTheme(props: {children: React.ReactNode}) {
	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
	
	const theme = React.useMemo(() => createTheme({
		typography: {
			fontFamily: [
				"-apple-system",
				"BlinkMacSystemFont",
				'"Segoe UI"',
				"Roboto",
				'"Helvetica Neue"',
				"Arial",
				"sans-serif",
				'"Apple Color Emoji"',
				'"Segoe UI Emoji"',
				'"Segoe UI Symbol"',
			].join(","),
		},
		palette: {
			mode: prefersDarkMode ? "dark" : "light",
			primary: {
				main: "#448AFF",
				dark: "#366FCC",
				light: "#52A7FF",
			},
			messageIncoming: prefersDarkMode ? {
				main: "#393939",
				contrastText: "#FFF"
			} : {
				main: "#EDEDED",
				contrastText: "rgba(0, 0, 0, 0.87)"
			},
			messageOutgoing: {
				main: "#448AFF",
				contrastText: "#FFF",
			},
			messageOutgoingTextMessage: {
				main: "#2ECC71",
				contrastText: "#FFF",
			},
			divider: prefersDarkMode ? "rgba(255, 255, 255, 0.1)" : "#EEEEEE",
			background: {
				default: prefersDarkMode ? "#1E1E1E" : "#FFFFFF",
				sidebar: prefersDarkMode ? "#272727" : "#FAFAFA"
			}
		},
		components: {
			MuiCssBaseline: {
				styleOverrides: {
					"@global": {
						html: {
							scrollbarColor: prefersDarkMode ? "#303030 #424242" : undefined
						}
					}
				}
			}
		}
	}), [prefersDarkMode]);
	
	return (
		<ThemeProvider theme={theme}>
			<CssBaseline />
			{props.children}
		</ThemeProvider>
	);
}

Source File: ScoreCard.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

4 votes

describe('ScoreCard', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(
            <ThemeProvider theme={theme}>
                <ScoreCard headerTitle={'TestTitle'} />
            </ThemeProvider>,
            div
        );
    });
    it('renders with all text', () => {
        let wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} />, theme);
        expect(wrapper.find(Typography).length).toEqual(1);
        wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} headerSubtitle={'TestSub'} />, theme);
        expect(wrapper.find(Typography).length).toEqual(2);
        wrapper = mountWithTheme(
            <ScoreCard headerTitle={'Test'} headerSubtitle={'TestSub'} headerInfo={'TestInfo'} />,
            theme
        );
        expect(wrapper.find(Typography).length).toEqual(3);
    });
    it('renders with header actions', () => {
        let wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} />, theme);
        expect(wrapper.find(MoreVert).length).toEqual(0);
        wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} actionItems={[<MoreVert key={'icon1'} />]} />, theme);
        expect(findByTestId('action-item', wrapper).length).toEqual(1);
        expect(wrapper.find(MoreVert).length).toEqual(1);
        wrapper = mountWithTheme(
            <ScoreCard
                actionLimit={2}
                headerTitle={'Test'}
                actionItems={[<MoreVert key={'icon1'} />, <MoreVert key={'icon2'} />, <MoreVert key={'icon3'} />]}
            />,
            theme
        );
        expect(findByTestId('action-item', wrapper).length).toEqual(2);
        expect(wrapper.find(MoreVert).length).toEqual(2);
    });
    it('renders correct header text color', () => {
        let wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} />, theme);
        let testedStyle = getComputedStyleFromHTMLString(findByTestId('header', wrapper).html());
        expect(testedStyle.color).toEqual(color(Colors.white['50']).rgb().string());

        wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} headerFontColor={'red'} />, theme);
        testedStyle = getComputedStyleFromHTMLString(wrapper.find(Typography).html());
        expect(testedStyle.color).toEqual('red');
        testedStyle = getComputedStyleFromHTMLString(findByTestId('header', wrapper).html());
        expect(testedStyle.color).toEqual('red');
    });
    it('renders body content', () => {
        let wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} />, theme);
        let content = findByTestId('content', wrapper);
        let body = findByTestId('body-wrapper', wrapper);
        expect(content.children().length).toEqual(1); // body wrapper
        expect(body.children().length).toEqual(0);

        wrapper = mountWithTheme(
            <ScoreCard headerTitle={'Test'}>
                <List />
            </ScoreCard>,
            theme
        );
        content = findByTestId('content', wrapper);
        body = findByTestId('body-wrapper', wrapper);
        expect(content.children().length).toEqual(1);
        expect(body.children(List).length).toEqual(1);
        expect(wrapper.find(List).length).toEqual(1);
    });
    it('renders an action row', () => {
        const wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} actionRow={<List />} />, theme);
        const card = findByTestId('card', wrapper);
        expect(card.children().length).toEqual(4); // header, content, footer (Divider + content)
        expect(wrapper.find(List).length).toEqual(1);
        expect(wrapper.find(Divider).length).toEqual(1);
    });
    it('renders badge content', () => {
        let wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} badge={<HeroBanner />} />, theme);
        const content = findByTestId('content', wrapper);
        const body = findByTestId('body-wrapper', wrapper);
        let badge = findByTestId('badge-wrapper', wrapper);
        expect(content.children().length).toEqual(2); // body wrapper + badge
        expect(body.children().length).toEqual(0); // no body
        expect(badge.children(HeroBanner).length).toEqual(1);
        /* These won't work if we use JSS to style the component
        expect(badge.props().style.marginTop).toEqual(0);
        expect(badge.props().style.alignSelf).toEqual('center');
        */

        wrapper = mountWithTheme(<ScoreCard headerTitle={'Test'} badge={<HeroBanner />} badgeOffset={1} />, theme);
        badge = findByTestId('badge-wrapper', wrapper);
        expect(badge.children(HeroBanner).length).toEqual(1);
        /* These won't work if we use JSS to style the component
        expect(badge.props().style.marginTop).toEqual(1);
        expect(badge.props().style.alignSelf).toEqual('flex-start');
        */
    });
});

@mui/material/styles#ThemeProvider TypeScript Examples