Malibu-36/Bug: Fix tests failing in PR (#221)

.env.example

@@ -1,15 +1,21 @@
 DATABASE_URL=postgres://postgres:postgres@localhost:6532/db
+
 SECRET_KEY=
+OPENAI_API_KEY=
+
 POSTMARK_API_KEY=
 EMAIL_SENDER_SIGNATURE=
-OPENAI_API_KEY=
+
 NODE_ENV=development
-DEPLOYMENT_ENV=production
-PUBLIC_SENTRY_DSN=
-PUBLIC_SENTRY_ENV=
+DEPLOYMENT_ENV=development
+
 SENTRY_AUTH_TOKEN=
 SENTRY_ORG=prototyp-vm
 SENTRY_PROJECT=taco
+
+PUBLIC_SENTRY_DSN=
+PUBLIC_SENTRY_ENV=development
+
 PUBLIC_SITE_NAME=TACO
 PUBLIC_SITE_URL=http://localhost:5173
 PUBLIC_RECAPTCHA_SITE_KEY=

.github/workflows/test.yml

@@ -27,17 +27,16 @@ jobs:
     env:
       POSTMARK_API_KEY: ${{ secrets.POSTMARK_API_KEY }}
       PUBLIC_SITE_NAME: TACO [TEST]
-      EMAIL_SENDER_SIGNATURE: [email protected]
+      EMAIL_SENDER_SIGNATURE: ${{ secrets.EMAIL_SENDER_SIGNATURE }}
       PUBLIC_SENTRY_DSN: ${{ secrets.PUBLIC_SENTRY_DSN }}
       PUBLIC_SENTRY_ENV: test
-      PUBLIC_SITE_URL: http://localhost:5173/
+      PUBLIC_SITE_URL: http://localhost:5173
       DATABASE_URL: postgresql://postgres:postgres@localhost:0432/db
-      NODE_ENV: test
+      ORIGIN: ${{ vars.ORIGIN }}
+      SECRET_KEY: ${{ secrets.SECRET_KEY }}
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       PUBLIC_RECAPTCHA_SITE_KEY: ${{ secrets.PUBLIC_RECAPTCHA_SITE_KEY }}
       RECAPTCHA_SECRET_KEY: ${{ secrets.RECAPTCHA_SECRET_KEY }}
-      ORIGIN: http://localhost:3000
-      OPENAI_API_KEY: sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -57,4 +56,18 @@ jobs:
         run: npx prisma migrate deploy
 
       - name: Run tests
+        id: test
         run: npx playwright test
+        continue-on-error: true
+
+      - name: Save artifacts
+        if: steps.test.outcome == 'failure'
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          retention-days: 7
+
+      - name: Fail if test fails
+        if: steps.test.outcome == 'failure'
+        run: exit 1

.gitignore

@@ -14,3 +14,7 @@ vite.config.ts.timestamp-*
 # Sentry Auth Token
 .sentryclirc
 .vscode
+
+playwright-report/
+test-results/
+

README.md

@@ -1,11 +1,46 @@
 # TACO (Team AI Chat pOrtal) 🌮
 
-A helpful frontend for ChatGPT with the possibility to share the API key with the whole team.
+![GitHub Actions Status](https://github.com/prototypsthlm/taco/actions/workflows/test.yml/badge.svg)
 
-## Developing
+TACO is an open-source frontend for ChatGPT built with <b>SvelteKit</b> that allows teams to collaborate effectively by sharing a single API key, providing easy access to AI-powered chat functionality.
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install`
-or `yarn`), start a development server:
+Official website: https://www.tacoai.app/
+
+## Table of Contents
+
+-   [Prerequisites](#prerequisites)
+-   [Setup](#setup)
+-   [Usage](#usage)
+-   [Prisma Setup](#prisma-setup)
+-   [Building](#building)
+-   [Testing](#testing)
+-   [Technical Details](#technical-details)
+-   [Contribution](#contribution)
+-   [About Prototyp](#about-prototyp)
+
+## Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+-   **Node.js**: Version 16.x or later
+-   **Docker**: For containerized environments (check with `docker --version`)
+
+## Setup
+
+1. Clone the project and install dependencies with `npm install` (or `pnpm install`
+   or `yarn`)
+
+2. Set up environment variables by copying the `.env.example` file to `.env`:
+
+    ```bash
+    cp .env.example .env
+    ```
+
+3. Follow [Prisma setup](#prisma-setup) to add a database for local development
+
+## Usage
+
+To start the development server:
 
 ```bash
 npm run dev
@@ -37,14 +72,7 @@ Follow these steps to initialize Prisma in your project:
     npx prisma migrate dev
     ```
 
-4. (Optional) Seed the database with initial data (no need to manually do it, since it's done
-   automatically by the migrate command):
-
-    ```bash
-    npx prisma db seed
-    ```
-
-5. Your Prisma setup is now complete! You can start using the Prisma client in your application code
+4. Your Prisma setup is now complete! You can start using the Prisma client in your application code
    to interact with the database.
 
 Make sure to configure your database connection details and any other necessary settings in
@@ -76,37 +104,43 @@ You can preview the production build with `npm run preview`.
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for
 > your target environment.
 
-## Tailwind UI
+## Testing
+
+run
+
+```
+npx playwright test
+```
+
+to run the E2E tests.
+
+Use `--debug` or `--headed` flags to run the tests in browser.
+
+## Technical Details
+
+### Tailwind UI
 
 We use Tailwind UI to style the app. Tailwind UI relies on Headless UI in some parts. We use
 a svelte implementation of that library: @rgossiaux/svelte-headlessui. TWUI also relies on
 Heroicons, there is also a svelte port of that icon collection @babeard/svelte-heroicons.
 
 You can see all that in action in `src/lib/components/ModalConfirm.svelte`.
 
-## Dark Mode
-
-We changed the default dark mode styling strategy in Tailwind to be class based (see tailwind
-config) instead of based in the system preference only. So now, the site respects user pref on dark
-mode but also allows us to force dark mode where there's no "non-dark" mode implemented. that can be
-done just adding the class `dark` to any part we want to force dark mode. See `Input` component
-usage in sign in and sign up for reference.
+### Dark Mode
 
-We control the dark mode toggling here: `src/routes/+layout.svelte`.
+We have changed the default dark mode styling strategy in Tailwind CSS to be class-based (see tailwind.config.ts), rather than relying solely on system preferences. This adjustment allows the site to respect user preferences for dark mode while also enabling us to enforce dark mode in areas where a light mode is not implemented.
 
-## Form validations
+To force dark mode, simply add the class dark to any element where you want it to take effect. For reference, you can see the usage in the Input component on the sign-in and sign-up pages.
 
-We use zod validation library to validate forms. See settings and auth routes for ref. There is
-probably a good opportunity for an abstraction there given we use everywhere the same pattern.
+We manage the dark mode toggling in src/routes/+layout.svelte.
 
-## Email provide
+### Email provider
 
-As email provider Postmark is used. Email templates are created in some extra ts files. Therefore it should be easy to
-switch to another email provider by just switching out the provider in the email file.
+We utilize <b>Postmark</b> as our email provider. Email templates are created in separate TypeScript files, making it easy to switch to another email provider by simply changing the provider configuration in the email file.
 
 ## Contribution
 
-Your are very welcome to do any kind of contribution that being issue reporting, code contribution or feature requests! Please take a look into the issue section of this repo to make sure your request isn't already existing. If not feel free to create an issue and tag it with suiting labels.
+We welcome all contributions, whether through issue reporting, code contributions, or feature requests! Please check the [Issues](https://github.com/prototypsthlm/taco/issues) section of this repository to ensure your request has not already been submitted. If you don't find an existing issue, feel free to create a new one and tag it with the appropriate labels.
 
 ## About Prototyp
 

playwright.config.ts

@@ -5,7 +5,11 @@ const config: PlaywrightTestConfig = {
     command: 'npm run build && node server.js',
     url: 'http://localhost:3000',
   },
+  reporter: 'html',
   use: {
+    headless: true,
+    trace: 'on',
+    video: 'retain-on-failure',
     baseURL: 'http://localhost:3000',
   },
   testDir: 'tests',

src/lib/components/Input.svelte

@@ -25,6 +25,7 @@
   {/if}
   <div class="relative shadow-sm">
     <input
+      data-testid={id}
       {id}
       {name}
       {type}

src/lib/components/InputGroup.svelte

@@ -23,6 +23,7 @@
     </div>
     <div class="mt-8 flex gap-4">
       <button
+        data-testid={`${buttonText.toLowerCase()}-button`}
         type="submit"
         disabled={formLoading}
         class="flex rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"

src/lib/components/Notification.svelte

@@ -78,6 +78,7 @@
             </div>
             <div class="ml-4 flex flex-shrink-0">
               <button
+                data-testid="dismiss-notification"
                 type="button"
                 class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                 on:click={() => handleDismiss(n)}

src/routes/+page.svelte

@@ -88,12 +88,16 @@
     {:else}
       <div class="flex gap-8 items-center justify-center">
         <a
+          data-testid="goto-signin"
           href="/signin"
           class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
           >Sign in
         </a>
         <p class="text-white opacity-70">or</p>
-        <a href="/signup" class="text-sm font-semibold leading-6 text-white"
+        <a
+          data-testid="goto-signup"
+          href="/signup"
+          class="text-sm font-semibold leading-6 text-white"
           >Register <span aria-hidden="true">→</span></a
         >
       </div>

src/routes/app/settings/teams/+page.svelte

@@ -29,6 +29,7 @@
 >
   <h1 class="text-lg font-semibold leading-7 text-white">Teams</h1>
   <a
+    data-testid="new-team-link"
     href="/app/settings/teams/new"
     class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
   >
@@ -56,6 +57,7 @@
                 on:click={() => {
                   removeFlashNotificationOfCategory('NO_TEAM')
                 }}
+                data-testid="select-team-button"
                 type="submit"
                 class="rounded-md bg-yellow-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                 >Select</button

src/routes/signin/+page.svelte

@@ -97,6 +97,7 @@
         </div>
 
         <button
+          data-testid="signin-button"
           type="submit"
           disabled={formLoading}
           class="flex w-full justify-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"

src/routes/signup/+page.svelte

@@ -88,6 +88,7 @@
         />
         <div>
           <button
+            data-testid="signup-button"
             type="submit"
             disabled={formLoading}
             class="flex w-full justify-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"

svelte.config.js

@@ -13,7 +13,7 @@ export default {
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
     csrf: {
-      checkOrigin: process.env.NODE_ENV !== 'test',
+      checkOrigin: true,
     },
   },
 }