From 490b8923846b5bf148a530679b671a69b073f878 Mon Sep 17 00:00:00 2001 From: Robert Gabriel Macalintal Date: Mon, 23 Dec 2024 14:42:06 -0500 Subject: [PATCH] Migrated object-store/metadata/__tests__/external-resource-edit.test.tsx to RTL --- .../__tests__/external-resource-edit.test.tsx | 139 +++++++----------- 1 file changed, 57 insertions(+), 82 deletions(-) diff --git a/packages/dina-ui/page-tests/object-store/metadata/__tests__/external-resource-edit.test.tsx b/packages/dina-ui/page-tests/object-store/metadata/__tests__/external-resource-edit.test.tsx index 3cc449c101..c171489496 100644 --- a/packages/dina-ui/page-tests/object-store/metadata/__tests__/external-resource-edit.test.tsx +++ b/packages/dina-ui/page-tests/object-store/metadata/__tests__/external-resource-edit.test.tsx @@ -5,10 +5,13 @@ import { Metadata, ObjectSubtype } from "../../../../types/objectstore-api"; -import { mountWithAppContext } from "../../../../test-util/mock-app-context"; +import { mountWithAppContext2 } from "../../../../test-util/mock-app-context"; import ExternalResourceMetadataPage from "../../../../pages/object-store/metadata/external-resource-edit"; import Select from "react-select/base"; import { ResourceSelectField } from "common-ui"; +import { fireEvent, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import userEvent from "@testing-library/user-event"; const mockGet = jest.fn(async (path) => { switch (path) { @@ -109,83 +112,56 @@ describe("Metadata external resource edit page.", () => { query: { id: undefined } }); - const wrapper = mountWithAppContext(, { + const wrapper = mountWithAppContext2(, { apiContext }); await new Promise(setImmediate); - wrapper.update(); - - expect( - wrapper.find(".dcFormat-field input").first().prop("value") - ).toBeFalsy(); + // Test initial values + expect(wrapper.getByRole("combobox", { name: /tags/i })).toHaveDisplayValue( + "" + ); expect( - wrapper.find(".fileExtension-field input").first().prop("value") - ).toBeFalsy(); - + wrapper.getByRole("textbox", { name: /file extension/i }) + ).toHaveDisplayValue(""); expect( - wrapper.find(".resourceExternalURL-field input").first().prop("value") - ).toBeFalsy(); - + wrapper.getByRole("textbox", { name: /resource external url/i }) + ).toHaveDisplayValue(""); expect( - wrapper.find(".acCaption-field input").first().prop("value") - ).toBeFalsy(); + wrapper.getByRole("textbox", { name: /caption/i }) + ).toHaveDisplayValue(""); - // Type a search into the media format search. - wrapper - .find(".dcFormat-field input") - .first() - .simulate("change", { - target: { - value: "image/jpeg" - } - }); + // Select an option in the media format search. + userEvent.click(wrapper.getByRole("combobox", { name: /media format/i })); + userEvent.click(wrapper.getByRole("option", { name: /image\/jpeg/i })); await new Promise(setImmediate); - wrapper.update(); - - // Open the dropdown menu. - wrapper - .find(".dcFormat-field input") - .first() - .simulate("mouseDown", { button: 0 }); - - // Select the first result in the list. Should only be one result. - wrapper.find(".react-select__option").first().simulate("click"); // Set values: - wrapper - .find(".fileExtension-field input") - .first() - .simulate("change", { - target: { - value: ".jpg" - } - }); + fireEvent.change( + wrapper.getByRole("textbox", { name: /file extension/i }), + { + target: { value: ".jpg" } + } + ); - wrapper - .find(".resourceExternalURL-field input") - .first() - .simulate("change", { - target: { - value: "http://agr.gc.ca" - } - }); + fireEvent.change( + wrapper.getByRole("textbox", { name: /resource external url/i }), + { + target: { value: "http://agr.gc.ca" } + } + ); - wrapper - .find(".acCaption-field input") - .first() - .simulate("change", { - target: { - value: "test caption" - } - }); + fireEvent.change(wrapper.getByRole("textbox", { name: /caption/i }), { + target: { value: "test caption" } + }); - wrapper.find("form").simulate("submit"); + // Submit form + fireEvent.submit(wrapper.container.querySelector("form")!); await new Promise(setImmediate); - wrapper.update(); + // Test response expect(mockSave).toBeCalledWith( [ { @@ -212,42 +188,41 @@ describe("Metadata external resource edit page.", () => { id: "25f81de5-bbee-430c-b5fa-71986b70e612" } }); - const wrapper = mountWithAppContext(, { + const wrapper = mountWithAppContext2(, { apiContext }); await new Promise(setImmediate); - wrapper.update(); // Check for the right initial values: - expect(wrapper.find(".acSubtype-field Select").prop("value")).toEqual({ - label: "TEST_SUBTYPE", - resource: { - acSubtype: "TEST_SUBTYPE", - id: "id-unavailable", - type: "object-subtype" - }, - value: "id-unavailable" - }); + expect( + wrapper.getByRole("combobox", { + name: /object subtype test_subtype/i + }) + ).toBeInTheDocument(); - expect(wrapper.find(".dcType-field Select").prop("value")).toEqual({ - label: "Image", - value: "IMAGE" - }); + expect( + wrapper.getByRole("combobox", { + name: /stored object type image/i + }) + ).toBeInTheDocument(); // Set new values: - wrapper.find(".dcType-field Select").prop("onChange")({ - value: "MOVING_IMAGE" - }); - + userEvent.click( + wrapper.getByRole("combobox", { + name: /stored object type image/i + }) + ); + await new Promise(setImmediate); + userEvent.click(wrapper.getByRole("option", { name: /moving image/i })); await new Promise(setImmediate); - wrapper.update(); - wrapper.find("form").simulate("submit"); + // Submit form + fireEvent.submit(wrapper.container.querySelector("form")!); await new Promise(setImmediate); - wrapper.update(); + // Test response expect(mockSave).lastCalledWith( [ {