Skip to content

Commit

Permalink
[#30] Fix convert string to enum for question displayType and update …
Browse files Browse the repository at this point in the history 
…test to use fabricator
  • Loading branch information
@manh-t
manh-t committed Sep 8, 2023
1 parent 1e925a5 commit ae7e948
Show file tree
Hide file tree
Showing 9 changed files with 186 additions and 221 deletions.
162 changes: 49 additions & 113 deletions src/components/Answer/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,175 +2,111 @@ import React from 'react';

import { render, screen } from '@testing-library/react';

import { Question } from 'types/question';
import { appSliderDataTestIds } from 'components/AppSlider';
import { dropdownDataTestIds } from 'components/Dropdown';
import { multiChoiceDataTestIds } from 'components/MultiChoice';
import { multiInputsDataTestIds } from 'components/MultiInputs';
import { npsDataTestIds } from 'components/Nps';
import { ratingDataTestIds } from 'components/Rating';
import { textAreaDataTestIds } from 'components/TextArea';
import { questionFabricator } from 'tests/fabricator';

import Answer from '.';
import Answer, { answerDataTestIds } from '.';

describe('Answer', () => {
describe('given the display type is star', () => {
it('renders Rating component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'star',
answers: [],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);
const question = questionFabricator();

const star = screen.getByTestId(dataTestId);
render(<Answer question={question} />);

const star = screen.getByTestId(ratingDataTestIds.base);

expect(star).toBeVisible();
expect(star).toHaveAttribute('id', 'rating-id');
});
});

describe('given the display type is choice', () => {
it('renders MultiChoice component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'choice',
answers: [],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);
const question = questionFabricator({ displayType: 'choice' });

render(<Answer question={question} />);

const multiChoice = screen.getByTestId(dataTestId);
const multiChoice = screen.getByTestId(multiChoiceDataTestIds.base);

expect(multiChoice).toBeVisible();
expect(multiChoice).toHaveAttribute('id', 'multi-choice-id');
});
});

describe('given the display type is nps', () => {
it('renders Nps component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'nps',
answers: [],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);
const question = questionFabricator({ displayType: 'nps' });

const nps = screen.getByTestId(dataTestId);
render(<Answer question={question} />);

const nps = screen.getByTestId(npsDataTestIds.base);

expect(nps).toBeVisible();
expect(nps).toHaveAttribute('id', 'nps-id');
});
});

describe('given the display type is textarea', () => {
it('renders TextArea component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'textarea',
answers: [
{
id: 'id',
resourceType: 'answer',
text: '',
},
],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);

const textArea = screen.getByTestId(dataTestId);
const question = questionFabricator({ displayType: 'textarea' });

render(<Answer question={question} />);

const textArea = screen.getByTestId(textAreaDataTestIds.base);

expect(textArea).toBeVisible();
expect(textArea).toHaveAttribute('id', 'text-area-id');
});
});

describe('given the display type is textfield', () => {
it('renders MultiInputs component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'textfield',
answers: [
{
id: 'id',
resourceType: 'answer',
text: '',
},
],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);

const multiInputs = screen.getByTestId(dataTestId);
const question = questionFabricator({ displayType: 'textfield' });

render(<Answer question={question} />);

const multiInputs = screen.getByTestId(multiInputsDataTestIds.base);

expect(multiInputs).toBeVisible();
expect(multiInputs).toHaveAttribute('id', 'multi-inputs-id');
});
});

describe('given the display type is dropdown', () => {
it('renders Dropdown component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'dropdown',
answers: [
{
id: 'id',
resourceType: 'answer',
text: '',
},
],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);

const dropdown = screen.getByTestId(dataTestId);
const question = questionFabricator({ displayType: 'dropdown' });

render(<Answer question={question} />);

const dropdown = screen.getByTestId(dropdownDataTestIds.base);

expect(dropdown).toBeVisible();
expect(dropdown).toHaveAttribute('id', 'dropdown-id');
});
});

describe('given the display type is slider', () => {
it('renders Dropdown component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'slider',
answers: [
{
id: 'id',
resourceType: 'answer',
text: '',
},
],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);

const slider = screen.getByTestId(dataTestId);
const question = questionFabricator({ displayType: 'slider' });

render(<Answer question={question} />);

const slider = screen.getByTestId(appSliderDataTestIds.base);

expect(slider).toBeVisible();
expect(slider).toHaveAttribute('id', 'slider-id');
});
});

describe('given the display type is intro', () => {
it('renders Dropdown component', () => {
const question: Question = {
id: 'id',
resourceType: 'question',
displayType: 'intro',
answers: [],
};
const dataTestId = 'answer';
render(<Answer question={question} data-test-id={dataTestId} />);

const intro = screen.getByTestId(dataTestId);

expect(intro).toBeVisible();
it('does NOT render any components', () => {
const question = questionFabricator({ displayType: 'intro' });

render(<Answer question={question} />);

const intro = screen.getByTestId(answerDataTestIds.base);

expect(intro).toBeEmptyDOMElement();
});
});
});
155 changes: 83 additions & 72 deletions src/components/Answer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,83 +9,94 @@ import Rating from 'components/Rating';
import TextArea from 'components/TextArea';
import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';

export const answerDataTestIds = {
base: 'answer__base',
};

interface AnswerProps {
question: Question;
'data-test-id'?: string;
}
const Answer = ({ question, ...rest }: AnswerProps): JSX.Element => {
const Answer = ({ question }: AnswerProps): JSX.Element => {
const displayTypeEnum = getDisplayTypeEnum(question);

switch (displayTypeEnum) {
case DisplayType.Heart:
case DisplayType.Smiley:
case DisplayType.Thumbs:
case DisplayType.Star:
return (
<Rating
items={question.answers}
displayType={displayTypeEnum}
onValueChanged={() => {
// TODO
}}
/>
);
case DisplayType.Choice:
return (
<MultiChoice
items={question.answers}
isPickOne={question?.pick === 'one'}
onValuesChanged={() => {
// TODO
}}
/>
);
case DisplayType.Nps:
return (
<Nps
items={question.answers}
onValuesChanged={() => {
// TODO
}}
/>
);
case DisplayType.Textarea:
return (
<TextArea
items={question.answers}
onValueChange={() => {
// TODO
}}
/>
);
case DisplayType.Textfield:
return <MultiInputs questionId={question.id} items={question.answers} />;
case DisplayType.Dropdown:
return (
<Dropdown
questionId={question.id}
items={question.answers}
onValueChanged={() => {
// TODO
}}
/>
);
case DisplayType.Slider:
return (
<AppSlider
min={0}
max={question.answers.length}
onValueChanged={() => {
// TODO
}}
/>
);
case DisplayType.Unknown:
case DisplayType.Intro:
case DisplayType.Outro:
default:
return <div {...rest}></div>;
}
const answerComponent = (): JSX.Element => {
switch (displayTypeEnum) {
case DisplayType.Heart:
case DisplayType.Smiley:
case DisplayType.Thumbs:
case DisplayType.Star:
return (
<Rating
items={question.answers}
displayType={displayTypeEnum}
onValueChanged={() => {
// TODO
}}
/>
);
case DisplayType.Choice:
return (
<MultiChoice
items={question.answers}
isPickOne={question?.pick === 'one'}
onValuesChanged={() => {
// TODO
}}
/>
);
case DisplayType.Nps:
return (
<Nps
items={question.answers}
onValuesChanged={() => {
// TODO
}}
/>
);
case DisplayType.Textarea:
return (
<TextArea
items={question.answers}
onValueChange={() => {
// TODO
}}
/>
);
case DisplayType.Textfield:
return <MultiInputs questionId={question.id} items={question.answers} />;
case DisplayType.Dropdown:
return (
<Dropdown
questionId={question.id}
items={question.answers}
onValueChanged={() => {
// TODO
}}
/>
);
case DisplayType.Slider:
return (
<AppSlider
min={0}
max={question.answers.length}
onValueChanged={() => {
// TODO
}}
/>
);
case DisplayType.Unknown:
case DisplayType.Intro:
case DisplayType.Outro:
default:
return <></>;
}
};

return (
<div key={question.id} data-test-id={answerDataTestIds.base}>
{answerComponent()}
</div>
);
};

export default Answer;
Loading

0 comments on commit ae7e948

Please sign in to comment.