mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-19 22:37:31 -07:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

test(editor): Unit test Version control frontend components (#6408)

Browse source 
* test(editor): test n8n-select design system component

* test(editor): test version control settings happy path

* test(editor): test version control settings disconnect
This commit is contained in:
Csaba Tuncsik 2023-06-12 15:44:47 +02:00 committed by GitHub
parent 14fba6421e
commit df62e7e8b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 277 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/design-system/package.json
View file

@ -49,6 +49,7 @@
"@storybook/vue": "^7.0.7",
"@storybook/vue-webpack5": "^7.0.7",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/user-event": "^14.4.3",
"@testing-library/vue": "^5.8.3",
"@types/markdown-it": "^12.2.3",
"@types/markdown-it-emoji": "^2.0.2",

37
packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts
View file

@ -1,4 +1,6 @@
import { render } from '@testing-library/vue';
import { defineComponent, ref } from 'vue';
import { render, waitFor, within } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import N8nSelect from '../Select.vue';
import N8nOption from '../../N8nOption/Option.vue';
@ -19,5 +21,38 @@ describe('components', () => {
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should select an option', async () => {
const n8nSelectTestComponent = defineComponent({
components: {
N8nSelect,
N8nOption,
},
template: `
<n8n-select v-model="selected">
<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
</n8n-select>
`,
setup() {
const options = ref(['1', '2', '3']);
const selected = ref('');
return {
options,
selected,
};
},
});
const { container, getByRole } = render(n8nSelectTestComponent);
const getOption = (value: string) => within(container as HTMLElement).getByText(value);
const textbox = getByRole('textbox');
await userEvent.click(textbox);
await waitFor(() => expect(getOption('1')).toBeVisible());
await userEvent.click(getOption('1'));
expect(textbox).toHaveValue('1');
});
});
});

2
packages/editor-ui/src/__tests__/server/endpoints/index.ts
View file

@ -5,6 +5,7 @@ import { routesForCredentialTypes } from './credentialType';
import { routesForVariables } from './variable';
import { routesForSettings } from './settings';
import { routesForSSO } from './sso';
import { routesForVersionControl } from './versionControl';
const endpoints: Array<(server: Server) => void> = [
routesForCredentials,
@ -13,6 +14,7 @@ const endpoints: Array<(server: Server) => void> = [
routesForVariables,
routesForSettings,
routesForSSO,
routesForVersionControl,
];
export { endpoints };

77
packages/editor-ui/src/__tests__/server/endpoints/versionControl.ts Normal file
View file

@ -0,0 +1,77 @@
import type { Server, Request } from 'miragejs';
import { Response } from 'miragejs';
import { jsonParse } from 'n8n-workflow';
import type { AppSchema } from '@/__tests__/server/types';
import type { VersionControlPreferences } from '@/Interface';
export function routesForVersionControl(server: Server) {
const versionControlApiRoot = '/rest/version-control';
const defaultVersionControlPreferences: VersionControlPreferences = {
branchName: '',
branches: [],
authorName: '',
authorEmail: '',
repositoryUrl: '',
branchReadOnly: false,
branchColor: '#1d6acb',
connected: false,
publicKey: 'ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIHEX+25m',
};
server.post(`${versionControlApiRoot}/preferences`, (schema: AppSchema, request: Request) => {
const requestBody = jsonParse(request.requestBody) as Partial<VersionControlPreferences>;
return new Response(
200,
{},
{
data: {
...defaultVersionControlPreferences,
...requestBody,
},
},
);
});
server.patch(`${versionControlApiRoot}/preferences`, (schema: AppSchema, request: Request) => {
const requestBody = jsonParse(request.requestBody) as Partial<VersionControlPreferences>;
return new Response(
200,
{},
{
data: {
...defaultVersionControlPreferences,
...requestBody,
},
},
);
});
server.get(`${versionControlApiRoot}/get-branches`, () => {
return new Response(
200,
{},
{
data: {
branches: ['main', 'dev'],
currentBranch: 'main',
},
},
);
});
server.post(`${versionControlApiRoot}/disconnect`, () => {
return new Response(
200,
{},
{
data: {
...defaultVersionControlPreferences,
branchName: '',
connected: false,
},
},
);
});
}

6
packages/editor-ui/src/__tests__/server/index.ts
View file

@ -23,14 +23,14 @@ export function setupServer() {
// Enable logging
server.logging = false;
// Handle undefined endpoints
server.post('/rest/:any', async () => new Promise(() => {}));
// Handle defined endpoints
for (const endpointsFn of endpoints) {
endpointsFn(server);
}
// Handle undefined endpoints
server.post('/rest/:any', async () => ({}));
// Reset for everything else
server.namespace = '';
server.passthrough();

7
packages/editor-ui/src/views/SettingsVersionControl.vue
View file

@ -219,6 +219,7 @@ const refreshBranches = async () => {
@click="onDisconnect"
size="large"
icon="trash"
data-test-id="version-control-disconnect-button"
>{{ locale.baseText('settings.versionControl.button.disconnect') }}</n8n-button
>
</div>
@ -291,9 +292,10 @@ const refreshBranches = async () => {
size="large"
:disabled="!validForConnection"
:class="$style.connect"
data-test-id="version-control-connect-button"
>{{ locale.baseText('settings.versionControl.button.connect') }}</n8n-button
>
<div v-if="isConnected">
<div v-if="isConnected" data-test-id="version-control-connected-content">
<div :class="$style.group">
<hr />
<n8n-heading size="xlarge" tag="h2" class="mb-s">{{
@ -307,6 +309,7 @@ const refreshBranches = async () => {
size="medium"
filterable
@input="onSelect"
data-test-id="version-control-branch-select"
>
<n8n-option
v-for="b in versionControlStore.preferences.branches"
@ -328,6 +331,7 @@ const refreshBranches = async () => {
square
:class="$style.refreshBranches"
@click="refreshBranches"
data-test-id="version-control-refresh-branches-button"
/>
</n8n-tooltip>
</div>
@ -358,6 +362,7 @@ const refreshBranches = async () => {
@click="onSave"
size="large"
:disabled="!versionControlStore.preferences.branchName"
data-test-id="version-control-save-settings-button"
>{{ locale.baseText('settings.versionControl.button.save') }}</n8n-button
>
</div>

119
packages/editor-ui/src/views/__tests__/SettingsVersionControl.test.ts
View file

@ -1,14 +1,16 @@
import { PiniaVuePlugin } from 'pinia';
import { render } from '@testing-library/vue';
import { createTestingPinia } from '@pinia/testing';
import { vi } from 'vitest';
import { screen, render, waitFor, within } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { createPinia, setActivePinia, PiniaVuePlugin } from 'pinia';
import { merge } from 'lodash-es';
import { STORES } from '@/constants';
import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
import { i18n } from '@/plugins/i18n';
import { setupServer } from '@/__tests__/server';
import { i18nInstance } from '@/plugins/i18n';
import { useSettingsStore, useVersionControlStore } from '@/stores';
import SettingsVersionControl from '@/views/SettingsVersionControl.vue';
import { useVersionControlStore } from '@/stores/versionControl.store';
let pinia: ReturnType<typeof createTestingPinia>;
let pinia: ReturnType<typeof createPinia>;
let server: ReturnType<typeof setupServer>;
let settingsStore: ReturnType<typeof useSettingsStore>;
let versionControlStore: ReturnType<typeof useVersionControlStore>;
const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
@ -17,7 +19,7 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
merge(
{
pinia,
i18n,
i18n: i18nInstance,
},
renderOptions,
),
@ -27,22 +29,28 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
);
describe('SettingsVersionControl', () => {
beforeAll(() => {
server = setupServer();
});
beforeEach(() => {
pinia = createTestingPinia({
initialState: {
[STORES.SETTINGS]: {
settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
},
},
});
versionControlStore = useVersionControlStore(pinia);
pinia = createPinia();
setActivePinia(pinia);
settingsStore = useSettingsStore();
versionControlStore = useVersionControlStore();
});
afterEach(() => {
vi.clearAllMocks();
});
afterAll(() => {
server.shutdown();
});
it('should render paywall state when there is no license', () => {
vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(false);
const { getByTestId, queryByTestId } = renderComponent();
expect(queryByTestId('version-control-content-licensed')).not.toBeInTheDocument();
@ -50,11 +58,86 @@ describe('SettingsVersionControl', () => {
});
it('should render licensed content', () => {
vi.spyOn(versionControlStore, 'isEnterpriseVersionControlEnabled', 'get').mockReturnValue(true);
vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
const { getByTestId, queryByTestId } = renderComponent();
expect(getByTestId('version-control-content-licensed')).toBeInTheDocument();
expect(queryByTestId('version-control-content-unlicensed')).not.toBeInTheDocument();
expect(queryByTestId('version-control-connected-content')).not.toBeInTheDocument();
});
it('should render user flow happy path', async () => {
vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
const updatePreferencesSpy = vi.spyOn(versionControlStore, 'updatePreferences');
const { container, getByTestId, queryByTestId, getByRole } = renderComponent();
const connectButton = getByTestId('version-control-connect-button');
expect(connectButton).toBeDisabled();
const repoUrlInput = container.querySelector('input[name="repoUrl"]')!;
const authorName = container.querySelector('input[name="authorName"]')!;
const authorEmail = container.querySelector('input[name="authorEmail"]')!;
await userEvent.click(repoUrlInput);
await userEvent.type(repoUrlInput, 'git@github');
await userEvent.tab();
expect(connectButton).toBeDisabled();
await userEvent.click(repoUrlInput);
await userEvent.type(repoUrlInput, '.com:john/n8n-data.git');
await userEvent.tab();
expect(connectButton).toBeDisabled();
await userEvent.click(authorName);
await userEvent.type(authorName, 'John Doe');
await userEvent.tab();
expect(connectButton).toBeDisabled();
await userEvent.click(authorEmail);
await userEvent.type(authorEmail, 'john@example.');
await userEvent.tab();
expect(connectButton).toBeDisabled();
await userEvent.click(authorEmail);
await userEvent.type(authorEmail, 'com');
await userEvent.tab();
expect(connectButton).toBeEnabled();
expect(queryByTestId('version-control-save-settings-button')).not.toBeInTheDocument();
await userEvent.click(connectButton);
await waitFor(() => expect(getByTestId('version-control-connected-content')).toBeVisible());
const saveSettingsButton = getByTestId('version-control-save-settings-button');
expect(saveSettingsButton).toBeInTheDocument();
expect(saveSettingsButton).toBeDisabled();
const branchSelect = getByTestId('version-control-branch-select');
await userEvent.click(within(branchSelect).getByRole('textbox'));
await waitFor(() => expect(within(branchSelect).getByText('main')).toBeVisible());
await userEvent.click(within(branchSelect).getByText('main'));
await waitFor(() => expect(saveSettingsButton).toBeEnabled());
await userEvent.click(saveSettingsButton);
expect(updatePreferencesSpy).toHaveBeenCalledWith({
branchName: 'main',
branchReadOnly: false,
branchColor: '#1d6acb',
});
await waitFor(() => expect(screen.getByText('Settings successfully saved')).toBeVisible());
await userEvent.click(getByTestId('version-control-disconnect-button'));
const disconnectDialog = getByRole('dialog');
await waitFor(() => expect(disconnectDialog).toBeVisible());
await userEvent.click(within(disconnectDialog).getAllByRole('button')[1]);
await waitFor(() => expect(disconnectDialog).not.toBeVisible());
await waitFor(() =>
expect(queryByTestId('version-control-connected-content')).not.toBeInTheDocument(),
);
});
});

58
pnpm-lock.yaml
View file

@ -142,7 +142,7 @@ importers:
dependencies:
axios:
specifier: ^0.21.1
version: 0.21.4(debug@4.3.2)
version: 0.21.4
packages/@n8n_io/eslint-config:
devDependencies:
@ -223,7 +223,7 @@ importers:
version: 7.28.1
axios:
specifier: ^0.21.1
version: 0.21.4(debug@4.3.2)
version: 0.21.4
basic-auth:
specifier: ^2.0.1
version: 2.0.1
@ -656,7 +656,7 @@ importers:
version: link:../@n8n/client-oauth2
axios:
specifier: ^0.21.1
version: 0.21.4(debug@4.3.2)
version: 0.21.4
concat-stream:
specifier: ^2.0.0
version: 2.0.0
@ -803,6 +803,9 @@ importers:
'@testing-library/jest-dom':
specifier: ^5.16.5
version: 5.16.5
'@testing-library/user-event':
specifier: ^14.4.3
version: 14.4.3(@testing-library/dom@7.31.2)
'@testing-library/vue':
specifier: ^5.8.3
version: 5.8.3(vue-template-compiler@2.7.14)(vue@2.7.14)
@ -904,7 +907,7 @@ importers:
version: 5.13.2
axios:
specifier: ^0.21.1
version: 0.21.4(debug@4.3.2)
version: 0.21.4
codemirror-lang-html-n8n:
specifier: ^1.0.0
version: 1.0.0
@ -5631,6 +5634,38 @@ packages:
dev: false
optional: true
/@oclif/command@1.8.18(@oclif/config@1.18.2):
resolution: {integrity: sha512-qTad+jtiriMMbkw6ArtcUY89cwLwmwDnD4KSGT+OQiZKYtegp3NUCM9JN8lfj/aKC+0kvSitJM4ULzbgiVTKQQ==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@oclif/config': ^1
dependencies:
'@oclif/config': 1.18.2
'@oclif/errors': 1.3.6
'@oclif/help': 1.0.3(supports-color@8.1.1)
'@oclif/parser': 3.8.8
debug: 4.3.4(supports-color@8.1.1)
semver: 7.3.8
transitivePeerDependencies:
- supports-color
dev: true
/@oclif/command@1.8.18(@oclif/config@1.18.5):
resolution: {integrity: sha512-qTad+jtiriMMbkw6ArtcUY89cwLwmwDnD4KSGT+OQiZKYtegp3NUCM9JN8lfj/aKC+0kvSitJM4ULzbgiVTKQQ==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@oclif/config': ^1
dependencies:
'@oclif/config': 1.18.5(supports-color@8.1.1)
'@oclif/errors': 1.3.6
'@oclif/help': 1.0.3(supports-color@8.1.1)
'@oclif/parser': 3.8.8
debug: 4.3.4(supports-color@8.1.1)
semver: 7.3.8
transitivePeerDependencies:
- supports-color
dev: true
/@oclif/command@1.8.18(@oclif/config@1.18.5)(supports-color@8.1.1):
resolution: {integrity: sha512-qTad+jtiriMMbkw6ArtcUY89cwLwmwDnD4KSGT+OQiZKYtegp3NUCM9JN8lfj/aKC+0kvSitJM4ULzbgiVTKQQ==}
engines: {node: '>=12.0.0'}
@ -5712,7 +5747,7 @@ packages:
engines: {node: '>=8.10.0'}
hasBin: true
dependencies:
'@oclif/command': 1.8.18(@oclif/config@1.18.5)(supports-color@8.1.1)
'@oclif/command': 1.8.18(@oclif/config@1.18.5)
'@oclif/config': 1.18.5(supports-color@8.1.1)
'@oclif/errors': 1.3.6
'@oclif/plugin-help': 3.2.18
@ -5782,7 +5817,7 @@ packages:
resolution: {integrity: sha512-5n5Pkz4L0duknIvFwx2Ko9Xda3miT6RZP8bgaaK3Q/9fzVBrhi4bOM0u05/OThI6V+3NsSdxYS2o1NLcXToWDg==}
engines: {node: '>=8.0.0'}
dependencies:
'@oclif/command': 1.8.18(@oclif/config@1.18.5)(supports-color@8.1.1)
'@oclif/command': 1.8.18(@oclif/config@1.18.2)
'@oclif/config': 1.18.2
'@oclif/errors': 1.3.5
'@oclif/help': 1.0.3(supports-color@8.1.1)
@ -5842,7 +5877,7 @@ packages:
dependencies:
'@segment/loosely-validate-event': 2.0.0
auto-changelog: 1.16.4
axios: 0.21.4(debug@4.3.2)
axios: 0.21.4
axios-retry: 3.3.1
bull: 3.29.3
lodash.clonedeep: 4.5.0
@ -9673,6 +9708,14 @@ packages:
is-retry-allowed: 2.2.0
dev: false
/axios@0.21.4:
resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
dependencies:
follow-redirects: 1.15.2(debug@3.2.7)
transitivePeerDependencies:
- debug
dev: false
/axios@0.21.4(debug@4.3.2):
resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
dependencies:
@ -10998,6 +11041,7 @@ packages:
/consolidate@0.15.1(react-dom@18.2.0)(react@17.0.2):
resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==}
engines: {node: '>= 0.10.0'}
deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
peerDependencies:
arc-templates: ^0.5.3
atpl: '>=0.7.6'