diff --git a/package.json b/package.json
index 6c29718d5b6..17f060b5b5b 100644
--- a/package.json
+++ b/package.json
@@ -335,6 +335,7 @@
"relay-compiler": "9.1.0",
"relay-compiler-language-typescript": "12.0.3",
"relay-config": "9.1.0",
+ "relay-test-utils": "9.1.0",
"rewire": "2.2.0",
"should": "11.2.1",
"simple-progress-webpack-plugin": "1.1.2",
diff --git a/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx b/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx
index 753d6560e35..ef415f95b7a 100644
--- a/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx
+++ b/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx
@@ -1,11 +1,14 @@
import { Breakpoint } from "@artsy/palette"
-import { ArtistConsignButtonQueryRawResponse } from "v2/__generated__/ArtistConsignButtonQuery.graphql"
+import { ArtistConsignButton_Test_Query } from "v2/__generated__/ArtistConsignButton_Test_Query.graphql"
+
import { useTracking } from "v2/Artsy/Analytics/useTracking"
-import { MockBoot, renderRelayTree } from "v2/DevTools"
+import { MockBoot } from "v2/DevTools"
import { cloneDeep } from "lodash"
import React from "react"
-import { graphql } from "react-relay"
+import { QueryRenderer, graphql } from "react-relay"
import { ArtistConsignButtonFragmentContainer } from "../ArtistConsignButton"
+import { MockPayloadGenerator, createMockEnvironment } from "relay-test-utils"
+import { mount } from "enzyme"
jest.unmock("react-relay")
jest.mock("v2/Artsy/Analytics/useTracking")
@@ -13,37 +16,46 @@ jest.mock("v2/Artsy/Analytics/useTracking")
describe("ArtistConsignButton", () => {
const trackEvent = jest.fn()
- const getWrapper = async ({
- breakpoint = "xs",
- response,
- }: {
- breakpoint: Breakpoint
- response: ArtistConsignButtonQueryRawResponse
- }) => {
- return await renderRelayTree({
- Component: ({ artist }) => {
- return (
-
-
-
- )
- },
- query: graphql`
- query ArtistConsignButton_Test_Query($artistID: String!)
- @raw_response_type {
- artist(id: $artistID) {
- ...ArtistConsignButton_artist
+ let env = createMockEnvironment() as ReturnType
+
+ const getWrapper = ({ breakpoint = "xs", response }) => {
+ const TestRenderer = () => (
+
+ environment={env}
+ query={graphql`
+ query ArtistConsignButton_Test_Query {
+ artist(id: "alex-katz") {
+ ...ArtistConsignButton_artist
+ }
}
- }
- `,
- variables: {
- artistID: "alex-katz",
- },
- mockData: response,
- })
+ `}
+ variables={{}}
+ render={({ props, error }) => {
+ if (props?.artist) {
+ return (
+
+
+
+ )
+ } else if (error) {
+ console.error(error)
+ }
+ }}
+ />
+ )
+
+ const wrapper = mount()
+ env.mock.resolveMostRecentOperation(operation =>
+ MockPayloadGenerator.generate(operation, {
+ Artist: () => response,
+ })
+ )
+ wrapper.update()
+ return wrapper
}
beforeEach(() => {
+ env = createMockEnvironment()
const mockTracking = useTracking as jest.Mock
mockTracking.mockImplementation(() => {
return {
@@ -58,38 +70,40 @@ describe("ArtistConsignButton", () => {
describe("Top 20 (Microfunnel) and Target Supply Button", () => {
const response = {
- artist: {
- targetSupply: {
- isInMicrofunnel: true,
- isTargetSupply: true,
- },
- internalID: "fooBarBaz",
- slug: "alex-katz",
- name: "Alex Katz",
- href: "/artist/alex-katz",
- image: {
- cropped: {
- url:
- "https://d7hftxdivxxvm.cloudfront.net?resize_to=fill&width=75&height=66&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FbrHdWfNxoereaVk2VOneuw%2Flarge.jpg",
- },
+ targetSupply: {
+ isInMicrofunnel: true,
+ isTargetSupply: true,
+ },
+ internalID: "fooBarBaz",
+ slug: "alex-katz",
+ name: "Alex Katz",
+ href: "/artist/alex-katz",
+ image: {
+ cropped: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fill&width=75&height=66&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FbrHdWfNxoereaVk2VOneuw%2Flarge.jpg",
},
- id: "QXJ0aXN0OjRkOGQxMjBjODc2YzY5N2FlMTAwMDA0Ng==",
},
+ id: "QXJ0aXN0OjRkOGQxMjBjODc2YzY5N2FlMTAwMDA0Ng==",
}
const analyticsEvent = {
action_type: "Click",
context_page: "Artist",
- context_page_owner_id: response.artist.internalID,
- context_page_owner_slug: response.artist.slug,
+ context_page_owner_id: response.internalID,
+ context_page_owner_slug: response.slug,
context_page_owner_type: "Artist",
context_module: "ArtistConsignment",
subject: "Get Started",
}
describe("desktop", () => {
- it("renders properly when in microfunnel", async () => {
- const wrapper = await getWrapper({ breakpoint: "md", response })
+ it("renders properly when in microfunnel", () => {
+ const wrapper = getWrapper({
+ breakpoint: "md",
+ response,
+ })
+
expect(wrapper.find("Image").length).toEqual(1)
expect(wrapper.text()).toContain("Sell your Alex Katz")
expect(wrapper.find("RouterLink").html()).toContain(
@@ -99,8 +113,8 @@ describe("ArtistConsignButton", () => {
it("renders properly when target supply", async () => {
const targetSupplyResponse = cloneDeep(response)
- targetSupplyResponse.artist.targetSupply.isInMicrofunnel = false
- targetSupplyResponse.artist.targetSupply.isTargetSupply = true
+ targetSupplyResponse.targetSupply.isInMicrofunnel = false
+ targetSupplyResponse.targetSupply.isTargetSupply = true
const wrapper = await getWrapper({
breakpoint: "md",
response: targetSupplyResponse,
@@ -110,18 +124,18 @@ describe("ArtistConsignButton", () => {
expect(wrapper.find("RouterLink").html()).toContain(`href="/consign"`)
})
- it("guards against missing imageURL", async () => {
+ it("guards against missing imageURL", () => {
const responseWithoutImage = cloneDeep(response)
- responseWithoutImage.artist.image = null
- const wrapper = await getWrapper({
+ responseWithoutImage.image = null
+ const wrapper = getWrapper({
breakpoint: "md",
response: responseWithoutImage,
})
expect(wrapper.find("Image").length).toEqual(0)
})
- it("tracks clicks", async () => {
- const wrapper = await getWrapper({
+ it("tracks clicks", () => {
+ const wrapper = getWrapper({
breakpoint: "md",
response,
})
@@ -134,8 +148,8 @@ describe("ArtistConsignButton", () => {
})
describe("mobile", () => {
- it("renders properly when in microfunnel", async () => {
- const wrapper = await getWrapper({ breakpoint: "xs", response })
+ it("renders properly when in microfunnel", () => {
+ const wrapper = getWrapper({ breakpoint: "xs", response })
expect(wrapper.find("Image").length).toEqual(1)
expect(wrapper.text()).toContain("Sell your Alex Katz")
expect(wrapper.find("RouterLink").html()).toContain(
@@ -143,11 +157,11 @@ describe("ArtistConsignButton", () => {
)
})
- it("renders properly when target supply", async () => {
+ it("renders properly when target supply", () => {
const targetSupplyResponse = cloneDeep(response)
- targetSupplyResponse.artist.targetSupply.isInMicrofunnel = false
- targetSupplyResponse.artist.targetSupply.isTargetSupply = true
- const wrapper = await getWrapper({
+ targetSupplyResponse.targetSupply.isInMicrofunnel = false
+ targetSupplyResponse.targetSupply.isTargetSupply = true
+ const wrapper = getWrapper({
breakpoint: "xs",
response: targetSupplyResponse,
})
@@ -156,18 +170,18 @@ describe("ArtistConsignButton", () => {
expect(wrapper.find("RouterLink").html()).toContain(`href="/consign"`)
})
- it("guards against missing imageURL", async () => {
+ it("guards against missing imageURL", () => {
const responseWithoutImage = cloneDeep(response)
- responseWithoutImage.artist.image = null
- const wrapper = await getWrapper({
+ responseWithoutImage.image = null
+ const wrapper = getWrapper({
breakpoint: "md",
response: responseWithoutImage,
})
expect(wrapper.find("Image").length).toEqual(0)
})
- it("tracks clicks", async () => {
- const wrapper = await getWrapper({
+ it("tracks clicks", () => {
+ const wrapper = getWrapper({
breakpoint: "xs",
response,
})
@@ -182,45 +196,43 @@ describe("ArtistConsignButton", () => {
describe("Default Button", () => {
const response = {
- artist: {
- targetSupply: {
- isInMicrofunnel: false,
- isTargetSupply: false,
- },
- internalID: "fooBarBaz",
- slug: "alex-katz",
- name: "Andy Warhol",
- href: "/artist/andy-warhol",
- image: {
- cropped: {
- url:
- "https://d7hftxdivxxvm.cloudfront.net?resize_to=fill&width=75&height=66&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FbrHdWfNxoereaVk2VOneuw%2Flarge.jpg",
- },
+ targetSupply: {
+ isInMicrofunnel: false,
+ isTargetSupply: false,
+ },
+ internalID: "fooBarBaz",
+ slug: "alex-katz",
+ name: "Andy Warhol",
+ href: "/artist/andy-warhol",
+ image: {
+ cropped: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fill&width=75&height=66&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FbrHdWfNxoereaVk2VOneuw%2Flarge.jpg",
},
- id: "QXJ0aXN0OjRkOGQxMjBjODc2YzY5N2FlMTAwMDA0Ng==",
},
+ id: "QXJ0aXN0OjRkOGQxMjBjODc2YzY5N2FlMTAwMDA0Ng==",
}
const analyticsEvent = {
action_type: "Click",
context_page: "Artist",
- context_page_owner_id: response.artist.internalID,
- context_page_owner_slug: response.artist.slug,
+ context_page_owner_id: response.internalID,
+ context_page_owner_slug: response.slug,
context_page_owner_type: "Artist",
context_module: "ArtistConsignment",
subject: "Get Started",
}
describe("desktop", () => {
- it("renders properly", async () => {
- const wrapper = await getWrapper({ breakpoint: "md", response })
+ it("renders properly", () => {
+ const wrapper = getWrapper({ breakpoint: "md", response })
expect(wrapper.find("Image").length).toEqual(0)
expect(wrapper.text()).toContain("Sell art from your collection")
expect(wrapper.find("RouterLink").html()).toContain(`href="/consign"`)
})
- it("tracks clicks", async () => {
- const wrapper = await getWrapper({
+ it("tracks clicks", () => {
+ const wrapper = getWrapper({
breakpoint: "md",
response,
})
@@ -233,15 +245,15 @@ describe("ArtistConsignButton", () => {
})
describe("mobile", () => {
- it("renders properly", async () => {
- const wrapper = await getWrapper({ breakpoint: "xs", response })
+ it("renders properly", () => {
+ const wrapper = getWrapper({ breakpoint: "xs", response })
expect(wrapper.find("Image").length).toEqual(0)
expect(wrapper.text()).toContain("Sell art from your collection")
expect(wrapper.find("RouterLink").html()).toContain(`href="/consign"`)
})
- it("tracks clicks", async () => {
- const wrapper = await getWrapper({
+ it("tracks clicks", () => {
+ const wrapper = getWrapper({
breakpoint: "xs",
response,
})
diff --git a/src/v2/__generated__/ArtistConsignButton_Test_Query.graphql.ts b/src/v2/__generated__/ArtistConsignButton_Test_Query.graphql.ts
index 43d2dee377f..bda37146cba 100644
--- a/src/v2/__generated__/ArtistConsignButton_Test_Query.graphql.ts
+++ b/src/v2/__generated__/ArtistConsignButton_Test_Query.graphql.ts
@@ -3,45 +3,22 @@
import { ConcreteRequest } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
-export type ArtistConsignButton_Test_QueryVariables = {
- artistID: string;
-};
+export type ArtistConsignButton_Test_QueryVariables = {};
export type ArtistConsignButton_Test_QueryResponse = {
readonly artist: {
readonly " $fragmentRefs": FragmentRefs<"ArtistConsignButton_artist">;
} | null;
};
-export type ArtistConsignButton_Test_QueryRawResponse = {
- readonly artist: ({
- readonly targetSupply: ({
- readonly isInMicrofunnel: boolean | null;
- readonly isTargetSupply: boolean | null;
- }) | null;
- readonly internalID: string;
- readonly slug: string;
- readonly name: string | null;
- readonly href: string | null;
- readonly image: ({
- readonly cropped: ({
- readonly url: string | null;
- }) | null;
- }) | null;
- readonly id: string | null;
- }) | null;
-};
export type ArtistConsignButton_Test_Query = {
readonly response: ArtistConsignButton_Test_QueryResponse;
readonly variables: ArtistConsignButton_Test_QueryVariables;
- readonly rawResponse: ArtistConsignButton_Test_QueryRawResponse;
};
/*
-query ArtistConsignButton_Test_Query(
- $artistID: String!
-) {
- artist(id: $artistID) {
+query ArtistConsignButton_Test_Query {
+ artist(id: "alex-katz") {
...ArtistConsignButton_artist
id
}
@@ -67,29 +44,21 @@ fragment ArtistConsignButton_artist on Artist {
const node: ConcreteRequest = (function(){
var v0 = [
{
- "defaultValue": null,
- "kind": "LocalArgument",
- "name": "artistID",
- "type": "String!"
- }
-],
-v1 = [
- {
- "kind": "Variable",
+ "kind": "Literal",
"name": "id",
- "variableName": "artistID"
+ "value": "alex-katz"
}
];
return {
"fragment": {
- "argumentDefinitions": (v0/*: any*/),
+ "argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ArtistConsignButton_Test_Query",
"selections": [
{
"alias": null,
- "args": (v1/*: any*/),
+ "args": (v0/*: any*/),
"concreteType": "Artist",
"kind": "LinkedField",
"name": "artist",
@@ -101,20 +70,20 @@ return {
"name": "ArtistConsignButton_artist"
}
],
- "storageKey": null
+ "storageKey": "artist(id:\"alex-katz\")"
}
],
"type": "Query"
},
"kind": "Request",
"operation": {
- "argumentDefinitions": (v0/*: any*/),
+ "argumentDefinitions": [],
"kind": "Operation",
"name": "ArtistConsignButton_Test_Query",
"selections": [
{
"alias": null,
- "args": (v1/*: any*/),
+ "args": (v0/*: any*/),
"concreteType": "Artist",
"kind": "LinkedField",
"name": "artist",
@@ -221,7 +190,7 @@ return {
"storageKey": null
}
],
- "storageKey": null
+ "storageKey": "artist(id:\"alex-katz\")"
}
]
},
@@ -230,9 +199,9 @@ return {
"metadata": {},
"name": "ArtistConsignButton_Test_Query",
"operationKind": "query",
- "text": "query ArtistConsignButton_Test_Query(\n $artistID: String!\n) {\n artist(id: $artistID) {\n ...ArtistConsignButton_artist\n id\n }\n}\n\nfragment ArtistConsignButton_artist on Artist {\n targetSupply {\n isInMicrofunnel\n isTargetSupply\n }\n internalID\n slug\n name\n href\n image {\n cropped(width: 66, height: 66) {\n url\n }\n }\n}\n"
+ "text": "query ArtistConsignButton_Test_Query {\n artist(id: \"alex-katz\") {\n ...ArtistConsignButton_artist\n id\n }\n}\n\nfragment ArtistConsignButton_artist on Artist {\n targetSupply {\n isInMicrofunnel\n isTargetSupply\n }\n internalID\n slug\n name\n href\n image {\n cropped(width: 66, height: 66) {\n url\n }\n }\n}\n"
}
};
})();
-(node as any).hash = 'b38a3cd19b52d087ec99c55c9aeb0597';
+(node as any).hash = '51589b480b6186c9dd1c1c5eb91e6ed2';
export default node;
diff --git a/yarn.lock b/yarn.lock
index 7e928489273..1dc7af3b341 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17965,7 +17965,6 @@ pascalcase@^0.1.1:
"passport-apple@https://github.com/artsy/passport-apple#f41adb7822c8344b72bc36a7d68312f6592cb14f":
version "1.1.2"
- uid f41adb7822c8344b72bc36a7d68312f6592cb14f
resolved "https://github.com/artsy/passport-apple#f41adb7822c8344b72bc36a7d68312f6592cb14f"
dependencies:
jsonwebtoken "^8.5.1"
@@ -20391,6 +20390,15 @@ relay-runtime@9.1.0:
"@babel/runtime" "^7.0.0"
fbjs "^1.0.0"
+relay-test-utils@9.1.0:
+ version "9.1.0"
+ resolved "https://registry.yarnpkg.com/relay-test-utils/-/relay-test-utils-9.1.0.tgz#b516a96c47f905e73f5a577df24d0195f2a65ea6"
+ integrity sha512-fTgtLbV/7nXD9u/Ujevc9ohRaZpsQBtvJogh076bUB+Vcvv4G9TQ1oZLKLXxJTBcnQEEzrgzLHGjrxVGRb548A==
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+ fbjs "^1.0.0"
+ relay-runtime "9.1.0"
+
release-zalgo@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/release-zalgo/-/release-zalgo-1.0.0.tgz#09700b7e5074329739330e535c5a90fb67851730"