2 files changed, 89 insertions, 10 deletions
diff --git a/src/index.js b/src/index.js
index ee9cea9..6b05c03 100644
--- a/src/index.js
+++ b/src/index.js
@@ -280,16 +280,21 @@ document.querySelector('#upload-save').addEventListener('click', () => {
 
 document.querySelector('input[type="file"]').addEventListener('change', e => {
   const [file] =  fileInputEl.files;
+  const reader = new FileReader();
 
-
-  let reader = new FileReader();
   reader.onload = function () {
     const parser = new DOMParser();
     const doc = parser.parseFromString(reader.result, "image/svg+xml");
 
-    buildScenario(doc);
+    mapResourceEl.addEventListener(
+      'transitionend',
+      () => buildScenario(doc),
+      { once: true }
+    );
   };
 
+  mapPlaceholder.style.opacity = 1;
+  mapResourceEl.style.opacity = 0;
   reader.readAsText(file);
 });
 
diff --git a/test/integration/loadScenario.test.js b/test/integration/loadScenario.test.js
index 645c5c2..fa0d735 100644
--- a/test/integration/loadScenario.test.js
+++ b/test/integration/loadScenario.test.js
@@ -1,9 +1,9 @@
-const { Builder } = require('selenium-webdriver'),
+const { Builder, By, until, Select } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
-  chromeOptions = new chrome.Options();
+  chromeOptions = new chrome.Options(),
+  path = require('path');
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
-chromeOptions.enableBidi();
 
 let driver;
 
@@ -12,10 +12,84 @@ beforeEach(async () => {
   driver = builder.build();
 });
 
-it.todo('loads default scenario on initial page load');
-it.todo('loads previously-loaded scenario on page refresh');
-it.todo('loads built-in scenario from dialog');
-it.todo('loads custom scenario directly from file');
+it('loads default scenario on initial page load', async () => {
+  await driver.get(url('/'));
+  await page.waitUntilMapLoaded(driver);
+
+  const mapResource = page.findMapResourceEl(driver);
+  await driver.switchTo().frame(mapResource);
+
+  const defaultScenarioMapsSelector = '[href="#map2"], [href="#map3"]';
+  const maps = await driver.findElements(By.css(defaultScenarioMapsSelector));
+
+  expect(maps.length).toBe(2);
+});
+
+it('loads previously-loaded scenario on page refresh', async () => {
+  await driver.get(url('/'));
+
+  const opts = await driver.findElements(By.css('option'));
+  const scenario = await opts[1].getAttribute('value');
+  await driver.executeScript(`window.localStorage.setItem('map', '${scenario}');`)
+
+  await driver.get(url('/'));
+  await page.waitUntilMapLoaded(driver);
+
+  const mapResource = page.findMapResourceEl(driver);
+  await driver.switchTo().frame(mapResource);
+
+  const scenarioMapsSelector = '[href="#map1"], [href="#map2"], [href="#map3"]';
+  maps = await driver.findElements(By.css(scenarioMapsSelector));
+
+  expect(maps.length).toBe(3);
+});
+
+it('loads built-in scenario from dialog', async () => {
+  await driver.get(url('/'));
+  await page.waitUntilMapLoaded(driver);
+
+  const scenarioButton = await driver.findElement(By.css('#show-dialog'));
+  await scenarioButton.click();
+
+  const scenarioSelect = await driver.findElement(By.css('select'));
+  const select = new Select(scenarioSelect);
+  await select.selectByIndex(1);
+
+  const confirmButton = await driver.findElement(By.css('#confirm-btn'));
+
+  const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder'));
+  await confirmButton.click();
+  await driver.wait(until.elementIsVisible(mapPlaceholderEl), 1000);
+  await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000);
+
+  const mapResource = page.findMapResourceEl(driver);
+  await driver.switchTo().frame(mapResource);
+
+  const scenarioMapsSelector = '[href="#map1"], [href="#map2"], [href="#map3"]';
+  let maps = await driver.findElements(By.css(scenarioMapsSelector));
+
+  expect(maps.length).toBe(3);
+});
+
+it('loads scenario directly from file', async () => {
+  await driver.get(url('/'));
+  const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder'));
+
+  const scenario = path.resolve('./public/assets/images/scenario-dragon_hunting.svg')
+  await driver.findElement(By.css('input[type="file"]')).sendKeys(scenario);
+
+  await driver.wait(until.elementIsVisible(mapPlaceholderEl), 1000);
+  await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000);
+
+  const mapResource = page.findMapResourceEl(driver);
+  await driver.switchTo().frame(mapResource);
+
+  const scenarioMapsSelector = '[href="#map1"], [href="#map2"], [href="#map3"]';
+  let maps = await driver.findElements(By.css(scenarioMapsSelector));
+
+  expect(maps.length).toBe(3);
+});
+
 it.todo('loads saved scenario from file');
 
 afterEach(async () => {