Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Add relay-test-utils lib #6414

Merged
merged 1 commit into from
Oct 6, 2020
Merged

chore: Add relay-test-utils lib #6414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
196 changes: 104 additions & 92 deletions src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,61 @@
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")

describe("ArtistConsignButton", () => {
const trackEvent = jest.fn()

const getWrapper = async ({
breakpoint = "xs",
response,
}: {
breakpoint: Breakpoint
response: ArtistConsignButtonQueryRawResponse
}) => {
return await renderRelayTree({
Component: ({ artist }) => {
return (
<MockBoot breakpoint={breakpoint}>
<ArtistConsignButtonFragmentContainer artist={artist} />
</MockBoot>
)
},
query: graphql`
query ArtistConsignButton_Test_Query($artistID: String!)
@raw_response_type {
artist(id: $artistID) {
...ArtistConsignButton_artist
let env = createMockEnvironment() as ReturnType<typeof createMockEnvironment>

const getWrapper = ({ breakpoint = "xs", response }) => {
const TestRenderer = () => (
<QueryRenderer<ArtistConsignButton_Test_Query>
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 (
<MockBoot breakpoint={breakpoint as Breakpoint}>
<ArtistConsignButtonFragmentContainer artist={props.artist} />
</MockBoot>
)
} else if (error) {
console.error(error)
}
}}
/>
)

const wrapper = mount(<TestRenderer />)
env.mock.resolveMostRecentOperation(operation =>
MockPayloadGenerator.generate(operation, {
Artist: () => response,
})
)
wrapper.update()
return wrapper
}

beforeEach(() => {
env = createMockEnvironment()
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotta remember to recreate the environment between each test!

const mockTracking = useTracking as jest.Mock
mockTracking.mockImplementation(() => {
return {
Expand All @@ -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(
Expand All @@ -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,
Expand All @@ -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,
})
Expand All @@ -134,20 +148,20 @@ 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(
`href="/artist/alex-katz/consign"`
)
})

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,
})
Expand All @@ -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,
})
Expand All @@ -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,
})
Expand All @@ -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,
})
Expand Down
Loading