From b2bd9fdcd5836e66f2c86a604a7de9494ce2c2aa Mon Sep 17 00:00:00 2001 From: Christopher Pappas Date: Mon, 5 Oct 2020 16:22:04 -0700 Subject: [PATCH] chore: Add react-test-utils --- package.json | 1 + .../__tests__/ArtistConsignButton.jest.tsx | 196 ++++++++++-------- .../ArtistConsignButton_Test_Query.graphql.ts | 57 ++--- yarn.lock | 10 +- 4 files changed, 127 insertions(+), 137 deletions(-) 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"