@twa-dev/mark42/dist/Components/AppearanceProvider/AppearanceProvider.test.js

Mark42 is a simple lightweight tree-shakable UI library for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps).

import { cleanup, getByTestId, render } from "@testing-library/react";
import { AppearanceProvider } from "./AppearanceProvider";
import { useTheme } from "../../hooks/useTheme";
import { usePlatform } from "../../hooks/usePlatform";
import { useColorScheme } from "../../hooks/useColorScheme";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var defaults = {
  colorScheme: "light",
  theme: "material",
  platform: "unknown"
};
afterEach(cleanup);
afterEach(function () {
  document.body.setAttribute("data-color-scheme", defaults.colorScheme);
  document.body.setAttribute("data-theme", defaults.theme);
});

var App = function App() {
  var theme = useTheme();
  var platform = usePlatform();
  var colorScheme = useColorScheme();
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx("div", {
      "data-testid": "colorScheme",
      children: colorScheme
    }), /*#__PURE__*/_jsx("div", {
      "data-testid": "theme",
      children: theme
    }), /*#__PURE__*/_jsx("div", {
      "data-testid": "platform",
      children: platform
    })]
  });
};

it("checks basic usage", function () {
  var _render = render( /*#__PURE__*/_jsx(AppearanceProvider, {
    children: /*#__PURE__*/_jsx(App, {})
  })),
      container = _render.container;

  expect(getByTestId(container, "colorScheme").textContent).toEqual(defaults.colorScheme);
  expect(document.body.dataset.colorScheme).toEqual(defaults.colorScheme);
  expect(getByTestId(container, "theme").textContent).toEqual(defaults.theme);
  expect(document.body.dataset.theme).toEqual(defaults.theme);
  expect(getByTestId(container, "platform").textContent).toEqual(defaults.platform);
});
it("checks usage with props", function () {
  var _render2 = render( /*#__PURE__*/_jsx(AppearanceProvider, {
    theme: "apple",
    platform: "android",
    colorScheme: "dark",
    children: /*#__PURE__*/_jsx(App, {})
  })),
      rerender = _render2.rerender,
      container = _render2.container;

  expect(getByTestId(container, "colorScheme").textContent).toEqual("dark");
  expect(document.body.dataset.colorScheme).toEqual("dark");
  expect(getByTestId(container, "theme").textContent).toEqual("apple");
  expect(document.body.dataset.theme).toEqual("apple");
  expect(getByTestId(container, "platform").textContent).toEqual("android");
  rerender( /*#__PURE__*/_jsx(AppearanceProvider, {
    platform: "android",
    children: /*#__PURE__*/_jsx(App, {})
  }));
  expect(getByTestId(container, "theme").textContent).toEqual("material");
  expect(document.body.dataset.theme).toEqual("material");
});
it("works fine without provider", function () {
  var _render3 = render( /*#__PURE__*/_jsx(App, {})),
      container = _render3.container;

  expect(getByTestId(container, "colorScheme").textContent).toEqual(defaults.colorScheme);
  expect(document.body.dataset.colorScheme).toEqual(defaults.colorScheme);
  expect(getByTestId(container, "theme").textContent).toEqual(defaults.theme);
  expect(document.body.dataset.theme).toEqual(defaults.theme);
  expect(getByTestId(container, "platform").textContent).toEqual(defaults.platform);
});