feat: update how we test model detail page (#310)

Because

- We need to adapt model-backend long run operation

This commit

- update how we test model detail page
- Make sure we select the right model instance

integration-test/common/model.ts

@@ -1,5 +1,6 @@
 //import { Nullable } from "@/types/general";
 import { Page, expect, Locator } from "@playwright/test";
+import { delay, expectToSelectReactSelectOption } from "../helper";
 
 export const expectToDeleteModel = async (page: Page, modelId: string) => {
   await page.goto(`/models/${modelId}`, { waitUntil: "networkidle" });
@@ -111,6 +112,7 @@ export type ExpectCorrectModelDetailsProps = {
   modelId: string;
   modelDescription: string;
   modelInstanceTag: string;
+  modelInstanceTagOptionLocator: Locator;
   modelState:
     | "STATE_ONLINE"
     | "STATE_OFFLINE"
@@ -125,10 +127,14 @@ export const expectCorrectModelDetails = async ({
   modelId,
   modelDescription,
   modelInstanceTag,
+  modelInstanceTagOptionLocator,
   modelState,
   modelTask,
   additionalRules,
 }: ExpectCorrectModelDetailsProps) => {
+  // Mimic the behavior of long running operation
+  await delay(2000);
+
   await page.goto(`/models/${modelId}`, { waitUntil: "networkidle" });
 
   // Should have proper title
@@ -139,16 +145,26 @@ export const expectCorrectModelDetails = async ({
   const modelDescriptionField = page.locator("#description");
   await expect(modelDescriptionField).toHaveValue(modelDescription);
 
-  // Should have correct model instance tag
-  const modelInstanceTagOption = page.locator(
-    "data-testid=modelInstanceTag-selected-option"
-  );
-  await expect(modelInstanceTagOption).toHaveText(modelInstanceTag);
-
   // Should display task fill classification
   const modelTaskLabel = page.locator("data-testid=model-task-label");
   await expect(modelTaskLabel).toHaveText(modelTask);
 
+  const modelInstanceTagOptionInput = page.locator(
+    "#react-select-modelInstanceTag-input"
+  );
+
+  // Should choose the right model instance
+  await expectToSelectReactSelectOption(
+    modelInstanceTagOptionInput,
+    modelInstanceTagOptionLocator
+  );
+
+  // Should have the target model instance tag
+  const selectedModelInstanceTag = page.locator(
+    "data-testid=modelInstanceTag-selected-option"
+  );
+  await expect(selectedModelInstanceTag).toHaveText(modelInstanceTag);
+
   // Should display online and have correct toggle button state
   const modelStateLabel = page.locator("data-testid=state-label");
   const stateToggle = page.locator("#pipelineStateToggleButton");

integration-test/model-artivc.spec.ts

@@ -81,6 +81,9 @@ test.describe.serial("Artivc model", () => {
       modelId,
       modelDescription,
       modelInstanceTag: "v1.0-cpu",
+      modelInstanceTagOptionLocator: page.locator(
+        "#react-select-modelInstanceTag-option-0"
+      ),
       modelState: "STATE_ONLINE",
       modelTask: "CLASSIFICATION",
       additionalRules: async () => {

integration-test/model-github.spec.ts

@@ -79,8 +79,11 @@ test.describe.serial("GitHub model", () => {
       page,
       modelId,
       modelDescription,
-      modelInstanceTag: "v1.0-gpu", // Because we don't have a way to indicate which instance just created.
-      modelState: "STATE_OFFLINE",
+      modelInstanceTag: "v1.0-cpu",
+      modelInstanceTagOptionLocator: page.locator(
+        "#react-select-modelInstanceTag-option-1"
+      ),
+      modelState: "STATE_ONLINE",
       modelTask: "CLASSIFICATION",
     });
   });

integration-test/model-huggingface.spec.ts

@@ -82,6 +82,9 @@ test.describe.serial("Hugging face model", () => {
       modelId,
       modelDescription,
       modelInstanceTag,
+      modelInstanceTagOptionLocator: page.locator(
+        "#react-select-modelInstanceTag-option-0"
+      ),
       modelState: "STATE_ONLINE",
       modelTask: "CLASSIFICATION",
       additionalRules: async () => {

integration-test/model-local.spec.ts

@@ -83,6 +83,9 @@ test.describe.serial("Local model", () => {
       modelId,
       modelDescription,
       modelInstanceTag,
+      modelInstanceTagOptionLocator: page.locator(
+        "#react-select-modelInstanceTag-option-0"
+      ),
       modelState: "STATE_ONLINE",
       modelTask: "CLASSIFICATION",
     });