Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(connect): Save & Connect button COMPASS-5776 #3163

Merged
merged 4 commits into from
Jun 15, 2022
Merged

feat(connect): Save & Connect button COMPASS-5776 #3163

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
edd0bb9
Save & Connect button
lerouxb Jun 3, 2022
c485fd8
E2E test for Save & Connect
lerouxb Jun 3, 2022
502bf7e
Merge branch 'main' into save-and-connect
lerouxb Jun 14, 2022
1a99a83
Update packages/connection-form/src/components/connect-form-actions.tsx
lerouxb Jun 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/compass-e2e-tests/helpers/commands/set-connect-form-state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,6 @@ export async function setConnectFormState(
allText.push(text);
if (text === key) {
found = true;
console.log('clicking option', text);
await option.scrollIntoView();
await option.waitForDisplayed();
await option.click();
Expand Down
2 changes: 2 additions & 0 deletions packages/compass-e2e-tests/helpers/selectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export const CloseFeatureTourModal = '[data-test-id="close-tour-button"]';
// Connection screen
export const ConnectSection = '[data-testid="connections-disconnected"]';
export const ConnectButton = '[data-testid="connect-button"]';
export const ConnectionFormSaveAndConnectButton =
'[data-testid="save-and-connect-button"]';
export const ConnectionStringInput = 'textarea[data-testid="connectionString"]';
export const ConnectionFormEditFavouriteButton =
'[data-testid="edit-favorite-icon-button"]';
Expand Down
34 changes: 34 additions & 0 deletions packages/compass-e2e-tests/tests/connection-form.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,9 @@ describe('Connection form', function () {
`${Selectors.FavoriteColorSelector} [data-testid="color-pick-color1"]`
);
await browser.$(Selectors.FavoriteSaveButton).waitForEnabled();
expect(await browser.$(Selectors.FavoriteSaveButton).getText()).to.equal(
'Save'
);
await browser.clickVisible(Selectors.FavoriteSaveButton);
await browser.$(Selectors.FavoriteModal).waitForExist({ reverse: true });

Expand Down Expand Up @@ -546,6 +549,37 @@ describe('Connection form', function () {
.$(Selectors.sidebarFavorite(newFavoriteName))
.waitForDisplayed();
});

it('can save & connect', async function () {
// Fill in a valid URI
await browser.setValueVisible(
Selectors.ConnectionStringInput,
'mongodb://localhost:27091/test'
);

// Save & Connect
await browser.clickVisible(Selectors.ConnectionFormSaveAndConnectButton);
await browser.$(Selectors.FavoriteModal).waitForDisplayed();
await browser.$(Selectors.FavoriteNameInput).setValue('My New Favorite');
await browser.clickVisible(
`${Selectors.FavoriteColorSelector} [data-testid="color-pick-color2"]`
);

// The modal's button text should read Save & Connect and not the default Save
expect(await browser.$(Selectors.FavoriteSaveButton).getText()).to.equal(
'Save & Connect'
);

await browser.$(Selectors.FavoriteSaveButton).waitForEnabled();
await browser.clickVisible(Selectors.FavoriteSaveButton);
await browser.$(Selectors.FavoriteModal).waitForExist({ reverse: true });

// Wait for it to connect
const element = await browser.$(Selectors.MyQueriesList);
await element.waitForDisplayed({
timeout: 30_000,
});
});
});

async function selectConnectionMenuItem(
Expand Down
105 changes: 105 additions & 0 deletions packages/connection-form/src/components/connect-form-actions.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,19 @@ describe('ConnectFormActions Component', function () {
describe('Save Button', function () {
describe('with save button hidden', function () {
let onSaveClickedFn: sinon.SinonSpy;
let onSaveAndConnectClickedFn: sinon.SinonSpy;
beforeEach(function () {
onSaveClickedFn = sinon.spy();
onSaveAndConnectClickedFn = sinon.spy();
render(
<ConnectFormActions
errors={[]}
warnings={[]}
onConnectClicked={() => true}
onSaveClicked={onSaveClickedFn}
onSaveAndConnectClicked={onSaveAndConnectClickedFn}
saveButton="hidden"
saveAndConnectButton="hidden"
></ConnectFormActions>
);
});
Expand All @@ -28,15 +32,19 @@ describe('ConnectFormActions Component', function () {
});
describe('with save button disabled', function () {
let onSaveClickedFn: sinon.SinonSpy;
let onSaveAndConnectClickedFn: sinon.SinonSpy;
beforeEach(function () {
onSaveClickedFn = sinon.spy();
onSaveAndConnectClickedFn = sinon.spy();
render(
<ConnectFormActions
errors={[]}
warnings={[]}
onConnectClicked={() => true}
onSaveClicked={onSaveClickedFn}
onSaveAndConnectClicked={onSaveAndConnectClickedFn}
saveButton="disabled"
saveAndConnectButton="hidden"
></ConnectFormActions>
);
});
Expand All @@ -58,15 +66,19 @@ describe('ConnectFormActions Component', function () {
});
describe('with save button enabled', function () {
let onSaveClickedFn: sinon.SinonSpy;
let onSaveAndConnectClickedFn: sinon.SinonSpy;
beforeEach(function () {
onSaveClickedFn = sinon.spy();
onSaveAndConnectClickedFn = sinon.spy();
render(
<ConnectFormActions
errors={[]}
warnings={[]}
onConnectClicked={() => true}
onSaveClicked={onSaveClickedFn}
onSaveAndConnectClicked={onSaveAndConnectClickedFn}
saveButton="enabled"
saveAndConnectButton="hidden"
></ConnectFormActions>
);
});
Expand All @@ -87,6 +99,97 @@ describe('ConnectFormActions Component', function () {
});
});

describe('with save and connect button hidden', function () {
let onSaveClickedFn: sinon.SinonSpy;
let onSaveAndConnectClickedFn: sinon.SinonSpy;
beforeEach(function () {
onSaveClickedFn = sinon.spy();
onSaveAndConnectClickedFn = sinon.spy();
render(
<ConnectFormActions
errors={[]}
warnings={[]}
onConnectClicked={() => true}
onSaveClicked={onSaveClickedFn}
onSaveAndConnectClicked={onSaveAndConnectClickedFn}
saveButton="hidden"
saveAndConnectButton="hidden"
></ConnectFormActions>
);
});
it('should not show the button', function () {
expect(screen.queryByText('Save & Connect')).to.throw;
});
});
describe('with save and connect button disabled', function () {
let onSaveClickedFn: sinon.SinonSpy;
let onSaveAndConnectClickedFn: sinon.SinonSpy;
beforeEach(function () {
onSaveClickedFn = sinon.spy();
onSaveAndConnectClickedFn = sinon.spy();
render(
<ConnectFormActions
errors={[]}
warnings={[]}
onConnectClicked={() => true}
onSaveClicked={onSaveClickedFn}
onSaveAndConnectClicked={onSaveAndConnectClickedFn}
saveButton="disabled"
saveAndConnectButton="disabled"
></ConnectFormActions>
);
});
it('should show the button', function () {
const saveAndConnectButton = screen.getByText('Save & Connect');
expect(saveAndConnectButton).to.be.visible;
});
it('should not call onSaveAndConnectClicked function', function () {
const saveAndConnectButton = screen.getByText('Save & Connect');
fireEvent(
saveAndConnectButton,
new MouseEvent('click', {
bubbles: true,
cancelable: true,
})
);
expect(onSaveAndConnectClickedFn.callCount).to.equal(0);
});
});
describe('with save and connect button enabled', function () {
let onSaveClickedFn: sinon.SinonSpy;
let onSaveAndConnectClickedFn: sinon.SinonSpy;
beforeEach(function () {
onSaveClickedFn = sinon.spy();
onSaveAndConnectClickedFn = sinon.spy();
render(
<ConnectFormActions
errors={[]}
warnings={[]}
onConnectClicked={() => true}
onSaveClicked={onSaveClickedFn}
onSaveAndConnectClicked={onSaveAndConnectClickedFn}
saveButton="disabled"
saveAndConnectButton="enabled"
></ConnectFormActions>
);
});
it('should show the button', function () {
const saveAndConnectButton = screen.getByText('Save & Connect');
expect(saveAndConnectButton).to.be.visible;
});
it('should call onSaveAndConnectClicked function', function () {
const saveAndConnectButton = screen.getByText('Save & Connect');
fireEvent(
saveAndConnectButton,
new MouseEvent('click', {
bubbles: true,
cancelable: true,
})
);
expect(onSaveAndConnectClickedFn.callCount).to.equal(1);
});
});

describe('Connect Button', function () {
let onConnectButtonFn: sinon.SinonSpy;
beforeEach(function () {
Expand All @@ -97,7 +200,9 @@ describe('ConnectFormActions Component', function () {
warnings={[]}
onConnectClicked={onConnectButtonFn}
onSaveClicked={() => true}
onSaveAndConnectClicked={() => true}
saveButton="hidden"
saveAndConnectButton="hidden"
></ConnectFormActions>
);
});
Expand Down
23 changes: 23 additions & 0 deletions packages/connection-form/src/components/connect-form-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,28 @@ const formActionButtonsStyles = css({
gap: spacing[2],
});

const saveAndConnectStyles = css({
flexGrow: 1,
display: 'flex',
justifyContent: 'flex-end',
});

function ConnectFormActions({
errors,
warnings,
onConnectClicked,
onSaveClicked,
onSaveAndConnectClicked,
saveButton,
saveAndConnectButton,
}: {
errors: ConnectionFormError[];
warnings: ConnectionFormWarning[];
onConnectClicked: () => void;
onSaveClicked: () => void;
onSaveAndConnectClicked: () => void;
saveButton: 'enabled' | 'disabled' | 'hidden';
saveAndConnectButton: 'enabled' | 'disabled' | 'hidden';
}): React.ReactElement {
return (
<div className={formActionStyles}>
Expand Down Expand Up @@ -75,6 +85,19 @@ function ConnectFormActions({
</Button>
)}

{saveAndConnectButton !== 'hidden' && (
<div className={cx(saveAndConnectStyles)}>
lerouxb marked this conversation as resolved.
Show resolved Hide resolved
<Button
data-testid="save-and-connect-button"
variant={ButtonVariant.PrimaryOutline}
disabled={saveAndConnectButton === 'disabled'}
onClick={onSaveAndConnectClicked}
>
Save &amp; Connect
</Button>
</div>
)}

<Button
data-testid="connect-button"
variant={ButtonVariant.Primary}
Expand Down
56 changes: 55 additions & 1 deletion packages/connection-form/src/components/connect-form.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React from 'react';
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import {
render,
screen,
cleanup,
fireEvent,
getByText,
} from '@testing-library/react';
import { expect } from 'chai';

import ConnectForm from './connect-form';
Expand Down Expand Up @@ -132,4 +138,52 @@ describe('ConnectForm Component', function () {

expect(screen.getByText('connection error')).to.be.visible;
});

it('should show a Save & Connect button when there is no existing connection', function () {
render(
<ConnectForm
onConnectClicked={noop}
initialConnectionInfo={{
id: 'test',
connectionOptions: {
connectionString: 'pineapples',
},
}}
onSaveConnectionClicked={noop}
/>
);

const saveAndConnectButton = screen.getByText('Save & Connect');
expect(saveAndConnectButton).to.be.visible;

fireEvent.click(saveAndConnectButton);

expect(screen.getByText('Save connection to favorites')).to.be.visible;

const dialog = screen.getByRole('dialog');
expect(dialog).to.be.visible;

expect(getByText(dialog, 'Save & Connect')).to.be.visible;
expect(() => getByText(dialog, 'Save')).to.throw;
});

it('should not show a Save & Connect button when there is an existing connection', function () {
render(
<ConnectForm
onConnectClicked={noop}
initialConnectionInfo={{
id: 'test',
connectionOptions: {
connectionString: 'pineapples',
},
favorite: {
name: 'foo',
},
}}
onSaveConnectionClicked={noop}
/>
);

expect(() => screen.getByText('Save & Connect')).to.throw;
});
});