Skip to content

Commit

Permalink
feat: streamline and improve tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejandroAkbal
AlejandroAkbal committed Jun 28, 2023
1 parent b85944c commit 3b9a1ac
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 37 deletions.
10 changes: 5 additions & 5 deletions pages/posts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,7 @@
<div class="flex h-80 w-full animate-pulse flex-col items-center justify-center gap-4 text-lg">
<ArrowPathIcon class="h-12 w-12 animate-spin" />
<h1>Loading posts&hellip;</h1>
<h3>Loading posts&hellip;</h3>
</div>
</template>
Expand All @@ -493,9 +493,9 @@
<div class="flex h-80 w-full flex-col items-center justify-center gap-4 text-lg">
<ExclamationCircleIcon class="h-12 w-12" />
<h1>Failed to load posts</h1>
<h3>Failed to load posts</h3>
<h2 class="text-base">{{ errorInitialPosts }}</h2>
<span class="text-base">{{ errorInitialPosts }}</span>
</div>
</template>
Expand All @@ -506,9 +506,9 @@
<div class="flex h-80 w-full flex-col items-center justify-center gap-4 text-lg">
<QuestionMarkCircleIcon class="h-12 w-12" />
<h1>No results</h1>
<h3>No results</h3>
<h2 class="text-base">Try changing the domain or the tags</h2>
<span class="text-base">Try changing the domain or the tags</span>
</div>
</template>
Expand Down
62 changes: 30 additions & 32 deletions test/feature/pages/posts.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,8 @@ describe('/', async () => {
// Arrange
const page = await createPage('/posts')

// Act
await page.waitForSelector('h1')

// Assert DOM
expect(await page.textContent('h1')).toBe('Posts')
expect(await page.locator('h1').innerText()).toBe('Posts')
})

it.skip('renders a loader', async () => {
Expand Down Expand Up @@ -52,17 +49,21 @@ describe('/', async () => {
)

// Act
await page.goto(url('/posts?domain=safebooru.org'))
await Promise.all([
page.goto(url('/posts?domain=safebooru.org')),
page.waitForResponse('**/posts?baseEndpoint=*')
])

// Wait for posts to be rendered
await page.waitForResponse('**/posts?baseEndpoint=*')
const postsListElement = page.getByTestId('posts-list')

const postsInList = await postsListElement.locator('li')

// Assert DOM
// Expect 30 posts to be rendered + 4 ads
expect(await page.$$('ol > li')).toHaveLength(34)
expect(await postsInList.count()).toBe(34)

// Post
const firstPost = page.locator('ol > li:first-child')
const firstPost = postsInList.first()

// Image
const firstPostImage = await firstPost.locator('img')
Expand Down Expand Up @@ -105,21 +106,22 @@ describe('/', async () => {
)

// Act
await page.goto(url('/posts?domain=safebooru.org'))

// Wait for posts to be loaded
await page.waitForResponse('**/posts?baseEndpoint=*')
await Promise.all([
page.goto(url('/posts?domain=safebooru.org')),
page.waitForResponse('**/posts?baseEndpoint=*')
])

// Scroll to bottom
await page.getByTestId('load-next-page').scrollIntoViewIfNeeded()

await page.waitForURL('**/posts?domain=safebooru.org&page=1')

await page.waitForResponse('**/posts?baseEndpoint=*')
await Promise.all([
page.waitForResponse('**/posts?baseEndpoint=*'),
page.waitForURL('**/posts?domain=safebooru.org&page=1')
])

// Assert DOM
// Expect 60 posts to be rendered + 8 ads
expect(await page.$$('ol > li')).toHaveLength(68)
expect(await page.getByTestId('posts-list').locator('li').count()).toBe(68)
})

it('de-duplicates posts', async () => {
Expand Down Expand Up @@ -158,14 +160,12 @@ describe('/', async () => {

const postsListElement = page.getByTestId('posts-list')

await postsListElement.waitFor()

await page.getByTestId('load-next-page').scrollIntoViewIfNeeded()

await page.waitForResponse('**/posts?baseEndpoint=*')

// Expect 45 posts to be rendered + 6 ads
expect(await page.$$('ol > li')).toHaveLength(51)
expect(await postsListElement.locator('li').count()).toBe(51)
})

it('loads tags from Post', async () => {
Expand Down Expand Up @@ -201,12 +201,9 @@ describe('/', async () => {

const postsListElement = page.getByTestId('posts-list')

// Wait for posts to be loaded
await postsListElement.waitFor()

// Expect first post to have same id as mockPostsPage0
const firstPost = postsListElement.locator('li').first()

// Expect first post to have same id as mockPostsPage0
expect(
//
await firstPost.getAttribute('data-testid')
Expand All @@ -218,9 +215,10 @@ describe('/', async () => {
// Click on a Post's tag button named "1girl"
await firstPost.getByRole('button', { name: /1girl/i }).click()

// await page.waitForURL('**/posts?domain=safebooru.org&tags=1girl')

// await page.waitForResponse('**/posts?baseEndpoint=*')
await Promise.all([
page.waitForURL('**/posts?domain=safebooru.org&tags=1girl')
// page.waitForResponse('**/posts?baseEndpoint=*')
])

// Expect first post to have same id as mockPostsPage1
expect(
Expand Down