feat: Structuring context & schema so it can be used on the client

npm/design-system/package.json

@@ -84,7 +84,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typed-scss-modules": "^4.1.1",
     "typescript": "^4.2.3",
-    "vite": "2.2.3",
+    "vite": "^2.4.4",
     "webpack": "4.44.1"
   },
   "peerDependencies": {

npm/vite-dev-server/package.json

@@ -25,7 +25,7 @@
     "mocha-junit-reporter": "^2.0.0",
     "mocha-multi-reporters": "^1.5.1",
     "react": "17.0.2",
-    "vite": "2.2.3",
+    "vite": "^2.4.4",
     "vue": "3.1.1"
   },
   "peerDependencies": {

npm/vue/src/index.ts

@@ -22,7 +22,7 @@ declare global {
   }
 }
 
-type CyMountOptions<Props> = Omit<MountingOptions<Props>, 'attachTo'> & {
+export type CyMountOptions<Props> = Omit<MountingOptions<Props>, 'attachTo'> & {
   log?: boolean
   /**
    * @deprecated use vue-test-utils `global` instead

packages/graphql/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": [
+    "plugin:@cypress/dev/tests"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "cypress/globals": true
+  },
+  "plugins": [
+    "cypress"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "./src/entities/**/*.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": [
+          "error"
+        ]
+      }
+    }
+  ]
+}

packages/graphql/.gitignore

@@ -0,0 +1,2 @@
+src/*.js
+src/**/*.js

packages/graphql/index.js

@@ -0,0 +1,5 @@
+if (process.env.CYPRESS_INTERNAL_ENV !== 'production') {
+  require('@packages/ts/register')
+}
+
+module.exports = require('./src')

packages/graphql/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@packages/graphql",
+  "version": "0.0.0-development",
+  "private": true,
+  "main": "index.js",
+  "browser": "src/index.ts",
+  "scripts": {
+    "build": "node script/build-schema.js",
+    "types": "tsc --noEmit",
+    "build-prod": "yarn build && tsc",
+    "clean-deps": "rm -rf node_modules",
+    "clean": "rm src/**/*.js && rm src/*.js || echo 'cleaned'",
+    "postinstall": "echo '@packages/graphql needs: yarn build'"
+  },
+  "dependencies": {
+    "express-graphql": "^0.12.0",
+    "graphql": "^15.5.1",
+    "graphql-scalars": "^1.10.0",
+    "nexus": "^1.1.0",
+    "nexus-decorators": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/dedent": "^0.7.0"
+  },
+  "files": [
+    "src",
+    "schema.graphql"
+  ],
+  "types": "src/index.ts"
+}

packages/graphql/schema.graphql

@@ -0,0 +1,205 @@
+### This file was generated by Nexus Schema
+### Do not make changes to this file directly
+
+
+input AddProjectInput {
+  isCurrent: Boolean!
+  projectRoot: String!
+  testingType: String!
+}
+
+"""Namespace for information related to the app"""
+type App {
+  """The active project in the app"""
+  activeProject: Project
+
+  """Whether this is the first open of the application or not"""
+  isFirstOpen: Boolean!
+
+  """All known projects for the app"""
+  projects: [Project!]!
+}
+
+"""
+A date-time string at UTC, such as 2007-12-03T10:15:30Z, compliant with the `date-time` format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.
+"""
+scalar DateTime
+
+enum FrontendFramework {
+  cra
+  nextjs
+  nuxtjs
+  react
+  vue
+  vuecli
+}
+
+"""
+The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
+"""
+scalar JSON @specifiedBy(url: "http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf")
+
+type Mutation {
+  """Adds a new project to the app"""
+  addProject(input: AddProjectInput!): Project!
+
+  """Initializes the plugins for the current active project"""
+  initializePlugins: Project
+
+  """Installs the dependencies for the component testing step"""
+  wizardInstallDependencies: Wizard
+
+  """Navigates backward in the wizard"""
+  wizardNavigateBack: Wizard
+
+  """Navigates forward in the wizard"""
+  wizardNavigateForward: Wizard
+
+  """Sets the frontend bundler we want to use for the project"""
+  wizardSetBundler(bundler: SupportedBundlers!): Wizard
+
+  """Sets the frontend framework we want to use for the project"""
+  wizardSetFramework(framework: FrontendFramework!): Wizard
+
+  """Sets the frontend bundler we want to use for the project"""
+  wizardSetManualInstall(isManual: Boolean!): Wizard
+
+  """Sets the current testing type we want to use"""
+  wizardSetTestingType(type: TestingTypeEnum!): Wizard
+
+  """Validates that the manual install has occurred properly"""
+  wizardValidateManualInstall: Wizard
+}
+
+enum PluginsState {
+  error
+  initialized
+  initializing
+  uninitialized
+}
+
+"""A Cypress project is a container"""
+type Project {
+  id: ID!
+  isCurrent: Boolean!
+  isOpen: Boolean!
+
+  """If the plugin has errored, contains the associated error message"""
+  pluginsErrorMessage: String
+
+  """Plugin state for a project"""
+  pluginsState: PluginsState
+  projectRoot: String!
+
+  """The title of the project"""
+  title: String!
+}
+
+"""The root "Query" type containing all entry fields for our querying"""
+type Query {
+  app: App!
+
+  """Metadata about the wizard, null if we arent showing the wizard"""
+  wizard: Wizard
+}
+
+"""The bundlers that we can use with Cypress"""
+enum SupportedBundlers {
+  vite
+  webpack
+}
+
+enum TestingTypeEnum {
+  component
+  e2e
+}
+
+type TestingTypeInfo {
+  description: String
+  id: TestingTypeEnum!
+  title: String
+}
+
+"""
+The Wizard is a container for any state associated with initial onboarding to Cypress
+"""
+type Wizard {
+  """All of the bundlers to choose from"""
+  allBundlers: [WizardBundler!]!
+  bundler: WizardBundler
+  canNavigateForward: Boolean!
+
+  """The title of the page, given the current step of the wizard"""
+  description: String
+  framework: WizardFrontendFramework
+
+  """All of the component testing frameworks to choose from"""
+  frameworks: [WizardFrontendFramework!]!
+
+  """Whether we have chosen manual install or not"""
+  isManualInstall: Boolean!
+
+  """
+  A list of packages to install, null if we have not chosen both a framework and bundler
+  """
+  packagesToInstall: [WizardNpmPackage!]
+
+  """Configuration file based on bundler and framework of choice"""
+  sampleCode(lang: WizardCodeLanguage! = js): String
+  step: WizardStep!
+
+  """
+  The testing type we are setting in the wizard, null if this has not been chosen
+  """
+  testingType: TestingTypeEnum
+  testingTypes: [TestingTypeInfo!]
+
+  """The title of the page, given the current step of the wizard"""
+  title: String
+}
+
+"""Wizard bundler"""
+type WizardBundler {
+  id: SupportedBundlers!
+
+  """Whether this is the selected framework bundler"""
+  isSelected: Boolean
+  name: String!
+  package: String!
+}
+
+enum WizardCodeLanguage {
+  js
+  ts
+}
+
+"""A frontend framework that we can setup within the app"""
+type WizardFrontendFramework {
+  """The name of the framework"""
+  id: FrontendFramework!
+
+  """Whether this is the selected framework in the wizard"""
+  isSelected: Boolean!
+
+  """The name of the framework"""
+  name: String!
+
+  """All of the supported bundlers for this framework"""
+  supportedBundlers: [WizardBundler!]!
+}
+
+"""Details about an NPM Package listed during the wizard install"""
+type WizardNpmPackage {
+  description: String!
+
+  """The package name that you would npm install"""
+  name: String!
+}
+
+enum WizardStep {
+  createConfig
+  installDependencies
+  selectFramework
+  setupComplete
+  welcome
+}

packages/graphql/script/build-schema.js

@@ -0,0 +1,8 @@
+process.env.CYPRESS_INTERNAL_ENV = 'development'
+process.env.GRAPHQL_CODEGEN = 'true'
+process.env.GRAPHQL_CODEGEN_EXIT = 'true'
+// TODO: we should be upgrading ts-node or moving to Thorsten's work soon
+// and then this can be removed
+process.env.TS_NODE_CACHE = 'false'
+require('@packages/ts/register')
+require('../src/schema')

packages/graphql/src/GraphQL-FAQ.md

@@ -0,0 +1,17 @@
+## Development Process
+
+1. From the monorepo root, run `LAUNCHPAD=1 yarn dev:watch`
+2. In launchpad directory, run `yarn watch`
+
+
+
+## Why are my types not showing up in the schema
+
+Ensure that the types are exported so that they are imported into the root `makeSchema`.
+
+There are often "barrel" files that re-export the types, such as in [`./entities/index.ts`](./entities/index.ts) or [`./constants/index.ts`](./constants/index.ts)
+
+## Why is my query / mutation not being added
+
+Queries & mutations must be `static` properties if using nexus-decorators
+

packages/graphql/src/actions/BaseActions.ts

@@ -0,0 +1,41 @@
+import type { NxsMutationArgs } from 'nexus-decorators'
+import type { BaseContext } from '../context/BaseContext'
+import type { ProjectBaseContract } from '../contracts/ProjectBaseContract'
+import { Project } from '../entities/Project'
+
+/**
+ * Acts as the contract for all actions, inherited by:
+ *  - ServerActions
+ *  - ClientTestActions
+ *
+ * By having a "base actions" class, we can reuse this code on the client
+ * and make the client-only test doubles work as realistically as possible
+ */
+export abstract class BaseActions {
+  constructor (protected ctx: BaseContext) {}
+
+  abstract installDependencies (): void
+
+  /**
+   * Adds a new project if it doesn't already exist
+   */
+  async addProject (input: NxsMutationArgs<'addProject'>['input']): Promise<Project> {
+    // Prevent adding the existing project again
+    const existing = this.ctx.projects.find((p) => p.projectRoot === input.projectRoot)
+
+    if (existing) {
+      return existing
+    }
+
+    const newProject = new Project({
+      projectRoot: input.projectRoot,
+      projectBase: await this.createProjectBase(input),
+    })
+
+    this.ctx.projects.push(newProject)
+
+    return newProject
+  }
+
+  abstract createProjectBase(input: NxsMutationArgs<'addProject'>['input']): ProjectBaseContract | Promise<ProjectBaseContract>
+}

packages/graphql/src/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './wizardConstants'
+
+export * from './projectConstants'

packages/graphql/src/constants/projectConstants.ts

@@ -0,0 +1,10 @@
+import { enumType } from 'nexus'
+
+export const PLUGINS_STATE = ['uninitialized', 'initializing', 'initialized', 'error'] as const
+
+export type PluginsState = typeof PLUGINS_STATE[number]
+
+export const PluginsStateEnum = enumType({
+  name: 'PluginsState',
+  members: PLUGINS_STATE,
+})