ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix/refactor tests

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-06-01 17:50:58 -07:00
parent e8fae51b32
commit 163e3a9de5
15 changed files with 160 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
esbuild-server.mjs
View File

@ -155,9 +155,6 @@ const resolveSvgImports = {
name: 'resolveSvgImports',
setup(build) {
build.onStart(() => {
console.log("BUILD STARTED");
console.log(build.initialOptions.outdir);
fs.rmSync(path.resolve(build.initialOptions.outdir), { recursive: true, force: true });
});
@ -228,7 +225,6 @@ const ctx = await esbuild.context({
'.svg': 'file'
},
assetNames: 'assets/images/[name]-[hash]',
metafile: true
});
await ctx.watch();

3
jest.config.integ.cjs
View File

@ -6,4 +6,7 @@ module.exports = {
setupFiles: ['./test/integration/helpers.cjs'],
testPathIgnorePatterns: ['/node_modules/', 'test/unit'],
testTimeout: 5000,
globals: {
testServerUrl: 'http://localhost:3005/'
}
};

20
node
View File

@ -1,13 +1,15 @@
#!/usr/bin/env bash
user_id=$(id -u)
image=btroops
#user_id=$(id -u)
#image=btroops
if [[ $1 == run && $2 == test* ]]
then
port=3005
else
port=8080
fi
#if [[ $1 == run && $2 == test* ]]
#then
# port=3005
#else
# port=8080
#fi
docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image node $@
#docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image node $@
source ./scripts/docker-run node $@

20
npm
View File

@ -1,13 +1,15 @@
#!/usr/bin/env bash
user_id=$(id -u)
image=btroops
#user_id=$(id -u)
#image=btroops
if [[ $1 == run && $2 == test* ]]
then
port=3005
else
port=8080
fi
#if [[ $1 == run && $2 == test* ]]
#then
# port=3005
#else
# port=8080
#fi
docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image npm $@
#docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image npm $@
source ./scripts/docker-run npm $@

3
run-shell
View File

@ -1,3 +0,0 @@
#!/usr/bin/env bash
docker run --rm --init -it -v $PWD:/usr/src/app -p 8080:8080 btroops bash

3
run-shell-test
View File

@ -1,3 +0,0 @@
#!/usr/bin/env bash
docker run --rm --init -it --hostname btroops-test -v $PWD:/usr/src/app -p 8080:8080 --name btroops-test btroops bash

13
scripts/docker-run Executable file
View File

@ -0,0 +1,13 @@
#!/usr/bin/env bash
user_id=$(id -u)
image=btroops
if [[ $2 == run && $3 == test* ]]
then
port=3005
else
port=8080
fi
docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image $@

49
server.cjs
View File

@ -1,5 +1,24 @@
const { createServer } = require('esbuild-server');
const path = require('node:path');
const fs = require('node:fs');
const { IncomingMessage } = require('node:http');
class Request extends IncomingMessage {
constructor(socket) {
super(socket);
}
get url() {
console.log('getter called', this._url);
return this._url;
}
set url(val) {
console.log('setter called', val);
this._url = val;
}
}
const resolveImportedSvg = {
name: 'resolveImportedSvg',
@ -12,21 +31,36 @@ const resolveImportedSvg = {
}
}
const resolveSvgImports = {
name: 'resolveSvgImports',
setup(build) {
build.onStart(() => {
fs.rmSync(path.resolve(build.initialOptions.outdir), { recursive: true, force: true });
});
build.onResolve({ filter: /\.svg$/ }, args => {
return {
path: path.resolve('public', args.path),
};
});
}
}
const server = createServer(
{
bundle: true,
define: {
'env': `"${process.env.NODE_ENV || 'dev'}"`,
},
entryPoints: ['src/*.js'],
...(process.env.NODE_ENV !== 'test') && {
outdir: 'build'
},
plugins: [resolveImportedSvg],
entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
outdir: 'build',
// ...(process.env.NODE_ENV !== 'test') && {
// outdir: 'build'
// },
plugins: [resolveSvgImports],
loader: {
'.svg': 'file'
},
metafile: true,
assetNames: 'assets/images/[name]-[hash]',
},
{
@ -34,7 +68,8 @@ const server = createServer(
...(process.env.NODE_ENV === 'test') && {
port: 3005,
injectLiveReload: false,
watch: false
watch: false,
// http: { IncomingMessage: Request }
}
}
);

23
src/index.js
View File

@ -80,11 +80,20 @@ function loadScenario(data) {
async function buildScenario(req) {
console.log('req', req);
const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
document.querySelector('object').contentDocument.querySelector('svg').replaceWith(svg);
console.log('fresh template', scenarioTemplate.querySelector('svg'));
const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
// console.log('document', document.querySelector('object').contentDocument);
document.querySelector('object').contentDocument.querySelector('svg').remove();
document.querySelector('object').contentDocument.append(svg);
gameboard.stop();
recordSheet.stop();
const startLocs = svg.querySelector('.start-locations');
const scenario = await req;
const startLocs = scenario.querySelector('.start-locations');
console.log(scenario);
@ -119,17 +128,15 @@ async function buildScenario(req) {
});
const refsQuery = [...refs[filename]].join(', ');
external.querySelectorAll(refsQuery).forEach(node => defs.append(node));
external.querySelectorAll(refsQuery).forEach(node => defs.append(svg.ownerDocument.importNode(node, true)));
});
});
scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(el));
grid.before(scenario.querySelector('.start-locations'));
scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(svg.ownerDocument.importNode(el, true)));
if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true));
const scenarioGrid = scenario.querySelector('.grid');
console.log('scenarioGrid', scenarioGrid);
if (scenarioGrid) {
grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
}

8
src/modules/gameboard.js
View File

@ -175,6 +175,7 @@ function selectOffBoard() {
}
function select(data) {
console.log('select', data);
const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
const isSelected = counter?.classList.contains(soldier.getSelectedClass());
@ -204,6 +205,8 @@ export function start(el) {
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
getCells(svg).forEach(cell => {
if (cell.dataset.x === '0' && cell.parentElement.dataset.y === '0') console.log('cell', cell);
cell.addEventListener('click', e => {
const occupant = getCellOccupant(cell);
let toPlace = placing.pop();
@ -300,6 +303,11 @@ export function start(el) {
console.log('gameboard.js loaded');
}
export function stop() {
Observable.unsubscribe('select', select);
Observable.unsubscribe('endmove', endMove);
}
export function getUnits() {
return soldier.getAllCounters(svg);
}

5
src/modules/record_sheet.js
View File

@ -195,3 +195,8 @@ export function start(startLoc, units) {
Observable.subscribe('select', select);
Observable.subscribe('endmove', endMove);
}
export function stop() {
Observable.unsubscribe('select', select);
Observable.unsubscribe('endmove', endMove);
}

5
test/integration/helpers.cjs
View File

@ -9,3 +9,8 @@ global.takeScreenshot = async (driver) => {
await mkdir(dir, { recursive: true });
await writeFile(`${dir}/${fileName.replaceAll('/', '-')}`, image, 'base64');
};
global.url = (relativeOrAbsolute) => {
const location = new URL(relativeOrAbsolute, global.testServerUrl);
return location.href;
}

8
test/integration/page.test.js
View File

@ -1,7 +1,6 @@
const { Builder } = require('selenium-webdriver'),
chrome = require('selenium-webdriver/chrome.js'),
chromeOptions = new chrome.Options(),
{ expect, it } = require('@jest/globals');
chromeOptions = new chrome.Options();
chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
chromeOptions.enableBidi();
@ -9,11 +8,12 @@ chromeOptions.enableBidi();
let driver;
beforeEach(async () => {
driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
const builder = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions);
driver = builder.build();
});
it('loads the page', async () => {
await driver.get('http://localhost:3005');
await driver.get(url('/'));
expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
});

127
test/integration/select.test.js
View File

@ -1,44 +1,49 @@
const { Builder, By, until } = require('selenium-webdriver'),
chrome = require('selenium-webdriver/chrome.js'),
chromeOptions = new chrome.Options(),
{ expect, it } = require('@jest/globals'),
{ readFile } = require('node:fs/promises'),
{ readFile, readdir } = require('node:fs/promises'),
{ HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor');
chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
chromeOptions.enableBidi();
let driver;
const buildPath = 'build/assets/images';
const defaultScenario = 'scenario-side_show';
const fixtureFilePath = './test/integration/fixtures/scenario-test.svg';
const selected = expect.stringContaining('selected');
const notSelected = expect.not.stringContaining('selected');
let driver, httpResponse;
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');
});
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 connection = await driver.createCDPConnection('page')
const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
const httpResponse = new HttpResponse(url);
httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
httpResponse.addHeaders('Content-Type', 'image/svg+xml');
await driver.onIntercept(connection, httpResponse, async () => {});
await driver.get('http://localhost:3005');
await driver.wait(until.elementLocated(By.css('#dice')), 1000);
const record = await driver.findElement(By.css('.soldier-record'));
const notSelected = expect.not.stringContaining('selected');
const objectEl = await driver.findElement(By.css('object'));
const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
expect(await record.getAttribute('class')).toEqual(notSelected);
const objectEl = await driver.findElement(By.css('object'));
await driver.switchTo().frame(objectEl);
const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
svg = await driver.findElement(By.css('svg')),
counter = await driver.findElement(By.css(selector), svg),
selected = expect.stringContaining('selected');
const svg = await driver.findElement(By.css('svg'));
const counter = await driver.findElement(By.css(selector), svg);
expect(await counter.getAttribute('class')).toEqual(notSelected);
await counter.click();
expect(await counter.getAttribute('class')).toEqual(selected);
@ -54,37 +59,20 @@ it('selects and deselects a trooper by clicking on its counter', async () => {
});
it('selects and deselects trooper by clicking on its record', async () => {
const connection = await driver.createCDPConnection('page')
const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
const httpResponse = new HttpResponse(url);
httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
httpResponse.addHeaders('Content-Type', 'image/svg+xml');
await driver.onIntercept(connection, httpResponse, async () => {});
await driver.get('http://localhost:3005');
await driver.wait(until.elementLocated(By.css('#dice')), 1000);
const record = await driver.findElement(By.css('.soldier-record'));
const notSelected = expect.not.stringContaining('selected');
const objectEl = await driver.findElement(By.css('object'));
const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
expect(await record.getAttribute('class')).toEqual(notSelected);
const objectEl = await driver.findElement(By.css('object'));
await driver.switchTo().frame(objectEl);
const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
svg = await driver.findElement(By.css('svg')),
counter = await driver.findElement(By.css(selector), svg);
const svg = await driver.findElement(By.css('svg'));
const counter = await driver.findElement(By.css(selector), svg);
expect(await counter.getAttribute('class')).toEqual(notSelected);
await driver.switchTo().defaultContent();
await record.click();
const selected = expect.stringContaining('selected');
expect(await record.getAttribute('class')).toEqual(selected);
await driver.switchTo().frame(objectEl);
expect(await counter.getAttribute('class')).toEqual(selected);
@ -92,36 +80,21 @@ it('selects and deselects trooper by clicking on its record', async () => {
await record.click();
expect(await record.getAttribute('class')).toEqual(notSelected);
await driver.switchTo().frame(objectEl);
expect(await counter.getAttribute('class')).toEqual(notSelected);
});
it('selects a trooper by clicking on its counter and deselects it by clicking on its record', async () => {
const connection = await driver.createCDPConnection('page')
const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
const httpResponse = new HttpResponse(url);
httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
httpResponse.addHeaders('Content-Type', 'image/svg+xml');
await driver.onIntercept(connection, httpResponse, async () => {});
await driver.get('http://localhost:3005');
await driver.wait(until.elementLocated(By.css('#dice')), 1000);
const record = await driver.findElement(By.css('.soldier-record'));
const notSelected = expect.not.stringContaining('selected');
const objectEl = await driver.findElement(By.css('object'));
const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
expect(await record.getAttribute('class')).toEqual(notSelected);
const objectEl = await driver.findElement(By.css('object'));
await driver.switchTo().frame(objectEl);
const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
svg = await driver.findElement(By.css('svg')),
counter = await driver.findElement(By.css(selector), svg),
selected = expect.stringContaining('selected');
const svg = await driver.findElement(By.css('svg'));
const counter = await driver.findElement(By.css(selector), svg);
expect(await counter.getAttribute('class')).toEqual(notSelected);
await counter.click();
expect(await counter.getAttribute('class')).toEqual(selected);
@ -131,43 +104,25 @@ it('selects a trooper by clicking on its counter and deselects it by clicking on
await record.click();
expect(await record.getAttribute('class')).toEqual(notSelected);
await driver.switchTo().frame(objectEl);
expect(await counter.getAttribute('class')).toEqual(notSelected);
});
it('selects a trooper by clicking on its record and deselects it by clicking on its counter', async () => {
const connection = await driver.createCDPConnection('page')
const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
const httpResponse = new HttpResponse(url);
httpResponse.body = await readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
httpResponse.addHeaders('Content-Type', 'image/svg+xml');
await driver.onIntercept(connection, httpResponse, async () => {});
await driver.get('http://localhost:3005');
await driver.wait(until.elementLocated(By.css('#dice')), 1000);
const record = await driver.findElement(By.css('.soldier-record'));
const notSelected = expect.not.stringContaining('selected');
const objectEl = await driver.findElement(By.css('object'));
const selector = '.counter[data-allegiance="attacker"][data-number="1"]';
expect(await record.getAttribute('class')).toEqual(notSelected);
const objectEl = await driver.findElement(By.css('object'));
await driver.switchTo().frame(objectEl);
const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
svg = await driver.findElement(By.css('svg')),
counter = await driver.findElement(By.css(selector), svg);
const svg = await driver.findElement(By.css('svg'));
const counter = await driver.findElement(By.css(selector), svg);
expect(await counter.getAttribute('class')).toEqual(notSelected);
await driver.switchTo().defaultContent();
await record.click();
const selected = expect.stringContaining('selected');
expect(await record.getAttribute('class')).toEqual(selected);
await driver.switchTo().frame(objectEl);
expect(await counter.getAttribute('class')).toEqual(selected);

4
test/integration/setup.cjs
View File

@ -1,7 +1,7 @@
console.log('\nSpawning server process...');
const { spawn } = require('child_process');
module.exports = async function () {
module.exports = async function (globalConfig, projectConfig) {
const child = spawn('node', ['server.cjs']);
child.stdout.on('data', (data) => {
@ -13,7 +13,7 @@ module.exports = async function () {
child.stderr.on('data', (data) => {
const str = data.toString();
console.log('[server]', str);
if (str.includes('localhost:3005')) {
if (str.includes(projectConfig.globals.testServerUrl)) {
setTimeout(resolve, 200);
}
});