mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix ResourceMapper unit tests (#6758)

Browse source 
* ✔️ Fix matching columns test

* ✔️ Fix multiple matching columns test

* ✔️ Removing `skip` from the last test
This commit is contained in:
Milorad FIlipović 2023-07-27 12:43:18 +02:00 committed by GitHub
parent efdab3e14d
commit 6a6fbb6e6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
View file

@ -113,7 +113,12 @@ function onSelectionChange(value: string | string[]) {
} }
function emitValueChanged() { function emitValueChanged() {
emit('matchingColumnsChanged', Array.isArray(state.selected) ? state.selected : [state.selected]); if (state.selected) {
emit(
'matchingColumnsChanged',
Array.isArray(state.selected) ? state.selected : [state.selected],
);
}
} }
defineExpose({ defineExpose({
@ -140,7 +145,12 @@ defineExpose({
:teleported="teleported" :teleported="teleported"
@update:modelValue="onSelectionChange" @update:modelValue="onSelectionChange"
> >
<n8n-option v-for="field in availableMatchingFields" :key="field.id" :value="field.id"> <n8n-option
v-for="field in availableMatchingFields"
:key="field.id"
:value="field.id"
:data-test-id="`matching-column-option-${field.id}`"
>
{{ field.displayName }} {{ field.displayName }}
</n8n-option> </n8n-option>
</n8n-select> </n8n-select>

41
packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts
View file

@ -1,4 +1,3 @@
import { within } from '@testing-library/vue';
import { import {
DEFAULT_SETUP, DEFAULT_SETUP,
MAPPING_COLUMNS_RESPONSE, MAPPING_COLUMNS_RESPONSE,
@ -108,7 +107,7 @@ describe('ResourceMapper.vue', () => {
expect(queryByTestId('mapping-mode-select')).not.toBeInTheDocument(); expect(queryByTestId('mapping-mode-select')).not.toBeInTheDocument();
}); });
it.skip('renders field on top of the list when they are selected for matching', async () => { it('renders field on top of the list when they are selected for matching', async () => {
const { container, getByTestId } = renderComponent( const { container, getByTestId } = renderComponent(
{ {
props: { props: {
@ -129,16 +128,16 @@ describe('ResourceMapper.vue', () => {
expect(getByTestId('resource-mapper-container')).toBeInTheDocument(); expect(getByTestId('resource-mapper-container')).toBeInTheDocument();
// Id should be the first field in the list // Id should be the first field in the list
expect(container.querySelector('.parameter-item')).toContainHTML('id (using to match)'); expect(container.querySelector('.parameter-item')).toContainHTML('id (using to match)');
// // Select Last Name as matching column // Select Last Name as matching column
await userEvent.click(getByTestId('matching-column-select')); await userEvent.click(getByTestId('matching-column-option-Last name'));
const matchingColumnDropdown = getByTestId('matching-column-select'); // Now, last name should be the first field in the list
await userEvent.click(within(matchingColumnDropdown).getByText('Last Name')); expect(container.querySelector('.parameter-item div.title')).toHaveTextContent(
// // Now, last name should be the first field in the list 'Last name (using to match)',
expect(container.querySelector('.parameter-item')).toContainHTML('Last Name (using to match)'); );
}); });
it.skip('renders selected matching columns properly when multiple key matching is enabled', async () => { it('renders selected matching columns properly when multiple key matching is enabled', async () => {
const { getByTestId, getByText, queryByText } = renderComponent( const { getByTestId, getAllByText, queryByText } = renderComponent(
{ {
props: { props: {
parameter: { parameter: {
@ -156,25 +155,19 @@ describe('ResourceMapper.vue', () => {
); );
await waitAllPromises(); await waitAllPromises();
expect(getByTestId('resource-mapper-container')).toBeInTheDocument(); expect(getByTestId('resource-mapper-container')).toBeInTheDocument();
const matchingColumnDropdown = getByTestId('matching-column-select'); await userEvent.click(getByTestId('matching-column-option-Username'));
await userEvent.click(matchingColumnDropdown);
await userEvent.click(within(matchingColumnDropdown).getByText('Username'));
// Both matching columns should be rendered in the dropdown
expect(getByTestId('matching-column-select')).toContainHTML(
'<span class="el-select__tags-text">id</span>',
);
expect(getByTestId('matching-column-select')).toContainHTML(
'<span class="el-select__tags-text">Username</span>',
);
// Both matching columns (id and Username) should be rendered in the dropdown
expect(
getByTestId('matching-column-select').querySelector('.el-select > div'),
).toHaveTextContent('idUsername');
// All selected columns should have correct labels // All selected columns should have correct labels
expect(getByText('id (using to match)')).toBeInTheDocument(); expect(getAllByText('id (using to match)')[0]).toBeInTheDocument();
expect(getByText('Username (using to match)')).toBeInTheDocument(); expect(getAllByText('Username (using to match)')[0]).toBeInTheDocument();
expect(queryByText('First Name (using to match)')).not.toBeInTheDocument(); expect(queryByText('First Name (using to match)')).not.toBeInTheDocument();
}); });
it.skip('uses field words defined in node definition', async () => { it('uses field words defined in node definition', async () => {
const { getByText } = renderComponent( const { getByText } = renderComponent(
{ {
props: { props: {