test: add emails fixture and apply to existing tests by nicktrn · Pull Request #10560 · calcom/cal.com

nicktrn · 2023-08-03T12:19:49Z

What does this PR do?

Adds fixture for email testing. Updates some tests for demo purposes.

// this:
const { id } = await prisma.resetPasswordRequest.findFirstOrThrow({
  where: {
    email,
  },
  select: {
    id: true,
  },
  orderBy: {
    createdAt: "desc",
  },
})
await page.goto(`/auth/forgot-password/${id}`)

// becomes that:
const email = await emails.waitForOne(email)
await email.clickCta()

// while ensuring we receive the appropriate email, and that the cta works

Brief API overview:

/* Fixture */

// string: just look for recipient
// object: filter by all email props - to, from, subject, (custom) headers, content, ..
type Filter = string | Record<string, string>

// wait until we receive an email matching a single filter
emails.waitForOne(filter: Filter): Email

// wait until we receive an email for each supplied filter
emails.waitForMany(filters: Filter[]): Email[]

// returns namespaced address that will be delivered to current test only
emails.generateAddress()


/* Email */

// renders email
email.open()

// renders email and clicks cta link
// shortcut for: await email.open() && page.getByTestId("cta-link").click()
email.clickCta()

// returns href via partial string match, e.g. "forgot" => "..example.com/forgot-password/"
email.findHref(partial: string)

Fixes #10535

Architectural overview

sequenceDiagram
    participant Client
    box Server
    participant WebSocket
    participant SMTP
    end
    participant Mailer

    Client-)WebSocket: subscribe
    Note right of Client: namespaced
    Mailer-)SMTP: send mail
    SMTP->>+WebSocket: get subscribers
    WebSocket-->>-SMTP: subscribers[ ]
    loop every subscriber
    SMTP-)WebSocket: forward mail
    end
    WebSocket-)Client: forward mail
    Note right of Client: namespaced

Type of change

New feature (non-breaking change which adds functionality)

How should this be tested?

yarn e2e playwright/{booking-pages,auth/forgot}

Runs fine locally, ~~but still some things to sort out for ci.~~ and now also on ci

Mandatory Tasks

Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

vercel · 2023-08-03T12:19:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 3, 2023 9:40pm

vercel · 2023-08-03T12:19:55Z

@nicktrn is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2023-08-03T12:20:03Z

Thank you for following the naming conventions! 🙏

socket-security · 2023-08-03T12:25:17Z

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
smtp-server	3.12.0	network	`+3`	717 kB	andris
@types/mailparser	3.4.0	None	`+0`	11.9 kB	types
nodemailer	6.9.3	None	`+0`	489 kB	andris
@faker-js/faker	8.0.2	None	`+0`	9.83 MB	shinigami92
mailparser	3.6.5	None	`+14`	2.52 MB	andris

github-actions · 2023-08-03T12:27:38Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

nicktrn · 2023-08-03T12:35:03Z

@shivamklr @keithwillcode @zomars as you're currently working on or reviewing mailhog integration

Would greatly value your input.

nicktrn

Ready for review and feedback

nicktrn · 2023-08-04T07:15:21Z

apps/web/package.json

    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
    "dev": "next dev",
    "dx": "yarn dev",
+    "e2e:mail-server": "ts-node --transpile-only playwright/lib/start-mail-server.ts",


for testing purposes, should be built for production

nicktrn · 2023-08-04T07:17:38Z

apps/web/playwright/auth/forgot-password.e2e.ts

-test("Can reset forgotten password", async ({ page, users }) => {
-  const user = await users.create();
+test("Can reset forgotten password", async ({ page, users, emails }) => {
+  const user = await users.create({ email: emails.generateAddress() });


can be further abstracted by moving directly into users fixture, then calling users.create() as usual

nicktrn · 2023-08-04T07:18:23Z

apps/web/playwright/auth/forgot-password.e2e.ts

  await page.goto("/auth/forgot-password");

-  await page.fill('input[name="email"]', `${user.username}@example.com`);
+  await page.fill('input[name="email"]', user.email);


email is now scoped to the test

nicktrn · 2023-08-04T07:19:47Z

apps/web/playwright/auth/forgot-password.e2e.ts

-      createdAt: "desc",
-    },
-  });
+  const email = await emails.waitForOne(user.email);


we wait until the user receives an email, it will return immediately if one is already there

nicktrn · 2023-08-04T07:23:05Z

apps/web/playwright/booking-pages.e2e.ts

+    const bookingUrl = page.url();
+
+    const [free] = users.get();
+    await emails.waitForMany([/* testEmail,  */ free.email]);


will throw if not all recipients receive an email - I disabled checking for non-namespaced, hardcoded emails for now. Ideally, test/booking user should also be randomised and email addresses scoped to test

nicktrn · 2023-08-04T08:23:01Z

apps/web/playwright/lib/mail-server.ts

+    ws.on("message", (data) => {
+      const message = data.toString();
+      debug("received:", message);
+    });


bi-directional messaging not currently used, but useful for debugging

nicktrn · 2023-08-04T08:24:49Z

packages/emails/templates/_base-email.ts

@@ -40,8 +40,6 @@ export default class BaseEmail {
    if (process.env.NEXT_PUBLIC_IS_E2E) {
      global.E2E_EMAILS = global.E2E_EMAILS || [];
      global.E2E_EMAILS.push(this.getNodeMailerPayload());


leaving for now as still used by at least one test file

nicktrn · 2023-08-04T08:32:50Z

apps/web/package.json

    "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "ws": "^8.13.0"


https://github.com/websockets/ws

nicktrn · 2023-08-04T08:33:06Z

apps/web/package.json

    "@types/react-phone-number-input": "^3.0.14",
    "@types/remove-markdown": "^0.3.1",
    "@types/sanitize-html": "^2.9.0",
+    "@types/smtp-server": "^3.5.7",


https://nodemailer.com/extras/smtp-server/

nicktrn · 2023-08-04T08:33:24Z

apps/web/package.json

    "copy-webpack-plugin": "^11.0.0",
    "detect-port": "^1.3.0",
    "env-cmd": "^10.1.0",
+    "mailparser": "^3.6.5",


https://nodemailer.com/extras/mailparser/

github-actions · 2023-08-19T00:14:00Z

This PR is being marked as stale due to inactivity.

nicktrn · 2023-08-22T16:15:42Z

Closing as per current email testing plans #10881 (comment)

github-actions bot added automated-tests area: unit tests, e2e tests, playwright Low priority Created by Linear-GitHub Sync ✨ feature New feature or request labels Aug 3, 2023

vercel bot deployed to Preview – ui August 3, 2023 12:23 View deployment

nicktrn added 6 commits August 3, 2023 17:42

feat: add cta-link testid

496e4d6

feat: let users fixture accept email param

7494b22

test: add emails fixture

7dc2923

test: use emails fixture in forgot password test

30ad598

test: use emails fixture for booking pages

9430c9a

fix: make test mail server work with ci

5f2f291

nicktrn force-pushed the e2e-emails branch from 67193bb to 5f2f291 Compare August 3, 2023 17:44

vercel bot deployed to Preview – ui August 3, 2023 17:48 View deployment

fix: hardcode ports to prevent collisions

bc142b7

vercel bot deployed to Preview – ui August 3, 2023 19:14 View deployment

test: set default e2e email from address

e1d1276

vercel bot deployed to Preview – ui August 3, 2023 21:40 View deployment

nicktrn mentioned this pull request Aug 4, 2023

RFC: e2e email testing #10535

Closed

nicktrn commented Aug 4, 2023

View reviewed changes

nicktrn marked this pull request as ready for review August 4, 2023 08:35

nicktrn mentioned this pull request Aug 4, 2023

feat: mailhog fixture #10606

Merged

1 task

github-actions bot added the Stale label Aug 19, 2023

nicktrn mentioned this pull request Aug 22, 2023

chore: expect emails e2e #10881

Merged

3 tasks

nicktrn closed this Aug 22, 2023

Conversation

nicktrn commented Aug 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Architectural overview

Type of change

How should this be tested?

Mandatory Tasks

Uh oh!

vercel bot commented Aug 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Aug 3, 2023

Uh oh!

github-actions bot commented Aug 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security bot commented Aug 3, 2023

Uh oh!

github-actions bot commented Aug 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Next.js Bundle Analysis for @calcom/web

Uh oh!

nicktrn commented Aug 3, 2023

Uh oh!

nicktrn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 19, 2023

Uh oh!

nicktrn commented Aug 22, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

nicktrn commented Aug 3, 2023 •

edited

Loading

vercel bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading