-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented settings tab for Quiz (#1384)
* Implemented settings tab for Quiz * Created reusable component * Refactored code * Changed to match design updates
- Loading branch information
1 parent
5d4f5e8
commit f48ce0e
Showing
10 changed files
with
302 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { TypographyVariantEnum } from '~/types' | ||
| export const styles = { | ||
| title: { | ||
| typography: TypographyVariantEnum.Subtitle2 | ||
| }, | ||
| subtitle: { | ||
| typography: TypographyVariantEnum.Subtitle2, | ||
| fontWeight: 400, | ||
| color: 'basic.blueGray' | ||
| }, | ||
| settingContainer: { | ||
| mt: '24px', | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center' | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ReactNode, FC } from 'react' | ||
| import { Box } from '@mui/material' | ||
| import Typography from '@mui/material/Typography' | ||
|
|
||
| import { styles } from '~/components/setting-item/SettingItem.styles' | ||
|
|
||
| interface SettingItemProps { | ||
| title: string | ||
| subtitle: string | ||
| children: ReactNode | ||
| } | ||
|
|
||
| const SettingItem: FC<SettingItemProps> = ({ title, subtitle, children }) => { | ||
| return ( | ||
| <Box sx={styles.settingContainer}> | ||
| <Box> | ||
| <Typography sx={styles.title}>{title}</Typography> | ||
| <Typography sx={styles.subtitle}>{subtitle}</Typography> | ||
| </Box> | ||
| {children} | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default SettingItem |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { TypographyVariantEnum } from '~/types' | ||
| export const styles = { | ||
| topTitle: { | ||
| mt: '8px' | ||
| }, | ||
| title: { | ||
| typography: TypographyVariantEnum.H6, | ||
| color: 'basic.blueGray', | ||
| mt: '40px' | ||
| }, | ||
| select: { | ||
| width: '160px', | ||
| height: '40px', | ||
| flex: 'none' | ||
| }, | ||
| buttonContainer: { | ||
| display: 'flex', | ||
| justifyContent: 'flex-end', | ||
| mt: '32px' | ||
| }, | ||
| switch: { | ||
| width: '50px', | ||
| height: '24px', | ||
| padding: 0, | ||
| '& .MuiSwitch-switchBase': { | ||
| padding: '4px', | ||
| '&.Mui-checked': { | ||
| transform: 'translateX(26px)', | ||
| color: 'basic.white', | ||
| '& + .MuiSwitch-track': { | ||
| opacity: 1, | ||
| backgroundColor: 'basic.white' | ||
| }, | ||
| '& .MuiSwitch-thumb': { | ||
| backgroundColor: 'primary.900' | ||
| } | ||
| } | ||
| }, | ||
| '& .MuiSwitch-thumb': { | ||
| width: '16px', | ||
| height: '16px', | ||
| backgroundColor: 'basic.gray' | ||
| }, | ||
| '& .MuiSwitch-track': { | ||
| borderRadius: '28px', | ||
| opacity: 1, | ||
| border: '2px solid', | ||
| borderColor: 'primary.100', | ||
| backgroundColor: 'basic.white', | ||
| boxSizing: 'border-box' | ||
| } | ||
| } | ||
| } |
115 changes: 114 additions & 1 deletion
115
src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,120 @@ | ||
| import { useTranslation } from 'react-i18next' | ||
| import { Box } from '@mui/material' | ||
| import Typography from '@mui/material/Typography' | ||
| import Switch from '@mui/material/Switch' | ||
|
|
||
| import { ButtonTypeEnum } from '~/types' | ||
| import useForm from '~/hooks/use-form' | ||
| import { spliceSx } from '~/utils/helper-functions' | ||
|
|
||
| import SettingItem from '~/components/setting-item/SettingItem' | ||
| import AppSelect from '~/components/app-select/AppSelect' | ||
| import AppButton from '~/components/app-button/AppButton' | ||
|
|
||
| import { styles } from '~/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.styles' | ||
|
|
||
| const quizViewFields = [ | ||
| { | ||
| value: 'scroll', | ||
| title: 'Scroll' | ||
| }, | ||
| { | ||
| value: 'stepper', | ||
| title: 'Stepper' | ||
| } | ||
| ] | ||
| const QuizSettingsContainer = () => { | ||
| return <Box>Quiz settings</Box> | ||
| const { t } = useTranslation() | ||
| const { data, handleInputChange, handleNonInputValueChange } = useForm({ | ||
| initialValues: { | ||
| pointValues: false, | ||
| scoredUnscoredResponses: false, | ||
| correctAnswers: false, | ||
| shuffleQuestions: false, | ||
| quizView: 'scroll' | ||
| } | ||
| }) | ||
|
|
||
| return ( | ||
| <Box> | ||
| <Box> | ||
| <Typography sx={spliceSx(styles.title, styles.topTitle)}> | ||
| {t('myResourcesPage.quizzes.settingsQuiz')} | ||
| </Typography> | ||
|
|
||
| <SettingItem | ||
| subtitle={t('myResourcesPage.quizzes.questionsShuffleDesc')} | ||
| title={t('myResourcesPage.quizzes.questionsShuffle')} | ||
| > | ||
| <AppSelect | ||
| fields={quizViewFields} | ||
| setValue={(value) => handleNonInputValueChange('quizView', value)} | ||
| sx={styles.select} | ||
| value={data.quizView} | ||
| /> | ||
| </SettingItem> | ||
|
|
||
| <SettingItem | ||
| subtitle={t('myResourcesPage.quizzes.questionsShuffleDesc')} | ||
| title={t('myResourcesPage.quizzes.questionsShuffle')} | ||
| > | ||
| <Switch | ||
| checked={data.shuffleQuestions} | ||
| data-testid='shuffle-switch' | ||
| onChange={handleInputChange('shuffleQuestions')} | ||
| sx={styles.switch} | ||
| /> | ||
| </SettingItem> | ||
| </Box> | ||
|
|
||
| <Box> | ||
| <Typography sx={styles.title}> | ||
| {t('myResourcesPage.quizzes.settingsPointsAndAnswers')} | ||
| </Typography> | ||
|
|
||
| <SettingItem | ||
| subtitle={t('myResourcesPage.quizzes.pointValuesDesc')} | ||
| title={t('myResourcesPage.quizzes.pointValues')} | ||
| > | ||
| <Switch | ||
| checked={data.pointValues} | ||
| data-testid='pointValues-switch' | ||
| onChange={handleInputChange('pointValues')} | ||
| sx={styles.switch} | ||
| /> | ||
| </SettingItem> | ||
|
|
||
| <SettingItem | ||
| subtitle={t('myResourcesPage.quizzes.scoredUnscoredResponsesDesc')} | ||
| title={t('myResourcesPage.quizzes.scoredUnscoredResponses')} | ||
| > | ||
| <Switch | ||
| checked={data.scoredUnscoredResponses} | ||
| data-testid='responses-switch' | ||
| onChange={handleInputChange('scoredUnscoredResponses')} | ||
| sx={styles.switch} | ||
| /> | ||
| </SettingItem> | ||
|
|
||
| <SettingItem | ||
| subtitle={t('myResourcesPage.quizzes.correctAnswersDesc')} | ||
| title={t('myResourcesPage.quizzes.correctAnswers')} | ||
| > | ||
| <Switch | ||
| checked={data.correctAnswers} | ||
| data-testid='correctAnswers-switch' | ||
| onChange={handleInputChange('correctAnswers')} | ||
| sx={styles.switch} | ||
| /> | ||
| </SettingItem> | ||
| </Box> | ||
| <Box sx={styles.buttonContainer}> | ||
| <AppButton disabled type={ButtonTypeEnum.Submit}> | ||
| {t('common.apply')} | ||
| </AppButton> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default QuizSettingsContainer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
tests/unit/containers/my-quizzes/QuizSettingsContainer.spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import QuizSettingsContainer from '~/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer' | ||
| import { renderWithProviders } from '~tests/test-utils' | ||
| import { screen, fireEvent } from '@testing-library/react' | ||
|
|
||
| describe('QuizSettingsContainer', () => { | ||
| beforeEach(() => { | ||
| renderWithProviders(<QuizSettingsContainer />) | ||
| }) | ||
|
|
||
| it('should render two settings titles', () => { | ||
| const title1 = screen.getByText( | ||
| 'myResourcesPage.quizzes.settingsPointsAndAnswers' | ||
| ) | ||
| const title2 = screen.getByText('myResourcesPage.quizzes.settingsQuiz') | ||
| expect(title1).toBeInTheDocument() | ||
| expect(title2).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should toggle the "pointValues" switch and update data', () => { | ||
| const switchElement = screen.getByTestId('pointValues-switch').firstChild | ||
|
|
||
| fireEvent.click(switchElement) | ||
|
|
||
| expect(switchElement).toBeChecked() | ||
| expect(screen.getByTestId('pointValues-switch').firstChild.checked).toBe( | ||
| true | ||
| ) | ||
| }) | ||
|
|
||
| it('should toggle the "scoredUnscoredResponses" switch and update data', () => { | ||
| const switchElement = screen.getByTestId('responses-switch').firstChild | ||
|
|
||
| fireEvent.click(switchElement) | ||
|
|
||
| expect(switchElement).toBeChecked() | ||
| expect(screen.getByTestId('responses-switch').firstChild.checked).toBe(true) | ||
| }) | ||
|
|
||
| it('should toggle the "correctAnswers" switch and update data', () => { | ||
| const switchElement = screen.getByTestId('correctAnswers-switch').firstChild | ||
|
|
||
| fireEvent.click(switchElement) | ||
|
|
||
| expect(switchElement).toBeChecked() | ||
| expect(screen.getByTestId('correctAnswers-switch').firstChild.checked).toBe( | ||
| true | ||
| ) | ||
| }) | ||
|
|
||
| it('should toggle the "shuffleQuestions" switch and update data', () => { | ||
| const switchElement = screen.getByTestId('shuffle-switch').firstChild | ||
|
|
||
| fireEvent.click(switchElement) | ||
|
|
||
| expect(switchElement).toBeChecked() | ||
| expect(screen.getByTestId('shuffle-switch').firstChild.checked).toBe(true) | ||
| }) | ||
| }) |