Skip to content

chore(e2e): Test control components for Astro and Astro + React #3693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
panteliselef merged 4 commits into from
Jul 12, 2024
Merged

chore(e2e): Test control components for Astro and Astro + React #3693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f6b136
chore(e2e): Test control components for Astro and Astro + React
panteliselef Jul 11, 2024
c1fc089
fix(e2e,astro): Drop `@nanostores/react` and add test for react compo…
panteliselef Jul 11, 2024
d006499
fix(e2e,astro): Add changeset
panteliselef Jul 11, 2024
6ed3c6e
Merge branch 'main' into elef/eco-25-add-e2e-tests-with-basic-flows-w…
panteliselef Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/many-boxes-beg.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@clerk/astro": patch
---

Remove `@nanostores/react` from depedency.
2 changes: 2 additions & 0 deletions .changeset/ten-planes-run.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
2 changes: 0 additions & 2 deletions integration/presets/envs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ const withEmailLinks = environmentConfig()
const withCustomRoles = environmentConfig()
.setId('withCustomRoles')
.setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
// Temporarily use the stage api until the custom roles feature is released to prod
.setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
.setEnvVariable('private', 'CLERK_SECRET_KEY', envKeys['with-custom-roles'].sk)
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', envKeys['with-custom-roles'].pk)
.setEnvVariable('public', 'CLERK_SIGN_IN_URL', '/sign-in')
Expand Down
2 changes: 1 addition & 1 deletion integration/presets/longRunningApps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const createLongRunningApps = () => {
{ id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles },
{ id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
{ id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
{ id: 'astro.node.withEmailCodes', config: astro.node, env: envs.withEmailCodes },
{ id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
] as const;

const apps = configs.map(longRunningApplication);
Expand Down
17 changes: 17 additions & 0 deletions integration/templates/astro-node/src/components/page-with-user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { type PropsWithChildren, useSyncExternalStore } from 'react';
import { UserProfile } from '@clerk/astro/client/react';
import { $userStore } from '@clerk/astro/client/stores';

export function PageWithUser({ children }: PropsWithChildren) {
const user = useSyncExternalStore($userStore.listen, $userStore.get, $userStore.get);

@wobsoriano wobsoriano Jul 12, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use the custom store hook that was previously created for this? Or is the intentional?

@panteliselef panteliselef Jul 12, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are not exporting that in user land tho. I would expect people that use @clerk/astro to create their own hook or use @nanostores/react. In the future we could have useUser exported from @clerk/astro


return (
<>
<p>My name is: {user?.firstName}</p>
<div className='flex w-full justify-center'>
<UserProfile />
</div>
{children}
</>
);
}
5 changes: 0 additions & 5 deletions integration/templates/astro-node/src/layouts/Protected.astro
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion integration/templates/astro-node/src/layouts/Streaming.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
await new Promise((res) =>
setTimeout(() => {
res(undefined);
}, 1000),
}, 4000),
);
---

Expand Down
143 changes: 143 additions & 0 deletions integration/templates/astro-node/src/layouts/react/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
---
interface Props {
title: string;
}

const { title } = Astro.props;

import { SignedIn, SignedOut, UserButton } from "@clerk/astro/client/react";
import { LanguagePicker } from "../../components/LanguagePicker";
---

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<header class="bg-black/40 backdrop-blur-md border-b border-b-zinc-800">
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<div class="md:flex md:items-center md:gap-12">
<a class="block text-teal-600" href="/">
<span>Home</span>
</a>
</div>

<div class="hidden md:block">
<nav aria-label="Global">
<ul class="flex items-center gap-6 text-sm">
<li>
<a
class="text-gray-100 transition hover:text-gray-400"
href="/user"
>
User
</a>
</li>
<li>
<a
class="text-gray-100 transition hover:text-gray-400"
href="/organization"
>
Organization
</a>
</li>
<li>
<a
class="text-gray-100 transition hover:text-gray-400"
href="/discover"
>
Discover
</a>
</li>
</ul>
</nav>
</div>

<div class="flex gap-5 items-center">
<LanguagePicker client:idle />

<SignedIn client:load>
<UserButton client:load afterSignOutUrl="/" />
</SignedIn>

<SignedOut client:load>
<div class="sm:flex sm:gap-4">
<a
class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
href="/sign-in"
>
<span
class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
>
Login
</span>
</a>

<div class="hidden sm:flex">
<a
class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-newGray-900 ring-1 ring-newGray-950 after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
href="/sign-up"
>
<span
class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
>
Register
</span>
</a>
</div>
</div>
</SignedOut>
</div>
</div>
</div>
</header>
<main>
<slot />
</main>
</body>
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
main {
padding: 1rem;
margin: auto;
width: calc(100% - 2rem);
max-width: 800px;
color: white;
font-size: 20px;
line-height: 1.6;
}
</style>
15 changes: 5 additions & 10 deletions integration/templates/astro-node/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import SignOutButton from "../lib/astro-components/SignOutButton.astro";

import { SignedIn, SignedOut } from "@clerk/astro/client/react";
import { SignedIn, SignedOut } from "@clerk/astro/components/control";
import { OrganizationSwitcher } from "@clerk/astro/components/interactive";
---

Expand All @@ -24,29 +24,24 @@ import { OrganizationSwitcher } from "@clerk/astro/components/interactive";

<div class="h-12"></div>

<p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br
/>
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid">
<SignedOut client:load>
<SignedOut>
<Card
href="/sign-in"
title="Log in"
body="Learn how Astro works and explore the official API docs."
body="Go to this page to log in"
/>
<Card
href="/sign-up"
title="Create account"
body="Supercharge your project with new frameworks and libraries."
/>
</SignedOut>
<SignedIn client:load>
<SignedIn>
<Card
href="/user"
title="User Profile"
body="Learn how Astro works and explore the official API docs."
body="Go to this page to see your profile"
/>
<Card
href="/organization"
Expand Down
117 changes: 117 additions & 0 deletions integration/templates/astro-node/src/pages/react/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
---
import Layout from "../../layouts/react/Layout.astro";
import Card from "../../components/Card.astro";
import SignOutButton from "../../lib/astro-components/SignOutButton.astro";

import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/client/react";
---

<Layout title="Welcome to Astro.">
<h1>Welcome to <span class="text-gradient">Astro</span> + React</h1>
<SignedIn client:load>
<OrganizationSwitcher
client:load
appearance={{
elements: {
organizationPreview__organizationSwitcherTrigger: "text-white",
organizationSwitcherTriggerIcon: "text-white",
},
}}
afterSelectOrganizationUrl="/organization"
/>
<SignOutButton />
</SignedIn>

<div class="h-12"></div>

<p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br
/>
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid">
<SignedOut client:load>
<Card
href="/sign-in"
title="Log in"
body="Go to this page to log in"
/>
<Card
href="/sign-up"
title="Create account"
body="Supercharge your project with new frameworks and libraries."
/>
</SignedOut>
<SignedIn client:load>
<Card
href="/user"
title="User Profile"
body="Go to this page to see your profile"
/>
<Card
href="/organization"
title="Active Organization"
body="Learn how Astro works and explore the official API docs."
/>
<Card
href="/discover"
title="Discover Organization"
body="Learn how Astro works and explore the official API docs."
/>
<Card
href="/only-admins"
title="For admins"
body={"Learn how Astro works and explore the official API docs."}
/>
<Card
href="/only-members"
title="For members"
body="Learn how Astro works and explore the official API docs."
/>
</SignedIn>
</ul>
</Layout>

<style>
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.instructions {
margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(
rgba(var(--accent-dark), 66%),
rgba(var(--accent-dark), 33%)
);
padding: 1.5rem;
border-radius: 8px;
}
.instructions code {
font-size: 0.8em;
font-weight: bold;
background: rgba(var(--accent-light), 12%);
color: rgb(var(--accent-light));
border-radius: 4px;
padding: 0.3em 0.4em;
}
.instructions strong {
color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>
19 changes: 19 additions & 0 deletions integration/templates/astro-node/src/pages/react/only-admins.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
import { Protect } from "@clerk/astro/client/react";
import Layout from "../../layouts/react/Layout.astro";
---

<Layout title="Page is only accessible by members">
<div class="w-full flex justify-center flex-col">
<Protect client:load role="admin">
<Fragment slot="fallback">
<h1 class="text-2xl text-center">Not an admin</h1>
<a
class="text-sm text-center text-gray-100 transition hover:text-gray-400"
href="/only-members">Go to Members Page</a
>
</Fragment>
<h1 class="text-2xl text-center">I'm an admin</h1>
</Protect>
</div>
</Layout>
Loading