Skip to content

Commit

Permalink
chore: add e2e tests to delete modal (#5153)
Browse files Browse the repository at this point in the history
* chore: add e2e tests to delete modal

* chore: remove unnecessary todos

* chore: check modal visibility before confirmation
  • Loading branch information
kmruiz authored Nov 23, 2023
1 parent 44a322b commit 4559f44
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 5 deletions.
18 changes: 13 additions & 5 deletions packages/compass-crud/src/components/bulk-delete-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
);

return (
<Modal setOpen={onCancel} open={open}>
<Modal setOpen={onCancel} open={open} data-testid="bulk-delete-modal">
<ModalHeader
title={`Delete ${documentCount ?? ''} document${
documentCount === 1 ? '' : 's'
Expand All @@ -105,25 +105,33 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
size="default"
leftGlyph={<Icon glyph="Code" />}
onClick={onExportToLanguage}
data-testid="pipeline-toolbar-export-button"
data-testid="export-button"
>
Export
</Button>
</div>

<div>
<b>
<b data-testid="preview-title">
Preview (sample of {sampleDocuments.length} document
{sampleDocuments.length === 1 ? '' : 's'})
</b>
{preview}
</div>
</ModalBody>
<ModalFooter className={modalFooterSpacingStyles}>
<Button variant="danger" onClick={onConfirmDeletion}>
<Button
variant="danger"
onClick={onConfirmDeletion}
data-testid="delete-button"
>
Delete {documentCount ?? ''} document{documentCount === 1 ? '' : 's'}
</Button>
<Button variant="default" onClick={onCancel}>
<Button
variant="default"
onClick={onCancel}
data-testid="cancel-button"
>
Cancel
</Button>
</ModalFooter>
Expand Down
14 changes: 14 additions & 0 deletions packages/compass-e2e-tests/helpers/selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -534,6 +534,7 @@ export const JSONDocumentCard = '[data-testid="editable-json"]';
export const JSONEditDocumentButton = `${JSONDocumentCard} [data-testid="editor-action-Edit"]`;
export const ShowMoreFieldsButton = '[data-testid="show-more-fields-button"]';
export const OpenBulkUpdateButton = '[data-testid="crud-update"]';
export const OpenBulkDeleteButton = '[data-testid="crud-bulk-delete"]';

// Insert Document modal

Expand Down Expand Up @@ -599,6 +600,15 @@ export const BulkUpdateSaveFavorite = `${BulkUpdateModal} [data-testid="inline-s
export const BulkUpdateFavouriteNameInput = `${BulkUpdateModal} [data-testid="inline-save-query-modal-input"]`;
export const BulkUpdateFavouriteSaveButton = `${BulkUpdateModal} [data-testid="inline-save-query-modal-submit"]`;

// Bulk Delete Modal
export const BulkDeleteModal = '[data-testid="bulk-delete-modal"]';
export const BulkDeleteModalReadonlyFilter = `${BulkDeleteModal} [data-testid="readonly-filter"]`;
export const BulkDeleteModalTitle = `${BulkDeleteModal} [data-testid="modal-title"]`;
export const BulkDeleteModalExportButton = `${BulkDeleteModal} [data-testid="export-button"]`;
export const BulkDeleteModalPreviewTitle = `${BulkDeleteModal} [data-testid="preview-title"]`;
export const BulkDeleteModalDeleteButton = `${BulkDeleteModal} [data-testid="delete-button"]`;
export const BulkDeleteModalCancelButton = `${BulkDeleteModal} [data-testid="cancel-button"]`;

// Connection import/export modals
export const ExportConnectionsModalOpen =
'[data-testid="favorites-menu-export-favorites-action"]';
Expand Down Expand Up @@ -1142,6 +1152,10 @@ export const ConfirmationModalConfirmButton = (
modalSelector = ConfirmationModal
) => `${modalSelector} [role=dialog] button:nth-of-type(1)`;

export const ConfirmationModalCancelButton = (
modalSelector = ConfirmationModal
) => `${modalSelector} [role=dialog] button:nth-of-type(2)`;

// New pipeline from text modal
export const NewPipelineFromTextModal = '[data-testid="import-pipeline-modal"]';
export const NewPipelineFromTextEditor = '#import-pipeline-editor';
Expand Down
112 changes: 112 additions & 0 deletions packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { expect } from 'chai';
import type { CompassBrowser } from '../helpers/compass-browser';
import { startTelemetryServer } from '../helpers/telemetry';
import type { Telemetry } from '../helpers/telemetry';
import { beforeTests, afterTests, afterTest } from '../helpers/compass';
import type { Compass } from '../helpers/compass';
import * as Selectors from '../helpers/selectors';
import { createNumbersCollection } from '../helpers/insert-data';

describe('Bulk Delete', () => {
let compass: Compass;
let browser: CompassBrowser;
let telemetry: Telemetry;

before(async function () {
telemetry = await startTelemetryServer();
compass = await beforeTests({
extraSpawnArgs: ['--enableBulkDeleteOperations'],
});
browser = compass.browser;
});

after(async function () {
await afterTests(compass, this.currentTest);
await telemetry.stop();
});

beforeEach(async function () {
await createNumbersCollection();
await browser.connectWithConnectionString();
await browser.navigateToCollectionTab('test', 'numbers', 'Documents');
});

afterEach(async function () {
await afterTest(compass, this.currentTest);
});

it('deletes documents matching a filter', async function () {
//const telemetryEntry = await browser.listenForTelemetryEvents(telemetry);

// Set a query that we'll use.
await browser.runFindOperation('Documents', '{ i: 5 }');

// Open the modal.
await browser.clickVisible(Selectors.OpenBulkDeleteButton);
await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();

// Check that it will update the expected number of documents
expect(await browser.$(Selectors.BulkDeleteModalTitle).getText()).to.equal(
'Delete 1 document'
);

expect(
await browser.$(Selectors.BulkDeleteModalDeleteButton).getText()
).to.equal('Delete 1 document');

// Press delete
await browser.clickVisible(Selectors.BulkDeleteModalDeleteButton);

// The modal should go away
await browser
.$(Selectors.BulkDeleteModal)
.waitForDisplayed({ reverse: true });

// Press delete in the confirmation modal
await browser.clickVisible(Selectors.ConfirmationModalConfirmButton());
await browser.runFindOperation('Documents', '{ i: 5 }');

// the document is deleted
expect(
await browser.$(Selectors.DocumentListActionBarMessage).getText()
).to.equal('0 – 0 of 0');
});

it('does not delete documents when cancelled', async function () {
//const telemetryEntry = await browser.listenForTelemetryEvents(telemetry);

// Set a query that we'll use.
await browser.runFindOperation('Documents', '{ i: 5 }');

// Open the modal.
await browser.clickVisible(Selectors.OpenBulkDeleteButton);
await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();

// Check that it will update the expected number of documents
expect(await browser.$(Selectors.BulkDeleteModalTitle).getText()).to.equal(
'Delete 1 document'
);

expect(
await browser.$(Selectors.BulkDeleteModalDeleteButton).getText()
).to.equal('Delete 1 document');

// Press delete
await browser.clickVisible(Selectors.BulkDeleteModalDeleteButton);

// The modal should go away
await browser
.$(Selectors.BulkDeleteModal)
.waitForDisplayed({ reverse: true });

// Press cancel in the confirmation modal
await browser.clickVisible(Selectors.ConfirmationModalCancelButton());

await browser.runFindOperation('Documents', '{ i: 5 }');

// the document is not deleted
expect(
await browser.$(Selectors.DocumentListActionBarMessage).getText()
).to.equal('1 – 1 of 1');
});
});

0 comments on commit 4559f44

Please sign in to comment.