diff --git a/e2e/helper/addInitFileInputObject.js b/e2e/helper/addInitFileInputObject.js new file mode 100644 index 0000000000..257492be74 --- /dev/null +++ b/e2e/helper/addInitFileInputObject.js @@ -0,0 +1,76 @@ +class DomainObjectViewProvider { + constructor(openmct) { + this.key = 'doViewProvider'; + this.name = 'Domain Object View Provider'; + this.openmct = openmct; + } + + canView(domainObject) { + return domainObject.type === 'imageFileInput' + || domainObject.type === 'jsonFileInput'; + } + + view(domainObject, objectPath) { + let content; + + return { + show: function (element) { + const body = domainObject.selectFile.body; + const type = typeof body; + + content = document.createElement('div'); + content.id = 'file-input-type'; + content.textContent = JSON.stringify(type); + element.appendChild(content); + }, + destroy: function (element) { + element.removeChild(content); + content = undefined; + } + }; + } +} + +document.addEventListener('DOMContentLoaded', () => { + const openmct = window.openmct; + + openmct.types.addType('jsonFileInput', { + key: 'jsonFileInput', + name: "JSON File Input Object", + creatable: true, + form: [ + { + name: 'Upload File', + key: 'selectFile', + control: 'file-input', + required: true, + text: 'Select File...', + type: 'application/json', + property: [ + "selectFile" + ] + } + ] + }); + + openmct.types.addType('imageFileInput', { + key: 'imageFileInput', + name: "Image File Input Object", + creatable: true, + form: [ + { + name: 'Upload File', + key: 'selectFile', + control: 'file-input', + required: true, + text: 'Select File...', + type: 'image/*', + property: [ + "selectFile" + ] + } + ] + }); + + openmct.objectViews.addProvider(new DomainObjectViewProvider(openmct)); +}); diff --git a/e2e/test-data/rick.jpg b/e2e/test-data/rick.jpg new file mode 100644 index 0000000000..98340f6304 Binary files /dev/null and b/e2e/test-data/rick.jpg differ diff --git a/e2e/tests/functional/forms.e2e.spec.js b/e2e/tests/functional/forms.e2e.spec.js index 3e37e5c015..5e0b5a1c7c 100644 --- a/e2e/tests/functional/forms.e2e.spec.js +++ b/e2e/tests/functional/forms.e2e.spec.js @@ -30,6 +30,8 @@ const genUuid = require('uuid').v4; const path = require('path'); const TEST_FOLDER = 'test folder'; +const jsonFilePath = 'e2e/test-data/ExampleLayouts.json'; +const imageFilePath = 'e2e/test-data/rick.jpg'; test.describe('Form Validation Behavior', () => { test('Required Field indicators appear if title is empty and can be corrected', async ({ page }) => { @@ -68,6 +70,41 @@ test.describe('Form Validation Behavior', () => { }); }); +test.describe('Form File Input Behavior', () => { + test.beforeEach(async ({ page }) => { + // eslint-disable-next-line no-undef + await page.addInitScript({ path: path.join(__dirname, '../../helper', 'addInitFileInputObject.js') }); + }); + + test('Can select a JSON file type', async ({ page }) => { + await page.goto('./', { waitUntil: 'networkidle' }); + + await page.getByRole('button', { name: ' Create ' }).click(); + await page.getByRole('menuitem', { name: 'JSON File Input Object' }).click(); + + await page.setInputFiles('#fileElem', jsonFilePath); + + await page.getByRole('button', { name: 'Save' }).click(); + + const type = await page.locator('#file-input-type').textContent(); + await expect(type).toBe(`"string"`); + }); + + test('Can select an image file type', async ({ page }) => { + await page.goto('./', { waitUntil: 'networkidle' }); + + await page.getByRole('button', { name: ' Create ' }).click(); + await page.getByRole('menuitem', { name: 'Image File Input Object' }).click(); + + await page.setInputFiles('#fileElem', imageFilePath); + + await page.getByRole('button', { name: 'Save' }).click(); + + const type = await page.locator('#file-input-type').textContent(); + await expect(type).toBe(`"object"`); + }); +}); + test.describe('Persistence operations @addInit', () => { // add non persistable root item test.beforeEach(async ({ page }) => { diff --git a/src/api/forms/components/controls/FileInput.vue b/src/api/forms/components/controls/FileInput.vue index ef9a6a3b86..90dfe75c2d 100644 --- a/src/api/forms/components/controls/FileInput.vue +++ b/src/api/forms/components/controls/FileInput.vue @@ -30,7 +30,7 @@ id="fileElem" ref="fileInput" type="file" - accept=".json" + :accept="acceptableFileTypes" style="display:none" >