Test: Certificate, Header (#365)

app/components/certificate/certificate-display.tsx

@@ -53,12 +53,12 @@ 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()}
  />
  </Tooltip>
- <Tooltip label={`${title} is Downloaded`}>
+ <Tooltip label={`Download ${title}`}>
  <IconButton
  backgroundColor="transparent"
  color="black"
@@ -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,56 @@
+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();
+
+ const loadingPageText = page
+ .locator('div')
+ .filter({
+ hasText: 'We have received your request, and will notify you when your certificate is read',
+ })
+ .nth(1);
+
+ await loadingPageText.waitFor();
+
+ //Copy Key Toast Text
+ await page.getByRole('button', { name: 'Copy Public Key' }).click();
+ await page.getByRole('button', { name: 'Copy Private Key' }).click();
+
+ const publicCopyToastText = page.getByText('Public Key was copied to the clipboard');
+ const privateCopyToastText = page.getByText('Private Key was copied to the clipboard');
+
+ await publicCopyToastText.waitFor();
+ await privateCopyToastText.waitFor();
+
+ //Download Key Toast Text
+ await page.getByRole('button', { name: 'Download Public Key' }).click();
+ await page.getByRole('button', { name: 'Download Private Key' }).click();
+
+ const publicDownloadToastText = page.getByText('Public Key is Downloaded');
+ const privateDownloadToastText = page.getByText('Private Key is Downloaded');
+
+ await publicDownloadToastText.waitFor();
+ await privateDownloadToastText.waitFor();
+
+ //Text Titles
+ 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,55 @@
+import { test, expect } from '@playwright/test';
+import { loggedInAsUser } from './utils';
+
+test.describe('Landing Page', () => {
+ loggedInAsUser();
+
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/');
+ });
+
+ test('Contains DNS Record and Certificate cards', async ({ page }) => {
+ 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 Button', async ({ page }) => {
+ await page.getByRole('link', { name: 'Manage DNS Records' }).click();
+
+ await expect(page).toHaveURL('/domains');
+ });
+
+ test('DNS Records Instructions 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 Button', async ({ page }) => {
+ await page.getByRole('link', { name: 'Manage Certificate' }).click();
+
+ await expect(page).toHaveURL('/certificate');
+ });
+
+ test('Certificate Instructions 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,10 +21,12 @@ 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' });
+
  await expect(locator1).toContainText('user1');
  await expect(userInNav).toContainText('My.Custom.Domain');
  await expect(domainHeading).toContainText('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');
  });
 });