Skip to content

chore(e2e): Rewrite Instance Databases tab -> can refresh the list of databases using refresh controls COMPASS-7663 #5544

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

Merged
merged 9 commits into from
Mar 6, 2024
Merged

chore(e2e): Rewrite Instance Databases tab -> can refresh the list of databases using refresh controls COMPASS-7663 #5544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1bc9202
lots more waiting and checks between actions in the flaky test
lerouxb Mar 4, 2024
94f3013
WIP
lerouxb Mar 6, 2024
eb1dc6d
Merge branch 'main' into disable-refresh-test
lerouxb Mar 6, 2024
b1c0f24
remove the console.log lines again
lerouxb Mar 6, 2024
f8f7efd
rewrite the test
lerouxb Mar 6, 2024
f003165
don't add something while the initial load is ongoing
lerouxb Mar 6, 2024
69fd202
scroll and take a screenshot before click
lerouxb Mar 6, 2024
1353692
slight tweak
lerouxb Mar 6, 2024
362e995
without the only
lerouxb Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 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 @@ -400,6 +400,7 @@ export const DatabaseCard = '[data-testid="database-grid-item"]';
export const DatabaseCardDrop =
'[data-testid="database-grid"] [data-testid="namespace-card-actions"] button';
export const ServerStats = '.serverstats';
export const DatabaseStatLoader = `${DatabaseCard} [data-testid="namespace-param-fallback"][data-ready=false]`;

export const databaseCard = (dbName: string): string => {
return `${DatabaseCard}[data-id="${dbName}"]`;
Expand Down
51 changes: 29 additions & 22 deletions packages/compass-e2e-tests/tests/instance-databases-tab.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
createNumbersCollection,
} from '../helpers/insert-data';

const INITIAL_DATABASE_NAMES = ['admin', 'config', 'local', 'test'];

describe('Instance databases tab', function () {
let compass: Compass;
let browser: CompassBrowser;
Expand Down Expand Up @@ -42,9 +44,7 @@ describe('Instance databases tab', function () {
const dbTable = await browser.$(Selectors.DatabasesTable);
await dbTable.waitForDisplayed();

const dbSelectors = ['admin', 'config', 'local', 'test'].map(
Selectors.databaseCard
);
const dbSelectors = INITIAL_DATABASE_NAMES.map(Selectors.databaseCard);

for (const dbSelector of dbSelectors) {
const found = await browser.scrollToVirtualItem(
Expand Down Expand Up @@ -138,31 +138,37 @@ describe('Instance databases tab', function () {
});

it('can refresh the list of databases using refresh controls', async function () {
const db = 'my-instance-database';
const coll = 'my-collection';
const db = 'test'; // added by beforeEach
const dbSelector = Selectors.databaseCard(db);

// Create the database and refresh
// Browse to the databases tab
await browser.navigateToInstanceTab('Databases');

// Make sure the db card we're going to drop is in there.
await browser.scrollToVirtualItem(
Selectors.DatabasesTable,
dbSelector,
'grid'
);
await browser.$(dbSelector).waitForDisplayed();

// Wait for the page to finish loading as best as we can
await browser.waitUntil(async () => {
const placeholders = await browser.$$(Selectors.DatabaseStatLoader);
return placeholders.length === 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If only we (or a user) could reliably tell in the UI once everything is done loading. 🤔

});

// Drop the database using the driver
const mongoClient = new MongoClient(DEFAULT_CONNECTION_STRING);
await mongoClient.connect();
try {
const database = mongoClient.db(db);
await database.createCollection(coll);

await browser.navigateToInstanceTab('Databases');
await browser.clickVisible(Selectors.InstanceRefreshDatabaseButton);

await browser.scrollToVirtualItem(
Selectors.DatabasesTable,
dbSelector,
'grid'
);
await browser.$(dbSelector).waitForDisplayed();

// Drop it and refresh again
// Drop the database
console.log({
'database.dropDatabase()': await database.dropDatabase(),
});
// Prove that it is really gone
console.log({
'database.admin().listDatabases()': (
await database.admin().listDatabases()
Expand All @@ -172,10 +178,11 @@ describe('Instance databases tab', function () {
await mongoClient.close();
}

// looks like if you refresh too fast the database appears in the list but
// the stats never load, so just pause for bit first
await browser.pause(1000);
await browser.clickVisible(Selectors.InstanceRefreshDatabaseButton);
// Refresh again and the database card should disappear.
await browser.clickVisible(Selectors.InstanceRefreshDatabaseButton, {
Copy link
Contributor Author

@lerouxb lerouxb Mar 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sometimes the card doesn't go away. This is now the only time we hit the refresh button so the only thing I can think of is that the initial load is still somehow in progress by the time we hit the refresh button.

scroll: true,
screenshot: 'instance-refresh-database-button.png',
});
await browser.$(dbSelector).waitForExist({ reverse: true });
});
});
2 changes: 2 additions & 0 deletions packages/databases-collections-list/src/namespace-param.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,8 @@ export const NamespaceParam: React.FunctionComponent<{
}}
fallback={(shouldRender) => (
<span
data-testid="namespace-param-fallback"
data-ready={isReady}
className={cx(
namespaceParamValuePlaceholder,
shouldRender && visible
Expand Down