diff options
Diffstat (limited to 'spec/frontend_integration/ide/ide_integration_spec.js')
-rw-r--r-- | spec/frontend_integration/ide/ide_integration_spec.js | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/spec/frontend_integration/ide/ide_integration_spec.js b/spec/frontend_integration/ide/ide_integration_spec.js new file mode 100644 index 00000000000..7e8fb3a32ee --- /dev/null +++ b/spec/frontend_integration/ide/ide_integration_spec.js @@ -0,0 +1,100 @@ +/** + * WARNING: WIP + * + * Please do not copy from this spec or use it as an example for anything. + * + * This is in place to iteratively set up the frontend integration testing environment + * and will be improved upon in a later iteration. + * + * See https://gitlab.com/gitlab-org/gitlab/-/issues/208800 for more information. + */ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import { initIde } from '~/ide'; + +jest.mock('~/api', () => { + return { + project: jest.fn().mockImplementation(() => new Promise(() => {})), + }; +}); + +jest.mock('~/ide/services/gql', () => { + return { + query: jest.fn().mockImplementation(() => new Promise(() => {})), + }; +}); + +describe('WebIDE', () => { + let vm; + let root; + let mock; + let initData; + let location; + + beforeEach(() => { + root = document.createElement('div'); + initData = { + emptyStateSvgPath: '/test/empty_state.svg', + noChangesStateSvgPath: '/test/no_changes_state.svg', + committedStateSvgPath: '/test/committed_state.svg', + pipelinesEmptyStateSvgPath: '/test/pipelines_empty_state.svg', + promotionSvgPath: '/test/promotion.svg', + ciHelpPagePath: '/test/ci_help_page', + webIDEHelpPagePath: '/test/web_ide_help_page', + clientsidePreviewEnabled: 'true', + renderWhitespaceInCode: 'false', + codesandboxBundlerUrl: 'test/codesandbox_bundler', + }; + + mock = new MockAdapter(axios); + mock.onAny('*').reply(() => new Promise(() => {})); + + location = { pathname: '/-/ide/project/gitlab-test/test', search: '', hash: '' }; + Object.defineProperty(window, 'location', { + get() { + return location; + }, + }); + }); + + afterEach(() => { + vm.$destroy(); + vm = null; + + mock.restore(); + }); + + const createComponent = () => { + const el = document.createElement('div'); + Object.assign(el.dataset, initData); + root.appendChild(el); + vm = initIde(el); + }; + + expect.addSnapshotSerializer({ + test(value) { + return value instanceof HTMLElement && !value.$_hit; + }, + print(element, serialize) { + element.$_hit = true; + element.querySelectorAll('[style]').forEach(el => { + el.$_hit = true; + if (el.style.display === 'none') { + el.textContent = '(jest: contents hidden)'; + } + }); + + return serialize(element) + .replace(/^\s*<!---->$/gm, '') + .replace(/\n\s*\n/gm, '\n'); + }, + }); + + it('runs', () => { + createComponent(); + + return vm.$nextTick().then(() => { + expect(root).toMatchSnapshot(); + }); + }); +}); |