diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-16 00:08:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-16 00:08:21 +0300 |
commit | 95ab36cd97f9f527ad624f80c6830eca28eeb7bf (patch) | |
tree | e9691cf3f4786201040268327a967b63b74ff0c0 /spec/frontend_integration | |
parent | 31a340adabe75f8b02cca462ab8aa857ff62f772 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend_integration')
-rw-r--r-- | spec/frontend_integration/.eslintrc.yml | 6 | ||||
-rw-r--r-- | spec/frontend_integration/README.md | 17 | ||||
-rw-r--r-- | spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap | 136 | ||||
-rw-r--r-- | spec/frontend_integration/ide/ide_integration_spec.js | 100 |
4 files changed, 259 insertions, 0 deletions
diff --git a/spec/frontend_integration/.eslintrc.yml b/spec/frontend_integration/.eslintrc.yml new file mode 100644 index 00000000000..26b6f935ffb --- /dev/null +++ b/spec/frontend_integration/.eslintrc.yml @@ -0,0 +1,6 @@ +--- +extends: ../frontend/.eslintrc.yml +settings: + import/resolver: + jest: + jestConfigFile: 'jest.config.integration.js' diff --git a/spec/frontend_integration/README.md b/spec/frontend_integration/README.md new file mode 100644 index 00000000000..573a385d81e --- /dev/null +++ b/spec/frontend_integration/README.md @@ -0,0 +1,17 @@ +## Frontend Integration Specs + +This directory contains Frontend integration specs. Go to `spec/frontend` if you're looking for Frontend unit tests. + +Frontend integration specs: + +- Mock out the Backend. +- Don't test individual components, but instead test use cases. +- Are expected to run slower than unit tests. +- Could end up having their own environment. + +As a result, they deserve their own special place. + +## References + +- https://docs.gitlab.com/ee/development/testing_guide/testing_levels.html#frontend-integration-tests +- https://gitlab.com/gitlab-org/gitlab/-/issues/208800 diff --git a/spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap b/spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap new file mode 100644 index 00000000000..a76f7960d03 --- /dev/null +++ b/spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap @@ -0,0 +1,136 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WebIDE runs 1`] = ` +<div> + <article + class="ide position-relative d-flex flex-column align-items-stretch" + > + <div + class="ide-view flex-grow d-flex" + > + <div + class="file-finder-overlay" + style="display: none;" + > + (jest: contents hidden) + </div> + <div + class="multi-file-commit-panel flex-column" + style="width: 340px;" + > + <div + class="multi-file-commit-panel-inner" + > + <div + class="multi-file-loading-container" + > + <div + class="animation-container" + > + <div + class="skeleton-line-1" + /> + <div + class="skeleton-line-2" + /> + <div + class="skeleton-line-3" + /> + </div> + </div> + <div + class="multi-file-loading-container" + > + <div + class="animation-container" + > + <div + class="skeleton-line-1" + /> + <div + class="skeleton-line-2" + /> + <div + class="skeleton-line-3" + /> + </div> + </div> + <div + class="multi-file-loading-container" + > + <div + class="animation-container" + > + <div + class="skeleton-line-1" + /> + <div + class="skeleton-line-2" + /> + <div + class="skeleton-line-3" + /> + </div> + </div> + </div> + <div + class="position-absolute position-top-0 position-bottom-0 drag-handle position-right-0" + size="340" + style="cursor: ew-resize;" + /> + </div> + <div + class="multi-file-edit-pane" + > + <div + class="ide-empty-state" + > + <div + class="row js-empty-state" + > + <div + class="col-12" + > + <div + class="svg-content svg-250" + > + <img + src="/test/empty_state.svg" + /> + </div> + </div> + <div + class="col-12" + > + <div + class="text-content text-center" + > + <h4> + Make and review changes in the browser with the Web IDE + </h4> + <div + class="gl-spinner-container" + > + <span + aria-hidden="true" + aria-label="Loading" + class="align-text-bottom gl-spinner gl-spinner-orange gl-spinner-md" + /> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <footer + class="ide-status-bar" + > + <div + class="ide-status-list d-flex ml-auto" + > + </div> + </footer> + </article> +</div> +`; 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(); + }); + }); +}); |