Merge pull request #109 from Myongji-Graduate/cypress/#108

Cypress/#108

.devcontainer/devcontainer.json

@@ -0,0 +1,13 @@
+{
+    "image": "cypress/included:13.6.6",
+    "forwardPorts": [6080, 5901],
+    "features": {
+        "ghcr.io/devcontainers/features/desktop-lite:1": {}
+    },
+    "portsAttributes": {
+      "6080": {
+        "label": "desktop"
+      }
+    },
+    "postCreateCommand": "npm install && cypress install"
+  }

app/ui/result/result-category-card/result-category-card.skeleton.tsx

@@ -8,9 +8,7 @@ import Skeleton from '../../../utils/skeleton';
 
 function ResultCategoryCardSkeleton() {
   return (
-    <div
-      className={cn('flex flex-col gap-6 zIndex-1 rounded-xl shadow-lg bg-white p-[0.4rem]', 'md:w-80 md:p-[1.8rem]')}
-    >
+    <div className={cn('flex flex-col gap-6 z-1 rounded-xl shadow-lg bg-white p-[0.4rem]', 'md:w-80 md:p-[1.8rem]')}>
       <div className="flex justify-between items-center">
         <div className={cn('flex gap-4 font-bold text-sm', 'md:text-xl')}>
           <Image src={Book} width={24} height={24} alt="category-img" />

app/ui/result/result-category-card/result-category-card.tsx

@@ -74,7 +74,7 @@ function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCatego
   return (
     <div
       className={cn(
-        'flex flex-col gap-6 zIndex-1 rounded-xl shadow-md bg-white p-4 m-auto w-full',
+        'flex flex-col gap-6 z-1 rounded-xl shadow-md bg-white p-4 m-auto w-full',
         'md:p-[1.8rem] max-w-80',
       )}
     >

app/ui/result/result-category-detail-content/result-category-detail-content.skeleton.tsx

@@ -1,5 +1,5 @@
 import LabelContainerSkeleton from '@/app/ui/view/atom/label-container/label-container.skeleton';
-import Skeleton from '@/app/ui/view/atom/skeleton';
+import Skeleton from '@/app/utils/skeleton';
 
 export default function ResultCategoryDetailContentSkeleton() {
   return (

app/ui/result/result-category-detail-content/result-category-detail-content.tsx

@@ -27,7 +27,7 @@ function ResultCategoryDetailContent({ info }: ResultCategoryDetailContentProps)
                 checked={isTakenLecture}
                 data-testid="lecture-toggle"
                 onCheckedChange={setIsTakenLectrue}
-                className="absolute zIndex-2"
+                className="absolute z-2"
               />
             </div>
             <span>과목이 표시됩니다.</span>

app/ui/result/result-category-detail-lecture/result-category-detail-lecture-toggle.tsx

@@ -17,7 +17,7 @@ const ResultCategoryDetailLectureToggle = React.forwardRef<
     {...props}
     ref={ref}
   >
-    <div className={cn('zIndex-1 absolute text-white text-base', props.checked ? 'left-1' : 'right-1')}>
+    <div className={cn('z-1 absolute text-white text-base', props.checked ? 'left-1' : 'right-1')}>
       {props.checked ? '기이수' : '미이수'}
     </div>
     <SwitchPrimitives.Thumb

app/ui/user/user-credit-result/user-credit-result.tsx

@@ -11,7 +11,7 @@ export default async function UserCreditResult() {
       <div className="relative sm:h-20 sm:w-20 h-14 w-14">
         <Image src={pencil} alt="pencil" layout="fill" />
       </div>
-      <p className="zIndex-1 text-sm md:text-base lg:text-lg">
+      <p className="z-1 text-sm md:text-base lg:text-lg">
         {userInfo.studentName}님, 총 기준학점 중 <span className="text-point-blue">{userInfo.takenCredit}</span>학점을
         수강하셨습니다!
       </p>

app/ui/view/atom/content-container/content-container.tsx

@@ -10,7 +10,7 @@ export default function ContentContainer({ children, size = 'md', className }: C
   return (
     <div
       className={twMerge(
-        'absolute bg-white top-[7rem] zIndex-1 rounded-xl shadow-lg max-md:w-full',
+        'absolute bg-white top-[7rem] z-1 rounded-xl shadow-lg max-md:w-full',
         size === 'md' ? 'md:w-[70%]' : 'md:w-[80%]',
         className,
       )}

app/ui/view/molecule/announce-message-box/announce-massage-box.tsx

@@ -26,7 +26,7 @@ function AnnounceMessageBox({ message }: AnnounceMessageBoxProp) {
           height={36}
           alt="category-fullfill-image"
         />
-        <p className={cn('zIndex-1 text-sm', 'md:text-lg')}>{message}</p>
+        <p className={cn('z-1 text-sm', 'md:text-lg')}>{message}</p>
       </div>
     </div>
   );

cypress.config.ts

@@ -0,0 +1,10 @@
+export default {
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    viewportWidth: 1280,
+    viewportHeight: 844,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+};

cypress/e2e/home_page.cy.ts

@@ -0,0 +1,7 @@
+describe('The Home Page', () => {
+  it('successfully loads', () => {
+    //   cy.visit('/')
+
+    cy.login('admin', 'admin');
+  });
+});

cypress/e2e/spec.cy.ts

@@ -0,0 +1,17 @@
+describe('My First Test', () => {
+  it('Gets, types and asserts', () => {
+    cy.visit('https://example.cypress.io');
+
+    cy.contains('type').click();
+
+    // Should be on a new URL which
+    // includes '/commands/actions'
+    cy.url().should('include', '/commands/actions');
+
+    // Get an input, type into it
+    cy.get('.action-email').type('[email protected]');
+
+    //  Verify that the value has been updated
+    cy.get('.action-email').should('have.value', '[email protected]');
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (id, password) => {
+  cy.session(
+    id,
+    () => {
+      cy.visit('/sign-in');
+
+      cy.get('input[name=authId]').type(id);
+
+      // {enter} causes the form to submit
+      cy.get('input[name=password]').type(`${password}{enter}`, { log: false });
+
+      // we should be redirected to /dashboard
+      cy.url().should('include', '/my');
+    },
+    {
+      validate: () => {
+        cy.getCookie('accessToken').should('exist');
+      },
+    },
+  );
+
+  // our auth cookie should be present
+
+  // UI should reflect this user being logged in
+  //   cy.get('h1').should('contain', username)
+});
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,33 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+Cypress.on('uncaught:exception', (err) => {
+  // Cypress and React Hydrating the document don't get along
+  // for some unknown reason. Hopefully, we figure out why eventually
+  // so we can remove this.
+  if (
+    /hydrat/i.test(err.message) ||
+    /Minified React error #418/.test(err.message) ||
+    /Minified React error #423/.test(err.message)
+  ) {
+    return false;
+  }
+});