Test: Certificate, Header

app/components/certificate/certificate-display.tsx

@@ -53,7 +53,7 @@ export default function CertificateDisplay({ title, description, value }: Certif
               background: 'whitesmoke',
               color: 'teal.500',
             }}
-            aria-label="Copy to Clipboard"
+            aria-label={`Copy ${title}`}
             icon={<CopyIcon fontSize="md" />}
             onClick={() => onCopy()}
           />
@@ -67,7 +67,7 @@ export default function CertificateDisplay({ title, description, value }: Certif
               background: 'brand.500',
               color: 'white',
             }}
-            aria-label="Download"
+            aria-label={`Download ${title}`}
             icon={
               <DownloadIcon
                 fontSize="md"

app/components/header.tsx

@@ -57,6 +57,7 @@ export default function Header() {
         <Flex width="100%">
           <Menu>
             <MenuButton
+              className="header-hamburger"
               as={Button}
               rightIcon={<HamburgerIcon />}
               size="auto"

playwright.config.ts

@@ -34,7 +34,7 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: `http://localhost:${process.env.PORT}`,
+    baseURL: 'http://localhost:8080',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -58,6 +58,7 @@ const config: PlaywrightTestConfig = {
         ...devices['Desktop Chrome'],
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.mobile\.spec\.ts/,
     },
 
     {
@@ -66,6 +67,7 @@ const config: PlaywrightTestConfig = {
         ...devices['Desktop Firefox'],
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.mobile\.spec\.ts/,
     },
 
     {
@@ -74,6 +76,7 @@ const config: PlaywrightTestConfig = {
         ...devices['Desktop Safari'],
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.mobile\.spec\.ts/,
     },
 
     /* Test against mobile viewports. */
@@ -83,6 +86,7 @@ const config: PlaywrightTestConfig = {
         ...devices['Pixel 5'],
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.desktop\.spec\.ts/,
     },
     /**
      * We override the isMobile for Mobile Safari to false to make it work in CI
@@ -100,6 +104,7 @@ const config: PlaywrightTestConfig = {
         defaultBrowserType: devices['iPhone 12'].defaultBrowserType,
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.desktop\.spec\.ts/,
     },
 
     /* Test against branded browsers. */
@@ -109,13 +114,15 @@ const config: PlaywrightTestConfig = {
         channel: 'msedge',
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.mobile\.spec\.ts/,
     },
     {
       name: 'Google Chrome',
       use: {
         channel: 'chrome',
       },
       dependencies: ['setup'],
+      testIgnore: /.*\.mobile\.spec\.ts/,
     },
   ],
 

test/e2e/auth.setup.ts

@@ -8,7 +8,7 @@ setup('authenticate as user', async ({ page }) => {
   await page.getByLabel('Username').fill('user1');
   await page.getByLabel('Password').fill('user1pass');
   await page.getByRole('button', { name: 'Login' }).click();
-  await page.waitForURL('http://localhost:8080');
+  await page.waitForURL('/');
 
   await page.context().storageState({ path: userFile });
 });

test/e2e/certificate.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+import { loggedInAsUser } from './utils';
+
+test.describe('Certificate Page', () => {
+  loggedInAsUser();
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/certificate');
+  });
+
+  test('Request a Certificate', async ({ page }) => {
+    const titleHeader = page.getByRole('heading', { name: 'Certificate' });
+    const domainName = page.getByText('user1.starchart.com');
+
+    await expect(domainName).toContainText('user1.starchart.com');
+    await expect(titleHeader).toContainText('Certificate');
+    await page.getByRole('button', { name: 'Request a Certificate' }).click();
+
+    page
+      .locator('div')
+      .filter({
+        hasText: 'We have received your request, and will notify you when your certificate is read',
+      })
+      .nth(1);
+
+    await page.getByRole('button', { name: 'Copy Public Key' }).click();
+    await page.getByRole('button', { name: 'Copy Private Key' }).click();
+
+    await page.getByRole('button', { name: 'Download Public Key' }).click();
+    await page.getByRole('button', { name: 'Download Private Key' }).click();
+
+    const publicKey = page.getByRole('heading', { name: 'Public Key' });
+    const privateKey = page.getByRole('heading', { name: 'Private Key' });
+
+    await expect(publicKey).toContainText('Public Key');
+    await expect(privateKey).toContainText('Private Key');
+  });
+});

test/e2e/header/header.desktop.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+import { loggedInAsUser } from '../utils';
+
+test.describe('navigate to links', () => {
+  loggedInAsUser();
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('navigate to certificate and domain (desktop)', async ({ page }) => {
+    await page.getByRole('link', { name: 'Certificate', exact: true }).click();
+    await expect(page).toHaveURL('/certificate');
+
+    await page.getByRole('link', { name: 'Domains', exact: true }).click();
+    await expect(page).toHaveURL('/domains');
+  });
+});

test/e2e/header/header.mobile.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+import { loggedInAsUser } from '../utils';
+
+test.describe('navigate to links through mobile', () => {
+  loggedInAsUser();
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('navigate to certificate and domain (mobile)', async ({ page }) => {
+    await page.click('.header-hamburger');
+    await page.getByRole('link', { name: 'Certificate', exact: true }).click();
+    await expect(page).toHaveURL('/certificate');
+
+    await page.click('.header-hamburger');
+    await page.getByRole('link', { name: 'Domains', exact: true }).click();
+    await expect(page).toHaveURL('/domains');
+  });
+});

test/e2e/header/header.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+import { loggedInAsUser } from '../utils';
+
+test.describe('sign out of the account', () => {
+  loggedInAsUser();
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('sign out', async ({ page }) => {
+    await page.getByRole('banner').getByRole('button').click();
+    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+    await expect(page).toHaveURL('/login?redirectTo=%2F');
+  });
+});

test/e2e/landing-page.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+import { loggedInAsUser } from './utils';
+
+test.describe('landing page link', () => {
+  loggedInAsUser();
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+
+    const dnsCard = page.getByRole('heading', { name: 'DNS Records' });
+    const certCard = page.getByRole('heading', { name: 'Certificate' });
+
+    await expect(dnsCard).toContainText('DNS Records');
+    await expect(certCard).toContainText('Certificate');
+  });
+
+  test('Manage DNS Records Link Button', async ({ page }) => {
+    await page.getByRole('link', { name: 'Manage DNS Records' }).click();
+    await expect(page).toHaveURL('/domains');
+  });
+
+  test('Manage DNS Records Instruction Link', async ({ page }) => {
+    await page
+      .getByRole('paragraph')
+      .filter({
+        hasText: 'DNS Record: Lorem Ipsum is simply dummy text of the printing and typesetting ind',
+      })
+      .getByRole('link', { name: 'to learn more, see these instructions...' })
+      .click();
+
+    await expect(page).toHaveURL('/domains/instructions');
+  });
+
+  test('Manage Certificate Link Button', async ({ page }) => {
+    await page.getByRole('link', { name: 'Manage Certificate' }).click();
+    await expect(page).toHaveURL('/certificate');
+  });
+
+  test('Manage Certificate Instruction Link', async ({ page }) => {
+    await page
+      .getByRole('paragraph')
+      .filter({
+        hasText:
+          'Certificate: Lorem Ipsum is simply dummy text of the printing and typesetting ind',
+      })
+      .getByRole('link', { name: 'to learn more, see these instructions...' })
+      .click();
+    await expect(page).toHaveURL('/certificate/instructions');
+  });
+});

test/e2e/login.spec.ts

@@ -6,9 +6,11 @@ test('Login with User 1', async ({ page }) => {
   await page.getByLabel('Username').fill('user1');
   await page.getByLabel('Password').fill('user1pass');
   await page.getByRole('button', { name: 'Login' }).click();
-  await page.waitForURL('http://localhost:8080');
+  await page.waitForURL('/');
+
   const locator = page.locator('#header-user');
   const starchartHeading = page.getByRole('heading', { name: 'My.Custom.Domain' });
+
   await expect(locator).toContainText('user1');
   await expect(starchartHeading).toContainText('My.Custom.Domain');
 });
@@ -19,7 +21,7 @@ test('Login with User 1 dev redirect', async ({ page }) => {
   await page.getByLabel('Username').fill('user1');
   await page.getByLabel('Password').fill('user1pass');
   await page.getByRole('button', { name: 'Login' }).click();
-  await page.waitForURL('http://localhost:8080/domains');
+  await page.waitForURL('/domains');
   const locator1 = page.locator('#header-user');
   const userInNav = page.getByRole('heading', { name: 'My.Custom.Domain' });
   const domainHeading = page.getByRole('heading', { name: 'Domains' });

test/e2e/new-dns-record.spec.ts

@@ -12,8 +12,11 @@ test.describe('not authenticated', () => {
 test.describe('authenticated as user', () => {
   loggedInAsUser();
 
-  test('redirects to edit dns record page when required fields are filled', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('/domains/new');
+  });
+
+  test('redirects to edit dns record page when required fields are filled', async ({ page }) => {
     await page.getByLabel('Record Name*').fill('test');
     await page.getByRole('combobox', { name: 'Type' }).selectOption('A');
     await page.getByLabel('Value*').fill('test');
@@ -22,7 +25,6 @@ test.describe('authenticated as user', () => {
   });
 
   test('redirects to edit dns record page when all fields are filled', async ({ page }) => {
-    await page.goto('/domains/new');
     await page.getByLabel('Record Name*').fill('test');
     await page.getByRole('combobox', { name: 'Type' }).selectOption('A');
     await page.getByLabel('Value*').fill('test');
@@ -34,8 +36,7 @@ test.describe('authenticated as user', () => {
   });
 
   test('does not create dns record if required fields are empty', async ({ page }) => {
-    await page.goto('/domains/new');
     await page.getByRole('button', { name: 'Create' }).click();
-    await expect(page).toHaveURL(/.*domains\/new/);
+    await expect(page).toHaveURL('/domains/new');
   });
 });