Merge remote-tracking branch 'origin/dev' into dev

.gitignore

@@ -35,6 +35,7 @@ yarn-error.log*
 # local env files
 .env
 .env.*
+*.env.*
 
 *.dev.yml
 

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+  },
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,12 @@
+describe('Login test', () => {
+  it('logs user in with correct credentials and logs user out', () => {
+    cy.visit('/login');
+    cy.dataCy('input-username').type(Cypress.env('umami_user'));
+    cy.dataCy('input-password').type(Cypress.env('umami_password'));
+    cy.dataCy('button-submit').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
+    cy.dataCy('button-profile').click();
+    cy.dataCy('item-logout').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/login');
+  });
+});

cypress/support/e2e.ts

@@ -0,0 +1,5 @@
+/// <reference types="cypress" />
+
+Cypress.Commands.add('dataCy', value => {
+  return cy.get(`[data-cy=${value}]`);
+});

cypress/support/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select DOM element by data-cy attribute.
+     * @example cy.dataCy('greeting')
+     */
+    dataCy(value: string): Chainable<JQuery<HTMLElement>>;
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -42,7 +42,8 @@
     "change-password": "node scripts/change-password.js",
     "lint": "next lint --quiet",
     "prepare": "node -e \"if (process.env.NODE_ENV !== 'production'){process.exit(1)} \" || husky install",
-    "postbuild": "node scripts/postbuild.js"
+    "postbuild": "node scripts/postbuild.js",
+    "cypress-open": "cypress open"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
@@ -133,6 +134,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "cross-env": "^7.0.3",
+    "cypress": "^13.6.6",
     "esbuild": "^0.17.17",
     "eslint": "^8.33.0",
     "eslint-config-next": "^14.0.4",

src/app/login/LoginForm.tsx

@@ -42,17 +42,30 @@ export function LoginForm() {
       <div className={styles.title}>umami</div>
       <Form className={styles.form} onSubmit={handleSubmit} error={getMessage(error)}>
         <FormRow label={formatMessage(labels.username)}>
-          <FormInput name="username" rules={{ required: formatMessage(labels.required) }}>
+          <FormInput
+            data-cy="input-username"
+            name="username"
+            rules={{ required: formatMessage(labels.required) }}
+          >
             <TextField autoComplete="off" />
           </FormInput>
         </FormRow>
         <FormRow label={formatMessage(labels.password)}>
-          <FormInput name="password" rules={{ required: formatMessage(labels.required) }}>
+          <FormInput
+            data-cy="input-password"
+            name="password"
+            rules={{ required: formatMessage(labels.required) }}
+          >
             <PasswordField />
           </FormInput>
         </FormRow>
         <FormButtons>
-          <SubmitButton className={styles.button} variant="primary" disabled={isPending}>
+          <SubmitButton
+            data-cy="button-submit"
+            className={styles.button}
+            variant="primary"
+            disabled={isPending}
+          >
             {formatMessage(labels.login)}
           </SubmitButton>
         </FormButtons>

src/components/input/ProfileButton.tsx

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