- Add PW

- Rename to MiniDb

Author: Ivan Buryak

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -16,31 +16,31 @@ Simple but fully functional way to persist your Jotai atoms in IndexedDB. Analog
 // Jotai V2 API!
 import { useAtom, useAtomValue, useSetAtom } from "jotai/react";
 
-import { JotaiMiniDb } from "jotai-minidb";
+import { MiniDb } from "jotai-minidb";
 
 // Items in a store can be typed
 type Item = {
   name: string;
 };
 
 // Create a store (with default database name)
-const myStore = new JotaiMiniDb<Item>();
+const myDb = new MiniDb<Item>();
 
 // Multiple stores connected to different databases can be created
-const myOtherStore = new JotaiMiniDb<string>({ name: "myOtherStore" })
+const myOtherDb = new MiniDb<string>({ name: "myOtherDb" })
 
 // 1. Get all keys, values or entries
 export function Entries() {
-    const keys = useAtomValue(myStore.keys);
-    const values = useAtomValue(myStore.values);
-    const entries = useAtomValue(myStore.entries);
+    const keys = useAtomValue(myDb.keys);
+    const values = useAtomValue(myDb.values);
+    const entries = useAtomValue(myDb.entries);
 
     return entries.map(([key, entry]) => <li>{entry.name}</li>)
 }
 
 // 2. Get, or set item in a store
 export function Entry() {
-    const [item, setItem] = useAtom(myStore.item('some-item-key'));
+    const [item, setItem] = useAtom(myDb.item('some-item-key'));
 
     if (!item) {
         return null
@@ -74,7 +74,7 @@ type Item = {
   age: number;
 };
 
-const myStore = new JotaiMiniDb<Item>({
+const myDb = new MiniDb<Item>({
     version: 1,
     migrations: {
         1: (item) => {

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "license": "MIT",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=4141",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest"
@@ -24,6 +24,7 @@
     "jotai": ">=1.10.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.29.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",

playwright.config.ts

@@ -0,0 +1,108 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:4141',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn dev',
+    port: 4141,
+    reuseExistingServer: !process.env.CI,
+  },
+};
+
+export default config;

src/Showcase.css

@@ -26,9 +26,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
 }
 
@@ -70,9 +67,7 @@ button:focus-visible {
 }
 #root {
   max-width: 1280px;
-  margin: 0 auto;
   padding: 2rem;
-  text-align: center;
 }
 
 .logo {

src/Showcase.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { useAtom, useAtomValue, useSetAtom } from "jotai/react";
 
-import { JotaiMiniDb } from "./lib/jotai-minidb";
+import { MiniDb } from "./lib/jotai-minidb";
 
 type Item = {
   name: string;
 };
-const simpleStore = new JotaiMiniDb<Item>();
+const simpleStore = new MiniDb<Item>();
 
 function getNewItem(): Item {
   return {
@@ -15,13 +15,15 @@ function getNewItem(): Item {
 }
 
 export default function Showcase() {
+  useAtomValue(simpleStore.initStatus);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const entries = useAtomValue(simpleStore.entries);
   const set = useSetAtom(simpleStore.set);
   const del = useSetAtom(simpleStore.delete);
 
   return (
     <div className="container">
+      <h1>Jotai-minidb example app</h1>
       <div className="sidebar">
         <ul>
           {entries.map(([key, item]) => (

src/lib/jotai-minidb.test-d.ts

@@ -1,30 +1,30 @@
 import { WritableAtom, Atom } from "jotai/vanilla";
 import { it, expectTypeOf } from "vitest";
-import { JotaiMiniDb } from "./jotai-minidb";
+import { MiniDb } from "./jotai-minidb";
 
 type Item = {
   my: string;
   prop: number;
 };
 
 it("item atom typings", () => {
-  const db = new JotaiMiniDb<Item>();
+  const db = new MiniDb<Item>();
   expectTypeOf(db.item("123")).toMatchTypeOf<
     WritableAtom<Item | undefined, [Item], Promise<void>>
   >();
 });
 
 it("entries atom typings", () => {
-  const db = new JotaiMiniDb<Item>();
+  const db = new MiniDb<Item>();
   expectTypeOf(db.entries).toMatchTypeOf<Atom<[string, Item][]>>();
 });
 
 it("keys atom typings", () => {
-  const db = new JotaiMiniDb<Item>();
+  const db = new MiniDb<Item>();
   expectTypeOf(db.keys).toMatchTypeOf<Atom<string[]>>();
 });
 
 it("values atom typings", () => {
-  const db = new JotaiMiniDb<Item>();
+  const db = new MiniDb<Item>();
   expectTypeOf(db.values).toMatchTypeOf<Atom<Item[]>>();
 });