From 854e744bfd50d3bbddf209fe7e933b1cc6b32ce8 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Thu, 1 Aug 2024 12:19:20 +0200 Subject: [PATCH] Add browser tests for discovery page (#825) --- tests/e2e/pageobjects/discovery.page.js | 53 +++++++++++ tests/e2e/specs/discovery.spec.js | 117 ++++++++++++++++++++++++ 2 files changed, 170 insertions(+) create mode 100644 tests/e2e/pageobjects/discovery.page.js create mode 100644 tests/e2e/specs/discovery.spec.js diff --git a/tests/e2e/pageobjects/discovery.page.js b/tests/e2e/pageobjects/discovery.page.js new file mode 100644 index 00000000..a7b7ded0 --- /dev/null +++ b/tests/e2e/pageobjects/discovery.page.js @@ -0,0 +1,53 @@ +class Discovery { + get pagination () { return $('.pagination') } + get sortDropdown () { return $('.options .v-select') } + get sortValue () { return $('.options .v-select__selection') } + get excludeEmptyCheckbox () { return $('.options .v-input--checkbox input') } + get cards () { return $('.grid.cards') } + get firstCard () { return $('.card:first-child') } + get lastCard () { return $('.card:last-child') } + get footer () { return $('.footer') } + get header () { return $('.intro .text-h4.title') } + + async getCardDetails (card) { + await card.waitForDisplayed({ timeout: 5000 }) + return { + name: await (await card.$('.text-h5')).getText(), + pages: await (await card.$('.pages')).getText() + } + } + + async getFirstCard () { + return await this.getCardDetails(await this.firstCard) + } + + async getLastCard () { + return await this.getCardDetails(await this.lastCard) + } + + getCardByWikiName (name) { + return $('//div[contains(text(), "' + name + '")]') + } + + getCardByPageCount (count) { + return $('//div[contains(text(), "No. of pages: ' + count + '")]') + } + + async setSortValue (value) { + const sortDropdown = await this.sortDropdown + await sortDropdown.waitForClickable({ timeout: 5000 }) + await sortDropdown.click() + + const dropdownOption = await $( + '//div[contains(@class, "v-list-item__title") and contains(text(), "' + value + '")]' + ) + await dropdownOption.waitForDisplayed({ timeout: 5000 }) + await dropdownOption.click() + } + + async open (path = '/discovery') { + await browser.url(path) + } +} + +module.exports = new Discovery() diff --git a/tests/e2e/specs/discovery.spec.js b/tests/e2e/specs/discovery.spec.js new file mode 100644 index 00000000..6ade8c1a --- /dev/null +++ b/tests/e2e/specs/discovery.spec.js @@ -0,0 +1,117 @@ +const Discovery = require('../pageobjects/discovery.page') + +describe('Discovery page', () => { + beforeEach(async () => { + await Discovery.open() + await browser.setWindowSize(1360, 973) + }) + + it('should render header and footer', async () => { + const header = await Discovery.header + const footer = await Discovery.footer + + expect(await header.isDisplayed()).toBe(true) + expect(await header.getText()).toStrictEqual('A tour of Wikibases in the cloud') + expect(await footer.isDisplayed()).toBe(true) + }) + + it('should paginate results', async () => { + const page = await Discovery.pagination + expect(await page.isDisplayed()).toBe(true) + }) + + it('should filter by descending page count by default', async () => { + const sortValue = await Discovery.sortValue + const cardWithMostPages = await Discovery.getCardByPageCount(49) + const cardWithLeastPages = await Discovery.getCardByPageCount(0) + + expect(await sortValue.getText()).toStrictEqual('No. of pages ↓') + expect(await cardWithMostPages.isDisplayed()).toBe(true) + expect(await cardWithLeastPages.isDisplayed()).toBe(false) + }) + + describe('should support filtering', () => { + const cases = [ + { + description: 'in descending alphabetical order', + order: 'Alphabetically ↓', + cards: { + first: 'seededsite-9', + last: 'seededsite-32' + } + }, + { + description: 'in ascending alphabetical order', + order: 'Alphabetically ↑', + cards: { + first: 'seededsite-10', + last: 'seededsite-31' + } + }, + { + description: 'by descending page count', + order: 'No. of pages ↓', + cards: { + first: 'seededsite-49', + last: 'seededsite-26' + } + } + ] + + cases.forEach(async ({ description, order, cards }) => { + await it(description, async () => { + await Discovery.setSortValue(order) + + const firstCard = await Discovery.getFirstCard() + const lastCard = await Discovery.getLastCard() + + expect(await firstCard.name).toStrictEqual(cards.first) + expect(await lastCard.name).toStrictEqual(cards.last) + }) + }) + }) + + it('should filter out empty instances by default', async () => { + await Discovery.setSortValue('Alphabetically ↑') + + const excludeEmptyCheckbox = await Discovery.excludeEmptyCheckbox + const cards = await Discovery.cards + await cards.waitForDisplayed({ timeout: 5000 }) + const cardWithLeastPages = await Discovery.getCardByPageCount(0) + + expect(await excludeEmptyCheckbox.isSelected()).toBe(true) + expect(await cardWithLeastPages.isDisplayed()).toBe(false) + }) + + it('should support including empty instances', async () => { + await Discovery.setSortValue('Alphabetically ↑') + + const excludeEmptyCheckbox = await Discovery.excludeEmptyCheckbox + await excludeEmptyCheckbox.waitForExist({ timeout: 5000 }) + const excludeEmptyCheckboxWrapper = await excludeEmptyCheckbox.parentElement() + await excludeEmptyCheckboxWrapper.click() + + const cards = await Discovery.cards + await cards.waitForDisplayed({ timeout: 5000 }) + const cardWithLeastPages = await Discovery.getCardByPageCount(0) + + expect(await excludeEmptyCheckbox.isSelected()).toBe(false) + expect(await cardWithLeastPages.isDisplayed()).toBe(true) + }) + + it('should render card details', async () => { + const { name, pages } = await Discovery.getFirstCard() + + expect(name).toStrictEqual('seededsite-49') + expect(pages).toStrictEqual('No. of pages: 49') + }) + + it('should open new tab when card is clicked', async () => { + const firstCard = await Discovery.firstCard + await firstCard.click() + + const url = 'https://seededsite-49.nodomain.example/' + await browser.switchWindow(url) + await expect(browser).toHaveUrlContaining(url, { wait: 5000 }) + }) +})