fix: ensure posix path sep is used (#728)

* fix: ensure posix path sep is used

* fix: replace windows path separator with posix

* fix: only replace win sep

Author: Dane Pilcher

packages/amplify-codegen/src/utils/getRelativeTypesPath.js

@@ -2,7 +2,11 @@ const path = require('path');
 
 function getRelativeTypesPath(opsGenDirectory, generatedFileName) {
   if (generatedFileName) {
-    const relativePath = path.relative(opsGenDirectory, generatedFileName);
+    const relativePath = path
+      .relative(opsGenDirectory, generatedFileName)
+      // ensure posix path separators are used
+      .split(path.win32.sep)
+      .join(path.posix.sep);
 
     // generatedFileName is in same directory as opsGenDirectory
     // i.e. generatedFileName: src/graphql/API.ts, opsGenDirectory: src/graphql

packages/graphql-generator/src/__tests__/utils/GraphQLStatementsFormatter.test.ts

@@ -26,11 +26,16 @@ describe('GraphQL statements Formatter', () => {
     expect(formattedOutput).toMatchSnapshot();
   });
 
-  it('Generates formatted output for TS frontend', () => {
+  it('Generates formatted output for TS frontend with posix path', () => {
     const formattedOutput = new GraphQLStatementsFormatter('typescript', 'queries', '../API.ts').format(statements);
     expect(formattedOutput).toMatchSnapshot();
   });
 
+  it('Generates formatted output for TS frontend with windows path', () => {
+    const formattedOutput = new GraphQLStatementsFormatter('typescript', 'queries', '..\\API.ts').format(statements);
+    expect(formattedOutput).toMatchSnapshot();
+  });
+
   it('Generates formatted output for Flow frontend', () => {
     const formattedOutput = new GraphQLStatementsFormatter('flow').format(statements);
     expect(formattedOutput).toMatchSnapshot();

packages/graphql-generator/src/__tests__/utils/__snapshots__/GraphQLStatementsFormatter.test.ts.snap

@@ -62,7 +62,33 @@ export const getProject = /* GraphQL */ \`
 "
 `;
 
-exports[`GraphQL statements Formatter Generates formatted output for TS frontend 1`] = `
+exports[`GraphQL statements Formatter Generates formatted output for TS frontend with posix path 1`] = `
+"/* tslint:disable */
+/* eslint-disable */
+// this is an auto generated file. This will be overwritten
+
+import * as APITypes from \\"../API\\";
+type GeneratedQuery<InputType, OutputType> = string & {
+  __generatedQueryInput: InputType;
+  __generatedQueryOutput: OutputType;
+};
+
+export const getProject = /* GraphQL */ \`query GetProject($id: ID!) {
+  getProject(id: $id) {
+    id
+    name
+    createdAt
+    updatedAt
+  }
+}
+\` as GeneratedQuery<
+  APITypes.GetProjectQueryVariables,
+  APITypes.GetProjectQuery
+>;
+"
+`;
+
+exports[`GraphQL statements Formatter Generates formatted output for TS frontend with windows path 1`] = `
 "/* tslint:disable */
 /* eslint-disable */
 // this is an auto generated file. This will be overwritten

packages/graphql-generator/src/utils/GraphQLStatementsFormatter.ts

@@ -1,3 +1,4 @@
+import * as path from 'path';
 import prettier, { BuiltInParserName } from 'prettier';
 import {
   interfaceNameFromOperation,
@@ -34,7 +35,12 @@ export class GraphQLStatementsFormatter {
     }[operation];
     this.lintOverrides = [];
     this.headerComments = [];
-    this.typesPath = typesPath ? typesPath.replace(/.ts/i, '') : null;
+    this.typesPath = typesPath
+      ? typesPath.replace(/.ts/i, '')
+        // ensure posix path separators are used
+        .split(path.win32.sep)
+        .join(path.posix.sep)
+      : null;
     this.includeTypeScriptTypes = !!(this.language === 'typescript' && this.opTypeName && this.typesPath);
   }