| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-02 14:46:27 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-02 14:46:27 -0700 |
| commit | d826a01ff91301d88762a59881ac53053926b5be (patch) | |
| tree | ebc23acbe51b271942df85f3de8ae6dadb1513f8 /test | |
| parent | 163e3a9de59f5d6a8df38fa32a1e7dc4db1ad024 (diff) | |
Add integration test-helpers and refactor integration tests
Diffstat (limited to 'test')
| -rw-r--r-- | test/integration/fixtures/scenario.svg (renamed from test/integration/fixtures/scenario-test.svg) | 8 | ||||
| -rw-r--r-- | test/integration/helpers.cjs | 72 | ||||
| -rw-r--r-- | test/integration/select.test.js | 172 |
3 files changed, 150 insertions, 102 deletions
diff --git a/test/integration/fixtures/scenario-test.svg b/test/integration/fixtures/scenario.svg index 77afd6b..e5b7121 100644 --- a/test/integration/fixtures/scenario-test.svg +++ b/test/integration/fixtures/scenario.svg @@ -9,13 +9,7 @@ </g> <g data-y="1"> <g data-x="0"><use href="#hex"/></g> - <g data-x="1"><use href="#hex"/> - <g class="counter" data-allegiance="attacker" data-number="1"> - <use class="primary-weapon" href="counters.svg#rifle"/> - <use class="troop-number" href="counters.svg#number-1"/> - <use class="squad-number" href="counters.svg#number-1"/> - </g> - </g> + <g data-x="1"><use href="#hex"/></g> <g data-x="2"><use href="#hex"/></g> </g> <g data-y="2"> diff --git a/test/integration/helpers.cjs b/test/integration/helpers.cjs index 7e3e0fd..d38f1b6 100644 --- a/test/integration/helpers.cjs +++ b/test/integration/helpers.cjs @@ -1,5 +1,8 @@ const { mkdir, writeFile } = require('node:fs/promises') , path = require('path') + , { By, until } = require('selenium-webdriver') + , { JSDOM } = require('jsdom') + , { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor') ; global.takeScreenshot = async (driver) => { @@ -14,3 +17,72 @@ global.url = (relativeOrAbsolute) => { const location = new URL(relativeOrAbsolute, global.testServerUrl); return location.href; } + +global.page = { + waitUntilMapLoaded: async function (driver) { + const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder')); + await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000); + }, + + findElInFrame: async function (frame, locator) { + const driver = frame.getDriver(); + await driver.switchTo().frame(frame); + return driver.findElement(locator); + }, + + expectSelected: async function (el) { + expect(await el.getAttribute('class')).toEqual(expect.stringContaining('selected')); + }, + + expectNotSelected: async function (el) { + expect(await el.getAttribute('class')).toEqual(expect.not.stringContaining('selected')); + }, + + troopCounterSelector: function ({ allegiance = 'attacker', troopNumber = 1 } = {}) { + return `.counter[data-allegiance="${allegiance}"][data-number="${troopNumber}"]`; + }, + + findMapResourceEl: function (driver) { + return driver.findElement(By.css('object')); + }, + + findTroopRecordEl: function (driver) { + return driver.findElement(By.css('.soldier-record')); + } +}; + +global.mockResponse = async function mockResponse(driver, urlPath, template, createFn) { + const connection = driver.createCDPConnection('page'); + const dom = new JSDOM(template); + const contents = createFn(dom.window.document); + + const httpResponse = new HttpResponse(url(urlPath)); + httpResponse.body = contents; + httpResponse.addHeaders('Content-Type', 'image/svg+xml'); + + await driver.onIntercept(await connection, httpResponse, async () => {}); +} + +global.createTroopCounter = function ( + allegiance = 'attacker', + troopNumber = 1, + squadNumber = 1, + weapon = 'rifle' +) { + return JSDOM.fragment(` + <g class="counter" data-allegiance="${allegiance}" data-number="${troopNumber}"> + <use class="primary-weapon" href="counters.svg#${weapon}"></use> + <use class="troop-number" href="counters.svg#number-${troopNumber}"></use> + <use class="squad-number" href="counters.svg#number-${squadNumber}"></use> + </g> + `); +} + +global.placeCounter = function (document, counter, { x, y }) { + document.querySelector(`g[data-y="${y}"] g[data-x="${x}"]`).append(counter); +} + +global.selectCounter = function (counter) { + counter.querySelector('.counter').classList.add('selected'); + return counter; +} diff --git a/test/integration/select.test.js b/test/integration/select.test.js index d9b632e..acde0f0 100644 --- a/test/integration/select.test.js +++ b/test/integration/select.test.js @@ -1,136 +1,118 @@ -const { Builder, By, until } = require('selenium-webdriver'), +const { Builder, By } = require('selenium-webdriver'), chrome = require('selenium-webdriver/chrome.js'), chromeOptions = new chrome.Options(), - { readFile, readdir } = require('node:fs/promises'), - { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor'); + { readFile, readdir } = require('node:fs/promises'); chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox'); const buildPath = 'build/assets/images'; const defaultScenario = 'scenario-side_show'; -const fixtureFilePath = './test/integration/fixtures/scenario-test.svg'; +const fixtureFilePath = './test/integration/fixtures/scenario.svg'; -const selected = expect.stringContaining('selected'); -const notSelected = expect.not.stringContaining('selected'); - -let driver, httpResponse; +let driver, fixture, scenario; beforeAll(async () => { - const filenames = await readdir(buildPath); - const scenario = filenames.find(filename => filename.includes(defaultScenario)); - - httpResponse = new HttpResponse(url(`/assets/images/${scenario}`)); - httpResponse.body = await readFile(fixtureFilePath, 'utf8'); - httpResponse.addHeaders('Content-Type', 'image/svg+xml'); + const dirread = readdir(buildPath); + const fileRead = readFile(fixtureFilePath, 'utf8'); + const filenames = await dirread; + scenario = filenames.find(filename => filename.includes(defaultScenario)); + fixture = await fileRead; }); beforeEach(async () => { driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build(); - const connection = await driver.createCDPConnection('page') - await driver.onIntercept(connection, httpResponse, async () => {}); - await driver.get(url('/')); - const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder')); - await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000); }); -it('selects and deselects a trooper by clicking on its counter', async () => { - const record = await driver.findElement(By.css('.soldier-record')); - const objectEl = await driver.findElement(By.css('object')); - const selector = '.counter[data-allegiance="attacker"][data-number="1"]'; - - expect(await record.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().frame(objectEl); - const svg = await driver.findElement(By.css('svg')); - const counter = await driver.findElement(By.css(selector), svg); - expect(await counter.getAttribute('class')).toEqual(notSelected); +describe('a trooper', () => { + beforeEach(async () => { + await mockResponse(driver, `/assets/images/${scenario}`, fixture, (document) => { + placeCounter(document, createTroopCounter(), { x: 1, y: 1 }); + return `<?xml version="1.0" standalone="yes"?>\n` + document.querySelector('svg').outerHTML; + }); + }); - await counter.click(); + it('is selected by clicking on its counter', async () => { + await driver.get(url('/')); + await page.waitUntilMapLoaded(driver); - expect(await counter.getAttribute('class')).toEqual(selected); - await driver.switchTo().defaultContent(); - expect(await record.getAttribute('class')).toEqual(selected); + const record = page.findTroopRecordEl(driver); + const mapResource = page.findMapResourceEl(driver); - await driver.switchTo().frame(objectEl); - await counter.click(); + await page.expectNotSelected(await record); + const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector())); + await page.expectNotSelected(counter); - expect(await counter.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().defaultContent(); - expect(await record.getAttribute('class')).toEqual(notSelected); -}); + await counter.click(); -it('selects and deselects trooper by clicking on its record', async () => { - const record = await driver.findElement(By.css('.soldier-record')); - const objectEl = await driver.findElement(By.css('object')); - const selector = '.counter[data-allegiance="attacker"][data-number="1"]'; + await page.expectSelected(counter); + await driver.switchTo().defaultContent(); + await page.expectSelected(await record); + }); - expect(await record.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().frame(objectEl); - const svg = await driver.findElement(By.css('svg')); - const counter = await driver.findElement(By.css(selector), svg); - expect(await counter.getAttribute('class')).toEqual(notSelected); + it('is selected by clicking on its record', async () => { + await driver.get(url('/')); + await page.waitUntilMapLoaded(driver); - await driver.switchTo().defaultContent(); - await record.click(); + const record = page.findTroopRecordEl(driver); + const mapResource = page.findMapResourceEl(driver); - expect(await record.getAttribute('class')).toEqual(selected); - await driver.switchTo().frame(objectEl); - expect(await counter.getAttribute('class')).toEqual(selected); + await page.expectNotSelected(await record); + const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector())); + await page.expectNotSelected(counter); - await driver.switchTo().defaultContent(); - await record.click(); + await driver.switchTo().defaultContent(); + await record.click(); - expect(await record.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().frame(objectEl); - expect(await counter.getAttribute('class')).toEqual(notSelected); + await page.expectSelected(await record); + await driver.switchTo().frame(await mapResource); + await page.expectSelected(counter); + }); }); -it('selects a trooper by clicking on its counter and deselects it by clicking on its record', async () => { - const record = await driver.findElement(By.css('.soldier-record')); - const objectEl = await driver.findElement(By.css('object')); - const selector = '.counter[data-allegiance="attacker"][data-number="1"]'; - - expect(await record.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().frame(objectEl); - const svg = await driver.findElement(By.css('svg')); - const counter = await driver.findElement(By.css(selector), svg); - expect(await counter.getAttribute('class')).toEqual(notSelected); +describe('a selected trooper', () => { + beforeEach(async () => { + await mockResponse(driver, `/assets/images/${scenario}`, fixture, (document) => { + placeCounter(document, selectCounter(createTroopCounter()), { x: 1, y: 1 }); + return `<?xml version="1.0" standalone="yes"?>\n` + document.querySelector('svg').outerHTML; + }); + }); - await counter.click(); + it('is deselected by clicking on its counter', async () => { + await driver.get(url('/')); + await page.waitUntilMapLoaded(driver); - expect(await counter.getAttribute('class')).toEqual(selected); - await driver.switchTo().defaultContent(); - expect(await record.getAttribute('class')).toEqual(selected); + const record = page.findTroopRecordEl(driver); + const mapResource = page.findMapResourceEl(driver); - await record.click(); + await page.expectSelected(await record); + const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector())); + await page.expectSelected(counter); - expect(await record.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().frame(objectEl); - expect(await counter.getAttribute('class')).toEqual(notSelected); -}); + await counter.click(); -it('selects a trooper by clicking on its record and deselects it by clicking on its counter', async () => { - const record = await driver.findElement(By.css('.soldier-record')); - const objectEl = await driver.findElement(By.css('object')); - const selector = '.counter[data-allegiance="attacker"][data-number="1"]'; + await page.expectNotSelected(counter); + await driver.switchTo().defaultContent(); + await page.expectNotSelected(await record); + }); - expect(await record.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().frame(objectEl); - const svg = await driver.findElement(By.css('svg')); - const counter = await driver.findElement(By.css(selector), svg); - expect(await counter.getAttribute('class')).toEqual(notSelected); + it('is deselected by clicking on its record', async () => { + await driver.get(url('/')); + await page.waitUntilMapLoaded(driver); - await driver.switchTo().defaultContent(); - await record.click(); + const record = page.findTroopRecordEl(driver); + const mapResource = page.findMapResourceEl(driver); - expect(await record.getAttribute('class')).toEqual(selected); - await driver.switchTo().frame(objectEl); - expect(await counter.getAttribute('class')).toEqual(selected); + await page.expectSelected(await record); + const counter = await page.findElInFrame(await mapResource, By.css(page.troopCounterSelector())); + await page.expectSelected(counter); - await counter.click(); + await driver.switchTo().defaultContent(); + await record.click(); - expect(await counter.getAttribute('class')).toEqual(notSelected); - await driver.switchTo().defaultContent(); - expect(await record.getAttribute('class')).toEqual(notSelected); + await page.expectNotSelected(await record); + await driver.switchTo().frame(await mapResource); + await page.expectNotSelected(counter); + }); }); afterEach(async () => { |
