v0.0.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meta-theme-swap",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Synchronizes WebKit meta theme color with elements on the page.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,6 +31,7 @@
   },
   "homepage": "https://github.com/hebertcisco/ts-npm-package-boilerplate#readme",
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "29.4.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.52.0",
@@ -39,6 +40,7 @@
     "eslint-plugin-react": "^7.32.2",
     "jest": "29.4.3",
     "prettier": "2.8.4",
+    "react-dom": "^18.2.0",
     "ts-jest": "29.0.5",
     "typescript": "4.9.5"
   },

src/__tests__/MetaThemeContext.test.tsx

@@ -0,0 +1,30 @@
+/*
+ * index.test.ts
+ * author: evan kirkiles
+ * created on Sun Jun 04 2023
+ * 2023 the nobot space
+ */
+
+import React from 'react';
+import { ColoredSection } from './helpers';
+import { render } from './utils';
+// import {ColoredSection} from "./helpers";
+
+// TODO: Write tests
+// describe('<MetaThemeProvider />', () => {
+//   test('mocks the theme-color meta tag', () => {
+//     render(
+//       <>
+//         <ColoredSection color="#ffffff" />
+//       </>,
+//     );
+//     const meta = document.querySelector('meta[name="theme-color"]');
+//     expect(meta?.getAttribute('content')).toBe('#000000');
+//   });
+// });
+
+describe('<MetaThemeProvider />', () => {
+  test('needs a test', () => {
+    expect(true).toBe(true);
+  });
+});

src/__tests__/helpers.tsx

@@ -0,0 +1,19 @@
+/*
+ * helpers.tsx
+ * author: evan kirkiles
+ * created on Tue Jun 06 2023
+ * 2023 the nobot space
+ */
+
+import React, { useRef } from 'react';
+import useMetaTheme from '../useMetaTheme';
+
+export function ColoredSection({ size = '50vh', color }: { size?: string; color: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useMetaTheme(ref, color);
+  return (
+    <div id={color} style={{ backgroundColor: color, width: '100%', height: size }} ref={ref}>
+      {color}
+    </div>
+  );
+}

src/__tests__/utils.tsx

@@ -0,0 +1,36 @@
+/*
+ * utils.ts
+ * author: evan kirkiles
+ * created on Tue Jun 06 2023
+ * 2023 the nobot space
+ */
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom';
+import MetaThemeProvider from '../MetaThemeContext';
+
+beforeEach(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockIntersectionObserver = jest.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+  });
+  window.IntersectionObserver = mockIntersectionObserver;
+});
+
+export const render = (node: React.ReactNode) => {
+  // add white theme-color meta tag
+  const meta = document.createElement('meta');
+  meta.setAttribute('name', 'theme-color');
+  meta.setAttribute('content', '#000000');
+
+  // render meta theme context around app
+  const mount = document.getElementById('mount');
+  ReactDOM.render(
+    <StrictMode>
+      <MetaThemeProvider>{node}</MetaThemeProvider>
+    </StrictMode>,
+    mount,
+  );
+};

src/globals.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';