Update Storefront API version to 2020-01 and add new client language header option

Update README with new client set up for translated content

Update unit tests

Refactor tests

Author: melissaluu

README.md

@@ -96,13 +96,23 @@ import Client from 'shopify-buy/index.unoptimized.umd';
 ## Examples
 
 ### Initializing the Client
+If your store supports multiple languages, Storefront API can return translated resource types and fields. Learn more about [translating content](https://help.shopify.com/en/api/guides/multi-language/translating-content-api).
+
 ```javascript
 import Client from 'shopify-buy';
 
+// Initializing a client
 const client = Client.buildClient({
   domain: 'your-shop-name.myshopify.com',
   storefrontAccessToken: 'your-storefront-access-token'
 });
+
+// Initializing a client to return translated content
+const clientWithTranslatedContent = Client.buildClient({
+  domain: 'your-shop-name.myshopify.com',
+  storefrontAccessToken: 'your-storefront-access-token',
+  language: 'ja-JP'
+});
 ```
 
 ### Fetching Products

docs/config.js.html

@@ -85,7 +85,7 @@ <h1 class="page-title">Source: config.js</h1>
     if (attrs.hasOwnProperty('apiVersion')) {
       this.apiVersion = attrs.apiVersion;
     } else {
-      this.apiVersion = '2019-10';
+      this.apiVersion = '2020-01';
     }
 
     if (attrs.hasOwnProperty('source')) {

package.json

@@ -28,7 +28,7 @@
     "lint": "eslint --max-warnings 0 -c .eslintrc.json $(yarn run lint:reporter-args 2>&1 >/dev/null) src/ test/",
     "lint:reporter-args": "test -n \"${CI}\" && >&2 echo -o $CIRCLE_TEST_REPORTS/junit/eslint.xml -f junit",
     "print-start-message": "wait-on file:.tmp/test/index.html file:.tmp/test/tests.js tcp:35729 tcp:4200 && echo \"\n\n⚡️⚡️⚡️  Good to go at http://localhost:4200 ⚡️⚡️⚡️\"",
-    "schema:fetch": "graphql-js-schema-fetch --url 'https://graphql.myshopify.com/api/2019-10/graphql' --header 'Authorization: Basic MzUxYzEyMjAxN2QwZjJhOTU3ZDMyYWU3MjhhZDc0OWM=' | jq '.' > schema.json",
+    "schema:fetch": "graphql-js-schema-fetch --url 'https://graphql.myshopify.com/api/2020-01/graphql' --header 'Authorization: Basic MzUxYzEyMjAxN2QwZjJhOTU3ZDMyYWU3MjhhZDc0OWM=' | jq '.' > schema.json",
     "minify-umd:optimized": "echo \"/*\n$(cat LICENSE.txt)\n*/\" > index.umd.min.js && babel-minify index.umd.js >> index.umd.min.js",
     "minify-umd:unoptimized": "echo \"/*\n$(cat LICENSE.txt)\n*/\" > index.unoptimized.umd.min.js && babel-minify index.unoptimized.umd.js >> index.unoptimized.umd.min.js"
   },

src/client.js

@@ -51,6 +51,10 @@ class Client {
       headers['X-SDK-Variant-Source'] = config.source;
     }
 
+    if (config.language) {
+      headers['Accept-Language'] = config.language;
+    }
+
     if (fetchFunction) {
       headers['Content-Type'] = 'application/json';
       headers.Accept = 'application/json';

src/config.js

@@ -57,12 +57,16 @@ class Config {
     if (attrs.hasOwnProperty('apiVersion')) {
       this.apiVersion = attrs.apiVersion;
     } else {
-      this.apiVersion = '2019-10';
+      this.apiVersion = '2020-01';
     }
 
     if (attrs.hasOwnProperty('source')) {
       this.source = attrs.source;
     }
+
+    if (attrs.hasOwnProperty('language')) {
+      this.language = attrs.language;
+    }
   }
 }
 

test/client-test.js

@@ -9,10 +9,10 @@ suite('client-test', () => {
   const config = {
     domain: 'sendmecats.myshopify.com',
     storefrontAccessToken: 'abc123',
-    apiVersion: '2019-10'
+    apiVersion: '2020-01'
   };
 
-  test('it instantiates a GraphQL client with the given config and without custom source header when no source config is provided', () => {
+  test('it instantiates a GraphQL client with the given config', () => {
     let passedTypeBundle;
     let passedUrl;
     let passedFetcherOptions;
@@ -28,7 +28,7 @@ suite('client-test', () => {
     new Client(new Config(config), FakeGraphQLJSClient); // eslint-disable-line no-new
 
     assert.deepEqual(passedTypeBundle, types);
-    assert.equal(passedUrl, `https://sendmecats.myshopify.com/api/${config.apiVersion}/graphql`);
+    assert.equal(passedUrl, `https://${config.domain}/api/${config.apiVersion}/graphql`);
     assert.deepEqual(passedFetcherOptions, {
       headers: {
         'X-SDK-Variant': 'javascript',
@@ -51,26 +51,55 @@ suite('client-test', () => {
       }
     }
 
-    const withSourceConfig = {
-      domain: 'sendmecats.myshopify.com',
-      storefrontAccessToken: 'abc123',
+    const withSourceConfig = Object.assign({}, config, {
       source: 'buy-button-js'
-    };
+    });
 
     new Client(new Config(withSourceConfig), FakeGraphQLJSClient); // eslint-disable-line no-new
 
     assert.deepEqual(passedTypeBundle, types);
-    assert.equal(passedUrl, `https://sendmecats.myshopify.com/api/${config.apiVersion}/graphql`);
+    assert.equal(passedUrl, `https://${withSourceConfig.domain}/api/${withSourceConfig.apiVersion}/graphql`);
     assert.deepEqual(passedFetcherOptions, {
       headers: {
         'X-SDK-Variant': 'javascript',
         'X-SDK-Version': version,
-        'X-Shopify-Storefront-Access-Token': config.storefrontAccessToken,
+        'X-Shopify-Storefront-Access-Token': withSourceConfig.storefrontAccessToken,
         'X-SDK-Variant-Source': withSourceConfig.source
       }
     });
   });
 
+  test('it instantiates a GraphQL client with the given config and language header when a language config is provided', () => {
+    let passedTypeBundle;
+    let passedUrl;
+    let passedFetcherOptions;
+
+    class FakeGraphQLJSClient {
+      constructor(typeBundle, {url, fetcherOptions}) {
+        passedTypeBundle = typeBundle;
+        passedUrl = url;
+        passedFetcherOptions = fetcherOptions;
+      }
+    }
+
+    const withLanguageConfig = Object.assign({}, config, {
+      language: 'ja-JP'
+    });
+
+    new Client(new Config(withLanguageConfig), FakeGraphQLJSClient); // eslint-disable-line no-new
+
+    assert.deepEqual(passedTypeBundle, types);
+    assert.equal(passedUrl, `https://${withLanguageConfig.domain}/api/${withLanguageConfig.apiVersion}/graphql`);
+    assert.deepEqual(passedFetcherOptions, {
+      headers: {
+        'X-SDK-Variant': 'javascript',
+        'X-SDK-Version': version,
+        'X-Shopify-Storefront-Access-Token': withLanguageConfig.storefrontAccessToken,
+        'Accept-Language': withLanguageConfig.language
+      }
+    });
+  });
+
   test('it creates a fetcher from the fetch function provided', () => {
     let passedFetcher;
     let passedUrl;
@@ -98,7 +127,7 @@ suite('client-test', () => {
     new Client(new Config(config), FakeGraphQLJSClient, fetchFunction); // eslint-disable-line no-new
 
     return passedFetcher({data: 'body'}).then(() => {
-      assert.equal(passedUrl, `https://sendmecats.myshopify.com/api/${config.apiVersion}/graphql`);
+      assert.equal(passedUrl, `https://${config.domain}/api/${config.apiVersion}/graphql`);
       assert.equal(passedBody, JSON.stringify({data: 'body'}));
       assert.equal(passedMethod, 'POST');
       assert.equal(passedMode, 'cors');

test/config-test.js

@@ -70,4 +70,20 @@ suite('config-test', () => {
     assert.equal(config.storefrontAccessToken, storefrontAccessToken, 'storefrontAccessToken should match');
     assert.equal(config.source, source, 'source should match');
   });
+
+  test('it sets language property when a language is provided', () => {
+    const domain = 'website.com';
+    const storefrontAccessToken = 123;
+    const language = 'ja-JP';
+
+    const config = new Config({
+      domain,
+      storefrontAccessToken,
+      language
+    });
+
+    assert.equal(config.domain, domain, 'domain should match');
+    assert.equal(config.storefrontAccessToken, storefrontAccessToken, 'storefrontAccessToken should match');
+    assert.equal(config.language, language, 'language should match');
+  });
 });

test/product-helpers-test.js

@@ -6,7 +6,7 @@ import singleProductFixture from '../fixtures/product-fixture';
 import types from '../schema.json';
 
 suite('product-helpers-test', () => {
-  const graphQLClient = new GraphQLJSClient(types, {url: 'https://sendmecats.myshopify.com/api/2019-10/graphql'});
+  const graphQLClient = new GraphQLJSClient(types, {url: 'https://sendmecats.myshopify.com/api/2020-01/graphql'});
   const query = productNodeQuery(graphQLClient)
     .definitions
     .find((definition) => definition.operationType === 'query');