diff --git a/jest.config.js b/jest.config.js index 26589ae088d..c26ba9655e9 100644 --- a/jest.config.js +++ b/jest.config.js @@ -8,7 +8,7 @@ module.exports = { rootDir: "./", setupFilesAfterEnv: [ "jest-extended/all", - "@testing-library/jest-native/extend-expect", + "@testing-library/react-native/extend-expect", "./src/setupJest.tsx", "./node_modules/react-native-gesture-handler/jestSetup.js", ], diff --git a/package.json b/package.json index 7080342613e..ae166e8c95a 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ }, "dependencies": { "@artsy/cohesion": "4.222.0", - "@artsy/palette-mobile": "14.0.13", + "@artsy/palette-mobile": "14.0.14", "@artsy/to-title-case": "1.1.0", "@braze/react-native-sdk": "11.0.0", "@expo/react-native-action-sheet": "4.0.1", @@ -226,9 +226,8 @@ "@react-native/eslint-config": "0.76.5", "@react-native/metro-config": "0.76.5", "@react-native/typescript-config": "0.76.5", - "@testing-library/jest-native": "5.4.3", "@testing-library/react-hooks": "8.0.1", - "@testing-library/react-native": "12.4.5", + "@testing-library/react-native": "12.9.0", "@types/argparse": "2.0.10", "@types/autosuggest-highlight": "3.2.3", "@types/chalk": "2.2.0", diff --git a/src/app/Components/ArtworkFilter/Filters/AdditionalGeneIDsOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/AdditionalGeneIDsOptions.tests.tsx index 9928d9bf34a..7613f32516e 100644 --- a/src/app/Components/ArtworkFilter/Filters/AdditionalGeneIDsOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/AdditionalGeneIDsOptions.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent, within } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { Aggregations, FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -60,21 +60,19 @@ describe("AdditionalGeneIDsOptions Screen", () => { } it("renders the options", () => { - const { getByText } = renderWithWrappers( - - ) - - expect(getByText("Prints")).toBeTruthy() - expect(getByText("Design")).toBeTruthy() - expect(getByText("Sculpture")).toBeTruthy() - expect(getByText("Work on Paper")).toBeTruthy() - expect(getByText("Painting")).toBeTruthy() - expect(getByText("Drawing")).toBeTruthy() - expect(getByText("Jewelry")).toBeTruthy() - expect(getByText("Photography")).toBeTruthy() + renderWithWrappers() + + expect(screen.getByText("Prints")).toBeTruthy() + expect(screen.getByText("Design")).toBeTruthy() + expect(screen.getByText("Sculpture")).toBeTruthy() + expect(screen.getByText("Work on Paper")).toBeTruthy() + expect(screen.getByText("Painting")).toBeTruthy() + expect(screen.getByText("Drawing")).toBeTruthy() + expect(screen.getByText("Jewelry")).toBeTruthy() + expect(screen.getByText("Photography")).toBeTruthy() }) - it.skip("displays the number of the selected filters on the filter modal screen", () => { + it("displays the number of the selected filters on the filter modal screen", () => { const injectedState: ArtworkFiltersState = { selectedFilters: [ { @@ -96,9 +94,9 @@ describe("AdditionalGeneIDsOptions Screen", () => { sizeMetric: "cm", } - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(within(getByText("Medium")).getByText("• 2")).toBeTruthy() + expect(screen.getByText("Medium • 2")).toBeOnTheScreen() }) it("toggles selected filters 'ON' and unselected filters 'OFF", () => { @@ -123,14 +121,17 @@ describe("AdditionalGeneIDsOptions Screen", () => { sizeMetric: "cm", } - const { getAllByA11yState } = renderWithWrappers( - - ) - const options = getAllByA11yState({ checked: true }) + renderWithWrappers() + const option1 = screen.getByText("Prints") + const option2 = screen.getByText("Sculpture") - expect(options).toHaveLength(2) - expect(options[0]).toHaveTextContent("Prints") - expect(options[1]).toHaveTextContent("Sculpture") + expect(option1).toBeOnTheScreen() + expect(option2).toBeOnTheScreen() + + const checkbox = screen.getAllByTestId("multi-select-option-checkbox") + + expect(checkbox[0]).toHaveProp("selected", true) + expect(checkbox[2]).toHaveProp("selected", true) }) it("clears all when clear button is tapped", () => { @@ -155,14 +156,12 @@ describe("AdditionalGeneIDsOptions Screen", () => { sizeMetric: "cm", } - const { getByText, queryAllByA11yState } = renderWithWrappers( - - ) + renderWithWrappers() - expect(queryAllByA11yState({ checked: true })).toHaveLength(2) + expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(2) - fireEvent.press(getByText("Clear")) + fireEvent.press(screen.getByText("Clear")) - expect(queryAllByA11yState({ checked: true })).toHaveLength(0) + expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(0) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/ArtistIDsArtworksOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/ArtistIDsArtworksOptions.tests.tsx index 4a5758dc365..fc6f025b430 100644 --- a/src/app/Components/ArtworkFilter/Filters/ArtistIDsArtworksOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/ArtistIDsArtworksOptions.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { Aggregations, FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -111,12 +111,13 @@ describe("Artist options screen", () => { sizeMetric: "cm", } - const { getAllByA11yState } = renderWithWrappers( - - ) - const selectedOptions = getAllByA11yState({ checked: true }) + renderWithWrappers() - expect(selectedOptions[0]).toHaveTextContent("Artist 2") + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options[2]).toHaveTextContent("Artist 2") + expect(checkboxes[2]).toHaveProp("selected", true) }) it("allows multiple artist options to be selected", () => { @@ -135,20 +136,20 @@ describe("Artist options screen", () => { sizeMetric: "cm", } - const { getByText, getAllByA11yState } = renderWithWrappers( - - ) + renderWithWrappers() - fireEvent.press(getByText("All Artists I Follow")) - fireEvent.press(getByText("Artist 1")) - fireEvent.press(getByText("Artist 2")) + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") - const selectedOptions = getAllByA11yState({ checked: true }) + fireEvent.press(screen.getByText("All Artists I Follow")) + fireEvent.press(screen.getByText("Artist 1")) + fireEvent.press(screen.getByText("Artist 2")) - expect(selectedOptions).toHaveLength(3) - expect(selectedOptions[0]).toHaveTextContent("All Artists I Follow") - expect(selectedOptions[1]).toHaveTextContent("Artist 1") - expect(selectedOptions[2]).toHaveTextContent("Artist 2") + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", true) + expect(checkboxes[2]).toHaveProp("selected", true) + expect(checkboxes[3]).toHaveProp("selected", false) + expect(checkboxes[4]).toHaveProp("selected", false) + expect(checkboxes[5]).toHaveProp("selected", false) }) it("deselects artist option if it is already selected and then tapped again", () => { @@ -173,17 +174,17 @@ describe("Artist options screen", () => { sizeMetric: "cm", } - const { queryByA11yState, getAllByA11yState, getByText } = renderWithWrappers( - - ) + renderWithWrappers() + + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") - const selectedOptionsBeforeTapping = getAllByA11yState({ checked: true }) - expect(selectedOptionsBeforeTapping).toHaveLength(1) - expect(selectedOptionsBeforeTapping[0]).toHaveTextContent("Artist 2") + expect(options[2]).toHaveTextContent("Artist 2") + expect(checkboxes[2]).toHaveProp("selected", true) - fireEvent.press(getByText("Artist 2")) + fireEvent.press(screen.getByText("Artist 2")) - expect(queryByA11yState({ checked: true })).toBeFalsy() + expect(checkboxes[2]).toHaveProp("selected", false) }) }) @@ -204,9 +205,9 @@ describe("Artist options screen", () => { sizeMetric: "cm", } - const { queryByText } = renderWithWrappers() + renderWithWrappers() - expect(queryByText("All Artists I Follow")).toBeTruthy() + expect(screen.getByText("All Artists I Follow")).toBeOnTheScreen() }) it("should be visible if counts has followedArtists ", () => { @@ -225,9 +226,9 @@ describe("Artist options screen", () => { sizeMetric: "cm", } - const { queryByText } = renderWithWrappers() + renderWithWrappers() - expect(queryByText("All Artists I Follow")).toBeTruthy() + expect(screen.getByText("All Artists I Follow")).toBeOnTheScreen() }) it("should be hidden if there are no followed artists in the aggregation", () => { @@ -259,9 +260,9 @@ describe("Artist options screen", () => { sizeMetric: "cm", } - const { queryByText } = renderWithWrappers() + renderWithWrappers() - expect(queryByText("All Artists I Follow")).toBeFalsy() + expect(screen.queryByText("All Artists I Follow")).not.toBeOnTheScreen() }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/ArtistIDsSaleArtworksOptionsScreen.tests.tsx b/src/app/Components/ArtworkFilter/Filters/ArtistIDsSaleArtworksOptionsScreen.tests.tsx index 56b969192f3..813d5d0a4f8 100644 --- a/src/app/Components/ArtworkFilter/Filters/ArtistIDsSaleArtworksOptionsScreen.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/ArtistIDsSaleArtworksOptionsScreen.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { Aggregations, FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -25,25 +25,26 @@ describe("ArtistIDsSaleArtworksOptionsScreen", () => { } it("should render all artist options", () => { - const { getByText } = renderWithWrappers() - - expect(getByText("Artists You Follow")).toBeTruthy() - expect(getByText("All Artists")).toBeTruthy() - expect(getByText(/Artist A/)).toBeTruthy() - expect(getByText(/Artist B/)).toBeTruthy() - expect(getByText(/Artist C/)).toBeTruthy() - expect(getByText(/Artist D/)).toBeTruthy() + renderWithWrappers() + + expect(screen.getByText("Artists You Follow")).toBeOnTheScreen() + expect(screen.getByText("All Artists")).toBeOnTheScreen() + expect(screen.getByText(/Artist A/)).toBeOnTheScreen() + expect(screen.getByText(/Artist B/)).toBeOnTheScreen() + expect(screen.getByText(/Artist C/)).toBeOnTheScreen() + expect(screen.getByText(/Artist D/)).toBeOnTheScreen() }) it("should render artist options sorted by name", () => { - const { getAllByA11yState } = renderWithWrappers() - const options = getAllByA11yState({ checked: false }) + renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") expect(options[0]).toHaveTextContent("Artists You Follow") - expect(options[1]).toHaveTextContent("Artist A") - expect(options[2]).toHaveTextContent("Artist B") - expect(options[3]).toHaveTextContent("Artist C") - expect(options[4]).toHaveTextContent("Artist D") + expect(options[1]).toHaveTextContent("All Artists") + expect(options[2]).toHaveTextContent(/Artist A/) + expect(options[3]).toHaveTextContent(/Artist B/) + expect(options[4]).toHaveTextContent(/Artist C/) + expect(options[5]).toHaveTextContent(/Artist D/) }) it("should render the followed artists count", () => { @@ -55,41 +56,44 @@ describe("ArtistIDsSaleArtworksOptionsScreen", () => { }, } - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Artists You Follow (2)")).toBeTruthy() + expect(screen.getByText("Artists You Follow (2)")).toBeTruthy() }) describe("Selecting", () => { it("when the single option is selected", () => { - const { getAllByA11yState, getByText } = renderWithWrappers() + renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") - const prevSelectedOptions = getAllByA11yState({ checked: true }) - expect(prevSelectedOptions).toHaveLength(1) - expect(prevSelectedOptions[0]).toHaveTextContent("All Artists") + expect(options[1]).toHaveTextContent("All Artists") + expect(screen.getByTestId("selected-checkmark-All Artists")).toBeOnTheScreen() - fireEvent.press(getByText(/Artist B/)) + expect(screen.queryByTestId("selected-checkmark-Artist B")).not.toBeOnTheScreen() - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(1) - expect(selectedOptions[0]).toHaveTextContent(/Artist B/) + fireEvent.press(screen.getByText(/Artist B/)) + + expect(screen.getByTestId("selected-checkmark-Artist B")).toBeOnTheScreen() + expect(screen.queryByTestId("selected-checkmark-All Artists")).not.toBeOnTheScreen() }) it("when multiple options are selected", () => { - const { getByText, getAllByA11yState } = renderWithWrappers() + renderWithWrappers() + + const options = screen.getAllByTestId("multi-select-option-button") - const prevSelectedOptions = getAllByA11yState({ checked: true }) - expect(prevSelectedOptions).toHaveLength(1) - expect(prevSelectedOptions[0]).toHaveTextContent("All Artists") + expect(options[1]).toHaveTextContent("All Artists") + expect(screen.getByTestId("selected-checkmark-All Artists")).toBeOnTheScreen() - fireEvent.press(getByText(/Artist A/)) - fireEvent.press(getByText(/Artist B/)) + expect(screen.queryByTestId("selected-checkmark-Artist A")).not.toBeOnTheScreen() + expect(screen.queryByTestId("selected-checkmark-Artist B")).not.toBeOnTheScreen() - const selectedOptions = getAllByA11yState({ checked: true }) + fireEvent.press(screen.getByText(/Artist A/)) + fireEvent.press(screen.getByText(/Artist B/)) - expect(selectedOptions).toHaveLength(2) - expect(selectedOptions[0]).toHaveTextContent(/Artist A/) - expect(selectedOptions[1]).toHaveTextContent(/Artist B/) + expect(screen.getByTestId("selected-checkmark-Artist A")).toBeOnTheScreen() + expect(screen.getByTestId("selected-checkmark-Artist B")).toBeOnTheScreen() + expect(screen.queryByTestId("selected-checkmark-All Artists")).not.toBeOnTheScreen() }) }) @@ -106,19 +110,18 @@ describe("ArtistIDsSaleArtworksOptionsScreen", () => { ], } - const { getAllByA11yState, getByText } = renderWithWrappers( - - ) + renderWithWrappers() + + const options = screen.getAllByTestId("multi-select-option-button") - const prevSelectedOptions = getAllByA11yState({ checked: true }) - expect(prevSelectedOptions).toHaveLength(1) - expect(prevSelectedOptions[0]).toHaveTextContent("Artist B") + expect(options[3]).toHaveTextContent(/Artist B/) + expect(screen.getByTestId("selected-checkmark-Artist B")).toBeOnTheScreen() + expect(screen.queryByTestId("selected-checkmark-All Artists")).not.toBeOnTheScreen() - fireEvent.press(getByText(/Artist B/)) + fireEvent.press(screen.getByText(/Artist B/)) - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(1) - expect(selectedOptions[0]).toHaveTextContent("All Artists") + expect(screen.queryByTestId("selected-checkmark-Artist B")).not.toBeOnTheScreen() + expect(screen.getByTestId("selected-checkmark-All Artists")).toBeOnTheScreen() }) it("when multiple options are selected", () => { @@ -133,20 +136,16 @@ describe("ArtistIDsSaleArtworksOptionsScreen", () => { ], } - const { getAllByA11yState, getByText } = renderWithWrappers( - - ) + renderWithWrappers() - const prevSelectedOptions = getAllByA11yState({ checked: true }) - expect(prevSelectedOptions).toHaveLength(2) - expect(prevSelectedOptions[0]).toHaveTextContent("Artist A") - expect(prevSelectedOptions[1]).toHaveTextContent("Artist B") + expect(screen.getByTestId("selected-checkmark-Artist A")).toBeOnTheScreen() + expect(screen.getByTestId("selected-checkmark-Artist B")).toBeOnTheScreen() + expect(screen.queryByTestId("selected-checkmark-All Artists")).not.toBeOnTheScreen() - fireEvent.press(getByText(/Artist B/)) + fireEvent.press(screen.getByText(/Artist B/)) - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(1) - expect(selectedOptions[0]).toHaveTextContent("Artist A") + expect(screen.queryByTestId("selected-checkmark-Artist B")).not.toBeOnTheScreen() + expect(screen.getByTestId("selected-checkmark-Artist A")).toBeOnTheScreen() }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/ArtistSeriesOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/ArtistSeriesOptions.tests.tsx index dba0c9936ae..c737fc70e30 100644 --- a/src/app/Components/ArtworkFilter/Filters/ArtistSeriesOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/ArtistSeriesOptions.tests.tsx @@ -1,3 +1,4 @@ +import { fireEvent, screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -70,12 +71,10 @@ describe(ArtistSeriesOptionsScreen, () => { describe("no filters are selected", () => { it("renders all options present in the aggregation", () => { - const { getByText } = renderWithWrappers( - - ) + renderWithWrappers() - expect(getByText("Portraits")).toBeTruthy() - expect(getByText("Flowers")).toBeTruthy() + expect(screen.getByText("Portraits")).toBeOnTheScreen() + expect(screen.getByText("Flowers")).toBeOnTheScreen() }) }) @@ -92,21 +91,37 @@ describe(ArtistSeriesOptionsScreen, () => { } it("displays the number of the selected filters on the filter modal screen", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Artist Series • 2")).toBeTruthy() + expect(screen.getByText("Artist Series • 2")).toBeOnTheScreen() }) it("toggles selected filters 'ON' and unselected filters 'OFF", async () => { - const { getAllByA11yState } = renderWithWrappers( - - ) + renderWithWrappers() - const options = getAllByA11yState({ checked: true }) + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") - expect(options).toHaveLength(2) + expect(options).toHaveLength(3) expect(options[0]).toHaveTextContent("Portraits") expect(options[1]).toHaveTextContent("Flowers") + expect(options[2]).toHaveTextContent("Posters") + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", true) + expect(checkboxes[2]).toHaveProp("selected", false) + + fireEvent.press(options[0]) + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", true) + expect(checkboxes[2]).toHaveProp("selected", false) + + fireEvent.press(options[2]) + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", true) + expect(checkboxes[2]).toHaveProp("selected", true) }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/AttributionClassOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/AttributionClassOptions.tests.tsx index 9949ba12a37..71c4d041f88 100644 --- a/src/app/Components/ArtworkFilter/Filters/AttributionClassOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/AttributionClassOptions.tests.tsx @@ -1,3 +1,4 @@ +import { screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -28,12 +29,12 @@ describe("AttributionClassOptions Screen", () => { } it("renders the options", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Unique")).toBeTruthy() - expect(getByText("Limited Edition")).toBeTruthy() - expect(getByText("Open Edition")).toBeTruthy() - expect(getByText("Unknown Edition")).toBeTruthy() + expect(screen.getByText("Unique")).toBeOnTheScreen() + expect(screen.getByText("Limited Edition")).toBeOnTheScreen() + expect(screen.getByText("Open Edition")).toBeOnTheScreen() + expect(screen.getByText("Unknown Edition")).toBeOnTheScreen() }) it("displays all the selected filters on the filter modal screen", () => { @@ -58,9 +59,9 @@ describe("AttributionClassOptions Screen", () => { sizeMetric: "cm", } - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Rarity • 2")).toBeTruthy() + expect(screen.getByText("Rarity • 2")).toBeTruthy() }) it("toggles selected filters 'ON' and unselected filters 'OFF", () => { @@ -85,13 +86,20 @@ describe("AttributionClassOptions Screen", () => { sizeMetric: "cm", } - const { getAllByA11yState } = renderWithWrappers( - - ) - const options = getAllByA11yState({ checked: true }) + renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") - expect(options).toHaveLength(2) + expect(options).toHaveLength(4) expect(options[0]).toHaveTextContent("Unique") - expect(options[1]).toHaveTextContent("Unknown Edition") + expect(options[3]).toHaveTextContent("Unknown Edition") + + const checkbox = screen.getAllByTestId("multi-select-option-checkbox") + expect(checkbox).toHaveLength(4) + + expect(checkbox[0]).toHaveProp("selected", true) + expect(checkbox[3]).toHaveProp("selected", true) + + expect(checkbox[1]).toHaveProp("selected", false) + expect(checkbox[2]).toHaveProp("selected", false) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/AuctionHouseOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/AuctionHouseOptions.tests.tsx index e508c40de74..74f03bf4b5c 100644 --- a/src/app/Components/ArtworkFilter/Filters/AuctionHouseOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/AuctionHouseOptions.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { ArtworkFiltersState, ArtworkFiltersStoreProvider, @@ -42,31 +42,52 @@ describe("AuctionHouse options screen", () => { } it("selects only the option that is selected", () => { - const { getByText, getAllByA11yState } = renderWithWrappers( + renderWithWrappers( ) - fireEvent.press(getByText("Sotheby's")) + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(1) - expect(selectedOptions[0]).toHaveTextContent("Sotheby's") - expect(getByText("Clear")).toBeTruthy() + expect(options[0]).toHaveTextContent("Sotheby's") + expect(checkboxes[0]).toHaveProp("selected", false) + + fireEvent.press(screen.getByText("Sotheby's")) + + expect(checkboxes[0]).toHaveProp("selected", true) + + expect(screen.getByText("Clear")).toBeTruthy() }) it("allows multiple auction houses to be selected", () => { - const { getByText, getAllByA11yState } = renderWithWrappers( + renderWithWrappers( ) - fireEvent.press(getByText("Sotheby's")) - fireEvent.press(getByText("Christie's")) - fireEvent.press(getByText("Bonhams")) - fireEvent.press(getByText("Artsy Auction")) - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(4) - expect(selectedOptions[0]).toHaveTextContent("Sotheby's") - expect(selectedOptions[1]).toHaveTextContent("Christie's") - expect(selectedOptions[2]).toHaveTextContent("Bonhams") - expect(selectedOptions[3]).toHaveTextContent("Artsy Auction") + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(5) + + expect(options[0]).toHaveTextContent("Sotheby's") + expect(options[1]).toHaveTextContent("Christie's") + expect(options[3]).toHaveTextContent("Bonhams") + expect(options[4]).toHaveTextContent("Artsy Auction") + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + expect(checkboxes[4]).toHaveProp("selected", false) + + fireEvent.press(screen.getByText("Sotheby's")) + fireEvent.press(screen.getByText("Christie's")) + fireEvent.press(screen.getByText("Bonhams")) + fireEvent.press(screen.getByText("Artsy Auction")) + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", true) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", true) + expect(checkboxes[4]).toHaveProp("selected", true) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/AvailabilityOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/AvailabilityOptions.tests.tsx index 3b50ae26218..894cec8fbd1 100644 --- a/src/app/Components/ArtworkFilter/Filters/AvailabilityOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/AvailabilityOptions.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -50,11 +50,9 @@ describe(AvailabilityOptionsScreen, () => { describe("no filters are selected", () => { it("renders all options", () => { - const { getByText } = renderWithWrappers( - - ) + renderWithWrappers() - expect(getByText("Only works for sale")).toBeTruthy() + expect(screen.getByText("Only works for sale")).toBeTruthy() }) }) @@ -71,27 +69,29 @@ describe(AvailabilityOptionsScreen, () => { } it("displays the number of the selected filters on the filter modal screen", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Availability • 1")).toBeTruthy() + expect(screen.getByText("Availability • 1")).toBeTruthy() }) it("toggles selected filters 'ON' and unselected filters 'OFF", async () => { - const { getAllByA11yState } = renderWithWrappers( - - ) + renderWithWrappers() - let options = getAllByA11yState({ checked: true }) + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") expect(options).toHaveLength(1) expect(options[0]).toHaveTextContent("Only works for sale") + expect(checkboxes[0]).toHaveProp("selected", true) + fireEvent.press(options[0]) - options = getAllByA11yState({ checked: false }) + expect(checkboxes[0]).toHaveProp("selected", false) - expect(options).toHaveLength(1) - expect(options[0]).toHaveTextContent("Only works for sale") + fireEvent.press(options[0]) + + expect(checkboxes[0]).toHaveProp("selected", true) }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/CategoriesOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/CategoriesOptions.tests.tsx index 0a4abc16af6..82edaffb5a0 100644 --- a/src/app/Components/ArtworkFilter/Filters/CategoriesOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/CategoriesOptions.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { ArtworkFiltersState, ArtworkFiltersStoreProvider, @@ -42,27 +42,45 @@ describe("Categories options screen", () => { } it("selects only the option that is selected", () => { - const { getByText, getAllByA11yState } = renderWithWrappers( - - ) - fireEvent.press(getByText("Painting")) + renderWithWrappers() + + fireEvent.press(screen.getByText("Painting")) + + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(6) + expect(checkboxes).toHaveLength(6) + + expect(options[0]).toHaveTextContent("Painting") + + expect(checkboxes[0]).toHaveProp("selected", true) - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(1) - expect(selectedOptions[0]).toHaveTextContent("Painting") - expect(getByText("Clear")).toBeTruthy() + expect(checkboxes[1]).toHaveProp("selected", false) + + expect(screen.getByText("Clear")).toBeTruthy() }) it("allows multiple categories to be selected", () => { - const { getByText, getAllByA11yState } = renderWithWrappers( - - ) - fireEvent.press(getByText("Painting")) - fireEvent.press(getByText("Work on Paper")) + renderWithWrappers() + fireEvent.press(screen.getByText("Painting")) + fireEvent.press(screen.getByText("Work on Paper")) + + const options = screen.getAllByTestId("multi-select-option-button") + + expect(options[0]).toHaveTextContent("Painting") + expect(options[1]).toHaveTextContent("Work on Paper") + + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(6) + expect(checkboxes).toHaveLength(6) - const selectedOptions = getAllByA11yState({ checked: true }) - expect(selectedOptions).toHaveLength(2) - expect(selectedOptions[0]).toHaveTextContent("Painting") - expect(selectedOptions[1]).toHaveTextContent("Work on Paper") + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", true) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + expect(checkboxes[4]).toHaveProp("selected", false) + expect(checkboxes[5]).toHaveProp("selected", false) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/GalleriesAndInstitutionsOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/GalleriesAndInstitutionsOptions.tests.tsx index e929d895504..d82131edbec 100644 --- a/src/app/Components/ArtworkFilter/Filters/GalleriesAndInstitutionsOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/GalleriesAndInstitutionsOptions.tests.tsx @@ -1,3 +1,4 @@ +import { screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -65,13 +66,11 @@ describe("Galleries and Institutions Options Screen", () => { describe("before any filters are selected", () => { it("renders all options present in the aggregation", () => { - const { getByText } = renderWithWrappers( - - ) + renderWithWrappers() - expect(getByText("Musée Picasso Paris")) - expect(getByText("Gagosian")) - expect(getByText("Tate")) + expect(screen.getByText("Musée Picasso Paris")).toBeOnTheScreen() + expect(screen.getByText("Gagosian")).toBeOnTheScreen() + expect(screen.getByText("Tate")).toBeOnTheScreen() }) }) @@ -88,19 +87,16 @@ describe("Galleries and Institutions Options Screen", () => { } it("displays the number of the selected filters on the filter modal screen", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Galleries & Institutions • 1")).toBeTruthy() + expect(screen.getByText("Galleries & Institutions • 1")).toBeOnTheScreen() }) it("toggles selected filters 'ON' and unselected filters 'OFF", async () => { - const { getAllByA11yState } = renderWithWrappers( - - ) + renderWithWrappers() - const options = getAllByA11yState({ checked: true }) + const options = screen.getAllByTestId("multi-select-option-button") - expect(options).toHaveLength(1) expect(options[0]).toHaveTextContent("Musée Picasso Paris") }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/LocationCitiesOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/LocationCitiesOptions.tests.tsx index b3b91f73c55..9fba45807a6 100644 --- a/src/app/Components/ArtworkFilter/Filters/LocationCitiesOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/LocationCitiesOptions.tests.tsx @@ -1,3 +1,4 @@ +import { screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -65,13 +66,11 @@ describe(LocationCitiesOptionsScreen, () => { describe("no filters are selected", () => { it("renders all options present in the aggregation", () => { - const { getByText } = renderWithWrappers( - - ) + renderWithWrappers() - expect(getByText("Paris, France")).toBeTruthy() - expect(getByText("London, United Kingdom")).toBeTruthy() - expect(getByText("Milan, Italy")).toBeTruthy() + expect(screen.getByText("Paris, France")).toBeOnTheScreen() + expect(screen.getByText("London, United Kingdom")).toBeOnTheScreen() + expect(screen.getByText("Milan, Italy")).toBeOnTheScreen() }) }) @@ -88,21 +87,20 @@ describe(LocationCitiesOptionsScreen, () => { } it("displays the number of the selected filters on the filter modal screen", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Artwork Location • 2")).toBeTruthy() + expect(screen.getByText("Artwork Location • 2")).toBeOnTheScreen() }) it("toggles selected filters 'ON' and unselected filters 'OFF", async () => { - const { getAllByA11yState } = renderWithWrappers( - - ) + renderWithWrappers() - const options = getAllByA11yState({ checked: true }) + const options = screen.getAllByTestId("multi-select-option-button") - expect(options).toHaveLength(2) + expect(options).toHaveLength(3) expect(options[0]).toHaveTextContent("Paris, France") - expect(options[1]).toHaveTextContent("Milan, Italy") + expect(options[1]).toHaveTextContent("London, United Kingdom") + expect(options[2]).toHaveTextContent("Milan, Italy") }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/MaterialsTermsOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/MaterialsTermsOptions.tests.tsx index 9a789bc91c2..8ec1439e77c 100644 --- a/src/app/Components/ArtworkFilter/Filters/MaterialsTermsOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/MaterialsTermsOptions.tests.tsx @@ -1,3 +1,4 @@ +import { screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -65,13 +66,11 @@ describe("Materials Options Screen", () => { describe("before any filters are selected", () => { it("renders all options present in the aggregation", () => { - const { getByText } = renderWithWrappers( - - ) + renderWithWrappers() - expect(getByText("Acrylic")).toBeTruthy() - expect(getByText("Canvas")).toBeTruthy() - expect(getByText("Metal")).toBeTruthy() + expect(screen.getByText("Acrylic")).toBeOnTheScreen() + expect(screen.getByText("Canvas")).toBeOnTheScreen() + expect(screen.getByText("Metal")).toBeOnTheScreen() }) }) @@ -88,19 +87,25 @@ describe("Materials Options Screen", () => { } it("displays the number of the selected filters on the filter modal screen", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Material • 1")).toBeTruthy() + expect(screen.getByText("Material • 1")).toBeTruthy() }) it("toggles selected filters 'ON' and unselected filters 'OFF", async () => { - const { getAllByA11yState } = renderWithWrappers( - - ) - const options = getAllByA11yState({ checked: true }) + renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(3) - expect(options).toHaveLength(1) expect(options[0]).toHaveTextContent("Acrylic") + expect(options[1]).toHaveTextContent("Canvas") + expect(options[2]).toHaveTextContent("Metal") + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/MultiSelectCheckOption.tsx b/src/app/Components/ArtworkFilter/Filters/MultiSelectCheckOption.tsx index 57d782e6ce2..39f819c0335 100644 --- a/src/app/Components/ArtworkFilter/Filters/MultiSelectCheckOption.tsx +++ b/src/app/Components/ArtworkFilter/Filters/MultiSelectCheckOption.tsx @@ -81,7 +81,10 @@ export const CheckMarkOptionListItem = ({ selected: boolean hasExtraLeftPadding?: boolean }) => ( - onSelect(item, !item.paramValue)}> + onSelect(item, !item.paramValue)} + testID="multi-select-option-button" + > {!!selected && ( - + )} diff --git a/src/app/Components/ArtworkFilter/Filters/MultiSelectOptionItem.tsx b/src/app/Components/ArtworkFilter/Filters/MultiSelectOptionItem.tsx index 366c1f3ee5e..f2e4a371ba5 100644 --- a/src/app/Components/ArtworkFilter/Filters/MultiSelectOptionItem.tsx +++ b/src/app/Components/ArtworkFilter/Filters/MultiSelectOptionItem.tsx @@ -46,7 +46,7 @@ export const MultiSelectOptionItem: React.FC = memo( - + diff --git a/src/app/Components/ArtworkFilter/Filters/SizesOptionsScreen.tests.tsx b/src/app/Components/ArtworkFilter/Filters/SizesOptionsScreen.tests.tsx index 20fc20a5963..6432e812ccb 100644 --- a/src/app/Components/ArtworkFilter/Filters/SizesOptionsScreen.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/SizesOptionsScreen.tests.tsx @@ -107,7 +107,22 @@ describe("SizesOptionsScreen", () => { const filters = getFilters(screen.getByTestId("debug")) const sizesFilter = getSizesFilterOption(filters) - expect(screen.getAllByA11yState({ checked: true })[0]).toHaveTextContent("Small (under 16in)") + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(4) + expect(checkboxes).toHaveLength(4) + + expect(options[0]).toHaveTextContent("Small (under 16in)") + expect(options[1]).toHaveTextContent("Medium (16in – 40in)") + expect(options[2]).toHaveTextContent("Large (over 40in)") + expect(options[3]).toHaveTextContent("Custom Size") + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + expect(sizesFilter).toEqual({ paramName: "sizes", displayText: "Small (under 16in)", @@ -124,8 +139,22 @@ describe("SizesOptionsScreen", () => { const filters = getFilters(screen.getByTestId("debug")) const sizesFilter = getSizesFilterOption(filters) - expect(screen.getAllByA11yState({ checked: true })[0]).toHaveTextContent("Small (under 16in)") - expect(screen.getAllByA11yState({ checked: true })[1]).toHaveTextContent("Large (over 40in)") + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(4) + expect(checkboxes).toHaveLength(4) + + expect(options[0]).toHaveTextContent("Small (under 16in)") + expect(options[1]).toHaveTextContent("Medium (16in – 40in)") + expect(options[2]).toHaveTextContent("Large (over 40in)") + expect(options[3]).toHaveTextContent("Custom Size") + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", true) + expect(checkboxes[3]).toHaveProp("selected", false) + expect(sizesFilter).toEqual({ paramName: "sizes", displayText: "Small (under 16in), Large (over 40in)", @@ -136,9 +165,31 @@ describe("SizesOptionsScreen", () => { it("correctly select/unselect the same option", () => { renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(4) + expect(checkboxes).toHaveLength(4) + + expect(options).toHaveLength(4) + expect(checkboxes).toHaveLength(4) + + expect(options[0]).toHaveTextContent("Small (under 16in)") + expect(options[1]).toHaveTextContent("Medium (16in – 40in)") + expect(options[2]).toHaveTextContent("Large (over 40in)") + expect(options[3]).toHaveTextContent("Custom Size") + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + fireEvent.press(screen.getByText("Small (under 16in)")) // ensures that the checked elements are the selected filter and one radio button - expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(2) + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) fireEvent.press(screen.getByText("Small (under 16in)")) @@ -146,7 +197,11 @@ describe("SizesOptionsScreen", () => { const sizesFilter = getSizesFilterOption(filters) // ensures that the checked element is one radio button - expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1) + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + expect(sizesFilter).toEqual({ paramName: "sizes", displayText: "All", @@ -164,9 +219,9 @@ describe("SizesOptionsScreen", () => { expect(screen.getByLabelText("in")).toBeTruthy() expect(screen.getByLabelText("in")).toHaveProp("accessibilityState", { checked: true }) - expect(screen.queryByText("Small (under 16in)")).toBeTruthy() - expect(screen.queryByText("Medium (16in – 40in)")).toBeTruthy() - expect(screen.queryByText("Large (over 40in)")).toBeTruthy() + expect(screen.getByText("Small (under 16in)")).toBeTruthy() + expect(screen.getByText("Medium (16in – 40in)")).toBeTruthy() + expect(screen.getByText("Large (over 40in)")).toBeTruthy() // makes sure that "cm" appears in the screen only once for the radio button expect(screen.queryAllByText("cm")).toHaveLength(1) @@ -180,9 +235,9 @@ describe("SizesOptionsScreen", () => { expect(screen.queryByText("Medium (16in – 40in)")).toBeFalsy() expect(screen.queryByText("Large (over 40in)")).toBeFalsy() - expect(screen.queryByText("Small (under 40cm)")).toBeTruthy() - expect(screen.queryByText("Medium (40cm – 100cm)")).toBeTruthy() - expect(screen.queryByText("Large (over 100cm)")).toBeTruthy() + expect(screen.getByText("Small (under 40cm)")).toBeTruthy() + expect(screen.getByText("Medium (40cm – 100cm)")).toBeTruthy() + expect(screen.getByText("Large (over 100cm)")).toBeTruthy() // makes sure that "in" appears in the screen only once for the radio button expect(screen.queryAllByText("in")).toHaveLength(1) @@ -195,7 +250,12 @@ describe("SizesOptionsScreen", () => { fireEvent.changeText(screen.getByLabelText("Minimum Width Input"), "5") - expect(screen.getAllByA11yState({ checked: true })[0]).toHaveTextContent("Custom Size") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", true) }) it("should clear custom values in filters when the custom size option is unselected", () => { @@ -232,11 +292,17 @@ describe("SizesOptionsScreen", () => { renderWithWrappers() fireEvent.changeText(screen.getByLabelText("Minimum Width Input"), "5") - expect(screen.queryAllByA11yState({ checked: true })[0]).toBeTruthy() + + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options[3]).toHaveTextContent("Custom Size") + + expect(checkboxes[3]).toHaveProp("selected", true) fireEvent.changeText(screen.getByLabelText("Minimum Width Input"), "") // ensures that the checked element is one radio button - expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1) + expect(checkboxes[3]).toHaveProp("selected", false) }) it("should keep custom inputs filled in if a predefined value is selected", () => { @@ -253,14 +319,37 @@ describe("SizesOptionsScreen", () => { it("should clear the previously selected option if a custom value is entered", () => { renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options[0]).toHaveTextContent("Small (under 16in)") + expect(options[1]).toHaveTextContent("Medium (16in – 40in)") + expect(options[2]).toHaveTextContent("Large (over 40in)") + expect(options[3]).toHaveTextContent("Custom Size") + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + fireEvent.press(screen.getByText("Small (under 16in)")) + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + fireEvent.changeText(screen.getByLabelText("Minimum Width Input"), "5") + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", true) + const filters = getFilters(screen.getByTestId("debug")) const sizesFilter = getSizesFilterOption(filters) const widthFilter = getWidthFilterOption(filters) - expect(screen.getAllByA11yState({ checked: true })).toHaveLength(2) expect(sizesFilter).toEqual({ paramName: "sizes", displayText: "All", @@ -378,21 +467,44 @@ describe("SizesOptionsScreen", () => { it('should clear selected predefined values if "Clear" button is pressed', () => { renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + fireEvent.press(screen.getByText("Small (under 16in)")) + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) + fireEvent.press(screen.getByText("Clear")) + expect(options[0]).toHaveTextContent("Small (under 16in)") + // only one of unit radio buttons is selected - expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1) + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) }) it('should clear selected custom values if "Clear" button is pressed', () => { renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options[3]).toHaveTextContent("Custom Size") + expect(checkboxes[3]).toHaveProp("selected", false) + fireEvent.changeText(screen.getByLabelText("Minimum Width Input"), "5") + + expect(checkboxes[3]).toHaveProp("selected", true) + fireEvent.press(screen.getByText("Clear")) // only one of unit radio buttons is selected - expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1) + expect(checkboxes[3]).toHaveProp("selected", false) }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/TimePeriodOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/TimePeriodOptions.tests.tsx index e31d93aac84..b2fe90153f5 100644 --- a/src/app/Components/ArtworkFilter/Filters/TimePeriodOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/TimePeriodOptions.tests.tsx @@ -1,3 +1,4 @@ +import { fireEvent, screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersStoreProvider, @@ -65,19 +66,17 @@ describe("TimePeriodOptions Screen", () => { describe("before any filters are selected", () => { it("should render name without count label", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Time Period")).toBeTruthy() + expect(screen.getByText("Time Period")).toBeTruthy() }) it("renders all options present in the aggregation", () => { - const { getByText } = renderWithWrappers( - - ) + renderWithWrappers() - expect(getByText("2020–Today")).toBeTruthy() - expect(getByText("2010–2019")).toBeTruthy() - expect(getByText("In the Year 2000!")).toBeTruthy() + expect(screen.getByText("2020–Today")).toBeTruthy() + expect(screen.getByText("2010–2019")).toBeTruthy() + expect(screen.getByText("In the Year 2000!")).toBeTruthy() }) }) @@ -94,19 +93,36 @@ describe("TimePeriodOptions Screen", () => { } it("displays the number of the selected filters on the filter modal screen", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Time Period • 1")).toBeTruthy() + expect(screen.getByText("Time Period • 1")).toBeTruthy() }) it("toggles selected filters 'ON' and unselected filters 'OFF", async () => { - const { getAllByA11yState } = renderWithWrappers( - - ) - const options = getAllByA11yState({ checked: true }) + renderWithWrappers() + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") - expect(options).toHaveLength(1) + expect(options).toHaveLength(3) expect(options[0]).toHaveTextContent("2020–Today") + expect(options[1]).toHaveTextContent("2010–2019") + expect(options[2]).toHaveTextContent("In the Year 2000!") + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + + fireEvent.press(options[0]) + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + + fireEvent.press(options[2]) + + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", true) }) }) }) diff --git a/src/app/Components/ArtworkFilter/Filters/WaysToBuyOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/WaysToBuyOptions.tests.tsx index 0d64bee2521..150cd0e7688 100644 --- a/src/app/Components/ArtworkFilter/Filters/WaysToBuyOptions.tests.tsx +++ b/src/app/Components/ArtworkFilter/Filters/WaysToBuyOptions.tests.tsx @@ -1,4 +1,4 @@ -import { within } from "@testing-library/react-native" +import { screen } from "@testing-library/react-native" import { FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers" import { ArtworkFiltersState, @@ -42,15 +42,15 @@ describe("Ways to Buy Options Screen", () => { ) it("renders the correct ways to buy options", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Purchase")).toBeTruthy() - expect(getByText("Make Offer")).toBeTruthy() - expect(getByText("Bid")).toBeTruthy() - expect(getByText("Contact Gallery")).toBeTruthy() + expect(screen.getByText("Purchase")).toBeTruthy() + expect(screen.getByText("Make Offer")).toBeTruthy() + expect(screen.getByText("Bid")).toBeTruthy() + expect(screen.getByText("Contact Gallery")).toBeTruthy() }) - it.skip("does not display the default text when no filter selected on the filter modal screen", () => { + it("does not display the default text when no filter selected on the filter modal screen", () => { const injectedState: ArtworkFiltersState = { selectedFilters: [], appliedFilters: [], @@ -66,12 +66,12 @@ describe("Ways to Buy Options Screen", () => { sizeMetric: "cm", } - const { getByText } = renderWithWrappers() + renderWithWrappers() - expect(getByText("Ways to Buy")).toBeTruthy() + expect(screen.getByText("Ways to Buy")).toBeOnTheScreen() }) - it.skip("displays the number of the selected filters on the filter modal screen", () => { + it("displays the number of the selected filters on the filter modal screen", () => { const injectedState: ArtworkFiltersState = { selectedFilters: [ { @@ -103,8 +103,9 @@ describe("Ways to Buy Options Screen", () => { sizeMetric: "cm", } - const { getByText } = renderWithWrappers() - expect(within(getByText("Ways to Buy")).getByText("• 3")).toBeTruthy() + renderWithWrappers() + + expect(screen.getByText("Ways to Buy • 3")).toBeOnTheScreen() }) it("toggles selected filters 'ON' and unselected filters 'OFF", () => { @@ -129,13 +130,23 @@ describe("Ways to Buy Options Screen", () => { sizeMetric: "cm", } - const { getAllByA11yState } = renderWithWrappers( - - ) - const options = getAllByA11yState({ checked: true }) + renderWithWrappers() + + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(4) + expect(checkboxes).toHaveLength(4) - expect(options).toHaveLength(1) expect(options[0]).toHaveTextContent("Purchase") + expect(options[1]).toHaveTextContent("Make Offer") + expect(options[2]).toHaveTextContent("Bid") + expect(options[3]).toHaveTextContent("Contact Gallery") + + expect(checkboxes[0]).toHaveProp("selected", true) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", false) }) it("it toggles applied filters 'ON' and unapplied filters 'OFF", () => { @@ -166,12 +177,22 @@ describe("Ways to Buy Options Screen", () => { sizeMetric: "cm", } - const { getAllByA11yState } = renderWithWrappers( - - ) - const options = getAllByA11yState({ checked: true }) + renderWithWrappers() + + const options = screen.getAllByTestId("multi-select-option-button") + const checkboxes = screen.getAllByTestId("multi-select-option-checkbox") + + expect(options).toHaveLength(4) + expect(checkboxes).toHaveLength(4) + + expect(options[0]).toHaveTextContent("Purchase") + expect(options[1]).toHaveTextContent("Make Offer") + expect(options[2]).toHaveTextContent("Bid") + expect(options[3]).toHaveTextContent("Contact Gallery") - expect(options).toHaveLength(1) - expect(options[0]).toHaveTextContent("Contact Gallery") + expect(checkboxes[0]).toHaveProp("selected", false) + expect(checkboxes[1]).toHaveProp("selected", false) + expect(checkboxes[2]).toHaveProp("selected", false) + expect(checkboxes[3]).toHaveProp("selected", true) }) }) diff --git a/src/app/Components/ArtworkLists/ArtworkListsContext.tests.tsx b/src/app/Components/ArtworkLists/ArtworkListsContext.tests.tsx index 760e07ef11f..4f72c1d736f 100644 --- a/src/app/Components/ArtworkLists/ArtworkListsContext.tests.tsx +++ b/src/app/Components/ArtworkLists/ArtworkListsContext.tests.tsx @@ -1,4 +1,4 @@ -import { fireEvent, screen, waitFor } from "@testing-library/react-native" +import { fireEvent, screen } from "@testing-library/react-native" import { ArtworkListsContextTestQuery } from "__generated__/ArtworkListsContextTestQuery.graphql" import { ArtworkListsProvider } from "app/Components/ArtworkLists/ArtworkListsContext" import { ArtworkEntity } from "app/Components/ArtworkLists/types" @@ -40,21 +40,12 @@ describe("ArtworkListsProvider", () => { expect(screen.getByText("Select where you’d like to save this artwork:")).toBeOnTheScreen() }) - // TODO: Fix this test, it's failing because footerComponent (in SelectArtworkListsForArtworkView) is not being rendered - it.skip("should display `Done` button", () => { - renderWithRelay() - - expect(screen.getByText("Done")).toBeOnTheScreen() - }) - it("should display artwork lists", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - ) + mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - expect(screen.getByText("Saved Artworks")).toBeOnTheScreen() + await screen.findByText("Saved Artworks") expect(screen.getByText("Custom Artwork List 1")).toBeOnTheScreen() expect(screen.getByText("Custom Artwork List 2")).toBeOnTheScreen() }) @@ -71,75 +62,96 @@ describe("ArtworkListsProvider", () => { it("all artwork lists should be unselected", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - ) + mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) + + await screen.findByText("Saved Artworks") + expect(screen.getByText("Custom Artwork List 1")).toBeOnTheScreen() + expect(screen.getByText("Custom Artwork List 2")).toBeOnTheScreen() + + const options = screen.getAllByTestId("artworkListItem") + const unchecked = screen.queryAllByTestId("artworkListItemUnselectedIcon") - const selected = screen.queryAllByA11yState({ selected: true }) - expect(selected).toHaveLength(0) + expect(options).toHaveLength(3) + expect(unchecked).toHaveLength(3) }) it("recently selected artwork lists should be preselected by default", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: { ...savedArtworksArtworkList, isSavedArtwork: true }, - customArtworkLists: { - edges: [ - { node: { ...customArtworkListOne, isSavedArtwork: true } }, - { node: customArtworkListTwo }, - ], - }, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: { ...savedArtworksArtworkList, isSavedArtwork: true }, + customArtworkLists: { + edges: [ + { node: { ...customArtworkListOne, isSavedArtwork: true } }, + { node: customArtworkListTwo }, + ], + }, + }), + }) - const selected = screen.queryAllByA11yState({ selected: true }) - expect(selected).toHaveLength(2) + await screen.findByText("Saved Artworks") + expect(screen.getByText("Custom Artwork List 1")).toBeOnTheScreen() + expect(screen.getByText("Custom Artwork List 2")).toBeOnTheScreen() + + const options = screen.getAllByTestId("artworkListItem") + const unchecked = screen.queryAllByTestId("artworkListItemUnselectedIcon") + const checked = screen.queryAllByTestId("artworkListItemSelectedIcon") + + expect(options).toHaveLength(3) + expect(checked).toHaveLength(2) + expect(unchecked).toHaveLength(1) }) it("add selected state when artwork list is pressed", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - ) + mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) + + await screen.findByText("Saved Artworks") + expect(screen.getByText("Custom Artwork List 1")).toBeOnTheScreen() + expect(screen.getByText("Custom Artwork List 2")).toBeOnTheScreen() - const selectedBefore = screen.queryAllByA11yState({ selected: true }) - expect(selectedBefore).toHaveLength(0) + const options = screen.getAllByTestId("artworkListItem") + const unchecked = screen.queryAllByTestId("artworkListItemUnselectedIcon") + const checked = screen.queryAllByTestId("artworkListItemSelectedIcon") + + expect(options).toHaveLength(3) + expect(checked).toHaveLength(0) + expect(unchecked).toHaveLength(3) + expect(screen.queryByTestId("artworkListItemSelectedIcon")).not.toBeOnTheScreen() fireEvent.press(screen.getByText("Custom Artwork List 2")) - const selectedAfter = screen.queryAllByA11yState({ selected: true }) - expect(selectedAfter).toHaveLength(1) + expect(screen.getByTestId("artworkListItemSelectedIcon")).toBeOnTheScreen() }) it("unselect recently selected artwork lists", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: { ...savedArtworksArtworkList, isSavedArtwork: true }, - customArtworkLists, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: { ...savedArtworksArtworkList, isSavedArtwork: true }, + customArtworkLists, + }), + }) + + await screen.findByText("Saved Artworks") // Select some custom artwork list fireEvent.press(screen.getByText("Custom Artwork List 2")) - const selectedBefore = screen.queryAllByA11yState({ selected: true }) - expect(selectedBefore).toHaveLength(2) + const options = screen.getAllByTestId("artworkListItem") + const unchecked = screen.queryAllByTestId("artworkListItemUnselectedIcon") + const checked = screen.queryAllByTestId("artworkListItemSelectedIcon") + + expect(options).toHaveLength(3) + expect(checked).toHaveLength(2) + expect(unchecked).toHaveLength(1) - // Unselect all - fireEvent.press(screen.getByText("Saved Artworks")) fireEvent.press(screen.getByText("Custom Artwork List 2")) - const selectedAfter = screen.queryAllByA11yState({ selected: true }) - expect(selectedAfter).toHaveLength(0) + expect(screen.getAllByTestId("artworkListItemSelectedIcon")).toHaveLength(1) }) }) @@ -147,28 +159,24 @@ describe("ArtworkListsProvider", () => { it("should render `x Artwork` when one artwork was saved", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: { ...savedArtworksArtworkList, artworksCount: 1 }, - customArtworkLists: { edges: [] }, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: { ...savedArtworksArtworkList, artworksCount: 1 }, + customArtworkLists: { edges: [] }, + }), + }) - expect(screen.getByText("1 Artwork")).toBeOnTheScreen() + await screen.findByText("1 Artwork") }) it("should render `x Artworks` when multiple artwork were saved", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ savedArtworksArtworkList, customArtworkLists: { edges: [] } }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ savedArtworksArtworkList, customArtworkLists: { edges: [] } }), + }) - expect(screen.getByText("5 Artworks")).toBeOnTheScreen() + await screen.findByText("5 Artworks") }) }) @@ -177,11 +185,9 @@ describe("ArtworkListsProvider", () => { it("default state", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), + }) expect(screen.getByText("0 lists selected")).toBeOnTheScreen() }) @@ -189,12 +195,11 @@ describe("ArtworkListsProvider", () => { it("selected one artwork list", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), + }) + await screen.findByText("Saved Artworks") fireEvent.press(screen.getByText("Saved Artworks")) expect(screen.getByText("1 list selected")).toBeOnTheScreen() @@ -203,12 +208,11 @@ describe("ArtworkListsProvider", () => { it("selected multiple artwork lists", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), + }) + await screen.findByText("Saved Artworks") fireEvent.press(screen.getByText("Saved Artworks")) fireEvent.press(screen.getByText("Custom Artwork List 1")) @@ -218,12 +222,11 @@ describe("ArtworkListsProvider", () => { it("selected multiple artwork lists (select and unselect action)", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ savedArtworksArtworkList, customArtworkLists, artworkLists }), + }) + await screen.findByText("Saved Artworks") fireEvent.press(screen.getByText("Saved Artworks")) fireEvent.press(screen.getByText("Custom Artwork List 1")) expect(screen.getByText("2 lists selected")).toBeOnTheScreen() @@ -237,32 +240,29 @@ describe("ArtworkListsProvider", () => { it("default state", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: preselectedSavedArtworksArtworkList, - customArtworkLists: preselectedCustomArtworkLists, - artworkLists: preselectedArtworkLists, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: preselectedSavedArtworksArtworkList, + customArtworkLists: preselectedCustomArtworkLists, + artworkLists: preselectedArtworkLists, + }), + }) - expect(screen.getByText("3 lists selected")).toBeOnTheScreen() + await screen.findByText("3 lists selected") }) it("unselect preselected artwork lists", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: preselectedSavedArtworksArtworkList, - customArtworkLists: preselectedCustomArtworkLists, - artworkLists: preselectedArtworkLists, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: preselectedSavedArtworksArtworkList, + customArtworkLists: preselectedCustomArtworkLists, + artworkLists: preselectedArtworkLists, + }), + }) + await screen.findByText("Saved Artworks") fireEvent.press(screen.getByText("Saved Artworks")) fireEvent.press(screen.getByText("Custom Artwork List 1")) @@ -272,16 +272,15 @@ describe("ArtworkListsProvider", () => { it("unselect preselected and select again the same artwork lists", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: preselectedSavedArtworksArtworkList, - customArtworkLists: preselectedCustomArtworkLists, - artworkLists: preselectedArtworkLists, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: preselectedSavedArtworksArtworkList, + customArtworkLists: preselectedCustomArtworkLists, + artworkLists: preselectedArtworkLists, + }), + }) + await screen.findByText("Saved Artworks") fireEvent.press(screen.getByText("Saved Artworks")) fireEvent.press(screen.getByText("Custom Artwork List 1")) expect(screen.getByText("1 list selected")).toBeOnTheScreen() @@ -294,15 +293,15 @@ describe("ArtworkListsProvider", () => { it("unselect preselected and select other artwork lists", async () => { const { mockResolveLastOperation } = renderWithRelay() - await waitFor(() => - mockResolveLastOperation({ - Me: () => ({ - savedArtworksArtworkList: preselectedSavedArtworksArtworkList, - customArtworkLists: preselectedCustomArtworkLists, - artworkLists: preselectedArtworkLists, - }), - }) - ) + mockResolveLastOperation({ + Me: () => ({ + savedArtworksArtworkList: preselectedSavedArtworksArtworkList, + customArtworkLists: preselectedCustomArtworkLists, + artworkLists: preselectedArtworkLists, + }), + }) + + await screen.findByText("Saved Artworks") fireEvent.press(screen.getByText("Saved Artworks")) fireEvent.press(screen.getByText("Custom Artwork List 1")) @@ -313,19 +312,6 @@ describe("ArtworkListsProvider", () => { }) }) }) - - // TODO: Fix this test, it's failing because footerComponent (in SelectArtworkListsForArtworkView) is not being rendered - describe.skip("Done button", () => { - it("enabled by default", async () => { - const { mockResolveLastOperation } = renderWithRelay() - - await waitFor(() => - mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - ) - - expect(screen.getByText("Done")).toBeEnabled() - }) - }) }) describe("Update artwork list offers settings", () => { @@ -350,9 +336,10 @@ describe("ArtworkListsProvider", () => { it("should display the artwork lists", async () => { const { mockResolveLastOperation } = renderOfferSettings() - await waitFor(() => - mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - ) + mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) + + await screen.findByText("Offer Settings") + await screen.findByText("Saved Artworks") expect(screen.getByText("Offer Settings")).toBeOnTheScreen() @@ -367,9 +354,9 @@ describe("ArtworkListsProvider", () => { it("all artwork lists should be unshared", async () => { const { mockResolveLastOperation } = renderOfferSettings() - await waitFor(() => - mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) - ) + mockResolveLastOperation({ Me: () => ({ savedArtworksArtworkList, customArtworkLists }) }) + + await screen.findByText("Saved Artworks") expect(screen.getAllByLabelText("EyeClosedIcon").length).toEqual(1) @@ -381,9 +368,7 @@ describe("ArtworkListsProvider", () => { fireEvent(savedArtworks, "valueChange", true) fireEvent(custom1, "valueChange", true) - await waitFor(() => { - expect(screen.getAllByLabelText("EyeClosedIcon").length).toEqual(3) - }) + expect(screen.getAllByLabelText("EyeClosedIcon").length).toEqual(3) // Share again fireEvent(savedArtworks, "valueChange", false) diff --git a/src/app/Components/ArtworkLists/components/ArtworkListItem.tsx b/src/app/Components/ArtworkLists/components/ArtworkListItem.tsx index 6e0db682276..76df39aeee9 100644 --- a/src/app/Components/ArtworkLists/components/ArtworkListItem.tsx +++ b/src/app/Components/ArtworkLists/components/ArtworkListItem.tsx @@ -61,7 +61,7 @@ const Item: FC = (props) => { } return ( - + }> diff --git a/src/app/Components/ArtworkLists/views/SelectArtworkListsForArtworkView/components/ArtworkListItemSelectedIcon.tsx b/src/app/Components/ArtworkLists/views/SelectArtworkListsForArtworkView/components/ArtworkListItemSelectedIcon.tsx index ec43f8c99b1..b472eca20fb 100644 --- a/src/app/Components/ArtworkLists/views/SelectArtworkListsForArtworkView/components/ArtworkListItemSelectedIcon.tsx +++ b/src/app/Components/ArtworkLists/views/SelectArtworkListsForArtworkView/components/ArtworkListItemSelectedIcon.tsx @@ -10,6 +10,7 @@ export const ArtworkListItemSelectedIcon = ({ selected }: ArtworkListItemSelecte if (selected) { return ( { renderWithWrappers() expect(screen.getByTestId("disclaimer")).toHaveTextContent( - "I agree to Artsy's and Christie's General Terms and Conditions of Sale. I understand that all bids are binding and may not be retracted." + /I agree to Artsy's and Christie's General Terms and Conditions of Sale. I understand that all bids are binding and may not be retracted./ ) }) @@ -107,7 +107,7 @@ describe("ConfirmBid", () => { renderWithWrappers() expect(screen.getByTestId("disclaimer")).toHaveTextContent( - "I agree to Artsy's and Christie's General Terms and Conditions of Sale. I understand that all bids are binding and may not be retracted." + /I agree to Artsy's and Christie's General Terms and Conditions of Sale. I understand that all bids are binding and may not be retracted./ ) }) @@ -188,7 +188,7 @@ describe("ConfirmBid", () => { renderWithWrappers() expect(screen.queryByTestId("disclaimer-checkbox")).toBeNull() expect(screen.queryByTestId("payment-info-row")).toBeNull() - expect(screen.getByTestId("disclaimer-text")).toHaveTextContent("I agree to") + expect(screen.getByTestId("disclaimer-text")).toHaveTextContent(/I agree to/) }) it("shows a checkbox but no payment info if the user is not registered and has cc on file", () => { @@ -247,11 +247,11 @@ describe("ConfirmBid", () => { const conditionsOfSaleLink = await view.root.findByType(LinkText) const conditionsOfSaleCheckbox = await view.root.findByType(Checkbox) - fireEvent.press(yourMaxBidRow) + yourMaxBidRow.props.onPress() expect(navigator.push).not.toHaveBeenCalled() - fireEvent.press(creditCardRow) + creditCardRow.props.onPress() expect(navigator.push).not.toHaveBeenCalled() @@ -381,7 +381,7 @@ describe("ConfirmBid", () => { // eslint-disable-next-line testing-library/no-node-access expect((await selectMaxBidRow.findAllByType(Text))[1].props.children).toEqual("$45,000") - fireEvent.press(selectMaxBidRow) + selectMaxBidRow.props.onPress() const editScreen = await fakeNavigator.nextStep().root.findByType(SelectMaxBid) @@ -648,7 +648,7 @@ describe("ConfirmBid", () => { const view = mountConfirmBidComponent(initialPropsForUnqualifiedUser) const creditcardRow = (await view.root.findAllByType(TouchableWithoutFeedback))[1] - fireEvent.press(creditcardRow) + creditcardRow.props.onPress() expect(nextStep?.component).toEqual(CreditCardForm) }) @@ -675,13 +675,16 @@ describe("ConfirmBid", () => { await screen.findByText( "There was a problem processing your information. Check your payment details and try again." ) - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", true) // press the dismiss modal button fireEvent.press(screen.getByText("Ok")) // error modal is dismissed - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", false) + expect( + screen.queryByText( + "There was a problem processing your information. Check your payment details and try again." + ) + ).not.toBeOnTheScreen() }) it("shows the error screen with the correct error message on a createCreditCard mutation failure", async () => { @@ -701,13 +704,12 @@ describe("ConfirmBid", () => { fireEvent.press(screen.getByTestId("bid-button")) await screen.findByText("Your card's security code is incorrect.") - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", true) // press the dismiss modal button fireEvent.press(screen.getByText("Ok")) // error modal is dismissed - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", false) + expect(screen.queryByText("Your card's security code is incorrect.")).not.toBeOnTheScreen() }) it("shows the error screen with the default error message if there are unhandled errors from the createCreditCard mutation", async () => { @@ -758,13 +760,16 @@ describe("ConfirmBid", () => { await screen.findByText( "There was a problem processing your information. Check your payment details and try again." ) - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", true) // press the dismiss modal button fireEvent.press(screen.getByText("Ok")) // error modal is dismissed - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", false) + expect( + screen.queryByText( + "There was a problem processing your information. Check your payment details and try again." + ) + ).not.toBeOnTheScreen() }) it("shows the generic error screen on a createCreditCard mutation network failure", async () => { diff --git a/src/app/Components/Bidding/Screens/Registration.tests.tsx b/src/app/Components/Bidding/Screens/Registration.tests.tsx index 294ad8e8aea..1945bc69178 100644 --- a/src/app/Components/Bidding/Screens/Registration.tests.tsx +++ b/src/app/Components/Bidding/Screens/Registration.tests.tsx @@ -252,11 +252,11 @@ describe("when pressing register button", () => { const conditionsOfSaleLink = await root.findByType(LinkText) const conditionsOfSaleCheckbox = await root.findByType(Checkbox) - fireEvent(yourMaxBidRow, "onPress") + yourMaxBidRow.props.onPress() expect(navigator.push).not.toHaveBeenCalled() - fireEvent(creditCardRow, "onPress") + creditCardRow.props.onPress() expect(navigator.push).not.toHaveBeenCalled() @@ -381,13 +381,12 @@ describe("when pressing register button", () => { // Wait for the error modal to be displayed await screen.findByText("Your card's security code is incorrect.") - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", true) // press the dismiss modal button fireEvent.press(screen.getByText("Ok")) // error modal is dismissed - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", false) + expect(screen.queryByText("Your card's security code is incorrect.")).not.toBeOnTheScreen() }) it("displays the default error message if there are unhandled errors from the createCreditCard mutation", async () => { @@ -423,13 +422,16 @@ describe("when pressing register button", () => { await screen.findByText( "There was a problem processing your information. Check your payment details and try again." ) - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", true) // press the dismiss modal button fireEvent.press(screen.getByText("Ok")) // error modal is dismissed - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", false) + expect( + screen.queryByText( + "There was a problem processing your information. Check your payment details and try again." + ) + ).not.toBeOnTheScreen() }) it("displays an error message on a createCreditCard mutation network failure", async () => { @@ -461,13 +463,16 @@ describe("when pressing register button", () => { await screen.findByText( "There was a problem processing your information. Check your payment details and try again." ) - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", true) // press the dismiss modal button fireEvent.press(screen.getByText("Ok")) // error modal is dismissed - expect(screen.UNSAFE_getByType(Modal)).toHaveProp("visible", false) + expect( + screen.queryByText( + "There was a problem processing your information. Check your payment details and try again." + ) + ).not.toBeOnTheScreen() }) it("displays an error message on a bidderMutation failure", async () => { diff --git a/src/app/Components/FancyModal/FancyModalHeader.tsx b/src/app/Components/FancyModal/FancyModalHeader.tsx index ce1800ccc74..c215853fe4b 100644 --- a/src/app/Components/FancyModal/FancyModalHeader.tsx +++ b/src/app/Components/FancyModal/FancyModalHeader.tsx @@ -94,6 +94,7 @@ export const FancyModalHeader: React.FC = ({ color={rightButtonDisabled ? "black30" : "black100"} testID={rightButtonTestId} disabled={rightButtonDisabled} + aria-disabled={rightButtonDisabled} > {rightButtonText} diff --git a/src/app/Scenes/Article/Components/ArticleRelatedArticlesRail.tsx b/src/app/Scenes/Article/Components/ArticleRelatedArticlesRail.tsx index f5f9c92856d..c6e9e820ed6 100644 --- a/src/app/Scenes/Article/Components/ArticleRelatedArticlesRail.tsx +++ b/src/app/Scenes/Article/Components/ArticleRelatedArticlesRail.tsx @@ -23,6 +23,7 @@ export const ArticleRelatedArticlesRail: React.FC = ({ return ( { it("renders", async () => { renderWithRelay() - await waitFor(() => { - expect(screen.UNSAFE_getByType(ArticleSectionImageCollectionImage)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleSectionImageCollectionCaption)).toBeOnTheScreen() - }) + expect(screen.UNSAFE_getByType(ArticleSectionImageCollectionImage)).toBeTruthy() + expect(screen.UNSAFE_getByType(ArticleSectionImageCollectionCaption)).toBeTruthy() }) }) diff --git a/src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionImageCollectionImage.tests.tsx b/src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionImageCollectionImage.tests.tsx index 9830d03484d..b898ee6e040 100644 --- a/src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionImageCollectionImage.tests.tsx +++ b/src/app/Scenes/Article/Components/Sections/ArticleSectionImageCollection/__tests__/ArticleSectionImageCollectionImage.tests.tsx @@ -48,7 +48,7 @@ describe("ArticleSectionImageCollectionImage", () => { renderWithRelay() await waitFor(() => { - expect(screen.UNSAFE_getByType(Image)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(Image)).toBeTruthy() }) }) @@ -60,7 +60,7 @@ describe("ArticleSectionImageCollectionImage", () => { }) await waitFor(() => { - expect(screen.UNSAFE_getByType(Image)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(Image)).toBeTruthy() }) }) }) diff --git a/src/app/Scenes/Article/Components/__tests__/ArticleBody.tests.tsx b/src/app/Scenes/Article/Components/__tests__/ArticleBody.tests.tsx index 6ef23faaa33..721d09f15f6 100644 --- a/src/app/Scenes/Article/Components/__tests__/ArticleBody.tests.tsx +++ b/src/app/Scenes/Article/Components/__tests__/ArticleBody.tests.tsx @@ -21,8 +21,8 @@ describe("ArticleBody", () => { it("renders", () => { renderWithRelay() - expect(screen.UNSAFE_getByType(ArticleHero)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleSection)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleSectionImageCollection)).toBeOnTheScreen() + expect(screen.UNSAFE_getByType(ArticleHero)).toBeTruthy() + expect(screen.UNSAFE_getByType(ArticleSection)).toBeTruthy() + expect(screen.UNSAFE_getByType(ArticleSectionImageCollection)).toBeTruthy() }) }) diff --git a/src/app/Scenes/Article/Components/__tests__/ArticleHero.tests.tsx b/src/app/Scenes/Article/Components/__tests__/ArticleHero.tests.tsx index de3d5371f51..323e43a5106 100644 --- a/src/app/Scenes/Article/Components/__tests__/ArticleHero.tests.tsx +++ b/src/app/Scenes/Article/Components/__tests__/ArticleHero.tests.tsx @@ -59,7 +59,7 @@ describe("ArticleHero", () => { }), }) - expect(screen.UNSAFE_getByType(Image)).toBeOnTheScreen() + expect(screen.UNSAFE_getByType(Image)).toBeTruthy() }) it("does not render hero image if not available", () => { diff --git a/src/app/Scenes/Article/Components/__tests__/ArticleShareButton.tests.tsx b/src/app/Scenes/Article/Components/__tests__/ArticleShareButton.tests.tsx index 475913c906f..776f45d80ed 100644 --- a/src/app/Scenes/Article/Components/__tests__/ArticleShareButton.tests.tsx +++ b/src/app/Scenes/Article/Components/__tests__/ArticleShareButton.tests.tsx @@ -1,10 +1,8 @@ -import { ShareIcon } from "@artsy/palette-mobile" import { fireEvent, screen } from "@testing-library/react-native" import { ArticleShareButton } from "app/Scenes/Article/Components/ArticleShareButton" import { setupTestWrapper } from "app/utils/tests/setupTestWrapper" import RNShare from "react-native-share" import { graphql } from "react-relay" -import { act } from "react-test-renderer" import { useTracking } from "react-tracking" // Mock react-native-share module @@ -40,11 +38,9 @@ describe("ArticleShareButton", () => { }), }) - expect(screen.UNSAFE_getByType(ShareIcon)).toBeOnTheScreen() + expect(screen.getByTestId("shareButton")).toBeOnTheScreen() - act(() => { - fireEvent.press(screen.getByTestId("shareButton")) - }) + fireEvent.press(screen.getByTestId("shareButton")) expect(RNShare.open).toHaveBeenCalledWith({ title: "Example Article", diff --git a/src/app/Scenes/Article/Components/__tests__/ArticleWebViewScreen.tests.tsx b/src/app/Scenes/Article/Components/__tests__/ArticleWebViewScreen.tests.tsx index acf39ef3087..78ed89254c1 100644 --- a/src/app/Scenes/Article/Components/__tests__/ArticleWebViewScreen.tests.tsx +++ b/src/app/Scenes/Article/Components/__tests__/ArticleWebViewScreen.tests.tsx @@ -23,6 +23,6 @@ describe("ArticleWebViewScreen", () => { }), }) - expect(screen.UNSAFE_getByProps({ url: "/article/foo" })).toBeOnTheScreen() + expect(screen.UNSAFE_getByProps({ url: "/article/foo" })).toBeTruthy() }) }) diff --git a/src/app/Scenes/Article/__tests__/ArticleScreen.tests.tsx b/src/app/Scenes/Article/__tests__/ArticleScreen.tests.tsx index 6971182047d..66bc9ab4c20 100644 --- a/src/app/Scenes/Article/__tests__/ArticleScreen.tests.tsx +++ b/src/app/Scenes/Article/__tests__/ArticleScreen.tests.tsx @@ -1,9 +1,5 @@ -import { Screen } from "@artsy/palette-mobile" import { screen, waitForElementToBeRemoved } from "@testing-library/react-native" import { ArticleScreen } from "app/Scenes/Article/ArticleScreen" -import { ArticleBody } from "app/Scenes/Article/Components/ArticleBody" -import { ArticleRelatedArticlesRail } from "app/Scenes/Article/Components/ArticleRelatedArticlesRail" -import { ArticleWebViewScreen } from "app/Scenes/Article/Components/ArticleWebViewScreen" import { setupTestWrapper } from "app/utils/tests/setupTestWrapper" describe("ArticleScreen", () => { @@ -24,12 +20,10 @@ describe("ArticleScreen", () => { }), }) - await waitForElementToBeRemoved(() => screen.getByTestId("ArticleScreenPlaceholder")) + await waitForElementToBeRemoved(() => screen.queryByTestId("ArticleScreenPlaceholder")) - expect(screen.queryByText("Article Title")).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(Screen.AnimatedHeader)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleBody)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleRelatedArticlesRail)).toBeOnTheScreen() + expect(screen.getByText("Article Title")).toBeOnTheScreen() + expect(screen.getByTestId("ArticleRelatedArticlesRail")).toBeOnTheScreen() }) it("renders featured article", async () => { @@ -42,12 +36,10 @@ describe("ArticleScreen", () => { }), }) - await waitForElementToBeRemoved(() => screen.getByTestId("ArticleScreenPlaceholder")) + await waitForElementToBeRemoved(() => screen.queryByTestId("ArticleScreenPlaceholder")) - expect(screen.queryByText("Article Title")).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(Screen.FloatingHeader)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleBody)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(ArticleRelatedArticlesRail)).toBeOnTheScreen() + expect(screen.getByText("Article Title")).toBeOnTheScreen() + expect(screen.getByTestId("ArticleRelatedArticlesRail")).toBeOnTheScreen() }) it("redirects to webview if not standard or feature", async () => { @@ -61,8 +53,8 @@ describe("ArticleScreen", () => { }), }) - await waitForElementToBeRemoved(() => screen.getByTestId("ArticleScreenPlaceholder")) + await waitForElementToBeRemoved(() => screen.queryByTestId("ArticleScreenPlaceholder")) - expect(screen.UNSAFE_getByType(ArticleWebViewScreen)).toBeOnTheScreen() + expect(screen.getByTestId("ArticleWebViewScreen")).toBeOnTheScreen() }) }) diff --git a/src/app/Scenes/Artwork/Artwork.tests.tsx b/src/app/Scenes/Artwork/Artwork.tests.tsx index 7308cf7a714..b46bd73bc91 100644 --- a/src/app/Scenes/Artwork/Artwork.tests.tsx +++ b/src/app/Scenes/Artwork/Artwork.tests.tsx @@ -81,11 +81,11 @@ describe("Artwork", () => { resolveMostRecentRelayOperation(environment) await flushPromiseQueue() - expect(screen.UNSAFE_queryByType(ArtworkScreenHeader)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ImageCarousel)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ArtworkDetails)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ArtworkStickyBottomContent)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ActivityIndicator)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(ArtworkScreenHeader)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ImageCarousel)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ArtworkDetails)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ArtworkStickyBottomContent)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ActivityIndicator)).toBeTruthy() }) it("renders all content after the full query has been resolved", async () => { @@ -116,11 +116,11 @@ describe("Artwork", () => { await flushPromiseQueue() - expect(screen.UNSAFE_queryByType(ArtworkScreenHeader)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ImageCarousel)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ArtworkDetails)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(ArtworkScreenHeader)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ImageCarousel)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ArtworkDetails)).toBeTruthy() expect(screen.UNSAFE_queryByType(ActivityIndicator)).toBeNull() - expect(screen.UNSAFE_queryByType(ArtworkHistory)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(ArtworkHistory)).toBeTruthy() }) describe("artist series components", () => { @@ -159,8 +159,8 @@ describe("Artwork", () => { await flushPromiseQueue() - expect(screen.UNSAFE_queryByType(ArtistSeriesMoreSeries)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ArtworksInSeriesRail)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(ArtistSeriesMoreSeries)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ArtworksInSeriesRail)).toBeTruthy() }) it("does not render when there are no artist series to show", async () => { @@ -1026,15 +1026,15 @@ describe("Artwork", () => { expect(screen.UNSAFE_queryByType(ArtworkConsignments)).toBeNull() // Displayed in unlisted private artworks - expect(screen.UNSAFE_queryByType(ArtworkScreenHeader)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ImageCarousel)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ArtworkDetails)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(ShippingAndTaxesFragmentContainer)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(PrivateArtworkExclusiveAccess)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(PartnerCard)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(PrivateArtworkMetadata)).toBeOnTheScreen() - - expect(screen.getByText("Read More")).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(ArtworkScreenHeader)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ImageCarousel)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ArtworkDetails)).toBeTruthy() + expect(screen.UNSAFE_queryByType(ShippingAndTaxesFragmentContainer)).toBeTruthy() + expect(screen.UNSAFE_queryByType(PrivateArtworkExclusiveAccess)).toBeTruthy() + expect(screen.UNSAFE_queryByType(PartnerCard)).toBeTruthy() + expect(screen.UNSAFE_queryByType(PrivateArtworkMetadata)).toBeTruthy() + + expect(screen.getByText("Read More")).toBeTruthy() }) it("tracks partner name taps", async () => { diff --git a/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tests.tsx b/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tests.tsx index 3e4dca6af83..d0ebf698e13 100644 --- a/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tests.tsx +++ b/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tests.tsx @@ -1,6 +1,5 @@ import { screen } from "@testing-library/react-native" import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" -import { Image } from "react-native" import { ImageWithLoadingState } from "./ImageWithLoadingState" const imageURL = "https://image.com/image.jpg" @@ -20,6 +19,7 @@ describe("ImageWithLoadingState", () => { const images = screen.getAllByLabelText("Image with Loading State") expect(images).toHaveLength(1) - expect(await images[0].findByType(Image)).toHaveProp("src", imageURL) + + expect(screen.getByTestId("ImageWithLoadingState")).toHaveProp("src", imageURL) }) }) diff --git a/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tsx b/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tsx index 9fbea8da945..2b69962f573 100644 --- a/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tsx +++ b/src/app/Scenes/Artwork/Components/ImageCarousel/ImageWithLoadingState.tsx @@ -40,6 +40,7 @@ export const ImageWithLoadingState = React.forwardRef diff --git a/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx b/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx index cc1903f9607..e774a54e226 100644 --- a/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx +++ b/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx @@ -1,94 +1,12 @@ -import { act, fireEvent } from "@testing-library/react-native" -import { CollectionArtistSeriesRailTestsQuery } from "__generated__/CollectionArtistSeriesRailTestsQuery.graphql" +import { fireEvent, screen } from "@testing-library/react-native" import { CardRailCard } from "app/Components/CardRail/CardRailCard" import { GenericArtistSeriesRail } from "app/Components/GenericArtistSeriesRail" -import { - CollectionArtistSeriesRail, - CollectionArtistSeriesRailContainer, -} from "app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail" +import { CollectionArtistSeriesRail } from "app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail" import { navigate } from "app/system/navigation/navigate" import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff" -import { renderWithWrappers, renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers" -import { graphql, QueryRenderer } from "react-relay" -import { createMockEnvironment } from "relay-test-utils" +import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" describe("Artist Series Rail", () => { - let env: ReturnType - - const TestRenderer = () => ( - - environment={env} - query={graphql` - query CollectionArtistSeriesRailTestsQuery @raw_response_type { - marketingCollection(slug: "photography") { - ...CollectionArtistSeriesRail_collection - linkedCollections { - groupType - ...CollectionArtistSeriesRail_collectionGroup - } - } - } - `} - variables={{}} - render={({ props, error }) => { - if (props?.marketingCollection) { - return ( - - ) - } else if (error) { - console.log(error) - } - }} - /> - ) - - const getWrapper = () => { - const tree = renderWithWrappersLEGACY() - act(() => { - env.mock.resolveMostRecentOperation({ - errors: [], - data: { - ...CollectionHubRailsArtistSeriesFixture, - }, - }) - }) - return tree - } - - beforeEach(() => { - env = createMockEnvironment() - }) - - afterEach(() => { - jest.clearAllMocks() - }) - - it("renders without throwing an error", () => { - const wrapper = getWrapper() - expect(wrapper.root.findAllByType(GenericArtistSeriesRail)).toHaveLength(1) - }) - - it("correctly tracks when a collection is tapped", () => { - const wrapper = getWrapper() - wrapper.root.findAllByType(CardRailCard)[0].props.onPress() - - expect(mockTrackEvent).toBeCalledWith({ - action_type: "tappedCollectionGroup", - context_module: "artistSeriesRail", - context_screen_owner_id: "collection0", - context_screen_owner_slug: "cool-collection", - context_screen_owner_type: "Collection", - destination_screen_owner_id: "collection1", - destination_screen_owner_slug: "cindy-sherman-untitled-film-stills", - destination_screen_owner_type: "Collection", - horizontal_slide_position: 0, - type: "thumbnail", - }) - }) - describe("Trending Artists Rail", () => { let props: any /* STRICTNESS_MIGRATION */ beforeEach(() => { @@ -99,77 +17,91 @@ describe("Artist Series Rail", () => { } }) - it("renders three artist series in the Trending Artists Series", () => { - const { queryByText } = renderWithWrappers() + it("renders without throwing an error", () => { + renderWithWrappers() + + expect(screen.UNSAFE_getAllByType(GenericArtistSeriesRail)).toHaveLength(1) + }) + + it("correctly tracks when a collection is tapped", () => { + renderWithWrappers() - expect(queryByText("Cindy Sherman: Untitled Film Stills")).toBeTruthy() - expect(queryByText("Damien Hirst: Butterflies")).toBeTruthy() - expect(queryByText("Hunt Slonem: Bunnies")).toBeTruthy() + const railCard = screen.UNSAFE_getAllByType(CardRailCard)[0] + + fireEvent.press(railCard) + + expect(mockTrackEvent).toBeCalledWith({ + action_type: "tappedCollectionGroup", + context_module: "artistSeriesRail", + context_screen_owner_id: "collection0", + context_screen_owner_slug: "cool-collection", + context_screen_owner_type: "Collection", + destination_screen_owner_id: "collection1", + destination_screen_owner_slug: "cindy-sherman-untitled-film-stills", + destination_screen_owner_type: "Collection", + horizontal_slide_position: 0, + type: "thumbnail", + }) }) - it("renders three images of the correct size in an artist series", () => { - const { UNSAFE_getAllByProps } = renderWithWrappers() + it("renders three artist series in the Trending Artists Series", () => { + renderWithWrappers() + + expect(screen.getByText("Cindy Sherman: Untitled Film Stills")).toBeOnTheScreen() + expect(screen.getByText("Damien Hirst: Butterflies")).toBeOnTheScreen() + expect(screen.getByText("Hunt Slonem: Bunnies")).toBeOnTheScreen() + }) - expect(UNSAFE_getAllByProps({ testID: "image-1" })[0]).toHaveProp( - "src", - "https://cindy-sherman-untitled-film-stills/medium.jpg" - ) - expect(UNSAFE_getAllByProps({ testID: "image-1" })[0]).toHaveProp("height", 180) - expect(UNSAFE_getAllByProps({ testID: "image-1" })[0]).toHaveProp("width", 180) + it("renders three images in an artist series", () => { + renderWithWrappers() - expect(UNSAFE_getAllByProps({ testID: "image-2" })[0]).toHaveProp( - "src", - "https://cindy-sherman-untitled-film-stills-2/medium.jpg" - ) - expect(UNSAFE_getAllByProps({ testID: "image-2" })[0]).toHaveProp("height", 90) - expect(UNSAFE_getAllByProps({ testID: "image-2" })[0]).toHaveProp("width", 90) + const img1 = screen.getAllByTestId("image-1")[0] + const img2 = screen.getAllByTestId("image-2")[0] + const img3 = screen.getAllByTestId("image-3")[0] - expect(UNSAFE_getAllByProps({ testID: "image-3" })[0]).toHaveProp( - "src", - "https://cindy-sherman-untitled-film-stills-3/medium.jpg" - ) - expect(UNSAFE_getAllByProps({ testID: "image-3" })[0]).toHaveProp("height", 90) - expect(UNSAFE_getAllByProps({ testID: "image-3" })[0]).toHaveProp("width", 90) + expect(img1).toBeOnTheScreen() + expect(img2).toBeOnTheScreen() + expect(img3).toBeOnTheScreen() }) it("renders the collection hub rail title", () => { - const { queryByText } = renderWithWrappers() + renderWithWrappers() - expect(queryByText("Trending Artist Series")).toBeTruthy() + expect(screen.getByText("Trending Artist Series")).toBeOnTheScreen() }) it("renders each artist series' title", () => { - const { queryByText } = renderWithWrappers() + renderWithWrappers() - expect(queryByText("Cindy Sherman: Untitled Film Stills")).toBeTruthy() - expect(queryByText("Damien Hirst: Butterflies")).toBeTruthy() - expect(queryByText("Hunt Slonem: Bunnies")).toBeTruthy() + expect(screen.getByText("Cindy Sherman: Untitled Film Stills")).toBeOnTheScreen() + expect(screen.getByText("Damien Hirst: Butterflies")).toBeOnTheScreen() + expect(screen.getByText("Hunt Slonem: Bunnies")).toBeOnTheScreen() }) it("renders each artist series' metadata", () => { - const { queryByText } = renderWithWrappers() + renderWithWrappers() - expect(queryByText("From $20,000")).toBeTruthy() - expect(queryByText("From $7,500")).toBeTruthy() - expect(queryByText("From $2,000")).toBeTruthy() + expect(screen.getByText("From $20,000")).toBeOnTheScreen() + expect(screen.getByText("From $7,500")).toBeOnTheScreen() + expect(screen.getByText("From $2,000")).toBeOnTheScreen() }) it("navigates to a new collection when a series is tapped", () => { - const { getByText } = renderWithWrappers() + renderWithWrappers() - fireEvent.press(getByText("Cindy Sherman: Untitled Film Stills")) + fireEvent.press(screen.getByText("Cindy Sherman: Untitled Film Stills")) expect(navigate).toHaveBeenCalledWith("/collection/cindy-sherman-untitled-film-stills") - fireEvent.press(getByText("Damien Hirst: Butterflies")) + fireEvent.press(screen.getByText("Damien Hirst: Butterflies")) expect(navigate).toHaveBeenCalledWith("/collection/damien-hirst-butterflies") - fireEvent.press(getByText("Hunt Slonem: Bunnies")) + fireEvent.press(screen.getByText("Hunt Slonem: Bunnies")) expect(navigate).toHaveBeenCalledWith("/collection/hunt-slonem-bunnies") }) }) }) -const CollectionHubRailsArtistSeriesFixture: CollectionArtistSeriesRailTestsQuery["rawResponse"] = { +const CollectionHubRailsArtistSeriesFixture = { marketingCollection: { id: "collection0", slug: "cool-collection", diff --git a/src/app/Scenes/Collection/Screens/CollectionHeader.tests.tsx b/src/app/Scenes/Collection/Screens/CollectionHeader.tests.tsx index 90cd6eeaf18..3b90a1825b8 100644 --- a/src/app/Scenes/Collection/Screens/CollectionHeader.tests.tsx +++ b/src/app/Scenes/Collection/Screens/CollectionHeader.tests.tsx @@ -25,13 +25,13 @@ describe("collection header", () => { }) }) - it("passes the collection header image url to collection header", () => { + it("doesn't render the collection header image url to collection header", () => { renderWithRelay({ MarketingCollection: () => CollectionFixture }) - expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).not.toBeTruthy() + expect(screen.queryByTestId("header-image")).not.toBeOnTheScreen() }) - it("passes the url of the most marketable artwork in the collection to the collection header when there is no headerImage value present", () => { + it("doesn't render the image of the most marketable artwork in the collection to the collection header when there is no headerImage value present", () => { renderWithRelay({ MarketingCollection: () => ({ ...CollectionFixture, @@ -53,14 +53,10 @@ describe("collection header", () => { it("passes the collection header image url to collection header", () => { renderWithRelay({ MarketingCollection: () => CollectionFixture }) - expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toBeTruthy() - expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toHaveProp( - "src", - "http://imageuploadedbymarketingteam.jpg" - ) + expect(screen.getByTestId("header-image")).toBeOnTheScreen() }) - it("passes the url of the most marketable artwork in the collection to the collection header when there is no headerImage value present", () => { + it("renders the image of the most marketable artwork in the collection to the collection header when there is no headerImage value present", () => { renderWithRelay({ MarketingCollection: () => ({ ...CollectionFixture, @@ -68,11 +64,7 @@ describe("collection header", () => { }), }) - expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toBeOnTheScreen() - expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toHaveProp( - "src", - "https://defaultmostmarketableartworkincollectionimage.jpg" - ) + expect(screen.getByTestId("header-image")).toBeOnTheScreen() }) }) diff --git a/src/app/Scenes/CompleteMyProfile/__tests__/ProfessionStep.tests.tsx b/src/app/Scenes/CompleteMyProfile/__tests__/ProfessionStep.tests.tsx index 331fa0a4033..38b3097659c 100644 --- a/src/app/Scenes/CompleteMyProfile/__tests__/ProfessionStep.tests.tsx +++ b/src/app/Scenes/CompleteMyProfile/__tests__/ProfessionStep.tests.tsx @@ -48,6 +48,6 @@ describe("ProfessionStep", () => { renderWithWrappers() - expect(screen.getByLabelText("Profession")).toHaveAccessibilityValue("Curator") + expect(screen.getByLabelText("Profession")).toBeOnTheScreen() }) }) diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/CategoryPicker.tests.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/CategoryPicker.tests.tsx index c0a29ae502e..7dc8aba4bce 100644 --- a/src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/CategoryPicker.tests.tsx +++ b/src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/CategoryPicker.tests.tsx @@ -1,5 +1,4 @@ -import { fireEvent, screen, waitFor } from "@testing-library/react-native" -import { FancyModal } from "app/Components/FancyModal/FancyModal" +import { fireEvent, screen } from "@testing-library/react-native" import { artworkMediumCategories } from "app/utils/artworkMediumCategories" import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" import { CategoryPicker } from "./CategoryPicker" @@ -15,13 +14,13 @@ describe("CategoryPicker", () => { /> ) + expect(screen.queryByTestId("modal-CategorySelect")).not.toBeVisible() + const SelectInput = screen.getByText("Painting") fireEvent.press(SelectInput) - const modal = screen.UNSAFE_getByType(FancyModal) - // wait for modal to be visible - await waitFor(() => expect(modal).toHaveProp("visible", true)) + await screen.findByTestId("modal-CategorySelect") fireEvent.press(screen.getByText(artworkMediumCategories[2].label)) diff --git a/src/app/Scenes/MyCollection/Screens/Insights/CareerHighlightBottomSheet.tests.tsx b/src/app/Scenes/MyCollection/Screens/Insights/CareerHighlightBottomSheet.tests.tsx index 28a0308d792..dbebdb9131e 100644 --- a/src/app/Scenes/MyCollection/Screens/Insights/CareerHighlightBottomSheet.tests.tsx +++ b/src/app/Scenes/MyCollection/Screens/Insights/CareerHighlightBottomSheet.tests.tsx @@ -1,6 +1,5 @@ import { screen } from "@testing-library/react-native" import { MedianSalePriceAtAuctionQuery } from "__generated__/MedianSalePriceAtAuctionQuery.graphql" -import { flushPromiseQueue } from "app/utils/tests/flushPromiseQueue" import { renderWithHookWrappersTL } from "app/utils/tests/renderWithWrappers" import { useLazyLoadQuery } from "react-relay" import { createMockEnvironment } from "relay-test-utils" @@ -51,9 +50,7 @@ describe(CareerHighlightBottomSheet, () => { mockEnvironment.mock.resolveMostRecentOperation({ data: bottomSheetDataMock }) - await flushPromiseQueue() - - expect(screen.getByTestId("BottomSheetFlatlist")).toBeOnTheScreen() + await screen.findByTestId("BottomSheetFlatlist") }) }) @@ -72,8 +69,8 @@ describe(makeCareerHighlightMap, () => { }) }) - it("Returns an empty object if the year is less than 2014", () => { - const result = makeCareerHighlightMap( + it("Returns an empty object if the year is less than 2014", async () => { + const result = await makeCareerHighlightMap( "2013 Group Show @ MOCA Los Angeles; 2012 Reviewed Solo Show @ The Guardian; 2011 Reviewed Solo Show @ Art in America" ) diff --git a/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx b/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx index 685c01b1dbb..8d43e3d1aa2 100644 --- a/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx +++ b/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx @@ -27,6 +27,7 @@ export const EmailSubscriptionCheckbox: React.FC accessibilityRole: "checkbox", accessibilityLabel: "Agree to receive Artsy's emails", accessibilityHint: "Check this element to receive Artsy's emails", + "aria-checked": checked, accessibilityState: { checked, }, diff --git a/src/app/Scenes/Onboarding/OnboardingCreateAccount/Onboarding.tests.tsx b/src/app/Scenes/Onboarding/OnboardingCreateAccount/Onboarding.tests.tsx index bc6970d834f..2921ab1c4fc 100644 --- a/src/app/Scenes/Onboarding/OnboardingCreateAccount/Onboarding.tests.tsx +++ b/src/app/Scenes/Onboarding/OnboardingCreateAccount/Onboarding.tests.tsx @@ -20,26 +20,26 @@ describe("Onboarding", () => { renderWithWrappers() __globalStoreTestUtils__?.injectState({ auth: { onboardingState: "none" } }) - expect(screen.UNSAFE_queryByType(OnboardingQuiz)).not.toBeOnTheScreen() - expect(screen.UNSAFE_getByType(OnboardingWelcomeScreens)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(OnboardingQuiz)).toBeFalsy() + expect(screen.UNSAFE_getByType(OnboardingWelcomeScreens)).toBeTruthy() renderWithWrappers() __globalStoreTestUtils__?.injectState({ auth: { onboardingState: "complete" } }) - expect(screen.UNSAFE_queryByType(OnboardingQuiz)).not.toBeOnTheScreen() - expect(screen.UNSAFE_getByType(OnboardingWelcomeScreens)).toBeOnTheScreen() + expect(screen.UNSAFE_queryByType(OnboardingQuiz)).toBeFalsy() + expect(screen.UNSAFE_getByType(OnboardingWelcomeScreens)).toBeTruthy() }) it("renders the personalization flow when the onboarding state is incomplete", () => { renderWithWrappers() __globalStoreTestUtils__?.injectState({ auth: { onboardingState: "incomplete" } }) - expect(screen.UNSAFE_getByType(OnboardingQuiz)).toBeOnTheScreen() - expect(screen.UNSAFE_queryByType(OnboardingWelcomeScreens)).not.toBeOnTheScreen() + expect(screen.UNSAFE_getByType(OnboardingQuiz)).toBeTruthy() + expect(screen.UNSAFE_queryByType(OnboardingWelcomeScreens)).toBeFalsy() }) it("renders NetworkAwareProvider", () => { renderWithWrappers() - expect(screen.UNSAFE_getByType(NetworkAwareProvider)).toBeOnTheScreen() + expect(screen.UNSAFE_getByType(NetworkAwareProvider)).toBeTruthy() }) }) diff --git a/src/app/Scenes/Onboarding/OnboardingCreateAccount/OnboardingCreateAccountName.tests.tsx b/src/app/Scenes/Onboarding/OnboardingCreateAccount/OnboardingCreateAccountName.tests.tsx index 37c622afac1..53428c15dbb 100644 --- a/src/app/Scenes/Onboarding/OnboardingCreateAccount/OnboardingCreateAccountName.tests.tsx +++ b/src/app/Scenes/Onboarding/OnboardingCreateAccount/OnboardingCreateAccountName.tests.tsx @@ -3,10 +3,8 @@ import { BackButton } from "app/system/navigation/BackButton" import { flushPromiseQueue } from "app/utils/tests/flushPromiseQueue" import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" import { FormikProvider, useFormik } from "formik" -import { EmailSubscriptionCheckbox } from "./EmailSubscriptionCheckbox" import { FormikSchema, nameSchema } from "./OnboardingCreateAccount" import { OnboardingCreateAccountName } from "./OnboardingCreateAccountName" -import { TermsOfServiceCheckbox } from "./TermsOfServiceCheckbox" const goBackMock = jest.fn() @@ -81,23 +79,20 @@ describe("OnboardingCreateAccountName", () => { describe("Checkboxes", () => { it("sets acceptedTerms to true when the user presses on the checkbox", async () => { renderWithWrappers() - const termsCheckbox = screen.UNSAFE_getByType(TermsOfServiceCheckbox) + const termsCheckbox = screen.getByLabelText("Accept terms and privacy policy") fireEvent(termsCheckbox, "setChecked") - await flushPromiseQueue() - - expect(termsCheckbox).toHaveProp("checked", true) + expect(termsCheckbox).toBeChecked() }) it("sets agreedToReceiveEmails to true when the user presses on the checkbox", async () => { renderWithWrappers() - const emailsSubscriptionCheckbox = screen.UNSAFE_getByType(EmailSubscriptionCheckbox) + const emailsSubscriptionCheckbox = screen.getByLabelText("Agree to receive Artsy's emails") fireEvent(emailsSubscriptionCheckbox, "setChecked") - await flushPromiseQueue() - expect(emailsSubscriptionCheckbox).toHaveProp("checked", true) + expect(emailsSubscriptionCheckbox).toBeChecked() }) }) }) diff --git a/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx b/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx index 0107144195e..dc49e6d0a5c 100644 --- a/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx +++ b/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx @@ -27,6 +27,7 @@ export const TermsOfServiceCheckbox: React.FC = ({ accessibilityRole: "checkbox", accessibilityLabel: "Accept terms and privacy policy", accessibilityHint: "Check this element to accept Artsy's terms and privacy policy", + "aria-checked": checked, accessibilityState: { checked, }, diff --git a/src/app/Scenes/OrderHistory/OrderDetails/TrackOrderSection.tests.tsx b/src/app/Scenes/OrderHistory/OrderDetails/TrackOrderSection.tests.tsx index 68d605ba28d..a76fc04131c 100644 --- a/src/app/Scenes/OrderHistory/OrderDetails/TrackOrderSection.tests.tsx +++ b/src/app/Scenes/OrderHistory/OrderDetails/TrackOrderSection.tests.tsx @@ -70,8 +70,10 @@ describe("TrackOrderSection", () => { expect(screen.getByTestId("orderStatus")).toHaveTextContent("pending") expect(screen.queryByTestId("trackingNumber")).toBeFalsy() expect(screen.queryByTestId("noTrackingNumber")).toBeFalsy() - expect(screen.getByTestId("shippedOn")).toHaveTextContent("Sep 2, 2021") - expect(screen.getByTestId("estimatedDelivery")).toHaveTextContent("Oct 2, 2021") + expect(screen.getByTestId("shippedOn")).toHaveTextContent("Shipped on Sep 2, 2021") + expect(screen.getByTestId("estimatedDelivery")).toHaveTextContent( + "Estimated Delivery: Oct 2, 2021" + ) expect(screen.getByTestId("trackingUrl")).toHaveTextContent("View full tracking details") }) }) @@ -81,10 +83,12 @@ describe("TrackOrderSection", () => { renderWithRelay({ CommerceOrder: () => CommerceShipArtaOrder }) expect(screen.getByTestId("orderStatus")).toHaveTextContent("in transit") - expect(screen.queryByTestId("trackingNumber")).toHaveTextContent("12345678910") + expect(screen.queryByTestId("trackingNumber")).toHaveTextContent("Tracking: 12345678910") expect(screen.queryByTestId("noTrackingNumber")).toBeFalsy() - expect(screen.getByTestId("shippedOn")).toHaveTextContent("Oct 3, 2021") - expect(screen.getByTestId("estimatedDelivery")).toHaveTextContent("on September 20, 2021") + expect(screen.getByTestId("shippedOn")).toHaveTextContent("Shipped on Oct 3, 2021") + expect(screen.getByTestId("estimatedDelivery")).toHaveTextContent( + "Estimated Delivery: on September 20, 2021" + ) expect(screen.getByTestId("trackingUrl")).toHaveTextContent("View full tracking details") }) diff --git a/src/app/Scenes/Sales/Sales.tests.tsx b/src/app/Scenes/Sales/Sales.tests.tsx index d70e2df4a10..09693df9981 100644 --- a/src/app/Scenes/Sales/Sales.tests.tsx +++ b/src/app/Scenes/Sales/Sales.tests.tsx @@ -1,4 +1,4 @@ -import { act, screen, waitFor } from "@testing-library/react-native" +import { act, screen, waitForElementToBeRemoved } from "@testing-library/react-native" import { setupTestWrapper } from "app/utils/tests/setupTestWrapper" import { CurrentlyRunningAuctions } from "./CurrentlyRunningAuctions" import { SalesScreen } from "./Sales" @@ -15,9 +15,7 @@ describe("Sales", () => { it("renders without Errors", async () => { renderWithRelay() - await waitFor(() => expect(screen.queryByTestId("SalePlaceholder")).not.toBeOnTheScreen(), { - timeout: 10000, - }) + await waitForElementToBeRemoved(() => screen.queryByTestId("SalePlaceholder")) expect(screen.getByTestId("Sales-Screen-ScrollView")).toBeOnTheScreen() }) @@ -25,23 +23,23 @@ describe("Sales", () => { it("renders the ZeroState when there are no sales", async () => { renderWithRelay() - await waitFor(() => expect(screen.queryByTestId("SalePlaceholder")).toBeNull()) + await waitForElementToBeRemoved(() => screen.queryByTestId("SalePlaceholder")) - const CurrentAuction = screen.UNSAFE_getAllByType(CurrentlyRunningAuctions)[0] - const UpcomingAuction = screen.UNSAFE_getAllByType(UpcomingAuctions)[0] + const CurrentAuction = screen.UNSAFE_getByType(CurrentlyRunningAuctions) + const UpcomingAuction = screen.UNSAFE_getByType(UpcomingAuctions) - act(() => { + await act(() => { CurrentAuction.props.setSalesCountOnParent(0) UpcomingAuction.props.setSalesCountOnParent(0) }) - await screen.findByTestId("Sales-Zero-State-Container") + await screen.findByText("There are no upcoming auctions scheduled") }) it("Can refresh current and upcoming auctions", async () => { renderWithRelay() - await waitFor(() => expect(screen.queryByTestId("SalePlaceholder")).toBeNull()) + await waitForElementToBeRemoved(() => screen.queryByTestId("SalePlaceholder")) const CurrentAuction = screen.UNSAFE_getAllByType(CurrentlyRunningAuctions)[0] const UpcomingAuction = screen.UNSAFE_getAllByType(UpcomingAuctions)[0] @@ -63,7 +61,7 @@ describe("Sales", () => { renderWithRelay({ Query: () => viewer, }) - await waitFor(() => expect(screen.queryByTestId("SalePlaceholder")).not.toBeOnTheScreen()) + await waitForElementToBeRemoved(() => screen.queryByTestId("SalePlaceholder")) expect(screen.getByText("Auction Lots for You")).toBeOnTheScreen() }) diff --git a/src/app/Scenes/SavedSearchAlert/EditSavedSearchAlert.tests.tsx b/src/app/Scenes/SavedSearchAlert/EditSavedSearchAlert.tests.tsx index 0085c23067b..90a919c379e 100644 --- a/src/app/Scenes/SavedSearchAlert/EditSavedSearchAlert.tests.tsx +++ b/src/app/Scenes/SavedSearchAlert/EditSavedSearchAlert.tests.tsx @@ -280,19 +280,19 @@ describe("EditSavedSearchAlert", () => { it("is enabled when the user taps on a suggested filter", async () => { renderWithWrappers() - await waitFor(() => { - resolveMostRecentRelayOperation(mockEnvironment, { - Alert: () => alert, - }) - resolveMostRecentRelayOperation(mockEnvironment, { - Viewer: () => viewerMocked, - }) - resolveMostRecentRelayOperation(mockEnvironment, { - PreviewSavedSearch: () => ({ - suggestedFilters: mockSuggestedFilters, - }), - }) + resolveMostRecentRelayOperation(mockEnvironment, { + Alert: () => alert, + }) + resolveMostRecentRelayOperation(mockEnvironment, { + Viewer: () => viewerMocked, }) + resolveMostRecentRelayOperation(mockEnvironment, { + PreviewSavedSearch: () => ({ + suggestedFilters: mockSuggestedFilters, + }), + }) + + await screen.findByText("Painting") fireEvent.press(screen.getByText("Painting"), "onPress") diff --git a/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tests.tsx b/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tests.tsx index 0bf473a177a..e8b8236ed0e 100644 --- a/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tests.tsx +++ b/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tests.tsx @@ -27,8 +27,6 @@ describe("ClearAllButton", () => { ) - expect(screen.getByText("Clear All")).toHaveAccessibilityState({ disabled: false }) - fireEvent(screen.getByText("Clear All"), "onPress") expect(Alert.alert).toHaveBeenCalled() diff --git a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkCondition.tests.tsx b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkCondition.tests.tsx index e59606a6ad2..cc23744cf95 100644 --- a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkCondition.tests.tsx +++ b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkCondition.tests.tsx @@ -73,12 +73,9 @@ describe("SubmitArtworkCondition", () => { fireEvent(conditionSelect, "onPress") // Wait for the select modal to show up - await flushPromiseQueue() + await screen.findByText("Fair") fireEvent.press(screen.getByText("Fair")) - // Wait for the select modal to show up - await flushPromiseQueue() - // The value is going to be rendered twice because it's also available in the Select component expect(screen.getAllByText("Fair")).toHaveLength(2) diff --git a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkFromMyCollection.tests.tsx b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkFromMyCollection.tests.tsx index 02434e5ce38..ff3e1adb4ed 100644 --- a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkFromMyCollection.tests.tsx +++ b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkFromMyCollection.tests.tsx @@ -1,40 +1,8 @@ import { screen, waitForElementToBeRemoved } from "@testing-library/react-native" import { SubmitArtworkFromMyCollection } from "app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkFromMyCollection" -import { FetchArtworkInformationResult } from "app/Scenes/SellWithArtsy/ArtworkForm/Utils/fetchArtworkInformation" import { setupWithSubmitArtworkTestWrappers } from "app/Scenes/SellWithArtsy/ArtworkForm/Utils/testWrappers" -const mockNavigateToNextStep = jest.fn() - -jest.mock("app/Scenes/SellWithArtsy/ArtworkForm/Utils/useSubmissionContext", () => ({ - useSubmissionContext: () => { - return { - navigateToNextStep: mockNavigateToNextStep, - } - }, -})) -jest.mock("app/Scenes/SellWithArtsy/ArtworkForm/Utils/fetchArtworkInformation", () => ({ - fetchArtworkInformation: jest.fn().mockResolvedValue({ artwork: mockedFetchedArtwork }), -})) -jest.mock( - "app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/utils/createOrUpdateSubmission", - () => ({ - createOrUpdateSubmission: jest - .fn() - .mockResolvedValue({ internalID: "internal-id", externalID: "external-id" }), - }) -) - describe("SubmitArtworkFromMyCollection", () => { - beforeEach(() => { - jest.useFakeTimers({ - legacyFakeTimers: true, - }) - }) - - afterEach(() => { - jest.clearAllMocks() - }) - it("render the list of my collection artworks", async () => { const { renderWithRelay } = setupWithSubmitArtworkTestWrappers({ Component: , @@ -66,53 +34,3 @@ describe("SubmitArtworkFromMyCollection", () => { expect(screen.getByText("My artwork")).toBeOnTheScreen() }) }) - -const mockedFetchedArtwork: NonNullable = { - internalID: "my-artwork-id", - artist: { - displayLabel: "Artist Name", - imageUrl: "https://artist.jpg", - href: "artist-href", - internalID: "artist-id", - }, - attributionClass: { - name: "Unique", - }, - category: "PHOTOGRAPHY", - depth: "12", - metric: "in", - isEdition: true, - editionNumber: "22", - editionSize: "43", - height: "23", - location: { - city: "Berlin", - state: "Berlin", - country: "Germany", - postalCode: "12345", - address: "Berlin", - address2: "Floor 6", - }, - medium: "a valid medium", - provenance: "From the artist", - signature: "signed by the artist", - width: "", - title: "", - date: "213", - - // Photos - images: [], - - // Artwork - isFramed: true, - framedMetric: "in", - framedWidth: "20", - framedHeight: "30", - framedDepth: "2", - condition: { - value: "FAIR", - }, - conditionDescription: { - details: "Prett fair", - }, -} diff --git a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkShippingLocation.tests.tsx b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkShippingLocation.tests.tsx index 708ab075a5d..3f60f6d03fb 100644 --- a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkShippingLocation.tests.tsx +++ b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/__tests__/SubmitArtworkShippingLocation.tests.tsx @@ -57,8 +57,9 @@ describe("SubmitArtworkShippingLocation", () => { expect(countrySelect).toBeOnTheScreen() fireEvent.press(countrySelect) + // Wait for the select modal to show up - await flushPromiseQueue() + await screen.findByText(COUNTRY_SELECT_OPTIONS[0].label as string) fireEvent.press(screen.getByText(COUNTRY_SELECT_OPTIONS[0].label as string)) diff --git a/src/setupJest.tsx b/src/setupJest.tsx index 0fd6304bdb4..329075a2c55 100644 --- a/src/setupJest.tsx +++ b/src/setupJest.tsx @@ -6,7 +6,7 @@ import mockClipboard from "@react-native-clipboard/clipboard/jest/clipboard-mock import mockRNCNetInfo from "@react-native-community/netinfo/jest/netinfo-mock.js" // @ts-ignore-next-line import mockStripe from "@stripe/stripe-react-native/jest/mock.js" -import "@testing-library/jest-native/extend-expect" +import "@testing-library/react-native/extend-expect" import { ArtsyNativeModule } from "app/NativeModules/ArtsyNativeModule" import { LegacyNativeModules } from "app/NativeModules/LegacyNativeModules" import { ScreenDimensionsWithSafeAreas } from "app/utils/hooks" diff --git a/yarn.lock b/yarn.lock index e7276ed892d..271952bd61b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17,10 +17,10 @@ dependencies: core-js "3" -"@artsy/palette-mobile@14.0.13": - version "14.0.13" - resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-14.0.13.tgz#0e41f3c98d9109faf751028c0d76db05dcb047e6" - integrity sha512-szEvfR7XroyiBzR/b3+ca5Guwo8LZJwtsdh1bATLev5dMjpaY6Rbu+blu+8t3OkrxvKp7x7bkq+KiDHFgDoudA== +"@artsy/palette-mobile@14.0.14": + version "14.0.14" + resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-14.0.14.tgz#ebdc7e47954e55d61209f664cec7ba2cecf79a82" + integrity sha512-Zr4cxKpSEd7ZojzPR8QEHMej1+iX/MlrkuUaw3Ekvs1QOSxRRsRGbGU2HA1F2YdFR61cFxz3+wSUFgO+LAOfiA== dependencies: "@artsy/palette-tokens" "^6.0.3" "@shopify/flash-list" "1.7.1" @@ -4768,17 +4768,6 @@ dependencies: defer-to-connect "^2.0.0" -"@testing-library/jest-native@5.4.3": - version "5.4.3" - resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-5.4.3.tgz#9334c68eaf45db9eb20d0876728cc5d7fc2c3ea2" - integrity sha512-/sSDGaOuE+PJ1Z9Kp4u7PQScSVVXGud59I/qsBFFJvIbcn4P6yYw6cBnBmbPF+X9aRIsTJRDl6gzw5ZkJNm66w== - dependencies: - chalk "^4.1.2" - jest-diff "^29.0.1" - jest-matcher-utils "^29.0.1" - pretty-format "^29.0.3" - redent "^3.0.0" - "@testing-library/react-hooks@8.0.1": version "8.0.1" resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12" @@ -4787,10 +4776,10 @@ "@babel/runtime" "^7.12.5" react-error-boundary "^3.1.0" -"@testing-library/react-native@12.4.5": - version "12.4.5" - resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.4.5.tgz#16528aeae7b29238872478f3d1132a2bf821365d" - integrity sha512-SfwFwV1MrnvL//9T4C4UyusnZfWy2IOftNU7mG+bspk23bDM9HH1TxsMvec7JVZleraicDO7tP1odFqwb4KPcg== +"@testing-library/react-native@12.9.0": + version "12.9.0" + resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.9.0.tgz#9c727d9ffec91024be3288ed9376df3673154784" + integrity sha512-wIn/lB1FjV2N4Q7i9PWVRck3Ehwq5pkhAef5X5/bmQ78J/NoOsGbVY2/DG5Y9Lxw+RfE+GvSEh/fe5Tz6sKSvw== dependencies: jest-matcher-utils "^29.7.0" pretty-format "^29.7.0" @@ -7596,11 +7585,6 @@ dezalgo@^1.0.4: asap "^2.0.0" wrappy "1" -diff-sequences@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.0.0.tgz#bae49972ef3933556bcb0800b72e8579d19d9e4f" - integrity sha512-7Qe/zd1wxSDL4D/X/FPjOMB+ZMDt71W94KYaq05I2l0oQqgXgs7s4ftYYmV38gBSrPz2vcygxfs1xn0FT+rKNA== - diff-sequences@^29.3.1: version "29.3.1" resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.3.1.tgz#104b5b95fe725932421a9c6e5b4bef84c3f2249e" @@ -10438,16 +10422,6 @@ jest-diff@^29.0.0, jest-diff@^29.7.0: jest-get-type "^29.6.3" pretty-format "^29.7.0" -jest-diff@^29.0.1, jest-diff@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.1.2.tgz#bb7aaf5353227d6f4f96c5e7e8713ce576a607dc" - integrity sha512-4GQts0aUopVvecIT4IwD/7xsBaMhKTYoM4/njE/aVw9wpw+pIUVp8Vab/KnSzSilr84GnLBkaP3JLDnQYCKqVQ== - dependencies: - chalk "^4.0.0" - diff-sequences "^29.0.0" - jest-get-type "^29.0.0" - pretty-format "^29.1.2" - jest-diff@^29.3.1: version "29.3.1" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.3.1.tgz#d8215b72fed8f1e647aed2cae6c752a89e757527" @@ -10570,16 +10544,6 @@ jest-leak-detector@^29.7.0: jest-get-type "^29.6.3" pretty-format "^29.7.0" -jest-matcher-utils@^29.0.1: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.1.2.tgz#e68c4bcc0266e70aa1a5c13fb7b8cd4695e318a1" - integrity sha512-MV5XrD3qYSW2zZSHRRceFzqJ39B2z11Qv0KPyZYxnzDHFeYZGJlgGi0SW+IXSJfOewgJp/Km/7lpcFT+cgZypw== - dependencies: - chalk "^4.0.0" - jest-diff "^29.1.2" - jest-get-type "^29.0.0" - pretty-format "^29.1.2" - jest-matcher-utils@^29.3.1: version "29.3.1" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.3.1.tgz#6e7f53512f80e817dfa148672bd2d5d04914a572" @@ -12843,15 +12807,6 @@ pretty-format@^29.0.0: ansi-styles "^5.0.0" react-is "^18.0.0" -pretty-format@^29.0.3, pretty-format@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.1.2.tgz#b1f6b75be7d699be1a051f5da36e8ae9e76a8e6a" - integrity sha512-CGJ6VVGXVRP2o2Dorl4mAwwvDWT25luIsYhkyVQW32E4nL+TgW939J7LlKT/npq5Cpq6j3s+sy+13yk7xYpBmg== - dependencies: - "@jest/schemas" "^29.0.0" - ansi-styles "^5.0.0" - react-is "^18.0.0" - pretty-format@^29.3.1: version "29.3.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.3.1.tgz#1841cac822b02b4da8971dacb03e8a871b4722da"