diff --git a/.env.development b/.env.development index 0ed83a6..74c8d27 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ VITE_API_BASE_URL=https://api.dev.zoo.dev VITE_SITE_BASE_URL=https://dev.zoo.dev +PLAYWRIGHT_SESSION_COOKIE='' diff --git a/.github/workflows/unitTests.yml b/.github/workflows/unitTests.yml new file mode 100644 index 0000000..4a54e20 --- /dev/null +++ b/.github/workflows/unitTests.yml @@ -0,0 +1,22 @@ +name: Unit Tests +on: + push: + branches: [main] + pull_request: + branches: [main] +jobs: + main: + timeout-minutes: 10 + runs-on: macos-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + - name: Install dependencies + run: yarn + - name: Run integration tests + run: yarn test:unit run + env: + CI: true diff --git a/.gitignore b/.gitignore index a64e7ae..2839d60 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,7 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* + + +# playwright artifacts +test-results \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..1df6fd4 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v20.5.0 diff --git a/README.md b/README.md index d364301..ac4cb6f 100644 --- a/README.md +++ b/README.md @@ -42,3 +42,13 @@ CookieDate.setFullYear(CookieDate.getFullYear() + 10) document.cookie = '__Secure-next-auth.session-token=YOUR_TOKEN;Secure;expires=' + CookieDate.toUTCString() + ';' ``` + +### Running Playwright E2E tests locally + +In order to run our Playwright testing suite locally, please set the `PLAYWRIGHT_SESSION_COOKIE` variable within `.env.development` to a token from a logged in local development session. You can retrieve it by: + +1. logging in to the project locally using the method outlined above +2. opening the Application tab in your browser developer tools +3. copying out the value of the cookie titled `__Secure-next-auth.session-token` with the domain of `localhost` + +Now you should be able to run the `yarn test:integration` and `yarn test` commands successfully. diff --git a/package.json b/package.json index 71240c7..ca2b3fc 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "dev": "vite dev", "build": "vite build", "preview": "vite preview", - "test": "npm run test:integration && npm run test:unit", + "test": "npm run test:integration && npm run test:unit run", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --plugin-search-dir . --check . && eslint .", @@ -20,12 +20,14 @@ "@sveltejs/kit": "^1.20.4", "@testing-library/jest-dom": "^6.2.0", "@testing-library/svelte": "^4.0.5", + "@types/object.groupby": "^1.0.3", "@types/testing-library__jest-dom": "^6.0.0", "@types/three": "^0.157.2", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitest/ui": "^1.1.2", "autoprefixer": "^10.4.16", + "dotenv": "^16.3.1", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte": "^2.30.0", @@ -49,6 +51,10 @@ "@kittycad/lib": "^0.0.48", "@threlte/core": "^6.1.0", "@threlte/extras": "^7.3.0", + "@types/core-js": "^2.5.8", + "core-js-pure": "^3.35.0", + "object.groupby": "^1.0.1", + "svelte-autosize": "^1.1.0", "three": "^0.157.0" } } diff --git a/playwright.config.ts b/playwright.config.ts index 967c1bc..34d9b41 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,12 +1,42 @@ import type { PlaywrightTestConfig } from '@playwright/test' +import { AUTH_COOKIE_NAME } from './src/lib/cookies' +import dotenv from 'dotenv' +import path from 'path' + +dotenv.config({ path: path.resolve(path.dirname('.'), '.env.development') }) +const expiration = new Date() +expiration.setFullYear(expiration.getFullYear() + 1) const config: PlaywrightTestConfig = { + use: { + baseURL: 'https://localhost:3000', + storageState: { + cookies: [ + { + name: AUTH_COOKIE_NAME, + value: process.env.PLAYWRIGHT_SESSION_COOKIE ?? '', + domain: 'localhost', + path: '/', + expires: expiration.getTime() / 1000, + httpOnly: true, + secure: true, + sameSite: 'None' + } + ], + origins: [ + { + origin: 'https://localhost:3000', + localStorage: [] + } + ] + } + }, webServer: { - command: 'npm run build && npm run preview', - port: 4173 + command: 'yarn dev', + port: 3000 }, testDir: 'tests', - testMatch: /(.+\.)?(test|spec)\.[jt]s/ + testMatch: /(.+\.)?(playwright)\.[jt]s/ } export default config diff --git a/src/components/AccountMenu.svelte b/src/components/AccountMenu.svelte index 9d0e727..09706ed 100644 --- a/src/components/AccountMenu.svelte +++ b/src/components/AccountMenu.svelte @@ -2,6 +2,7 @@ import type { Models } from '@kittycad/lib' import { paths } from '$lib/paths' import Person from './Icons/Person.svelte' + import ArrowRight from './Icons/ArrowRight.svelte' export let user: Models['User_type'] let open = false @@ -11,6 +12,14 @@ ((user?.name && user.name.length > 0) || (user?.first_name && user.first_name.length > 0) || (user?.email && user.email.length > 0)) + let displayName = + user?.first_name && user.first_name.length > 0 + ? (user.first_name + (user.last_name ? ' ' + user.last_name : '')).trim() + : user?.name && user.name.length > 0 + ? user.name + : user?.email && user.email.length > 0 + ? user.email + : 'Unnamed User' function dismiss(e: KeyboardEvent) { if (e.key === 'Escape') { @@ -19,43 +28,47 @@ } -
+
+ {displayName}

{user?.first_name - ? user.first_name + (user.last_name ? user.last_name : '') + ? user.first_name + (user.last_name ? ' ' + user.last_name : '') : user?.name || 'Unnamed User'}

@@ -63,11 +76,26 @@

+ Billing Info + + + + Report UI Issue + + + Sign Out @@ -76,28 +104,28 @@ diff --git a/src/components/DownloadButton.svelte b/src/components/DownloadButton.svelte index 6f0802e..334e57f 100644 --- a/src/components/DownloadButton.svelte +++ b/src/components/DownloadButton.svelte @@ -4,14 +4,21 @@ import type { ConvertResponse } from '../routes/api/convert/[output_format]/+server' import { toKebabCase } from '$lib/toKebabCase' import LoadingIndicator from './LoadingIndicator.svelte' + import { onNavigate } from '$app/navigation' + import { tick } from 'svelte' export let prompt: string = '' export let outputs: PromptResponse['outputs'] export let className: string = '' + let link: HTMLAnchorElement let currentOutput: CADFormat = 'gltf' let outputData = outputs ? outputs[`source.${currentOutput}`] : '' let status: 'loading' | 'ready' | 'failed' = 'ready' + onNavigate(() => { + currentOutput = 'gltf' + }) + $: currentMimeType = CADMIMETypes[currentOutput] $: dataUrl = `data:${currentMimeType};base64,${outputData}` $: fileName = `${toKebabCase(prompt)}.${currentOutput}` @@ -36,20 +43,23 @@ return } - // TODO: handle asynchronous case where the conversion is not yet complete - outputs[`source.${currentOutput}`] = responseData.outputs[`source.${currentOutput}`] outputData = outputs[`source.${currentOutput}`] } status = outputData ? 'ready' : 'failed' + + if (outputData) { + await tick() + link.click() + } }
{#if status == 'ready'} - Download + Download {:else if status == 'loading'} - + {:else} {/if} @@ -77,8 +87,8 @@ diff --git a/src/components/ExamplePrompts.svelte b/src/components/ExamplePrompts.svelte new file mode 100644 index 0000000..67ef8b3 --- /dev/null +++ b/src/components/ExamplePrompts.svelte @@ -0,0 +1,44 @@ + + +
+

+ Example prompts: +

+
+ {#each examplePrompts as prompt (prompt)} + + {/each} +
+
+ + diff --git a/src/components/GenerationList.svelte b/src/components/GenerationList.svelte index d81bcab..99de7e5 100644 --- a/src/components/GenerationList.svelte +++ b/src/components/GenerationList.svelte @@ -1,36 +1,25 @@ -
-

- Your generations -

- {#if $generations.length > 0} -
    - {#each combinedGenerations as item, i} -
  • - - RENDER_THRESHOLD} - /> -
    • - {/each} -
- {/if} - {#if isFetching} - {#each Array(PAGE_SIZE) as i} -
- +
+ {#if Object.keys($generations).length > 0} + {#each Object.entries($generations).toSorted(sortTimeBuckets) as [category, items]} +
+

{category}

+
    + {#each items as item} +
  • + +
    • + {/each} +
{/each} {/if} + {#if isFetching} +

0 ? ' pt-8 border-t' : '')} + > + Fetching your creations + +

+ {:else if Object.keys($generations).length === 0} +

You'll see your creations here once you submit your first prompt

+ {/if} {#if error}

{error}

{/if} - {#if $nextPageToken === null} -

You're all caught up! 🎉

- {/if}
- diff --git a/src/components/GenerationListItem.svelte b/src/components/GenerationListItem.svelte index e84a402..6012e81 100644 --- a/src/components/GenerationListItem.svelte +++ b/src/components/GenerationListItem.svelte @@ -1,171 +1,109 @@ -
-
-

- Your Prompt - : - "{data.prompt}" -

- {#if data.outputs && data.status === 'completed'} -
- {#if shouldRenderModel} - - - - {/if} -
+ + {data.prompt.trim()} +
+ {#if data.status === 'completed'} + {:else if data.status === 'failed' || error} -
-

- {data?.error - ? data.error - : error?.status - ? `Error ${error.status}: ${error.message}` - : 'CAD model generation failed, try again later'} -

-
+ {:else} -
-

Generating...

-
- {/if} -
-
-
-
-
Submitted
-
{data.created_at}
-
- {#if data.status === 'completed' || data.status === 'failed'} -
-
{data.status}
-
{data.completed_at}
-
- {/if} -
- {#if data.outputs && data.status === 'completed'} - - {:else if data.error} - + {/if}
-
+