forked from artsy/eigen
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(onyx-865): Reorganize CTAs on My Collection Artwork screen (arts…
…y#10094) * feat(onyx-865): Reorganize CTAs on My Collection Artwork screen * fixes tests * fix test
- Loading branch information
1 parent
19807d8
commit 34a243d
Showing
11 changed files
with
279 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
...twork/Components/ArtworkInsights/RequestForPriceEstimate/PriceEstimateRequested.tests.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { screen } from "@testing-library/react-native" | ||
| import { PriceEstimateRequestedTestsQuery } from "__generated__/PriceEstimateRequestedTestsQuery.graphql" | ||
| import { PriceEstimateRequested } from "app/Scenes/MyCollection/Screens/Artwork/Components/ArtworkInsights/RequestForPriceEstimate/PriceEstimateRequested" | ||
| import { __globalStoreTestUtils__, GlobalStoreProvider } from "app/store/GlobalStore" | ||
| import { flushPromiseQueue } from "app/utils/tests/flushPromiseQueue" | ||
| import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" | ||
| import { graphql, QueryRenderer } from "react-relay" | ||
| import { createMockEnvironment, MockPayloadGenerator } from "relay-test-utils" | ||
|
|
||
| describe("PriceEstimateRequested", () => { | ||
| let mockEnvironment: ReturnType<typeof createMockEnvironment> | ||
| const TestRenderer = () => ( | ||
| <QueryRenderer<PriceEstimateRequestedTestsQuery> | ||
| environment={mockEnvironment} | ||
| query={graphql` | ||
| query PriceEstimateRequestedTestsQuery @relay_test_operation { | ||
| artwork(id: "foo") { | ||
| ...RequestForPriceEstimateBanner_artwork | ||
| } | ||
| me { | ||
| ...RequestForPriceEstimateBanner_me | ||
| } | ||
| } | ||
| `} | ||
| variables={{}} | ||
| render={({ props }) => { | ||
| if (props?.artwork && props?.me) { | ||
| return ( | ||
| <GlobalStoreProvider> | ||
| <PriceEstimateRequested me={props.me} artwork={props.artwork} /> | ||
| </GlobalStoreProvider> | ||
| ) | ||
| } | ||
| return null | ||
| }} | ||
| /> | ||
| ) | ||
|
|
||
| beforeEach(() => { | ||
| mockEnvironment = createMockEnvironment() | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| jest.clearAllMocks() | ||
| __globalStoreTestUtils__?.reset() | ||
| }) | ||
|
|
||
| const resolveData = (passedProps = {}) => { | ||
| mockEnvironment.mock.resolveMostRecentOperation((operation) => | ||
| MockPayloadGenerator.generate(operation, passedProps) | ||
| ) | ||
| } | ||
|
|
||
| it("renders 'requested' state if in global store without throwing an error", async () => { | ||
| renderWithWrappers(<TestRenderer />) | ||
| resolveData({ | ||
| Artwork: () => ({ | ||
| internalID: "artwork-id", | ||
| slug: "artwork-id", | ||
| hasPriceEstimateRequest: null, | ||
| }), | ||
| }) | ||
| __globalStoreTestUtils__?.injectState({ | ||
| requestedPriceEstimates: { | ||
| requestedPriceEstimates: { | ||
| "artwork-id": { | ||
| artworkId: "artwork-id", | ||
| requestedAt: 1666015648950, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| await flushPromiseQueue() | ||
|
|
||
| expect(screen.getByText("Price Estimate Request Sent")).toBeDefined() | ||
| }) | ||
|
|
||
| it("renders 'requested' state if hasPriceEstimateRequest is true", () => { | ||
| renderWithWrappers(<TestRenderer />) | ||
| resolveData({ | ||
| Artwork: () => ({ | ||
| internalID: "artwork-id", | ||
| slug: "artwork-id", | ||
| hasPriceEstimateRequest: true, | ||
| }), | ||
| }) | ||
| expect(screen.getByText("Price Estimate Request Sent")).toBeDefined() | ||
| }) | ||
| }) |
33 changes: 33 additions & 0 deletions
33
...ens/Artwork/Components/ArtworkInsights/RequestForPriceEstimate/PriceEstimateRequested.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { Box, CheckCircleIcon, Flex, Separator, Text } from "@artsy/palette-mobile" | ||
| import { RequestForPriceEstimateBanner_artwork$key } from "__generated__/RequestForPriceEstimateBanner_artwork.graphql" | ||
| import { RequestForPriceEstimateBanner_me$key } from "__generated__/RequestForPriceEstimateBanner_me.graphql" | ||
| import { artworkFragment } from "app/Scenes/MyCollection/Screens/Artwork/Components/ArtworkInsights/RequestForPriceEstimate/RequestForPriceEstimateBanner" | ||
| import { usePriceEstimateRequested } from "app/Scenes/MyCollection/Screens/Artwork/Components/ArtworkInsights/RequestForPriceEstimate/usePriceEstimateRequested" | ||
| import { useFragment } from "react-relay" | ||
|
|
||
| interface PriceEstimateRequestedProps { | ||
| artwork: RequestForPriceEstimateBanner_artwork$key | ||
| me: RequestForPriceEstimateBanner_me$key | null | undefined | ||
| } | ||
|
|
||
| export const PriceEstimateRequested: React.FC<PriceEstimateRequestedProps> = ({ | ||
| ...otherProps | ||
| }) => { | ||
| const artwork = useFragment(artworkFragment, otherProps.artwork) | ||
| const priceEstimateRequested = usePriceEstimateRequested(artwork) | ||
|
|
||
| if (!priceEstimateRequested) return null | ||
|
|
||
| return ( | ||
| <Box> | ||
| <Flex alignItems="center" flexDirection="row"> | ||
| <CheckCircleIcon /> | ||
| <Text variant="sm" ml={0.5} textAlign="center"> | ||
| Price Estimate Request Sent | ||
| </Text> | ||
| </Flex> | ||
|
|
||
| <Separator mt={2} mb={2} borderColor="black10" /> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
...s/Artwork/Components/ArtworkInsights/RequestForPriceEstimate/usePriceEstimateRequested.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { RequestForPriceEstimateBanner_artwork$data } from "__generated__/RequestForPriceEstimateBanner_artwork.graphql" | ||
| import { GlobalStore } from "app/store/GlobalStore" | ||
|
|
||
| export const usePriceEstimateRequested = (artwork: RequestForPriceEstimateBanner_artwork$data) => { | ||
| const localRequestedPriceEstimates = GlobalStore.useAppState( | ||
| (state) => state.requestedPriceEstimates.requestedPriceEstimates | ||
| ) | ||
|
|
||
| const priceEstimateRequested = | ||
| artwork.hasPriceEstimateRequest || !!localRequestedPriceEstimates[artwork.internalID] | ||
|
|
||
| return priceEstimateRequested | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.