We should add documentation to the README for the package generator.

In particular, consider proper tests for storage and more rigour around the other tests (testing the actual behaviour vs the current generic tests for the mocking)

Sometimes we need to do manual tag manipulation, and it would be much easier if it was partially automated. We should make an npm script that generates an appropriate tag for the current commit for a given package by parsing it's package.json.

Using @shopify/enzyme-utilities
and doing

const wrapper = mount(<ConnectedAccountCard {...mockDefaultProps} />);
trigger(wrapper.find(Button), 'onClick');

I get the following typescript error

Argument of type 'ReactWrapp
er<Props, never>' is not assignable to parameter of type 'AnyWrapper'.
  Type 'ReactWrapper<Props, never>' is not assignable to type 'CommonWrapper<any, any>'.
    Types of property 'filterWhere' are incompatible.
      Type '(predicate: (wrapper: ReactWrapper<Props, never>) => boolean) => ReactWrapper<Props, never>' is not assignable to type '(predicate: (wrapper:
CommonWrapper<any, any>) => boolean) => CommonWrapper<any, any>'.
        Types of parameters 'predicate' and 'predicate' are incompatible.
          Types of parameters 'wrapper' and 'wrapper' are incompatible.
            Type 'ReactWrapper<Props, never>' is not assignable to type 'CommonWrapper<any, any>'.

upon on research I see the type definition is different from the definition in web

in web

function trigger(wrapper: AnyWrapper, keypath: string, ...args: any[]) 
interface AnyWrapper {
  props: CommonWrapper<any, any>['props'];
  length: number;
  instance(): any;
  update(): void;
}

in @shopify/enzyme-utilities

import { ReactWrapper, CommonWrapper } from 'enzyme';
export declare type AnyWrapper = ReactWrapper<any, any> | CommonWrapper<any, any>;
export declare function trigger(wrapper: AnyWrapper, keypath: string, ...args: any[]): any;

Also I still need to use '@shopify/enzyme-utilities/dist'

We get relatively confusing build errors if our typescript versions go out of synch between our packages and our root lerna directory. We should consider a script that runs pretest and asserts they are the same. That way we can surface a useful error to devs.

Version Number: "@shopify/jest-mock-apollo": "^1.0.2"

Using the module (ie import {registerSchema} from '@shopify/jest-mock-apollo';)
I am running into error

{
	"resource": "/Users/yin-shaochen/src/github.com/Shopify/sell-on-amazon/test/javascripts/web-foundation/setup.ts",
	"owner": "typescript",
	"code": "7016",
	"severity": 8,
	"message": "Could not find a declaration file for module '@shopify/jest-mock-apollo'. '/Users/yin-shaochen/src/github.com/Shopify/sell-on-amazon/node_modules/@shopify/jest-mock-apollo/dist/index.js' implicitly has an 'any' type.\n  Try `npm install @types/shopify__jest-mock-apollo` if it exists or add a new declaration (.d.ts) file containing `declare module 'shopify__jest-mock-apollo';`",
	"source": "ts",
	"startLineNumber": 6,
	"startColumn": 30,
	"endLineNumber": 6,
	"endColumn": 57
}

Current workaround
Using import {registerSchema} from '@shopify/jest-mock-apollo/dist'; instead

From #101 (review)

koa-shopify-graphql-proxy is the only package I am aware of that does not follow the pattern of being mounted with a function call ().

We should change that package (and any others) and enforce this style moving forward. This will mean things are consistent and configuration can be added to any package at a later time without it breaking past usage.

We need to open source this repo and get all it's packages onto the public registry :)

We should create a package that handles auth with shopify using koa.

We should create a koa-cloud package so consumers can easily use koa on cloud engine.

We need to properly test things like resolveAllGraphQL, query resolution, etc. We currently just test that the context doesn't screw things up.

We have a number of dom mocking utiltities that our dependant projects need.

Since they are all mocking against the same domain we should pull them out together for ease of use.

import {location, timer} from '@shopify/jest-dom-mocks';

Problem Summary

Logging is an important tool in a developer’s arsenal. It can be used to debug applications both in development and production to better diagnose problems. It can be used, along with statistical analysis, to gain insight into the activity of even the most complex distributed systems.

As Shopify becomes increasingly distributed and complex, it will become imperative that logging is something that we do right.

We eventually want to build a great experience with a nice API, filtering, and a slick UI. By getting the API right and creating a nice separation of concerns, we allow for ease of continuous improvement for things like filtering, etc.

In development, for web application, there are concerns around simultaneous, asynchronous requests. We want immediate feedback, but, when many requests are happening at the same time, the UI is hard to get right.

In production web applications, stdout is our interface into splunk (via fluentd). We want our logs to have context about our application, and perhaps we want to aggregate these logs, so that we send only a single JSON payload to splunk per request.

For CLI applications, we’d like to avoid duplicating work in creating a nice UI for logging. It would be nice if our logger was not specifically tied to server applications.

Proposed Solution

• Logging is split into 2 stages:
  • Logging (API emits intermediate data)
  • Formatting (converts intermediate data into desired format)
• We use JSON as the intermediate logging format (pino / bunyan / bole)
• The core logging API will stay as close as possible to https://console.spec.whatwg.org
  • If API exists, we’ll use it:
    • .time, .timeEnd
  • If API doesn’t exist, we’ll use idiomatic naming:
    • .tag, .tagEnd
• Buffering for production is handled by @shopify/koa-logger

Why?

• By splitting logging into 2 stages, we conceptually decouple the concept of an API from the concept of a logging UI. This allows us to focus on perfecting the 2 independently of each other.
• By logging to a JSON format, we can easily create aggregation or filtering logic that gets applied before the logs get formatted. Again, we can do all of this independently of the logger API mechanism.
• By staying close to the console specification for our API, we reduce friction for new developers into our code base. We also defer to the W3C arguments or differences of opinion for how things like tagging, grouping, or timing should be done. Sometimes it’s nice to have a decision made for you in a consistent way, even if it’s not your favorite outcome.

References

Inspiration was taken from many sources, but the primary influences were:
http://getpino.io/#/
https://github.com/klauscfhq/signale
https://console.spec.whatwg.org/

We should pull our koa mocking utilities out of web.

1. We might want to also show an example using mock providers over custom context.

mount(
  <ApolloProvider client={createGraphQLClient()}>
    <SomePage/>
  </ApolloProvider>
);

2. we should document the API instead of just telling people to look at the code.

We should port our shortcut manager into this repository

In particular, the localStorage and sessionStorage setup needs to be documented, and we should at least provide a list of the utilities / mocks we provide.

We should pull out our react-router-3.x mocks.

It would be good to be able to set variables on the request, such as request.ip.

We should create a package to house our shortcut manager library from web.

We should start giving proper descriptions of what's changed in our git tag descriptions so that a user can browse the release tab and get a feel for what's changing.

Performance metrics implemented with DogStatsD (https://docs.datadoghq.com/developers/dogstatsd/) are used widely across services at Shopify. The standard metrics should be documented and following strong conventions.

This package aims to provide standard middlewares and instrumentation tooling for Koa.

Right now linting and testing is a pain if you are only working in the scope of one package folder. We should minimize this friction by getting all the commands working in each package with as little config duplication as we can.

We should pull @lemonmade's i18n work into a package.

We should document our middleware conventions in a decision document, it should cover:

• always exporting factories
• naming factories for what they output (eg. shopifyAuth > createShopifyAuth)
• always scoping to a default path so things 'just work' for simple cases
• supporting mountability / router composability when possible

Some thought will need to go into what part of this makes sense for a public package, but certainly the idea of uploading assets from webpack to some sort of cdn makes sense in that context.

Status messages

const ctx = createMockContext({
  statusCode: 302,
});

sets ctx.status to 302, but message to OK. Furthermore, the message cannot be explciitly overridden:

redirects

const ctx = createMockContext({
  statusCode: 302,
})
ctx.redirect('example.com');

I would assume that, after this, ctx.response.headers.location would be example.com, but instead it is undefined.

cc @TheMallen

Right now we are generating the callback redirect for the koa-shopify-auth middleware using ctx.path. This is hostile to cleanly composing it using koa-mount.

At the moment we support a custom prefix configuration option, but it seems like bette citizenry with the framework to just use the simplest possible path in our own logic and then support koa-mount for namespacing our routes if a user wants to.

https://github.com/Shopify/web/blob/master/app/utilities/decorators.ts#L36-L59

I made a typo when specifying the schemaBuildPath and it was really hard to debug.

{"length": 0, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__root__): {"length": 1, Symbol(enzyme.__unrendered__): <Apollo(ShopInfo) />, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__node__): {"instance": {"__reactInternalMemoizedMaskedChildContext": {"client": [ApolloClient], "getQueryRecycler": undefined}, "__reactInternalMemoizedUnmaskedChildContext": {"client": [ApolloClient], "easdk": undefined, "polaris": [Object]}, "_reactInternalFiber": {"_debugID": 5, "_debugIsCurrentlyTiming": false, "_debugOwner": [FiberNode], "_debugSource": null, "alternate": [FiberNode], "child": [FiberNode], "effectTag": 5, "expirationTime": 1, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 0, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "sibling": null, "stateNode": [Circular], "tag": 2, "type": [Function h], "updateQueue": [Object]}, "_reactInternalInstance": {}, "client": {"cache": [InMemoryCache], "defaultOptions": [Object], "disableNetworkFetches": true, "graphQLRequests": [Requests], "graphQLResults": [Array], "link": [ApolloLink], "mutate": [Function bound ], "query": [Function bound ], "queryDeduplication": true, "queryManager": [QueryManager], "reFetchObservableQueries": [Function bound ], "resetStore": [Function bound ], "resetStoreCallbacks": [Array], "ssrMode": true, "store": [DataStore], "version": "2.3.1", "watchQuery": [Function bound ]}, "context": {"client": [ApolloClient], "getQueryRecycler": undefined}, "dataForChildViaMutation": [Function bound ], "hasMounted": true, "previousData": {}, "props": {}, "queryObservable": {"_subscriber": [Function anonymous], "isCurrentlyPolling": false, "isTornDown": true, "lastError": [Error: Network error: Error writing result to store for query:
     query ShopInfo {
      currentShop {
        facebookPage {
          name
          __typename
        }
        __typename
      }
    }

    Cannot read property 'currentShop' of undefined], "observers": [Array], "options": [Object], "queryId": "1", "queryManager": [QueryManager], "scheduler": [QueryScheduler], "shouldSubscribe": true, "subscriptionHandles": [Array], "variables": [Object]}, "querySubscription": {"_cleanup": undefined, "_observer": undefined, "_queue": undefined, "_state": "closed"}, "refs": {}, "renderedElement": <ShopInfo data={[Object]} />, "setWrappedInstance": [Function bound ], "shouldRerender": false, "state": null, "type": 0, "updater": {"enqueueForceUpdate": [Function enqueueForceUpdate], "enqueueReplaceState": [Function enqueueReplaceState], "enqueueSetState": [Function enqueueSetState], "isMounted": [Function isMounted]}, "version": 0}, "key": undefined, "nodeType": "class", "props": {}, "ref": null, "rendered": {"instance": {"_reactInternalFiber": [FiberNode], "_reactInternalInstance": [Object], "context": [Object], "props": [Object], "refs": [Object], "state": null, "updater": [Object]}, "key": undefined, "nodeType": "class", "props": {"data": [Object]}, "ref": null, "rendered": null, "type": [Function ShopInfo]}, "type": [Function h]}, Symbol(enzyme.__nodes__): [{"instance": {"__reactInternalMemoizedMaskedChildContext": [Object], "__reactInternalMemoizedUnmaskedChildContext": [Object], "_reactInternalFiber": [FiberNode], "_reactInternalInstance": [Object], "client": [ApolloClient], "context": [Object], "dataForChildViaMutation": [Function bound ], "hasMounted": true, "previousData": [Object], "props": [Object], "queryObservable": [ObservableQuery], "querySubscription": [Subscription], "refs": [Object], "renderedElement": <ShopInfo … />, "setWrappedInstance": [Function bound ], "shouldRerender": false, "state": null, "type": 0, "updater": [Object], "version": 0}, "key": undefined, "nodeType": "class", "props": {}, "ref": null, "rendered": {"instance": [ShopInfo], "key": undefined, "nodeType": "class", "props": [Object], "ref": null, "rendered": null, "type": [Function ShopInfo]}, "type": [Function h]}], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true}}, "childContextTypes": {"easdk": [Function bound checkType], "polaris": [Function bound checkType]}, "context": {"client": {"cache": [InMemoryCache], "defaultOptions": [Object], "disableNetworkFetches": true, "graphQLRequests": [Requests], "graphQLResults": [Array], "link": [ApolloLink], "mutate": [Function bound ], "query": [Function bound ], "queryDeduplication": true, "queryManager": [QueryManager], "reFetchObservableQueries": [Function bound ], "resetStore": [Function bound ], "resetStoreCallbacks": [Array], "ssrMode": true, "store": [DataStore], "version": "2.3.1", "watchQuery": [Function bound ]}, "easdk": undefined, "polaris": {"intl": [Intl], "link": [Link], "stickyManager": [StickyManager]}}}}, Symbol(enzyme.__node__): undefined, Symbol(enzyme.__nodes__): [], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true}}, "childContextTypes": {"easdk": [Function bound checkType], "polaris": [Function bound checkType]}, "context": {"client": {"cache": {"addTypename": true, "config": [Object], "data": [ObjectCache], "optimistic": [Array], "silenceBroadcast": false, "watches": [Array]}, "defaultOptions": {}, "disableNetworkFetches": true, "graphQLRequests": {"requests": [Array]}, "graphQLResults": [[Promise]], "link": {"request": [Function anonymous]}, "mutate": [Function bound ], "query": [Function bound ], "queryDeduplication": true, "queryManager": {"dataStore": [DataStore], "deduplicator": [ApolloLink], "fetchQueryPromises": [Map], "idCounter": 3, "link": [ApolloLink], "mutationStore": [MutationStore], "onBroadcast": [Function onBroadcast], "queries": [Map], "queryDeduplication": true, "queryIdsByName": [Object], "queryStore": [QueryStore], "scheduler": [QueryScheduler]}, "reFetchObservableQueries": [Function bound ], "resetStore": [Function bound ], "resetStoreCallbacks": [], "ssrMode": true, "store": {"cache": [InMemoryCache]}, "version": "2.3.1", "watchQuery": [Function bound ]}, "easdk": undefined, "polaris": {"intl": {"translation": [Object]}, "link": {"linkComponent": undefined}, "stickyManager": {"stickyItems": [Array], "stuckItems": [Array]}}}}}
    received.length:
      0

The error was something about a network error and data being undefined. Anyways, once I console.log'ed out the graphQLResults, I found the proper error.

Error: ENOENT: no such file or directory, open '/Users/user/path/to/somewhere/tmp/sewing-kit/schema.graphql'

It would be great if this threw the error earlier and more explicitly.

A package that will get the CSRF token from a client side only rails app and build a custom apollo link.

This is currently being use in sell-on-amazon
https://github.com/Shopify/sell-on-amazon/blob/master/app/ui/foundation/App/App.tsx#L13-L22

in facebook-ads with test
https://github.com/Shopify/facebook-ads/pull/116

Our deploy logs are full of deprecation notices, we should switch prepublish to prepare.

Mostly these type defins from https://github.com/Shopify/web/blob/master/app/utilities/graphql.ts

this might not be needed anymore with newer version of @types/apollo-client

The code is a bit cramped and has many nested conditionals. We can probably do better.

Our client apps need our enzyme utilities.

:)

We should also allow just an object to be passed to hardcode any matchMedia call

deferedScripts -> deferredScripts

Owners: @Shopify/nobody (This repo has no owners)
Service: quilt/production

Please set a classification.

You can add it in service.yml, under the key classification.

Refer to the detailed documentation for more information.

It seems that the headers passed into createMockContext only get defined on the request, but not on the context itself. In particular, after calling:

const ctx = createMockContext({
  method: 'get',
  statusCode: 200,
  url: 'example.com',
  headers: {
    'User-Agent': 'some-ua-string',
  },
});

I would expect the following to yield some-ua-string:

ctx.header['User-Agent']

cc @TheMallen

One of our most important and most useful mocks is our graphql client mock. We should expose createMockGraphQLClient as a test utility.

An alternate api would be to just expose a <MockApolloProvider> that you could wrap your components with in tests.

Owners: @Shopify/nobody (This repo has no owners)
Service: quilt/experiments

Please set a classification.

You can add it in service.yml, under the key experiments.classification.

Refer to the detailed documentation for more information.

We should pull out our form handling HoC into a package.

depends on #90

We had a build fail due to this already, so it's probably best to catch before we ever get to shipit.
https://shipit.shopify.io/shopify/quilt/production/deploys/549563.txt