mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests 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
8 changed files with 277 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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(),
);
});
});