Skip to content

Commit

Permalink
Enable unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexAndBear
AlexAndBear committed Feb 22, 2024
1 parent ce828cf commit f2ed641
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 37 deletions.
65 changes: 39 additions & 26 deletions packages/web-app-epub-reader/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,24 @@
</div>
<div class="oc-flex oc-flex-center oc-width-1-1 oc-height-1-1">
<div class="oc-flex oc-flex-middle oc-mx-l">
<oc-button :disabled="navigateLeftDisabled" appearance="raw" @click="navigateLeft">
<oc-button
class="epub-reader-navigate-left"
:disabled="navigateLeftDisabled"
appearance="raw"
@click="navigateLeft"
>
<oc-icon name="arrow-left-s" fill-type="line" size="xlarge" />
</oc-button>
</div>
<div id="reader" ref="bookContainer" class="oc-flex oc-flex-center" />

<div class="oc-flex oc-flex-middle oc-mx-l">
<oc-button :disabled="navigateRightDisabled" appearance="raw" @click="navigateRight">
<oc-button
class="epub-reader-navigate-right"
:disabled="navigateRightDisabled"
appearance="raw"
@click="navigateRight"
>
<oc-icon name="arrow-right-s" fill-type="line" size="xlarge" />
</oc-button>
</div>
Expand Down Expand Up @@ -120,24 +130,24 @@ export default defineComponent({
const bookContainer = ref<Element>()
const chapters = ref<NavItem[]>([])
const currentChapter = ref<NavItem>()
const navigateLeftDisabled = ref(true)
const navigateLeftDisabled = ref(false)
const navigateRightDisabled = ref(false)
const localStorageData = useLocalStorage(`oc_epubReader`, {})
const currentFontSizePercentage = ref(unref(localStorageData).fontSizePercentage || 100)
const themeStore = useThemeStore()
let book: Book
let rendition: Rendition
let book = ref<Book>()
let rendition = ref<Rendition>()
const navigateLeft = () => {
rendition.prev()
unref(rendition).prev()
}
const navigateRight = () => {
rendition.next()
unref(rendition).next()
}
const showChapter = (chapter: NavItem) => {
rendition.display(chapter.href)
unref(rendition).display(chapter.href)
}
const increaseFontSize = () => {
Expand Down Expand Up @@ -174,34 +184,35 @@ export default defineComponent({
async () => {
await nextTick()
if (book) {
book.destroy()
if (unref(book)) {
unref(book).destroy()
}
const localStorageResourceData = useLocalStorage(
`oc_epubReader_resource_${props.resource.id}`,
{}
)
book = ePub(props.currentContent)
book.loaded.navigation.then(({ toc }) => {
book.value = ePub(props.currentContent)
unref(book).loaded.navigation.then(({ toc }) => {
chapters.value = toc
currentChapter.value = toc[0]
currentChapter.value = toc?.[0]
})
rendition = book.renderTo(unref(bookContainer), {
rendition.value = unref(book).renderTo(unref(bookContainer), {
flow: 'paginated',
width: 650,
height: '90%' // Don't use full height to avoid cut-off text
})
rendition.themes.register('dark', DARK_THEME_CONFIG)
rendition.themes.register('light', LIGHT_THEME_CONFIG)
rendition.themes.select(themeStore.currentTheme.isDark ? 'dark' : 'light')
rendition.themes.fontSize(`${unref(currentFontSizePercentage)}%`)
rendition.display(unref(localStorageResourceData)?.currentLocation?.start?.cfi)
unref(rendition).themes.register('dark', DARK_THEME_CONFIG)
unref(rendition).themes.register('light', LIGHT_THEME_CONFIG)
unref(rendition).themes.select(themeStore.currentTheme.isDark ? 'dark' : 'light')
unref(rendition).themes.fontSize(`${unref(currentFontSizePercentage)}%`)
unref(rendition).display(unref(localStorageResourceData)?.currentLocation?.start?.cfi)
rendition.on('keydown', (event: KeyboardEvent) => {
unref(rendition).on('keydown', (event: KeyboardEvent) => {
if (event.key === Key.ArrowLeft) {
navigateLeft()
}
Expand All @@ -210,15 +221,15 @@ export default defineComponent({
}
})
rendition.on('relocated', () => {
const currentLocation = rendition.currentLocation() as DisplayedLocation & Location
unref(rendition).on('relocated', () => {
const currentLocation = unref(rendition).currentLocation() as DisplayedLocation & Location
localStorageResourceData.value = { currentLocation }
navigateLeftDisabled.value = currentLocation.atStart === true
navigateRightDisabled.value = currentLocation.atEnd === true
const locationCfi = currentLocation.start.cfi
const spineItem = book.spine.get(locationCfi)
const navItem = book.navigation.get(spineItem.href)
const spineItem = unref(book).spine.get(locationCfi)
const navItem = unref(book).navigation.get(spineItem.href)
// Might be sub nav item and therefore undefined
if (navItem) {
currentChapter.value = navItem
Expand All @@ -231,7 +242,7 @@ export default defineComponent({
)
watch(currentFontSizePercentage, () => {
rendition.themes.fontSize(`${unref(currentFontSizePercentage)}%`)
unref(rendition).themes.fontSize(`${unref(currentFontSizePercentage)}%`)
localStorageData.value = {
...unref(localStorageData),
fontSizePercentage: unref(currentFontSizePercentage)
Expand All @@ -253,7 +264,9 @@ export default defineComponent({
increaseFontSizeDisabled,
decreaseFontSizeDisabled,
currentFontSizePercentage,
FONT_SIZE_PERCENTAGE_STEP
FONT_SIZE_PERCENTAGE_STEP,
rendition,
book
}
}
})
Expand Down
48 changes: 48 additions & 0 deletions packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`renders correctly 1`] = `
"<div class="epub-reader oc-flex">
<ul class="oc-list oc-my-rm oc-mx-rm epub-reader-chapters-list oc-pl-s oc-visible@l"></ul>
<div class="oc-width-1-1 oc-height-1-1">
<div class="epub-reader-controls oc-flex oc-flex-middle oc-m-s">
<div class="epub-reader-controls-font-size oc-flex oc-button-group"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-decrease">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-icon oc-icon-xs oc-icon-passive"><!----></span>
</button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-reset">100%</button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-increase">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-icon oc-icon-xs oc-icon-passive"><!----></span>
</button></div>
<div class="epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" options=""><label for="oc-select-1" class="oc-label"></label>
<!--v-if-->
<div dir="auto" class="v-select vs--single vs--unsearchable oc-select epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" style="background: transparent;">
<div id="vs1__combobox" class="vs__dropdown-toggle" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option">
<div class="vs__selected-options"><input class="vs__search" readonly="" id="oc-select-1" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off"></div>
<div class="vs__actions"><button type="button" class="vs__clear" title="Clear Selected" aria-label="Clear Selected" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
<path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
</svg></button><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
<path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>
</svg>
<div class="vs__spinner" style="display: none;">Loading...</div>
</div>
</div>
<transition-stub name="vs__fade" appear="false" persisted="false" css="true">
<ul id="vs1__listbox" role="listbox" style="display: none; visibility: hidden;"></ul>
</transition-stub>
</div>
<!--v-if-->
</div>
</div>
<div class="oc-flex oc-flex-center oc-width-1-1 oc-height-1-1">
<div class="oc-flex oc-flex-middle oc-mx-l"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw epub-reader-navigate-left">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl oc-icon-passive"><!----></span>
</button></div>
<div id="reader" class="oc-flex oc-flex-center"></div>
<div class="oc-flex oc-flex-middle oc-mx-l"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw epub-reader-navigate-right">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl oc-icon-passive"><!----></span>
</button></div>
</div>
</div>
</div>"
`;
Loading

0 comments on commit f2ed641

Please sign in to comment.