diff --git a/app/components/certificate/certificate-display.tsx b/app/components/certificate/certificate-display.tsx index d885aaae..0cb23001 100644 --- a/app/components/certificate/certificate-display.tsx +++ b/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={} onClick={() => onCopy()} /> - + } size="auto" diff --git a/playwright.config.ts b/playwright.config.ts index 3aa411ed..ae9b25ce 100644 --- a/playwright.config.ts +++ b/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,6 +114,7 @@ const config: PlaywrightTestConfig = { channel: 'msedge', }, dependencies: ['setup'], + testIgnore: /.*\.mobile\.spec\.ts/, }, { name: 'Google Chrome', @@ -116,6 +122,7 @@ const config: PlaywrightTestConfig = { channel: 'chrome', }, dependencies: ['setup'], + testIgnore: /.*\.mobile\.spec\.ts/, }, ], diff --git a/test/e2e/auth.setup.ts b/test/e2e/auth.setup.ts index 3e42f1cd..52e690a1 100644 --- a/test/e2e/auth.setup.ts +++ b/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 }); }); diff --git a/test/e2e/certificate.spec.ts b/test/e2e/certificate.spec.ts new file mode 100644 index 00000000..7d65c1d8 --- /dev/null +++ b/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'); + }); +}); diff --git a/test/e2e/header/header.desktop.spec.ts b/test/e2e/header/header.desktop.spec.ts new file mode 100644 index 00000000..675f47da --- /dev/null +++ b/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'); + }); +}); diff --git a/test/e2e/header/header.mobile.spec.ts b/test/e2e/header/header.mobile.spec.ts new file mode 100644 index 00000000..e6e22003 --- /dev/null +++ b/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'); + }); +}); diff --git a/test/e2e/header/header.spec.ts b/test/e2e/header/header.spec.ts new file mode 100644 index 00000000..90986f57 --- /dev/null +++ b/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'); + }); +}); diff --git a/test/e2e/landing-page.spec.ts b/test/e2e/landing-page.spec.ts new file mode 100644 index 00000000..adb413b0 --- /dev/null +++ b/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'); + }); +}); diff --git a/test/e2e/login.spec.ts b/test/e2e/login.spec.ts index f6881c88..6a29c654 100644 --- a/test/e2e/login.spec.ts +++ b/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'); diff --git a/test/e2e/new-dns-record.spec.ts b/test/e2e/new-dns-record.spec.ts index 06e22858..b3b277f4 100644 --- a/test/e2e/new-dns-record.spec.ts +++ b/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'); }); });