Implement profile page

cypress/e2e/pages/edit-profile.cy.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+describe('Edit Profile Page', () => {
+  beforeEach(() => {
+    cy.login('standard');
+    cy.location('pathname').should('equal', '/');
+    cy.visit('/profile/edit');
+    cy.location('pathname').should('equal', '/profile/edit');
+  });
+
+  it('Should update profile preview', () => {
+    // write something new to make sure it can save
+    cy.typeInForm('First', new Date().toISOString());
+    cy.get('button').contains('Save').click();
+
+    cy.fixture('profile').then(profile => {
+      const { first, last, bio, major, year } = profile;
+
+      cy.typeInForm('First', first);
+      cy.typeInForm('Last', last);
+      cy.selectInForm('Major', major);
+      cy.selectInForm('Graduation Year', year);
+      cy.typeInForm('Biography', bio);
+      cy.get('button').contains('Save').click();
+
+      cy.get('.Toastify').contains('Changes saved!').should('exist');
+
+      cy.get('section:contains("Current Profile")').within(() => {
+        Object.values(profile).forEach((value: string | number) => {
+          cy.contains(value).should('exist');
+        });
+      });
+    });
+  });
+});

cypress/fixtures/profile.json

@@ -0,0 +1,7 @@
+{
+  "first": "John",
+  "last": "Doe",
+  "bio": "I am a testing account.",
+  "major": "Computer Engineering",
+  "year": "2026"
+}

cypress/support/commands.ts

@@ -1 +1,50 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Log in as the specified user, pulling details from accounts.json
+       * @example cy.login('standard')
+       */
+      login(account: string): Chainable<void>;
+
+      /**
+       * Type text into a form input or textarea under specified label
+       * @param label - text of label that the input is a child of
+       * @param value - text to be typed into input
+       */
+      typeInForm(label: string, value: string): Chainable<void>;
+
+      /**
+       * Select the given option in a select under specified label
+       * @param label - text of label that the select is a child of
+       * @param value - option to be selected
+       */
+      selectInForm(label: string, value: string): Chainable<void>;
+    }
+  }
+}
+
+Cypress.Commands.add('login', (account: string) => {
+  cy.fixture('accounts.json').then(accs => {
+    if (!(account in accs))
+      throw new Error(`Account '${account}' isn't specified in \`accounts.json\``);
+    const { email, password } = accs[account];
+
+    cy.visit('/login');
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button').contains('Sign In').click();
+  });
+});
+
+Cypress.Commands.add('typeInForm', (label: string, value: string) => {
+  cy.get(`label:contains("${label}") input, label:contains("${label}") textarea`).as('input');
+  cy.get('@input').clear();
+  cy.get('@input').type(value as string);
+});
+
+Cypress.Commands.add('selectInForm', (label: string, value: string | number) => {
+  cy.get(`label:contains("${label}") select`).select(value);
+});
+
 export {};

src/components/common/GifSafeImage/index.tsx

@@ -0,0 +1,13 @@
+import { isSrcAGif } from '@/lib/utils';
+import Image, { ImageProps } from 'next/image';
+
+/**
+ * A next/image Image that is automatically unoptimized when `src` is a gif
+ * @param props - props for Next Image component
+ * @returns image component
+ */
+const GifSafeImage = ({ src, alt, ...restProps }: ImageProps) => {
+  return <Image src={src} alt={alt} unoptimized={isSrcAGif(src)} {...restProps} />;
+};
+
+export default GifSafeImage;

src/components/common/index.ts

@@ -3,6 +3,7 @@ export { default as Carousel } from './Carousel';
 export { default as CommunityLogo } from './CommunityLogo';
 export { default as Cropper } from './Cropper';
 export { default as Dropdown } from './Dropdown';
+export { default as GifSafeImage } from './GifSafeImage';
 export { default as LinkButton } from './LinkButton';
 export { default as Modal } from './Modal';
 export { default as PaginationControls } from './PaginationControls';