Test: MakeShiftPage - MakeShift E2E

.gitignore

@@ -26,3 +26,5 @@ dist-ssr
 .env
 .env.production
 .vercel
+
+cypress.env.json

Cypress.env

@@ -0,0 +1,2 @@
+CYPRESS_ID=[email protected]
+CYPRESS_PW=asd123qq159357

__mocks__/zustand.ts

@@ -0,0 +1,50 @@
+import * as zustand from 'zustand'
+import { act } from '@testing-library/react'
+import { vi, afterEach } from 'vitest'
+
+const { create: actualCreate, createStore: actualCreateStore } =
+  await vi.importActual<typeof zustand>('zustand')
+
+export const storeResetFns = new Set<() => void>()
+
+const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+  const store = actualCreate(stateCreator)
+  const initialState = store.getState()
+  storeResetFns.add(() => {
+    store.setState(initialState, true)
+  })
+  return store
+}
+
+export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
+  console.log('zustand create mock')
+
+  return typeof stateCreator === 'function'
+    ? createUncurried(stateCreator)
+    : createUncurried
+}) as typeof zustand.create
+
+const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+  const store = actualCreateStore(stateCreator)
+  const initialState = store.getState()
+  storeResetFns.add(() => {
+    store.setState(initialState, true)
+  })
+  return store
+}
+
+export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
+  console.log('zustand createStore mock')
+
+  return typeof stateCreator === 'function'
+    ? createStoreUncurried(stateCreator)
+    : createStoreUncurried
+}) as typeof zustand.createStore
+
+afterEach(() => {
+  act(() => {
+    storeResetFns.forEach((resetFn) => {
+      resetFn()
+    })
+  })
+})

cypress/e2e/shift.cy.ts

@@ -0,0 +1,142 @@
+function login(pass?: boolean) {
+  cy.findByText('로그인').click();
+  cy.findByText('카카오 계정으로 시작하기').click();
+
+  cy.origin('https://accounts.kakao.com/login', () => {
+    cy.get('#loginId--1').type(Cypress.env('id'));
+    cy.get('#password--2').type(Cypress.env('pw'));
+    cy.get(
+      '#mainContent > div > div > form > div.confirm_btn > button.btn_g.highlight.submit'
+    ).click();
+  });
+  if (pass) {
+    cy.wait(2000);
+    cy.findByText('건너뛰기').click();
+  }
+}
+
+function keyDownEvent(key: string, count: number, ctrl?: boolean, shift?: boolean) {
+  Array(count)
+    .fill(1)
+    .forEach(() => cy.get('body').trigger('keydown', { key, ctrlKey: ctrl, shiftKey: shift }));
+}
+
+describe('근무 제작 페이지', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('host'));
+    login(true);
+  });
+
+  it('근무표 작성', () => {
+    cy.findByText('다음달 근무표 만들기').click();
+    cy.get('#cell_sample').click();
+
+    {
+      /**근무 입력 */
+      keyDownEvent('n', 5);
+      keyDownEvent('d', 3);
+      keyDownEvent('e', 3);
+      keyDownEvent('o', 3);
+      cy.findAllByText('D').should('have.length.at.least', 4);
+      cy.findAllByText('E').should('have.length.at.least', 4);
+      cy.findAllByText('N').should('have.length.at.least', 4);
+      cy.findAllByText('O').should('have.length.at.least', 4);
+      cy.log('근무 입력 성공');
+    }
+    {
+      /**우측 패널에 [근무자, 근무 종류]별 총 근무 횟수 표시 */
+      cy.get('#count_by_nurse > div:nth-child(1)').should('include.text', 3);
+      cy.get('#count_by_nurse > div:nth-child(2)').should('include.text', 3);
+      cy.get('#count_by_nurse > div:nth-child(3)').should('include.text', 5);
+      cy.get('#count_by_nurse > div:nth-child(4)').should('include.text', 3);
+    }
+    {
+      /**하단 패널에 [날짜, 근무 종류]별 총 근무 횟수 표시 */
+      cy.get('#count_by_day > div:nth-child(1) > div:nth-child(2) > p:nth-child(6)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(1) > div:nth-child(2) > p:nth-child(7)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(1) > div:nth-child(2) > p:nth-child(8)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(2) > div:nth-child(2) > p:nth-child(9)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(2) > div:nth-child(2) > p:nth-child(10)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(2) > div:nth-child(2) > p:nth-child(11)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(3) > div:nth-child(2) > p:nth-child(1)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(3) > div:nth-child(2) > p:nth-child(2)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(3) > div:nth-child(2) > p:nth-child(3)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(3) > div:nth-child(2) > p:nth-child(4)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(3) > div:nth-child(2) > p:nth-child(5)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(4) > div:nth-child(2) > p:nth-child(12)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(4) > div:nth-child(2) > p:nth-child(13)').should(
+        'have.text',
+        1
+      );
+      cy.get('#count_by_day > div:nth-child(4) > div:nth-child(2) > p:nth-child(14)').should(
+        'have.text',
+        1
+      );
+    }
+    {
+      /**잘못된 근무 표시*/
+      cy.get('div.group.absolute.z-10').should('exist');
+    }
+    {
+      /**근무 삭제 */
+      keyDownEvent('Backspace', 15);
+      cy.findAllByText('D').should('have.length', 2);
+      cy.findAllByText('E').should('have.length', 2);
+      cy.findAllByText('N').should('have.length', 2);
+      cy.findAllByText('O').should('have.length', 2);
+      cy.log('근무 삭제 성공');
+    }
+    {
+      /**Undo */
+      keyDownEvent('z', 14, true);
+      cy.findAllByText('D').should('have.length.at.least', 4);
+      cy.findAllByText('E').should('have.length.at.least', 4);
+      cy.findAllByText('N').should('have.length.at.least', 4);
+      cy.findAllByText('O').should('have.length.at.least', 4);
+    }
+    {
+      /**Redo */
+      keyDownEvent('z', 14, true, true);
+      cy.findAllByText('D').should('have.length', 2);
+      cy.findAllByText('E').should('have.length', 2);
+      cy.findAllByText('N').should('have.length', 2);
+      cy.findAllByText('O').should('have.length', 2);
+    }
+  });
+});

cypress/support/commands.ts

@@ -1,5 +1,6 @@
 /// <reference types="cypress" />
 import '@testing-library/cypress/add-commands';
+
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite

cypress/support/e2e.ts

@@ -16,5 +16,10 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
+Cypress.on('uncaught:exception', (err, _) => {
+  if(err.message.includes('접근이 거부되었습니다')) {
+    return false;
+  }
+})
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

src/hooks/shift/useEditShift/store.ts

@@ -2,7 +2,7 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { produce } from 'immer';
 
-interface State {
+export interface State {
   year: number;
   month: number;
   currentShiftTeamId: number | null;

src/libs/util/test-utils.tsx

@@ -1,10 +1,16 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render } from '@testing-library/react';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
 
 const wrapper = ({ children }: { children: JSX.Element }) => (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 
 const customRender = (child: React.ReactElement, options = {}) =>