add more website tests, support functions, login

This commit is contained in:
Francis Cao 2024-03-01 13:00:59 -08:00
parent e5c19482ab
commit 72090d778b
11 changed files with 169 additions and 59 deletions

View File

@ -5,9 +5,13 @@ describe('Login tests', () => {
defaultCommandTimeout: 10000,
},
() => {
cy.login(Cypress.env('umami_user'), Cypress.env('umami_password'));
cy.dataCy('button-profile').click();
cy.dataCy('item-logout').click();
cy.visit('/login');
cy.getDataTest('input-username').find('input').type(Cypress.env('umami_user'));
cy.getDataTest('input-password').find('input').type(Cypress.env('umami_password'));
cy.getDataTest('button-submit').click();
cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
cy.getDataTest('button-profile').click();
cy.getDataTest('item-logout').click();
cy.url().should('eq', Cypress.config().baseUrl + '/login');
},
);

View File

@ -1,37 +1,91 @@
describe('Website tests', () => {
Cypress.session.clearAllSavedSessions();
beforeEach(() => {
cy.login(Cypress.env('umami_user'), Cypress.env('umami_password'));
cy.get('a[href="/settings"]').click();
cy.url().should('include', '/settings/websites');
});
it.skip('Add a website', () => {
cy.dataCy('button-website-add').click();
it('Add a website', () => {
// add website
cy.visit('/settings/websites');
cy.getDataTest('button-website-add').click();
cy.contains(/Add website/i).should('be.visible');
cy.dataCy('input-name').click().type('Test Website', {
delay: 100,
cy.getDataTest('input-name').find('input').wait(500).type('Add test', { delay: 50 });
cy.getDataTest('input-domain').find('input').wait(500).type('addtest.com', { delay: 50 });
cy.getDataTest('button-submit').click();
cy.get('td[label="Name"]').should('contain.text', 'Add test');
cy.get('td[label="Domain"]').should('contain.text', 'addtest.com');
// clean-up data
cy.getDataTest('link-button-edit').first().click();
cy.contains(/Details/i).should('be.visible');
cy.getDataTest('text-field-websiteId')
.find('input')
.then($input => {
const websiteId = $input[0].value;
cy.deleteWebsite(websiteId);
});
cy.dataCy('input-domain').click().type('testwebsite.com');
cy.dataCy('button-submit').click();
cy.get('td[label="Name"]').should('contain.text', 'Test Website');
cy.get('td[label="Domain"]').should('contain.text', 'testwebsite.com');
cy.visit('/settings/websites');
cy.contains('Add test').should('not.exist');
});
it('Test tracking script content', () => {
cy.dataCy('link-button-edit').first().click();
cy.contains(/Tracking code/i).should('be.visible');
cy.get('div')
.contains(/Tracking code/i)
.click();
cy.get('textarea').should('contain.text', Cypress.config().baseUrl + '/script2.js');
});
it.only('Edit a website', () => {
// prep data
cy.addWebsite('Update test', 'updatetest.com');
cy.visit('/settings/websites');
it('Test tracking script content', () => {
cy.dataCy('link-button-edit').first().click();
cy.contains(/Tracking code/i).should('be.visible');
// edit website
cy.getDataTest('link-button-edit').first().click();
cy.contains(/Details/i).should('be.visible');
cy.getDataTest('input-name')
.find('input')
.wait(500)
.clear()
.type('Updated website', { delay: 50 });
cy.getDataTest('input-domain')
.find('input')
.wait(500)
.clear()
.type('updatedwebsite.com', { delay: 50 });
cy.getDataTest('button-submit').click({ force: true });
cy.getDataTest('input-name').find('input').should('have.value', 'Updated website');
cy.getDataTest('input-domain').find('input').should('have.value', 'updatedwebsite.com');
// verify tracking script
cy.get('div')
.contains(/Tracking code/i)
.click();
cy.get('textarea').should('contain.text', Cypress.config().baseUrl + '/script.js');
// clean-up data
cy.get('div')
.contains(/Details/i)
.click();
cy.contains(/Details/i).should('be.visible');
cy.getDataTest('text-field-websiteId')
.find('input')
.then($input => {
const websiteId = $input[0].value;
cy.deleteWebsite(websiteId);
});
cy.visit('/settings/websites');
cy.contains('Add test').should('not.exist');
});
it('Delete a website', () => {
// prep data
cy.addWebsite('Delete test', 'deletetest.com');
cy.visit('/settings/websites');
// delete website
cy.getDataTest('link-button-edit').first().click();
cy.contains(/Data/i).should('be.visible');
cy.get('div').contains(/Data/i).click();
cy.contains(/All website data will be deleted./i).should('be.visible');
cy.getDataTest('button-delete').click();
cy.contains(/Type DELETE in the box below to confirm./i).should('be.visible');
cy.get('input[name="confirm"').type('DELETE');
cy.get('button[type="submit"]').click();
cy.contains('Delete test').should('not.exist');
});
});

View File

@ -1,24 +1,57 @@
/// <reference types="cypress" />
import { uuid } from '../../src/lib/crypto';
Cypress.Commands.add('dataCy', (value: string) => {
return cy.get(`[data-cy=${value}]`);
Cypress.Commands.add('getDataTest', (value: string) => {
return cy.get(`[data-test=${value}]`);
});
Cypress.Commands.add('login', (username: string, password: string) => {
cy.session(
[username, password],
() => {
cy.visit('/login');
cy.dataCy('input-username').type(username);
cy.dataCy('input-password').type(password);
cy.dataCy('button-submit').click();
cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
cy.session([username, password], () => {
cy.request({
method: 'POST',
url: '/api/auth/login',
body: {
username,
password,
},
{
validate: () => {
cy.visit('/profile');
},
},
);
cy.visit('/dashboard');
})
.then(response => {
Cypress.env('authorization', `bearer ${response.body.token}`);
window.localStorage.setItem('umami.auth', JSON.stringify(response.body.token));
})
.its('status')
.should('eq', 200);
});
});
Cypress.Commands.add('addWebsite', (name: string, domain: string) => {
cy.request({
method: 'POST',
url: '/api/websites',
headers: {
'Content-Type': 'application/json',
Authorization: Cypress.env('authorization'),
},
body: {
id: uuid(),
createdBy: '41e2b680-648e-4b09-bcd7-3e2b10c06264',
name: name,
domain: domain,
},
}).then(response => {
expect(response.status).to.eq(200);
});
});
Cypress.Commands.add('deleteWebsite', (websiteId: string) => {
cy.request({
method: 'DELETE',
url: `/api/websites/${websiteId}`,
headers: {
'Content-Type': 'application/json',
Authorization: Cypress.env('authorization'),
},
}).then(response => {
expect(response.status).to.eq(200);
});
});

View File

@ -3,14 +3,24 @@
declare namespace Cypress {
interface Chainable {
/**
* Custom command to select DOM element by data-cy attribute.
* @example cy.dataCy('greeting')
* Custom command to select DOM element by data-test attribute.
* @example cy.getDataTest('greeting')
*/
dataCy(value: string): Chainable<JQuery<HTMLElement>>;
getDataTest(value: string): Chainable<JQuery<HTMLElement>>;
/**
* Custom command to login user into the app.
* @example cy.login('admin', 'password)
*/
login(username: string, password: string): Chainable<JQuery<HTMLElement>>;
/**
* Custom command to create a website
* @example cy.addWebsite('test', 'test.com')
*/
addWebsite(name: string, domain: string): Chainable<JQuery<HTMLElement>>;
/**
* Custom command to create a website
* @example cy.deleteWebsite('02d89813-7a72-41e1-87f0-8d668f85008b')
*/
deleteWebsite(websiteId: string): Chainable<JQuery<HTMLElement>>;
}
}

View File

@ -15,7 +15,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
return (
<ModalTrigger>
<Button data-cy="button-website-add" variant="primary">
<Button data-test="button-website-add" variant="primary">
<Icon>
<Icons.Plus />
</Icon>

View File

@ -39,7 +39,7 @@ export function WebsiteAddForm({
<Form onSubmit={handleSubmit} error={error}>
<FormRow label={formatMessage(labels.name)}>
<FormInput
data-cy="input-name"
data-test="input-name"
name="name"
rules={{ required: formatMessage(labels.required) }}
>
@ -48,7 +48,7 @@ export function WebsiteAddForm({
</FormRow>
<FormRow label={formatMessage(labels.domain)}>
<FormInput
data-cy="input-domain"
data-test="input-domain"
name="domain"
rules={{
required: formatMessage(labels.required),
@ -59,7 +59,7 @@ export function WebsiteAddForm({
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton data-cy="button-submit" variant="primary" disabled={false}>
<SubmitButton data-test="button-submit" variant="primary" disabled={false}>
{formatMessage(labels.save)}
</SubmitButton>
{onClose && (

View File

@ -36,7 +36,7 @@ export function WebsitesTable({
<>
{allowEdit && (
<LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Icon data-cy="link-button-edit">
<Icon data-test="link-button-edit">
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>

View File

@ -66,7 +66,9 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
description={formatMessage(messages.deleteWebsiteWarning)}
>
<ModalTrigger>
<Button variant="danger">{formatMessage(labels.delete)}</Button>
<Button data-test="button-delete" variant="danger">
{formatMessage(labels.delete)}
</Button>
<Modal title={formatMessage(labels.deleteWebsite)}>
{(close: () => void) => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />

View File

@ -27,15 +27,20 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={website}>
<FormRow label={formatMessage(labels.websiteId)}>
<TextField value={website?.id} readOnly allowCopy />
<TextField data-test="text-field-websiteId" value={website?.id} readOnly allowCopy />
</FormRow>
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<FormInput
data-test="input-name"
name="name"
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.domain)}>
<FormInput
data-test="input-domain"
name="domain"
rules={{
required: formatMessage(labels.required),
@ -49,7 +54,9 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
</FormInput>
</FormRow>
<FormButtons>
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
<SubmitButton data-test="button-submit" variant="primary">
{formatMessage(labels.save)}
</SubmitButton>
</FormButtons>
</Form>
);

View File

@ -43,7 +43,7 @@ export function LoginForm() {
<Form className={styles.form} onSubmit={handleSubmit} error={getMessage(error)}>
<FormRow label={formatMessage(labels.username)}>
<FormInput
data-cy="input-username"
data-test="input-username"
name="username"
rules={{ required: formatMessage(labels.required) }}
>
@ -52,7 +52,7 @@ export function LoginForm() {
</FormRow>
<FormRow label={formatMessage(labels.password)}>
<FormInput
data-cy="input-password"
data-test="input-password"
name="password"
rules={{ required: formatMessage(labels.required) }}
>
@ -61,7 +61,7 @@ export function LoginForm() {
</FormRow>
<FormButtons>
<SubmitButton
data-cy="button-submit"
data-test="button-submit"
className={styles.button}
variant="primary"
disabled={isPending}

View File

@ -25,7 +25,7 @@ export function ProfileButton() {
return (
<PopupTrigger>
<Button data-cy="button-profile" variant="quiet">
<Button data-test="button-profile" variant="quiet">
<Icon>
<Icons.Profile />
</Icon>
@ -41,7 +41,7 @@ export function ProfileButton() {
<Text>{formatMessage(labels.profile)}</Text>
</Item>
{!cloudMode && (
<Item data-cy="item-logout" key="logout" className={styles.item}>
<Item data-test="item-logout" key="logout" className={styles.item}>
<Icon>
<Icons.Logout />
</Icon>