Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 카드 뭉치 삭제/초기화/이름을 변경할 수 있다. (#17)
* 🧪 LearnsetList test 추가 * ✨ Dashboard에서 카드 뭉치 목록 렌더링
- Loading branch information
Showing
3 changed files
with
150 additions
and
11 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,77 @@ | ||
<template> | ||
<div> | ||
<v-card class="mx-auto" variant="outlined"> | ||
<v-card-item> | ||
<div> | ||
<div class="text-h6 font-weight-bold mb-1">당신의 카드 뭉치</div> | ||
<div class="text-caption"> | ||
학습을 위해 추가된 카드 뭉치 목록입니다. | ||
</div> | ||
</div> | ||
</v-card-item> | ||
<v-card-text> | ||
<v-list lines="two"> | ||
<v-list-item | ||
v-for="learnset in learnsets" | ||
:key="learnset.id" | ||
:title="learnset.name" | ||
active-color="primary" | ||
@click="moveLearnset(learnset.id)" | ||
> | ||
<template v-slot:append> | ||
<BaseButton | ||
text="" | ||
color="grey-lighten-1" | ||
variant="text" | ||
@click.stop="deleteLearnset({ id: learnset.id })" | ||
> | ||
<v-icon icon="mdi-delete"></v-icon> | ||
</BaseButton> | ||
</template> | ||
</v-list-item> | ||
</v-list> | ||
</v-card-text> | ||
</v-card> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import BaseButton from '@/components/BaseButton.vue'; | ||
import { MutationTypes } from '@/store/mutations'; | ||
import type { MyStore } from '@/store/types'; | ||
import type { Learnset } from '@/types/interfaces'; | ||
import type { PropType } from 'vue'; | ||
import { useRouter } from 'vue-router'; | ||
import { useStore } from 'vuex'; | ||
defineProps({ | ||
learnsets: { | ||
type: Array as PropType<Array<Learnset>>, | ||
required: true, | ||
}, | ||
}); | ||
const store: MyStore = useStore(); | ||
const deleteLearnset = ({ id }: { id: string }) => { | ||
const [learnset] = store.getters.learnset(id); | ||
const deleteLearnset = confirm( | ||
`"${learnset.name}" 카드 뭉치를 삭제하시겠습니까?` | ||
); | ||
if (deleteLearnset) { | ||
router.push('/'); | ||
store.commit(MutationTypes.DELETE_LEARNSET, learnset); | ||
} | ||
return; | ||
}; | ||
const router = useRouter(); | ||
const moveLearnset = (id: string) => { | ||
router.push(`/learnset/${id}`); | ||
}; | ||
</script> | ||
|
||
<style scoped></style> |
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,36 @@ | ||
import vuetify from '@/utils/setupVuetify'; | ||
import { render } from '@testing-library/vue'; | ||
import LearnsetList from '@/components/LearnsetList.vue'; | ||
|
||
describe(`LearnsetList Component`, () => { | ||
it(`카드 뭉치 이름과 삭제 버튼이 렌더링된다.`, () => { | ||
const learnsets = [ | ||
{ | ||
id: '', | ||
name: '카드 뭉치 1', | ||
created: 0, | ||
cards: [], | ||
}, | ||
{ | ||
id: '', | ||
name: '카드 뭉치 2', | ||
created: 0, | ||
cards: [], | ||
}, | ||
]; | ||
|
||
const { getByText, getAllByRole } = render(LearnsetList, { | ||
global: { | ||
plugins: [vuetify], | ||
}, | ||
props: { | ||
learnsets, | ||
}, | ||
}); | ||
|
||
expect(getByText(learnsets[0].name)).toBeInTheDocument(); | ||
expect(getByText(learnsets[1].name)).toBeInTheDocument(); | ||
|
||
expect(getAllByRole('button').length).toBe(2); | ||
}); | ||
}); |
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