ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-18 20:57:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Attempt to run testing-library/vue to layoutspec.js

Browse Source
This commit is contained in:
John Hill 2023-08-09 13:55:44 -07:00
parent 9be9c5e28e
commit c1b36b6bbd
2 changed files with 55 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -9,6 +9,8 @@
"@percy/cli": "1.26.0",
"@percy/playwright": "1.0.4",
"@playwright/test": "1.36.2",
"@testing-library/jasmine-dom": "^1.3.3",
"@testing-library/vue": "^7.0.0",
"@types/eventemitter3": "1.2.0",
"@types/jasmine": "4.3.4",
"@types/lodash": "4.14.192",
@ -70,8 +72,8 @@
"uuid": "9.0.0",
"vue": "^3.1.0",
"vue-eslint-parser": "9.3.1",
"webpack": "5.88.0",
"vue-loader": "^16.0.0",
"webpack": "5.88.0",
"webpack-cli": "5.1.1",
"webpack-dev-server": "4.15.1",
"webpack-merge": "5.9.0"

118
src/ui/layout/LayoutSpec.js
View File

@ -21,13 +21,13 @@
*****************************************************************************/
import { createOpenMct, resetApplicationState } from 'utils/testing';
import Vue from 'vue';
import { render } from '@testing-library/vue';
import Layout from './Layout.vue';
import Vue from 'vue';
xdescribe('Open MCT Layout:', () => {
fdescribe('Open MCT Layout:', () => {
let openmct;
let element;
let components;
let container;
beforeEach((done) => {
openmct = createOpenMct();
@ -44,13 +44,59 @@ xdescribe('Open MCT Layout:', () => {
});
describe('the pane:', () => {
const components = {
tree: {
param: 'hideTree',
pane: '.l-shell__pane-tree',
collapseButton: '.l-shell__pane-tree .l-pane__collapse-button',
expandButton: '.l-shell__pane-tree .l-pane__expand-button'
},
inspector: {
param: 'hideInspector',
pane: '.l-shell__pane-inspector',
collapseButton: '.l-shell__pane-inspector .l-pane__collapse-button',
expandButton: '.l-shell__pane-inspector .l-pane__expand-button'
}
};
// eslint-disable-next-line require-await
async function createLayout() {
const result = render(Layout, {
provide: {
openmct
}
});
container = result.container;
}
function isCollapsed(selector) {
return container.querySelector(selector).classList.contains('l-pane--collapsed');
}
function setHideParams() {
Object.entries(components).forEach(([name, component]) => {
openmct.router.setSearchParam(component.param, true);
});
}
function toggleCollapseButtons() {
Object.entries(components).forEach(([name, component]) => {
container.querySelector(component.collapseButton).click();
});
}
function toggleExpandButtons() {
Object.entries(components).forEach(([name, component]) => {
container.querySelector(component.expandButton).click();
});
}
it('is displayed on layout load', async () => {
await createLayout();
await Vue.nextTick();
Object.entries(components).forEach(([name, component]) => {
expect(component.pane).toBeTruthy();
expect(container.querySelector(component.pane)).toBeTruthy();
expect(isCollapsed(component.pane)).toBeFalse();
});
});
@ -73,7 +119,6 @@ xdescribe('Open MCT Layout:', () => {
Object.entries(components).forEach(([name, component]) => {
expect(openmct.router.getSearchParam(component.param)).toEqual('true');
expect(isCollapsed(component.pane)).toBeTrue();
});
});
@ -87,67 +132,8 @@ xdescribe('Open MCT Layout:', () => {
Object.entries(components).forEach(([name, component]) => {
expect(openmct.router.getSearchParam(component.param)).not.toEqual('true');
expect(isCollapsed(component.pane)).toBeFalse();
});
});
});
async function createLayout() {
const el = document.createElement('div');
const child = document.createElement('div');
el.appendChild(child);
element = await new Vue({
el,
components: {
Layout
},
provide: {
openmct
},
template: `<Layout ref="layout"/>`
}).$mount().$el;
setComponents();
}
function setComponents() {
components = {
tree: {
param: 'hideTree',
pane: element.querySelector('.l-shell__pane-tree'),
collapseButton: element.querySelector('.l-shell__pane-tree .l-pane__collapse-button'),
expandButton: element.querySelector('.l-shell__pane-tree .l-pane__expand-button')
},
inspector: {
param: 'hideInspector',
pane: element.querySelector('.l-shell__pane-inspector'),
collapseButton: element.querySelector('.l-shell__pane-inspector .l-pane__collapse-button'),
expandButton: element.querySelector('.l-shell__pane-inspector .l-pane__expand-button')
}
};
}
function isCollapsed(el) {
return el.classList.contains('l-pane--collapsed');
}
function setHideParams() {
Object.entries(components).forEach(([name, component]) => {
openmct.router.setSearchParam(component.param, true);
});
}
function toggleCollapseButtons() {
Object.entries(components).forEach(([name, component]) => {
component.collapseButton.click();
});
}
function toggleExpandButtons() {
Object.entries(components).forEach(([name, component]) => {
component.expandButton.click();
});
}
});