Skip to content

Commit

Permalink
chore: Add react-test-utils
Browse files Browse the repository at this point in the history
  • Loading branch information
@damassi
damassi committed Oct 5, 2020
1 parent b3f9540 commit b2bd9fd
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 137 deletions.
1 change: 1 addition & 0 deletions package.json
View file
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
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()
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

0 comments on commit b2bd9fd

Please sign in to comment.