Skip to content

Commit

Permalink
feat(connect): Save & Connect button COMPASS-5776 (#3163)
Browse files Browse the repository at this point in the history 
* Save & Connect button

* E2E test for Save & Connect

* Update packages/connection-form/src/components/connect-form-actions.tsx

Co-authored-by: Rhys <Anemy@users.noreply.github.com>

Co-authored-by: Rhys <Anemy@users.noreply.github.com>
  • Loading branch information
@lerouxb @Anemy
lerouxb and Anemy committed Jun 15, 2022
1 parent f6edaf9 commit 8c372ae
Show file tree
Hide file tree
Showing 9 changed files with 272 additions and 18 deletions.
1 change: 0 additions & 1 deletion packages/compass-e2e-tests/helpers/commands/set-connect-form-state.ts
View file
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
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
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
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
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={saveAndConnectStyles}>
<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
@@ -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;
});
});

0 comments on commit 8c372ae

Please sign in to comment.