Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…ng-ggood into feat/764-read-error-messages
  • Loading branch information
healim01 committed Oct 8, 2024
2 parents 0942184 + 3d2da54 commit d72dd7a
Show file tree
Hide file tree
Showing 22 changed files with 346 additions and 41 deletions.
32 changes: 32 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
name: Playwright Tests
on:
pull_request:
branches: [main, dev-fe]
jobs:
test:
timeout-minutes: 10
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: lts/*
- name: Install dependencies
run: |
cd frontend
npm install -g yarn && yarn
- name: Install Playwright Browsers
run: |
cd frontend
yarn playwright install --with-deps
- name: Run Playwright tests
run: |
cd frontend
yarn playwright test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
working-directory: frontend
6 changes: 5 additions & 1 deletion frontend/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,8 @@ stories
.env.sentry-build-plugin


private*
private*
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
1 change: 1 addition & 0 deletions frontend/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ module.exports = {
'\\.svg': '<rootDir>/src/mocks/svg.ts',
},
testEnvironment: 'jest-environment-jsdom',
testPathIgnorePatterns: ['\\.spec\\.ts$'],
};
3 changes: 3 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"test": "concurrently --names ,[TYPE] --prefix {name} \"jest\" \"tsc --noEmit\"",
"e2e": "playwright test",
"postinstall": "cd .. && husky frontend/.husky",
"format": "prettier --cache --write .",
"lint": "eslint --cache .",
Expand Down Expand Up @@ -44,6 +45,7 @@
"devDependencies": {
"@chromatic-com/storybook": "^1.6.1",
"@eslint/js": "^8.6.0",
"@playwright/test": "^1.47.2",
"@sentry/webpack-plugin": "^2.22.4",
"@storybook/addon-docs": "^8.3.0",
"@storybook/addon-essentials": "^8.2.4",
Expand All @@ -62,6 +64,7 @@
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.0",
"@types/jest": "^29.5.12",
"@types/node": "^22.7.4",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@webpack-cli/generators": "^3.0.7",
Expand Down
68 changes: 68 additions & 0 deletions frontend/playwright-report/index.html

Large diffs are not rendered by default.

80 changes: 80 additions & 0 deletions frontend/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { defineConfig, devices } from '@playwright/test';

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './src/e2e',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://127.0.0.1:3000',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
actionTimeout: 5000, // await 타임아웃 : 5초로 설정
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},

{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},

{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ const Address = () => {

return (
<FormField>
<FormField.Label label="주소" />
<FormField.Label label="주소" htmlFor="address" />
{address ? (
<FormField.TextBox text={`${address} ${buildingName}`} />
<FormField.TextBox text={`${address} ${buildingName}`} id="address" />
) : (
<FormField.TextBox text={'주소를 추가해 주세요.'} />
<FormField.TextBox text={'주소를 추가해 주세요.'} id="address" />
)}
<FlexBox.Horizontal style={{ marginTop: '20px' }}>
{/*실시간 위치 모달*/}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,22 @@ const DepositAndRent = () => {
<FormField>
<FormField.Label label="보증금 / 월세 (만원)" />
<FormStyled.FieldBox>
<FormField.Input width="medium" onChange={actions.onChange} name="deposit" value={deposit} />
<FormField.Input
width="medium"
onChange={actions.onChange}
name="deposit"
value={deposit}
aria-label="보증금"
/>
<FormStyled.FlexLabel label=" / " />
<FormField.Input width="medium" placeholder="" onChange={actions.onChange} name="rent" value={rent} />
<FormField.Input
width="medium"
placeholder=""
onChange={actions.onChange}
name="rent"
value={rent}
aria-label="월세"
/>
</FormStyled.FieldBox>
<FormField.ErrorMessage value={errorMessage} />
</FormField>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,16 @@ const MaintenanceFee = () => {

return (
<FormField>
<FormField.Label label="관리비" />
<FormField.Label label="관리비" htmlFor="maintenanceFee" />
<FormStyled.FieldBox>
<Input width="medium" placeholder="" onChange={actions.onChange} name="maintenanceFee" value={maintenanceFee} />
<Input
width="medium"
placeholder=""
onChange={actions.onChange}
name="maintenanceFee"
value={maintenanceFee}
id="maintenanceFee"
/>
<FormStyled.FlexLabel label="만원"></FormStyled.FlexLabel>
</FormStyled.FieldBox>
<FormField.ErrorMessage value={errorMessage} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ const OccupancyMonth = () => {

return (
<FlexBox.Vertical gap="1.5rem">
<FormField.Label label="입주 가능일" />
<FormField.Label label="입주 가능일" htmlFor="occupancyMonth" />
<FormStyled.FieldBox>
<FormField.Input width="medium" onChange={actions.onChange} name="occupancyMonth" value={occupancyMonth} />
<FormField.Input
width="medium"
onChange={actions.onChange}
name="occupancyMonth"
value={occupancyMonth}
id="occupancyMonth"
/>
<FormStyled.FlexLabel label="월 " />
<Dropdown
initialValue={occupancyPeriod}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ const RealEstate = () => {

return (
<FormField>
<FormField.Label label={'부동산 이름'} required={false} />
<FormField.Label label={'부동산 이름'} required={false} htmlFor="realEstate" />
<FormField.Input
placeholder=""
width="full"
type={'string'}
onChange={actions.onChange}
name={'realEstate'}
value={realEstate}
id="realEstate"
/>
<FormField.ErrorMessage value={errorMessage} />
</FormField>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,16 @@ const RoomContractTerm = () => {

return (
<FormField>
<FormField.Label label="계약 기간" />
<FormField.Label label="계약 기간" htmlFor="contractTerm" />
<S.FieldBox>
<Input width="medium" placeholder="" onChange={actions.onChange} name="contractTerm" value={contractTerm} />
<Input
width="medium"
placeholder=""
onChange={actions.onChange}
name="contractTerm"
value={contractTerm}
id="contractTerm"
/>
<FormStyled.FlexLabel label="개월"></FormStyled.FlexLabel>
</S.FieldBox>
<FormField.ErrorMessage value={errorMessage} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const RoomFloor = () => {
};
return (
<FormField>
<FormField.Label label="층수" />
<FormField.Label label="층수" htmlFor="floor" />
<FormStyled.FieldBox>
<Dropdown
initialValue={floorLevel}
Expand All @@ -35,6 +35,7 @@ const RoomFloor = () => {
name="floor"
value={floor}
onChange={actions.onChange}
id="floor"
/>
<FormStyled.FlexLabel label="층"></FormStyled.FlexLabel>
</FormStyled.FieldBox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const RoomName = () => {

return (
<FormField>
<FormField.Label label="방 이름" required={true} />
<FormField.Input placeholder="" onChange={actions.onChange} name="roomName" value={roomName} />
<FormField.Label label="방 이름" htmlFor="roomName" required={true} />
<FormField.Input placeholder="" onChange={actions.onChange} name="roomName" id="roomName" value={roomName} />
<FormField.ErrorMessage value={errorMessage} />
</FormField>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const RoomSize = () => {

return (
<FormField>
<FormField.Label label="방 크기" />
<FormField.Label label="방 크기" htmlFor="size" />
<FormStyled.FieldBox>
<Input width="medium" placeholder="" onChange={actions.onChange} name="size" value={roomSize} />
<Input width="medium" placeholder="" onChange={actions.onChange} name="size" value={roomSize} id="size" />
<FormStyled.FlexLabel label="평"></FormStyled.FlexLabel>
</FormStyled.FieldBox>
<FormField.ErrorMessage value={errorMessage} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@ const RoomStructure = () => {

return (
<FlexBox.Vertical>
<FormField.Label label="방 구조" />
<FormField.Label as="legend" label="방 구조" />
<FormStyled.OptionButtonContainer flexWrap="wrap">
{roomStructures.map(structure => (
<Badge
key={structure}
label={structure}
name={structure}
size="button"
isSelected={structure === roomStructure}
onClick={() => handleClickTagButton(structure)}
/>
<label key={structure}>
<Badge
label={structure}
name={structure}
size="button"
isSelected={structure === roomStructure}
onClick={() => handleClickTagButton(structure)}
/>
</label>
))}
</FormStyled.OptionButtonContainer>
<FormField.BottomEmptyBox />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/_common/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Badge = ({ size = 'short', label, isSelected = false, onClick, name, ...re
};

return (
<S.Button size={size} onClick={handleClick} isSelected={isSelected} name={name} {...rest}>
<S.Button size={size} onClick={handleClick} isSelected={isSelected} name={name} aria-pressed={isSelected} {...rest}>
{label}
</S.Button>
);
Expand Down
21 changes: 13 additions & 8 deletions frontend/src/components/_common/FormField/FormField.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { HTMLAttributes } from 'react';
import { ElementType, HTMLAttributes, LabelHTMLAttributes } from 'react';

import { InputRequiredDot } from '@/assets/assets';
import Input from '@/components/_common/Input/Input';
Expand All @@ -8,9 +8,10 @@ import theme from '@/styles/theme';

type GetProps<T> = T extends React.FC<infer P> ? P : never;

interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
label: string;
required?: boolean;
as?: ElementType;
}

const FormFieldWrapper = styled.div<{ rowGap?: string }>`
Expand All @@ -21,13 +22,17 @@ const FormFieldWrapper = styled.div<{ rowGap?: string }>`
`;

const FormField = Object.assign(FormFieldWrapper, {
Label: ({ label, required = false, ...rest }: LabelProps) => (
<S.LabelContainer {...rest} style={{ fontSize: theme.text.size.medium, fontWeight: theme.text.weight.bold }}>
{label}
{required && <S.MovedRequiredDot />}
</S.LabelContainer>
Label: ({ label, required = false, ...rest }: LabelProps) => {
return (
<S.LabelContainer {...rest} style={{ fontSize: theme.text.size.medium, fontWeight: theme.text.weight.bold }}>
{label}
{required && <S.MovedRequiredDot />}
</S.LabelContainer>
);
},
TextBox: ({ text, ...rest }: { text: string } & HTMLAttributes<HTMLDivElement>) => (
<S.TextBox {...rest}>{text}</S.TextBox>
),
TextBox: ({ text }: { text: string }) => <S.TextBox>{text}</S.TextBox>,
Input: ({ ...rest }: GetProps<typeof Input>) => <Input {...rest} />,
ErrorMessage: ({ value, ...rest }: { value?: string } & HTMLAttributes<HTMLParagraphElement>) => (
<S.ErrorMessage {...rest} aria-live="polite">
Expand Down
10 changes: 10 additions & 0 deletions frontend/src/e2e/newChecklist.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { test } from '@playwright/test';

test('빈 체크리스트를 제출할 수 있다.', async ({ page }) => {
await page.goto('http://localhost:3000/');
await page.getByRole('button', { name: '방끗 둘러보기' }).click();
await page.getByRole('button', { name: '전체 보기' }).click();
await page.getByLabel('add').click();
await page.getByRole('button', { name: '저장' }).click();
await page.getByRole('button', { name: '체크리스트 저장하기' }).click();
});
Loading

0 comments on commit d72dd7a

Please sign in to comment.