E2E test fixes

Test lenght is becoming a concern, so tests may be flaky in this commit

e2e-tests/fixtures/ExternalSources.ts

@@ -25,12 +25,16 @@ export class ExternalSources {
   derivationTestSourceType: string = 'DerivationTest';
   derivationTestSourceTypeName: string = 'DerivationTest';
   derivationTestTypeSchema: string = 'e2e-tests/data/Schema_Example_Derivation.json';
+  derivationTestTypeSchemaExpectedEventTypes: string[] = ['DerivationA', 'DerivationB', 'DerivationC', 'DerivationD'];
+  derivationTestTypeSchemaExpectedSourceTypes: string[] = ['DerivationTest'];
   deselectEventButton: Locator;
   deselectSourceButton: Locator;
   exampleDerivationGroup: string = 'Example External Source Default';
   exampleEventType: string = 'ExampleEvent';
   exampleSourceType: string = 'Example External Source';
   exampleTypeSchema: string = 'e2e-tests/data/Schema_Example_Source.json';
+  exampleTypeSchemaExpectedEventTypes: string[] = ['ExampleEvent'];
+  exampleTypeSchemaExpectedSourceTypes: string[] = ['Example External Source'];
   externalEventSelectedForm: Locator;
   externalEventTableHeaderDuration: Locator;
   externalEventTableHeaderEventType: Locator;
@@ -62,41 +66,72 @@ export class ExternalSources {
     await this.closeButton.click();
   }
 
-  async createType(typeSchema: string, typeName: string, isExternalEventType: boolean) {
+  async createTypes(typeSchema: string, expectedSourceTypes: string[], expectedEventTypes: string[]) {
     await this.gotoTypeManager();
+
+    const externalSourceTypeTable = await this.page.locator('.external-source-type-table');
+    const externalEventTypeTable = await this.page.locator('.external-event-type-table');
+
+    await this.page.getByRole('textbox').isVisible();
     await this.page.getByRole('textbox').focus();
     await this.page.getByRole('textbox').setInputFiles(typeSchema);
     await this.page.getByRole('textbox').evaluate(e => e.blur());
+
+    await this.page.getByText('Source & Event Type Attribute Schema Parsed').isVisible();
+
+    for (const expectedSourceType of expectedSourceTypes) {
+      await expect(this.page.locator(`li:text("${expectedSourceType}")`)).toBeVisible();
+    }
+    for (const expectedEventType of expectedEventTypes) {
+      await expect(this.page.locator(`li:text("${expectedEventType}")`)).toBeVisible();
+    }
+
     await this.page.getByLabel('Upload External Source & Event Type(s)').click();
-    if (isExternalEventType) {
-      await this.page.getByRole('button', { name: 'External Event Type' }).click();
+
+    for (const expectedSourceType of expectedSourceTypes) {
+      await expect(externalSourceTypeTable.getByRole('gridcell', { name: expectedSourceType })).toBeVisible();
+    }
+    for (const expectedEventType of expectedEventTypes) {
+      await expect(externalEventTypeTable.getByRole('gridcell', { name: expectedEventType })).toBeVisible();
     }
-    await expect(this.page.getByRole('row', { name: typeName })).toBeVisible();
   }
+
   async deleteDerivationGroup(derivationGroupName: string) {
-    if (await this.page.getByRole('row', { name: derivationGroupName }).isVisible()) {
-      await this.page.getByRole('row', { name: derivationGroupName }).hover();
-      await this.page.getByRole('row', { name: derivationGroupName }).getByLabel('Delete Derivation Group').click();
+    const derivationGroupTable = await this.page.locator('.derivation-group-table');
+    if (await derivationGroupTable.getByRole('row', { name: derivationGroupName }).isVisible()) {
+      await derivationGroupTable.getByRole('row', { name: derivationGroupName }).hover();
+      await derivationGroupTable
+        .getByRole('row', { name: derivationGroupName })
+        .getByLabel('Delete Derivation Group')
+        .click();
       await this.page.getByRole('button', { exact: true, name: 'Delete' }).click();
-      await expect(this.page.getByRole('row', { name: derivationGroupName })).not.toBeVisible();
+      await expect(derivationGroupTable.getByRole('row', { name: derivationGroupName })).not.toBeVisible();
     }
   }
 
   async deleteExternalEventType(eventTypeName: string) {
-    if (await this.page.getByRole('row', { name: eventTypeName }).isVisible()) {
-      await this.page.getByRole('row', { name: eventTypeName }).hover();
-      await this.page.getByRole('row', { name: eventTypeName }).getByLabel('Delete External Event Type').click();
+    const externalEventTypeTable = await this.page.locator('.external-event-type-table');
+    if (await externalEventTypeTable.getByRole('row', { name: eventTypeName }).isVisible()) {
+      await externalEventTypeTable.getByRole('row', { name: eventTypeName }).hover();
+      await externalEventTypeTable
+        .getByRole('row', { name: eventTypeName })
+        .getByLabel('Delete External Event Type')
+        .click();
       await this.page.getByRole('button', { exact: true, name: 'Delete' }).click();
-      await expect(this.page.getByRole('row', { name: eventTypeName })).not.toBeVisible();
+      await expect(externalEventTypeTable.getByRole('row', { name: eventTypeName })).not.toBeVisible();
     }
   }
 
   async deleteExternalSourceType(sourceTypeName: string) {
-    if (await this.page.getByRole('row', { name: sourceTypeName }).isVisible()) {
-      await this.page.getByRole('row', { name: sourceTypeName }).hover();
-      await this.page.getByRole('row', { name: sourceTypeName }).getByLabel('Delete External Source Type').click();
+    const externalSourceTypeTable = await this.page.locator('.external-source-type-table');
+    if (await externalSourceTypeTable.getByRole('row', { name: sourceTypeName }).isVisible()) {
+      await externalSourceTypeTable.getByRole('row', { name: sourceTypeName }).hover();
+      await externalSourceTypeTable
+        .getByRole('row', { name: sourceTypeName })
+        .getByLabel('Delete External Source Type')
+        .click();
       await this.page.getByRole('button', { exact: true, name: 'Delete' }).click();
-      await expect(this.page.getByRole('row', { name: sourceTypeName })).not.toBeVisible();
+      await expect(externalSourceTypeTable.getByRole('row', { name: sourceTypeName })).not.toBeVisible();
     }
   }
 
@@ -142,7 +177,8 @@ export class ExternalSources {
 
   async linkDerivationGroup(derivationGroupName: string, sourceTypeName: string) {
     // Assumes the Manage Derivation Groups modal is already showing
-    await this.page.getByRole('row', { name: derivationGroupName }).getByRole('checkbox').click();
+    await this.page.getByRole('row', { name: derivationGroupName }).getByRole('checkbox').check();
+    await expect(this.page.getByRole('row', { name: derivationGroupName }).getByRole('checkbox')).toBeChecked();
     await this.page.getByRole('button', { name: 'Update' }).click();
     await this.page.getByRole('button', { name: 'Close' }).click();
     await expect(this.page.getByRole('button', { exact: true, name: sourceTypeName })).toBeVisible();
@@ -208,7 +244,6 @@ export class ExternalSources {
     if (validateUpload) {
       await expect(this.externalSourcesTable).toBeVisible();
       await expect(this.externalSourcesTable.getByRole('gridcell', { name: inputFileName })).toBeVisible();
-      await this.waitForToast('External Source Created Successfully');
     }
   }
 

e2e-tests/tests/external-sources.test.ts

@@ -29,7 +29,11 @@ test.beforeEach(async () => {
 
 test.describe.serial('External Sources', () => {
   test('Uploading an external source', async () => {
-    await externalSources.createType(externalSources.exampleTypeSchema, 'Example External Source', false);
+    await externalSources.createTypes(
+      externalSources.exampleTypeSchema,
+      externalSources.exampleTypeSchemaExpectedSourceTypes,
+      externalSources.exampleTypeSchemaExpectedEventTypes,
+    );
     await externalSources.uploadExternalSource();
   });
 
@@ -82,15 +86,23 @@ test.describe.serial('External Sources', () => {
     await expect(externalSources.externalSourceSelectedForm).not.toBeVisible();
     await externalSources.gotoTypeManager();
     await externalSources.deleteDerivationGroup(externalSources.exampleDerivationGroup);
-    await externalSources.deleteExternalEventType(externalSources.exampleEventType);
     await externalSources.deleteExternalSourceType(externalSources.exampleSourceType);
+    await externalSources.deleteExternalEventType(externalSources.exampleEventType);
   });
 });
 
 test.describe.serial('External Source Error Handling', () => {
   test('Duplicate keys is handled gracefully', async () => {
-    await externalSources.createType(externalSources.exampleTypeSchema, 'Example External Source', false);
-    await externalSources.uploadExternalSource();
+    await externalSources.createTypes(
+      externalSources.exampleTypeSchema,
+      externalSources.exampleTypeSchemaExpectedSourceTypes,
+      externalSources.exampleTypeSchemaExpectedEventTypes,
+    );
+    await externalSources.uploadExternalSource(
+      externalSources.externalSourceFilePath,
+      externalSources.externalSourceFileName,
+      true,
+    );
     await expect(externalSources.externalSourcesTable).toBeVisible();
     await expect(
       externalSources.externalSourcesTable.getByRole('gridcell', { name: externalSources.externalSourceFileName }),

e2e-tests/tests/plan-external-source.test.ts

@@ -39,7 +39,11 @@ test.beforeAll(async ({ baseURL, browser }) => {
   await plans.goto();
   await plans.createPlan();
   await externalSources.goto();
-  await externalSources.createType(externalSources.exampleTypeSchema, externalSources.externalSourceTypeName, false);
+  await externalSources.createTypes(
+    externalSources.exampleTypeSchema,
+    externalSources.exampleTypeSchemaExpectedSourceTypes,
+    externalSources.exampleTypeSchemaExpectedEventTypes,
+  );
   await externalSources.uploadExternalSource();
 });
 
@@ -152,57 +156,6 @@ test.describe.serial('Plan External Sources', () => {
     expect(doPixelsExist).toBeTruthy();
   });
 
-  test('Cards should be shown when a new external source is uploaded', async () => {
-    // Upload a test file and link its derivation group to the plan
-    await externalSources.goto();
-    await externalSources.createType(
-      externalSources.derivationTestTypeSchema,
-      externalSources.derivationTestSourceTypeName,
-      false,
-    );
-    await externalSources.uploadExternalSource(
-      externalSources.derivationTestFile1,
-      externalSources.derivationTestFileKey1,
-    );
-    await plan.goto();
-    await plan.showPanel(PanelNames.EXTERNAL_SOURCES);
-    await plan.externalSourceManageButton.click();
-    await externalSources.linkDerivationGroup(
-      externalSources.derivationTestGroupName,
-      externalSources.derivationTestSourceType,
-    );
-
-    // Upload another test
-    await externalSources.goto();
-    await externalSources.uploadExternalSource(
-      externalSources.derivationTestFile2,
-      externalSources.derivationTestFileKey2,
-    );
-
-    await plan.goto();
-    await plan.showPanel(PanelNames.EXTERNAL_SOURCES);
-
-    // Allow stores to load, validate 'new source' card appears
-    await expect(
-      page.getByText('New files matching source types and derivation groups in the current plan'),
-    ).toBeVisible();
-
-    await page.getByRole('button', { name: 'Dismiss' }).click();
-
-    await expect(
-      page.getByText('New files matching source types and derivation groups in the current plan'),
-    ).not.toBeVisible();
-
-    await plan.externalSourceManageButton.click();
-    await expect(
-      page.getByRole('row', { name: externalSources.derivationTestGroupName }).getByRole('checkbox'),
-    ).toBeChecked();
-    await externalSources.unlinkDerivationGroup(
-      externalSources.derivationTestGroupName,
-      externalSources.derivationTestSourceType,
-    );
-  });
-
   test('Linked derivation groups should be expandable in panel', async () => {
     await plan.showPanel(PanelNames.EXTERNAL_SOURCES);
     // Link derivation group to plan if it isn't already

src/components/external-source/ExternalTypeManager.svelte

@@ -584,13 +584,17 @@
           {#if parsedExternalSourceEventTypeSchema !== undefined}
             <div class="to-be-created st-typography-body">
               <div class="to-be-created-header">The following External Source Type(s) will be created</div>
-              {#each Object.keys(parsedExternalSourceEventTypeSchema.source_types) as newSourceTypeName}
-                <li class="st-typograph-body">{newSourceTypeName}</li>
-              {/each}
+              <ul>
+                {#each Object.keys(parsedExternalSourceEventTypeSchema.source_types) as newSourceTypeName}
+                  <li class="st-typograph-body">{newSourceTypeName}</li>
+                {/each}
+              </ul>
               <div class="to-be-created-header">The following External Event Type(s) will be created</div>
-              {#each Object.keys(parsedExternalSourceEventTypeSchema.event_types) as newEventTypeName}
-                <li class="st-typograph-body">{newEventTypeName}</li>
-              {/each}
+              <ul>
+                {#each Object.keys(parsedExternalSourceEventTypeSchema.event_types) as newEventTypeName}
+                  <li class="st-typograph-body">{newEventTypeName}</li>
+                {/each}
+              </ul>
             </div>
           {/if}
           <div class="errors">
@@ -829,13 +833,15 @@
         </Input>
       </svelte:fragment>
       <svelte:fragment slot="body">
-        <DataGrid
-          bind:this={derivationGroupDataGrid}
-          columnDefs={derivationGroupColumnsDef}
-          filterExpression={derivationGroupFilterString}
-          rowData={$derivationGroups}
-          getRowId={getDerivationGroupRowId}
-        />
+        <div class="derivation-group-table">
+          <DataGrid
+            bind:this={derivationGroupDataGrid}
+            columnDefs={derivationGroupColumnsDef}
+            filterExpression={derivationGroupFilterString}
+            rowData={$derivationGroups}
+            getRowId={getDerivationGroupRowId}
+          />
+        </div>
       </svelte:fragment>
     </Panel>
     <Panel borderTop>
@@ -898,6 +904,10 @@
     display: grid;
   }
 
+  .derivation-group-table {
+    height: 100%;
+  }
+
   .external-source-type-table {
     height: 100%;
   }