Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 13:13:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(test): fix Overlay tests

Browse source
This commit is contained in:
Phan An 2022-07-21 11:39:42 +02:00
parent 3eb3575d85
commit 12a8179e4c
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
resources/assets/js/components/ui/Overlay.spec.ts
View file

@ -1,12 +1,12 @@
import UnitTestCase from '@/__tests__/UnitTestCase'
import { expect, it } from 'vitest'
import { OverlayState } from 'koel/types/ui'
import { eventBus } from '@/utils'
import Overlay from './Overlay.vue'
import { waitFor } from '@testing-library/vue'
import SoundBar from '@/components/ui/SoundBar.vue'
import Overlay from './Overlay.vue'
new class extends UnitTestCase {
private async showOverlay (type: OverlayState['type'] = 'loading') {
private async renderComponent (type: OverlayState['type'] = 'loading') {
const rendered = this.render(Overlay, {
global: {
stubs: {
@ -21,6 +21,7 @@ new class extends UnitTestCase {
})
await this.tick()
return rendered
}
@ -31,16 +32,14 @@ new class extends UnitTestCase {
['info'],
['warning'],
['error']
])('renders %s type', async (type) => expect((await this.showOverlay(type)).html()).toMatchSnapshot())
])('renders %s type', async (type) => expect((await this.renderComponent(type)).html()).toMatchSnapshot())
it('closes', async () => {
const { queryByTestId } = await this.showOverlay()
expect(await queryByTestId('overlay')).not.toBeNull()
const { queryByTestId } = await this.renderComponent()
expect(queryByTestId('overlay')).not.toBeNull()
eventBus.emit('HIDE_OVERLAY')
await this.tick()
expect(await queryByTestId('overlay')).toBeNull()
await waitFor(() => expect(queryByTestId('overlay')).toBeNull())
})
}
}

18
resources/assets/js/components/ui/__snapshots__/Overlay.spec.ts.snap
View file

@ -3,7 +3,9 @@
exports[`renders error type 1`] = `
<div id="overlay" class="error overlay" data-testid="overlay">
<div class="display">
<!--v-if--><i class="fa fa-exclamation-circle"></i>
<!--v-if--><svg class="svg-inline--fa fa-circle-exclamation" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-exclamation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class="" fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"></path>
</svg>
<!--v-if-->
<!--v-if-->
<!--v-if--><span class="message">Look at me now</span>
@ -17,7 +19,9 @@ exports[`renders info type 1`] = `
<div class="display">
<!--v-if-->
<!--v-if-->
<!--v-if--><i class="fa fa-info-circle"></i>
<!--v-if--><svg class="svg-inline--fa fa-circle-info" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class="" fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"></path>
</svg>
<!--v-if--><span class="message">Look at me now</span>
</div>
<!--v-if-->
@ -27,7 +31,7 @@ exports[`renders info type 1`] = `
exports[`renders loading type 1`] = `
<div id="overlay" class="loading overlay" data-testid="overlay">
<div class="display">
<div class="bars" data-testid="soundbars" data-v-d983e410=""><img alt="Sound bars" height="13" src="/resources/assets/img/bars.gif" data-v-d983e410=""></div>
<div class="bars" data-testid="soundbars" data-v-d983e410=""><img alt="Sound bars" height="13" src="undefined/resources/assets/img/bars.gif" data-v-d983e410=""></div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -43,7 +47,9 @@ exports[`renders success type 1`] = `
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if--><i class="fa fa-check-circle"></i><span class="message">Look at me now</span>
<!--v-if--><svg class="svg-inline--fa fa-circle-check" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class="" fill="currentColor" d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z"></path>
</svg><span class="message">Look at me now</span>
</div>
<!--v-if-->
</div>
@ -53,7 +59,9 @@ exports[`renders warning type 1`] = `
<div id="overlay" class="warning overlay" data-testid="overlay">
<div class="display">
<!--v-if-->
<!--v-if--><i class="fa fa-exclamation-triangle"></i>
<!--v-if--><svg class="svg-inline--fa fa-triangle-exclamation" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle-exclamation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class="" fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"></path>
</svg>
<!--v-if-->
<!--v-if--><span class="message">Look at me now</span>
</div>