@emotion/react#ThemeProvider TypeScript Examples

The following examples show how to use @emotion/react#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: InfoBanner.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
describe("InfoBanner unit tests", () => {
  it("should render", () => {
    const { getByText } = render(
      <ThemeProvider theme={theme}>
        <InfoBanner
          data={{ theme: "primary", message: "Some information banner" }}
        />
      </ThemeProvider>
    )

    expect(getByText("Some information banner")).not.toBeNull()
  })

  it("should not render when data is not present", () => {
    const props = {}
    const { container } = render(
      <ThemeProvider theme={theme}>
        <InfoBanner {...(props as any)} />
      </ThemeProvider>
    )

    expect(container.innerHTML).toBe("")
  })
})
Example #2
Source File: InfoToast.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
describe("InfoToast unit tests", () => {
  it("should render", () => {
    const { getByText } = render(
      <ThemeProvider theme={theme}>
        <InfoToast
          data={{ theme: "primary", message: "Some information banner" }}
        />
      </ThemeProvider>
    )

    expect(getByText("Some information banner")).not.toBeNull()
  })

  it("should not render when data is not available", () => {
    const props = {}
    const { container } = render(
      <ThemeProvider theme={theme}>
        <InfoToast {...(props as any)} />
      </ThemeProvider>
    )

    expect(container.innerHTML).toBe("")
  })
})
Example #3
Source File: PageTitle.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
describe("PageTitle unit test cases", () => {
  it("should render", () => {
    const { container } = render(
      <ThemeProvider theme={theme}>
        <PageTitle title={"Page title"} className={""} />
      </ThemeProvider>
    )

    expect(container.innerHTML).not.toBe("")
  })

  it("should render page title", () => {
    const { getByText } = render(
      <ThemeProvider theme={theme}>
        <PageTitle title={"Page title"} className={""} />
      </ThemeProvider>
    )
    expect(getByText("Page title")).not.toBeNull()
  })

  it("should render subtitle", () => {
    const { getByText } = render(
      <ThemeProvider theme={theme}>
        <PageTitle
          title={"Page title"}
          subtitle={"Subtitle text"}
          className={""}
        />
      </ThemeProvider>
    )
    expect(getByText("Subtitle text")).not.toBeNull()
  })
})
Example #4
Source File: HubImagesListPreview.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("HubImagesListPreview", () => {
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <Provider store={store}>
        <Router>
          <HubImagesListPreview />
        </Router>
      </Provider>
    </ThemeProvider>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
Example #5
Source File: ImageCard.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("ImageCard", () => {
  const image = {
    name: "Enel",
    author: "Oda",
    keywords: ["encoder"],
    kind: "encoder",
    description: "whatever",
  }
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <Router>
        <ImageCard image={image} index={7} />
      </Router>
    </ThemeProvider>
  )
  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})
Example #6
Source File: ImageDetails.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("ImageDetails", () => {
  const image = {
    platform: ["Enel"],
    author: "Oda",
    keywords: ["encoder"],
    "docker-command": "whatever",
  };
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <ImageDetails image={(image as unknown) as HubImage} />
    </ThemeProvider>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
Example #7
Source File: Readme.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("Readme", () => {
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <Readme
        documentation={
          "https://raw.githubusercontent.com/jina-ai/jina-hub/master/encoders/image/BigTransferEncoder/README.md"
        }
      />
    </ThemeProvider>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
Example #8
Source File: ColorsPage.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("Colors page", () => {
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <ColorsPage />
    </ThemeProvider>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
Example #9
Source File: MiscPage.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("Misc page", () => {
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <MiscPage />
    </ThemeProvider>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
Example #10
Source File: TypographyPage.test.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
test("Typograpy page", () => {
  const component = renderer.create(
    <ThemeProvider theme={theme}>
      <TypographyPage />
    </ThemeProvider>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
Example #11
Source File: index.tsx    From dashboard with Apache License 2.0 6 votes vote down vote up 
function renderApp(imported: any) {
  const App = imported.default
  ReactDOM.render(
    // HOC to make theme available as a prop in all components
    <MuiThemeProvider theme={theme}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </MuiThemeProvider>,
    document.getElementById("root")
  )
}
Example #12
Source File: _app.tsx    From rcvr-app with GNU Affero General Public License v3.0 6 votes vote down vote up 
RecoverApp: RecoverAppFC = ({
  Component,
  pageProps: { localeContext, ...pageProps },
}) => {
  useA11yFocusRing()

  return (
    <ThemeProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <LocalesContextProvider value={localeContext}>
          <Global styles={globalStyles} />
          <AnimateSharedLayout>
            <SupportedBrowsersAlert />
            <Component {...pageProps} />
          </AnimateSharedLayout>
        </LocalesContextProvider>
      </QueryClientProvider>
    </ThemeProvider>
  )
}
Example #13
Source File: app.tsx    From master-frontend-lemoncode with MIT License 5 votes vote down vote up 
App = () => {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  );
}
Example #14
Source File: HubOverviewActionsContainer.test.tsx    From dashboard with Apache License 2.0 5 votes vote down vote up 
test("actions on hub homepage", () => {
  const component = renderer.create(<ThemeProvider theme={theme} ><HubOverviewActionsContainer /></ThemeProvider>);
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});