Merge pull request #585 from aws-amplify/refactor-docgen-staging

BREAKING CHANGE: Full refactor of GraphQL documents generator package to be browser compatible and Amplify CLI agnostic BREAKING CHANGE!

Author: phani-srikar

.circleci/config.yml

@@ -541,6 +541,15 @@ jobs:
       TEST_SUITE: src/__tests__/graphql-codegen-ios.test.ts
       CLI_REGION: ap-northeast-1
       SET_NPM_PREFIX: true
+  graphql-documents-generator-e2e-test:
+    working_directory: ~/repo
+    parameters: *ref_0
+    executor: << parameters.os >>
+    steps: *ref_6
+    environment:
+      TEST_SUITE: src/__tests__/graphql-documents-generator.test.ts
+      CLI_REGION: ap-southeast-1
+      SET_NPM_PREFIX: true
 workflows:
   version: 2
   e2e_resource_cleanup:
@@ -623,6 +632,7 @@ workflows:
             - push-codegen-js-e2e-test
             - datastore-modelgen-flutter-e2e-test
             - feature-flags-e2e-test
+            - graphql-documents-generator-e2e-test
             - pull-codegen-e2e-test
             - datastore-modelgen-ios-e2e-test
             - configure-codegen-ios-e2e-test
@@ -794,6 +804,13 @@ workflows:
             - publish_to_local_registry
           post-steps: *ref_9
           filters: *ref_10
+      - graphql-documents-generator-e2e-test:
+          context: *ref_8
+          os: l
+          requires:
+            - publish_to_local_registry
+          post-steps: *ref_9
+          filters: *ref_10
       - pull-codegen-e2e-test:
           context: *ref_8
           os: l

packages/amplify-codegen-e2e-core/src/init/cra.ts

@@ -34,3 +34,22 @@ export function craBuild(cwd: string, settings: Object = {}): Promise<void> {
     });
   });
 }
+
+export function cypressRun(cwd: string, settings: any = {}): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const s = { ...defaultSettings, ...settings };
+    const args = ['cypress', 'run'];
+    if (s?.componentsTesting) {
+      args.push('--component');
+    };
+    const chain = spawn('npx', args, { cwd, stripColors: true, disableCIDetection: s.disableCIDetection });
+
+    chain.run((err: Error) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve();
+      }
+    });
+  });
+}

packages/amplify-codegen-e2e-tests/src/__tests__/graphql-documents-generator.test.ts

@@ -0,0 +1,44 @@
+import {
+  initProjectWithProfile,
+  DEFAULT_JS_CONFIG,
+  addApiWithBlankSchema,
+  updateApiSchemaWithText,
+  craInstall,
+  craBuild,
+  amplifyPush,
+  cypressRun,
+  deleteProject
+} from '@aws-amplify/amplify-codegen-e2e-core';
+import { readdirSync, rmSync } from 'fs';
+import { readFileSync } from 'fs-extra';
+import path from 'path';
+
+describe('GraphQL documents generator e2e tests', () => {
+  let apiName: string;
+  const projectRoot = path.resolve('test-apps', 'docsgen-react-app');
+  const config = DEFAULT_JS_CONFIG;
+
+  beforeAll(async () => {
+    await initProjectWithProfile(projectRoot, { ...config });
+    await addApiWithBlankSchema(projectRoot);
+    await craInstall(projectRoot, { ...config });
+    apiName = readdirSync(path.join(projectRoot, 'amplify', 'backend', 'api'))[0];
+  });
+
+  afterAll(async () => {
+    await deleteProject(projectRoot);
+    await rmSync(path.join(projectRoot, 'amplify'), { recursive: true, force: true });
+  });
+
+  const schemaFileName = 'schema.graphql';
+  it('generates valid GraphQL documents for given schema', async () => {
+    const schemaPath = path.resolve('test-apps', 'docsgen-react-app', 'public', schemaFileName);
+    const schemaText = readFileSync(schemaPath, { encoding: 'utf8'});
+    updateApiSchemaWithText(projectRoot, apiName, schemaText);
+    await amplifyPush(projectRoot);
+
+    // Build and run the cypress e2e tests
+    await craBuild(projectRoot, { ...config });
+    await cypressRun(projectRoot, { componentsTesting: true });
+  });
+});

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#amplify-do-not-edit-begin
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/mock-api-resources
+amplify/backend/amplify-meta.json
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/README.md

@@ -0,0 +1,21 @@
+This is a test React application.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: "create-react-app",
+      bundler: "webpack",
+    },
+  },
+});

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/cypress/support/component.js

@@ -0,0 +1,3 @@
+import { mount } from 'cypress/react18';
+
+Cypress.Commands.add('mount', mount);

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "docsgen-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@aws-amplify/graphql-docs-generator": "file:../../../graphql-docs-generator",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "aws-amplify": "^5.0.25",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "cypress": "^12.9.0"
+  }
+}

packages/amplify-codegen-e2e-tests/test-apps/docsgen-react-app/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app for e2e testing"
+    />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>