Skip to content

[Remove Vuetify from Studio] Convert Content Library unit tests to Vue Testing Library #5536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vtushar06 wants to merge 14 commits into
base: unstable
Choose a base branch
from
+255 −217
Open

[Remove Vuetify from Studio] Convert Content Library unit tests to Vue Testing Library #5536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
777de0a
Refactor catalogList tests to use Testing Library and improve mock im…
vtushar06 Nov 5, 2025
84d1b9b
Enhance catalogList tests: clarify checkbox test description and impr…
vtushar06 Nov 5, 2025
54c181a
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Nov 5, 2025
f642e8a
Refactor catalogList tests: enhance makeWrapper function and improve …
vtushar06 Nov 17, 2025
14f5762
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Nov 17, 2025
176e058
removed unneccessary stubs and focused on user visible behaviour
vtushar06 Nov 20, 2025
de8e0fc
Refactor catalogList tests: enhance makeWrapper function
vtushar06 Nov 25, 2025
59ac00f
removed unused test to focus on user interactions
vtushar06 Dec 1, 2025
b3c1b9c
Refactor catalogList tests: replace hardcoded strings with regex for …
vtushar06 Dec 19, 2025
e63c3da
replace button text checks with data-test attributes for improved tes…
vtushar06 Jan 15, 2026
00ea4cb
replace data-test attributes with data-testid for consistency in testing
vtushar06 Jan 16, 2026
2f40c2c
replace data-test attribute with data-testid
vtushar06 Jan 16, 2026
f7a4070
Merge branch 'unstable' into fix/content-vue-testing-library
vtushar06 Jan 16, 2026
911ed26
fixed conflit
vtushar06 Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 64 additions & 69 deletions contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,50 +33,45 @@
wrap
class="list-wrapper"
>
<!-- Results bar -->
<VFlex
xs12
class="mb-2"
<h1 class="mb-2 ml-1 title">
{{ $tr('resultsText', { count: page.count }) }}
</h1>
<KButton
v-if="page.count && !selecting"
:text="$tr('selectChannels')"
data-testid="select"
appearance="basic-link"
@click="setSelection(true)"
/>
<Checkbox
v-else-if="selecting"
v-model="selectAll"
class="mb-4 mx-2"
:label="$tr('selectAll')"
data-testid="select-all"
:indeterminate="selected.length > 0 && selected.length < channels.length"
/>
</VFlex>
<VFlex xs12>
<VLayout
v-for="item in channels"
:key="item.id"
align-center
>
<h1 class="mb-2 ml-1 title">
{{ $tr('resultsText', { count: page.count }) }}
</h1>
<KButton
v-if="page.count && !selecting"
:text="$tr('selectChannels')"
data-test="select"
appearance="basic-link"
@click="setSelection(true)"
/>
<Checkbox
v-else-if="selecting"
v-model="selectAll"
class="mb-4 mx-2"
:label="$tr('selectAll')"
data-test="select-all"
:indeterminate="selected.length > 0 && selected.length < channels.length"
v-show="selecting"
v-model="selected"
class="mx-2"
:value="item.id"
data-testid="checkbox"
/>
</VFlex>
<VFlex xs12>
<VLayout
v-for="item in channels"
:key="item.id"
align-center
>
<Checkbox
v-show="selecting"
v-model="selected"
class="mx-2"
:value="item.id"
data-test="checkbox"
/>
<ChannelItem
:channelId="item.id"
:detailsRouteName="detailsRouteName"
style="flex-grow: 1; width: 100%"
/>
</VLayout>
</VFlex>
<ChannelItem
:channelId="item.id"
:detailsRouteName="detailsRouteName"
style="flex-grow: 1; width: 100%"
/>
</VLayout>
</VFlex>
<VFlex
xs12
style="padding-bottom: 72px"
Expand All @@ -91,37 +86,37 @@
</VLayout>
<BottomBar
v-if="selecting"
data-test="toolbar"
:appearanceOverrides="{ height: windowIsSmall ? '72px' : '56px' }"
data-testid="toolbar"
:appearanceOverrides="{ height: $vuetify.breakpoint.xsOnly ? '72px' : '56px' }"
>
<div class="mx-2">
{{ $tr('channelSelectionCount', { count: selectedCount }) }}
</div>
<VSpacer />
<div>
<KButton
:text="$tr('cancelButton')"
data-test="cancel"
appearance="flat-button"
@click="setSelection(false)"
/>
</div>
<div class="mx-2">
{{ $tr('channelSelectionCount', { count: selectedCount }) }}
</div>
<VSpacer />
<div>
<KButton
:text="$tr('downloadButton')"
:text="$tr('cancelButton')"
data-testid="cancel"
appearance="flat-button"
@click="setSelection(false)"
/>
</div>
<KButton
:text="$tr('downloadButton')"
:primary="true"
data-testid="download-button"
iconAfter="dropup"
>
<KDropdownMenu
:primary="true"
data-test="download-button"
iconAfter="dropup"
>
<KDropdownMenu
:primary="true"
:options="[
{ label: $tr('downloadPDF'), value: 'pdf' },
{ label: $tr('downloadCSV'), value: 'csv' },
]"
appearance="raised-button"
@select="option => selectDownloadOption(option)"
/>
</KButton>
:options="[
{ label: $tr('downloadPDF'), value: 'pdf' },
{ label: $tr('downloadCSV'), value: 'csv' },
]"
appearance="raised-button"
@select="option => selectDownloadOption(option)"
/>
</KButton>
</BottomBar>
</VContainer>
</div>
Expand Down
Loading
Loading