Feat/tests (#39)

tsotimus · Feb 12, 2024 · 57273ad · 57273ad
1 parent 4482ca2
commit 57273ad
Show file tree

Hide file tree

Showing 23 changed files with 2,074 additions and 1,507 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -4,6 +4,42 @@ on:
     branches: [main]
 
 jobs:
+  build_and_test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: 
+          node-version: 20
+      - run: npm ci
+      - run: npm run build
+      - name: Archive production artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: package-dist
+          retention-days: 1
+          path: |
+            packages/vite-plugin-posthog/dist
+      - name: Create env file
+        run: | 
+          cd apps/example-react
+          touch .env
+          echo VITE_POSTHOG_KEY=${{secrets.VITE_POSTHOG_KEY}} > .env
+          echo VITE_CHECK_FOR_DEV=false > .env
+      - name: "Build Vite App"
+        run: npm run example:build
+      - 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
+
+
   publish:
     runs-on: ubuntu-latest
     permissions:
@@ -14,7 +50,11 @@ jobs:
         with:
           node-version: 20
       - run: npm ci
-      - run: npm run build
+      - name: Download production artifacts
+        uses: actions/download-artifact@v2
+        with:
+          name: package-dist
+          path: packages/vite-plugin-posthog/dist
       - uses: JS-DevTools/npm-publish@v3
         id: publish
         with:
@@ -30,11 +70,11 @@ jobs:
           custom_tag: v${{steps.publish.outputs.version}}
           tag_prefix: vite-plugin-posthog_
 
-
       - name: Create a GitHub release
         if: ${{ steps.publish.outputs.type }}
         uses: ncipollo/release-action@v1
         with:
           tag: ${{ steps.tag_version.outputs.new_tag }}
           name: ${{ steps.tag_version.outputs.new_tag }}
           body: ${{ steps.tag_version.outputs.changelog }}
+          generateReleaseNotes: true
diff --git a/apps/example-cra/package.json b/apps/example-cra/package.json
diff --git a/apps/example-react/.env.example b/apps/example-react/.env.example
@@ -0,0 +1,2 @@
+VITE_APP_TITLE=
+VITE_POSTHOG_KEY=
diff --git a/apps/example-react/index.html b/apps/example-react/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Vite + React</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/example-react/package.json b/apps/example-react/package.json
@@ -24,7 +24,6 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
-    "vite-plugin-posthog": "2.0.4",
-    "react-posthog-consent": "*"
+    "vite-plugin-posthog": "*"
   }
 }
diff --git a/apps/example-react/src/App.tsx b/apps/example-react/src/App.tsx
@@ -6,15 +6,13 @@ import {
   useVitePostHog,
   useFeatureFlagEnabled,
 } from "vite-plugin-posthog/react";
-import { useConsent } from "react-posthog-consent/vite";
 
 function App() {
   const [count, setCount] = useState(0);
   const posthog = useVitePostHog();
   const showWelcomeMessage = useFeatureFlagEnabled("welcome-msg");
-  const { handleReset } = useConsent();
 
-  const handleClick = () => {
+  const handleClickBeacon = () => {
     posthog?.capture("count incremented");
     setCount((count) => count + 1);
   };
@@ -32,15 +30,16 @@ function App() {
       <h1>Vite + React</h1>
       {showWelcomeMessage && <h2>Welcome to Vite + React!</h2>}
       <div className="card">
-        <button onClick={handleClick}>count is {count}</button>
+        <button onClick={handleClickBeacon} data-testid={"main_count_btn"}>
+          count is {count}
+        </button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
-      <button onClick={handleReset}>Custom Reset</button>
       <button onClick={() => posthog?.reset()}>Reset</button>
     </>
   );

diff --git a/apps/example-react/src/CookieBanner.tsx b/apps/example-react/src/CookieBanner.tsx
diff --git a/apps/example-react/src/main.tsx b/apps/example-react/src/main.tsx
@@ -1,24 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
+import { PageTrack } from "vite-plugin-posthog/react";
 import "./assets/index.css";
-import { ConsentProvider } from "react-posthog-consent/vite";
-import CookieBanner from "./CookieBanner.tsx";
-
-const COOKIE_PREFIX = "my_app_name";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ConsentProvider
-      cookieBanner={<CookieBanner />}
-      config={{
-        cookiePrefix: COOKIE_PREFIX,
-        opt_in_name: "Opt In",
-        cookie_expiration: 30,
-        secure_cookie: true,
-      }}
-    >
+    <PageTrack uniquePageTitle="Home" eventMetaData={{ feature: "HomePage" }}>
       <App />
-    </ConsentProvider>
+    </PageTrack>
   </React.StrictMode>
 );
diff --git a/apps/example-react/vite.config.ts b/apps/example-react/vite.config.ts
@@ -14,13 +14,17 @@ export default ({ mode }) => {
       vitePostHog({
         apiKey: process.env.VITE_POSTHOG_KEY,
         hostUrl: "https://eu.posthog.com",
-        isDevModeOn: true,
+        isCheckingForDevMode: process.env.VITE_CHECK_FOR_DEV === "true",
         config: {
           autocapture: false,
           disable_session_recording: true,
-          opt_out_capturing_by_default: true,
+          capture_pageleave: false,
+          capture_pageview: false,
         },
       }),
     ],
+    preview: {
+      port: 4001,
+    },
   });
 };