Merge pull request #126 from argos-ci/blog-vercel-preview

blog: vercel preview article

Author: jsfez

app/blog/[...slug]/page.tsx

@@ -97,13 +97,21 @@ async function Siblings({ slug }: { slug: string }) {
                   height={article.image.height}
                   src={article.image.src}
                   alt={article.imageAlt}
+                  data-visual-test="blackout"
                 />
                 <PostCardBody>
                   {article.category && (
-                    <PostCardTag>{article.category}</PostCardTag>
+                    <PostCardTag data-visual-test="blackout">
+                      {article.category}
+                    </PostCardTag>
                   )}
-                  <PostCardTitle>{article.title}</PostCardTitle>
-                  <PostCardFooter>
+                  <PostCardTitle
+                    classname="line-clamp-2"
+                    data-visual-test="blackout"
+                  >
+                    {article.title}
+                  </PostCardTitle>
+                  <PostCardFooter data-visual-test="blackout">
                     <PostCardAuthor>{article.author}</PostCardAuthor>
                     <div className="text-xs text-mauve-10">|</div>
                     <PostCardDate date={article.date} />

articles/vercel-preview/index.mdx

@@ -0,0 +1,73 @@
+---
+title: How to run Argos visual testing on Vercel Preview
+description: Guide to run Argos visual testing on Vercel Preview to ensure consistency in production-like environment.
+slug: vercel-preview
+category: Developer Experience
+author: Jeremy Sfez
+date: 2024-02-01
+image: ./main.jpg
+imageAlt: Vercel covered with Argos
+---
+
+Great news for Vercel enthusiasts! Argos seamlessly integrates visual testing with Vercel Preview, enabling you to detect visual regressions in a production-like environment effortlessly. This guide walks you through setting it up with GitHub Actions and Playwright, streamlining your workflow.
+
+<MainImage />
+
+## Motivation behind this feature
+
+Responding to user feedback, we recognized the need for visual testing directly on Vercel Previews, especially for environments akin to production settings. This approach is not only cost-effective, eliminating the need for separate test environments, but also enhances test accuracy by mirroring production conditions closely.
+
+## How to run Argos on Vercel Preview
+
+### 1. Set up Argos
+
+Start by following the Q[Quickstart guide](https://argos-ci.com/docs) to integrate Argos with Playwright. This foundational step ensures that Argos is ready to run visual tests during your CI process.
+
+### 2. Run tests on your Vercel Preview
+
+Adapt your CI workflow with this GitHub Actions configuration to enable Argos visual testing on Vercel Previews:
+
+```yml
+name: Playwright + Argos Tests
+on: deployment_status:
+jobs:
+  test:
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+      - name: Install dependencies
+        run: npm ci && npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          BASE_URL: ${{ github.event.deployment_status.environment_url }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ARGOS_BRANCH: ${{ github.event.deployment_status.environment == 'Production' && 'main' || '' }}
+```
+
+For a comprehensive explanation of each step, consult the [Argos documentation](https://argos-ci.com/docs/run-on-preview-deployment).
+
+Next, update your Playwright config file is updated to reflect the preview's URL and configure it to ignore the Vercel toolbar for cleaner test results:
+
+```ts
+export default defineConfig({
+  use: {
+    # 👉 URL generated for the preview
+    baseURL: process.env.BASE_URL,
+  },
+  extraHTTPHeaders: {
+     # 👉 Hide vercel toolbar in tests
+    "x-vercel-skip-toolbar": "0",
+  },
+});
+```
+
+Assuming you have automatic deploys set up, you’ll see the results of your deploy in your pull request. Upon a successful deploy, the E2E workflow will start on the preview.
+
+![Github pull-request check statuses](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0zu0bwdykzsu9bvfgzw.png)
+
+## Conclusion
+
+Leveraging Argos with Vercel Previews not only enhances visual consistency in a near-production environment but also optimizes your CI process by eliminating the need for additional environments for testing. This integration streamlines your workflow, ensuring that your projects meet the highest standards of visual quality while being cost-effective.

articles/vercel-preview/main.jpg

@@ -1,9 +1,8 @@
-import { clsx } from "clsx";
 import Image, { ImageProps } from "next/image";
-import type { ComponentProps, ReactNode } from "react";
-import { twc } from "react-twc";
+import type { ComponentProps } from "react";
+import { TwcComponentProps, twc } from "react-twc";
 
-export const PostCard = twc.div`rounded-lg border bg-subtle text-left transition duration-300 hover:-translate-y-2 hover:scale-[101%]"`;
+export const PostCard = twc.div`rounded-lg border bg-subtle text-left transition duration-300 hover:-translate-y-2 hover:scale-[101%]`;
 
 export interface PostCardImageProps extends ImageProps {
   extended?: Boolean;
@@ -52,17 +51,16 @@ export const PostCardTag: React.FC<{ children: React.ReactNode }> = (props) => (
   <p className="mb-2 text-xs text-low" {...props} />
 );
 
-export const PostCardTitle = ({
-  extended,
-  children,
-}: {
-  extended?: Boolean;
-  children: ReactNode;
-}) => (
-  <h2 className={`mb-2 ${extended ? "text-4xl" : "text-2xl"} font-accent text`}>
-    {children}
-  </h2>
-);
+type PostCardTitleProps = TwcComponentProps<"h2"> & {
+  extended?: boolean;
+  classname?: string;
+};
+
+export const PostCardTitle = twc.h2<PostCardTitleProps>((props) => [
+  "mb-2 font-accent",
+  props.extended ? "text-4xl" : "text-2xl",
+  props.classname,
+]);
 
 export const PostCardDescription = (props: ComponentProps<"div">) => (
   <div className="mb-8 leading-normal text-low" {...props} />