Skip to content
This repository has been archived by the owner on Mar 12, 2020. It is now read-only.

Port Relay test tooling from Reaction, update to Node 10 #1209

Merged
merged 9 commits into from
Nov 1, 2018
Merged

Port Relay test tooling from Reaction, update to Node 10 #1209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d695b45
Port Relay DevTools from Reaction
javamonn Oct 26, 2018
133068b
Patch relay-mock-network-layer to support persisted query resolution
javamonn Oct 30, 2018
89c5202
Port over MockRelayRendererFixtures, renderWithLoadProgress tests
javamonn Oct 30, 2018
a765905
Update to Node 10 and update affected testing dependencies
javamonn Oct 31, 2018
ab692ae
Remove unused RAF dep
javamonn Oct 31, 2018
6df6bf4
Add Changelog entry
javamonn Oct 31, 2018
eec0d25
Lift Context out of tests and into utils
javamonn Oct 31, 2018
31aab9a
Post-rebase lockfile updates
javamonn Oct 31, 2018
72f7553
Merge branch 'master' into port-relay-devtools
orta Nov 1, 2018
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
2 changes: 1 addition & 1 deletion .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
8.4
10.13.0
2 changes: 1 addition & 1 deletion .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
cache: yarn
language: node_js
node_js: '8.4'
node_js: '10.13.0'

matrix:
include:
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
- Adds Mapbox + Location Component - luc
- Adds Artwork grids with infinite scroll to Show View - ashley
- Fixes crash in marketing banner - ash
- Adds Relay DevTools, Update Node.js to 10.13.0 - javamonn

### 1.7.1

Expand Down
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ endif
ifndef NVM
@echo "Installing NVM"
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
nvm install 8.4
nvm install 10.13.0
endif

ifndef YARN
Expand Down
15 changes: 9 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"native-code-version": 9,
"description": "Artsy React(Native) components.",
"engines": {
"node": "8.x.x",
"node": "10.x",
"npm": "6.1.x",
"yarn": "1.x"
},
Expand All @@ -30,7 +30,7 @@
"test": "jest",
"test:ci": "jest --outputFile test-results.json --json --runInBand",
"testing": "jest --watch",
"relay": "relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__ --persist --persistOutput ./src/__generated__/complete.queryMap.json",
"relay": "relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__ --persist --persistOutput ./src/__generated__/complete.queryMap.json --exclude '**/node_modules/**,**/__mocks__/**,**/__generated__/**'",
"release": "node scripts/release.js",
"generate-graphql-query-map": "node scripts/generate-graphql-query-map.js > Pod/Classes/GraphQL/ARGraphQLQueryMap.generated.objc",
"merge-graphql-query-map": "node scripts/merge-graphql-query-map.js",
Expand Down Expand Up @@ -61,10 +61,10 @@
"lib"
],
"resolutions": {
"parse5": "5.1.0",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This resolution does not appear to be necessary anymore. Original discussion here: https://github.com/artsy/emission/pull/1185/files#r217160876

"graphql": "^0.13",
"relay-runtime": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.5/relay-runtime-1.5.0-artsy.5.tgz",
"@types/relay-runtime": "^1.3.5"
"@types/relay-runtime": "^1.3.5",
"cheerio": "0.22.0"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

jest-environment-jsdom depends on cheerio@^1.0.0-rc.2. I ran into a serialization error with this version, where <Image /> elements rendered to string would be transformed into <img> instead of the expected <image />:

 renderRelayTree › resolves a promise once the full tree (including nested query renderers) has been rendered

    expect(received).toEqual(expected)

    Expected value to equal:
      "<view><img source=\"[object Object]\"><text ellipsizemode=\"tail\">Mona Lisa</text><text ellipsizemode=\"tail\">Leonardo da Vinci</text></view>"
    Received:
      "<view><image source=\"[object Object]\"></image><text ellipsizemode=\"tail\">Mona Lisa</text><text ellipsizemode=\"tail\">Leonardo da Vinci</text></view>"

My hunch is that enzyme must be passing slightly different configuration options down to cheerio when calling render vs mount, but not sure. Resolving to the latest non-rc cheerio version fixes this, but does appear to be a hack.

},
"dependencies": {
"@artsy/palette": "^2.11.0",
Expand Down Expand Up @@ -103,7 +103,7 @@
"@types/relay-runtime": "^1.3.5",
"@types/styled-system": "^3.0.1",
"awesome-typescript-loader": "^3.2.3",
"babel-jest": "^22.1.0",
"babel-jest": "^23.6.0",
"babel-plugin-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.3/babel-plugin-relay-1.5.0-artsy.3.tgz",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.24.1",
Expand All @@ -116,7 +116,7 @@
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"husky": "^0.14.3",
"jest": "^22.4.2",
"jest": "^23.6.0",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I had to upgrade jest as part of upgrading to node 10 due to needing this PR: jestjs/jest#6505

"jest-styled-components": "^4.10.0",
"lint-staged": "^6.0.0",
"patch-package": "^5.0.0",
Expand All @@ -130,6 +130,7 @@
"recursive-readdir-sync": "^1.0.6",
"relay-compiler": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.5/relay-compiler-1.5.0-artsy.5.tgz",
"relay-compiler-language-typescript": "^1.1.0",
"relay-mock-network-layer": "^1.3.0",
"relay2ts": "^0.2.0",
"snapshot-diff": "^0.2.1",
"stylelint": "^8.4.0",
Expand Down Expand Up @@ -163,6 +164,8 @@
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "/__tests__/.*-tests.(ts|tsx|js)$",
"testEnvironment": "jsdom",
"testURL": "http://localhost/",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/build",
Expand Down
95 changes: 95 additions & 0 deletions patches/relay-mock-network-layer+1.3.0.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
patch-package
--- a/node_modules/relay-mock-network-layer/index.js
+++ b/node_modules/relay-mock-network-layer/index.js
@@ -1,35 +1,66 @@
-'use strict';
+"use strict";

-const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');
-const { graphql, printSchema, buildClientSchema } = require('graphql');
+const {
+ makeExecutableSchema,
+ addMockFunctionsToSchema
+} = require("graphql-tools");
+const { graphql, printSchema, buildClientSchema } = require("graphql");
const RelayMockNetworkLayerError = require("./RelayMockNetworkLayerError");

-module.exports = function getNetworkLayer({schema, mocks, resolvers}) {
- return function fetchQuery(
- operation,
- variableValues
- ) {
- if (typeof schema === 'object' && schema.data) {
- schema = printSchema(buildClientSchema(schema.data));
- }
+/**
+ * @param {Object} networkConfig - The configuration for the mock network layer.
+ * @param {(string|Object)} networkConfig.schema - If string, the graphql schema SDL. If object, the JSON introspection query.
+ * @param {Object} networkConfig.mocks - Mock primative resolvers, passed directly to addMockFunctionsToSchema.
+ * @param {Object} networkConfig.resolvers - Default resolvers for a schema.
+ * @param {Object} [networkConfig.resolveQueryFromOperation] - If relay operation query text does not exist, used to resolve the query from the operation. Useful for persisted query support.
+ */
+function getNetworkLayer({
+ schema,
+ mocks,
+ resolvers,
+ resolveQueryFromOperation
+}) {
+ return function fetchQuery(operation, variableValues) {
+ if (typeof schema === "object" && schema.data) {
+ schema = printSchema(buildClientSchema(schema.data));
+ }

- const executableSchema = makeExecutableSchema({typeDefs: schema, resolvers});
+ const executableSchema = makeExecutableSchema({
+ typeDefs: schema,
+ resolvers
+ });

- // Add mocks, modifies schema in place
- addMockFunctionsToSchema({ schema: executableSchema, mocks });
+ // Add mocks, modifies schema in place
+ addMockFunctionsToSchema({ schema: executableSchema, mocks });

- return graphql(executableSchema, operation.text, null, null, variableValues).then(
- // Trigger Relay error in case of GraphQL errors (or errors in mutation response)
- // See https://github.com/facebook/relay/issues/1816
+ const query =
+ operation.text ||
+ (resolveQueryFromOperation && resolveQueryFromOperation(operation));
Copy link
Contributor Author

@javamonn javamonn Oct 31, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Lots of diff in this file due to running Prettier against it, but this is the only meaningful change. @orta and I paired on adding this in in response to the issue described in the frontend practice meeting. To put it into text: client side query resolving requires access to the relay query operation text which is not immediately available due to Emission's use of persisted queries, where only the ID is in the compiled artifact. This change allows us to pass in a query resolver function, where we then use the same approach used in fetchQuery.ts to resolve the ID in the query map.

Our usage of this can be seen here: https://github.com/javamonn/emission/blob/084f721f766476e497ecd078add48c5de5050db8/src/lib/tests/createMockNetworkLayer/index.ts#L21-L23

I will PR these changes against the upstream repository once we land them here.

Copy link
Member

Choose a reason for hiding this comment

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

Heads up that I have a PR over in relay-mock-network-layer that will allow us to pass additional options over: 1stdibs/relay-mock-network-layer#7

Copy link
Contributor

Choose a reason for hiding this comment

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

@javamonn @orta Can you elaborate on why you decided against disabling persisted queries in development?

Copy link
Contributor

Choose a reason for hiding this comment

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

Mainly that it increases the difference between dev and prod

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok.


- result => {
- if (result.errors && result.errors.length > 0) {
- return Promise.reject(new RelayMockNetworkLayerError(result.errors));
- }
- return Promise.resolve(result);
- }
- );
+ if (!query) {
+ throw new Error(
+ "Could not find query, ensure operation.text exists or pass resolveQueryFromOperation."
+ );
}
-};

+ return graphql(
+ executableSchema,
+ query,
+ null,
+ null,
+ variableValues
+ ).then(
+ // Trigger Relay error in case of GraphQL errors (or errors in mutation response)
+ // See https://github.com/facebook/relay/issues/1816
+
+ result => {
+ if (result.errors && result.errors.length > 0) {
+ return Promise.reject(new RelayMockNetworkLayerError(result.errors));
+ }
+ return Promise.resolve(result);
+ }
+ );
+ };
+}

+module.exports = getNetworkLayer;
122 changes: 122 additions & 0 deletions src/__generated__/MockRelayRendererFixturesArtistQuery.graphql.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions src/__generated__/MockRelayRendererFixturesArtistQuery.queryMap.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading