feat(unification): adding specs list for the app (#18391)

* wip

* wip

* Adding required icons and strings for spec list

* adding icons with some duplication

* wip

* fixing the colors and classes

* removing the Icon from usage in the button and input

* green => jade

* wip

* Fixes

* wip

* merge

* fixing no projects state

* Adding better spec pattern parsing

* Adding routing for the runner

* adding more tests

* update tests

* chore: lint

* update types

* types

* chore: align vue-i18n version

* update findSpecs

* remove old spec

* omit new properties returned from findSpecs

* fix test

* use different type

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
Co-authored-by: Tim Griesser <tgriesser10@gmail.com>

apollo.config.js

@@ -9,6 +9,6 @@ module.exports = {
       localSchemaFile: path.join(__dirname, 'packages/graphql/schemas/schema.graphql'),
     },
     tagName: 'gql',
-    includes: [path.join(__dirname, 'packages/launchpad/src/**/*.vue')],
+    includes: [path.join(__dirname, 'packages/{launchpad,app}/src/**/*.vue')],
   },
 }

packages/app/cypress.json

@@ -9,7 +9,7 @@
     "openMode": 0
   },
   "nodeVersion": "system",
-  "testFiles": "**/*.spec.{js,ts,tsx,jsx}",
+  "testFiles": "**/*.spec.{j,ts,tsx,jsx}",
   "reporter": "../../node_modules/cypress-multi-reporters/index.js",
   "reporterOptions": {
     "configFile": "../../mocha-reporter-config.json"

packages/app/cypress/support/fixtures.ts

@@ -0,0 +1,152 @@
+// @ts-nocheck
+// @ts-ignore
+import * as JustMyLuck from 'just-my-luck'
+import faker from 'faker'
+import { template, keys, reduce, templateSettings } from 'lodash'
+import combineProperties from 'combine-properties'
+
+templateSettings.interpolate = /{{([\s\S]+?)}}/g
+
+let jml
+const setupSeeds = () => {
+  const seed = 2
+
+  faker.seed(seed)
+  jml = new JustMyLuck(JustMyLuck.MersenneTwister(seed))
+}
+
+setupSeeds()
+
+beforeEach(() => setupSeeds)
+
+/**
+ * Component Naming Fixtures
+ */
+export const modifiers = [
+  'Async',
+  'Dynamic',
+  'Static',
+  'Virtual',
+  'Lazy',
+]
+
+export const domainModels = [
+  'Person',
+  'Product',
+  'Spec',
+  'Settings',
+  'Account',
+  'Login',
+  'Logout',
+  'Launchpad',
+  'Wizard',
+]
+
+export const componentNames = [
+  'List',
+  'Table',
+  'Header',
+  'Footer',
+  'Button',
+  'Cell',
+  'Row',
+  'Skeleton',
+  'Loader',
+  'Layout',
+]
+
+export const specPattern = ['.spec', '_spec']
+
+export const fileExtension = ['.tsx', '.jsx', '.ts', '.js']
+
+export const directories = {
+  rootDedicated: template('tests'),
+  rootSrc: template('src'),
+  monorepo: template('packages/{{component}}/test'),
+  jestRoot: template('__test__'),
+  jestNestedLib: template('lib/{{component}}{{component2}}/__test__'),
+  dedicatedNested: template('lib/{{component}}/test'),
+  jestNested: template('src/{{component}}/__test__'),
+  componentsNested: template('src/components/{{component}}'),
+  componentsFlat: template('src/{{component}}'),
+  viewsFlat: template('src/views'),
+  frontendFlat: template('frontend'),
+  frontendComponentsFlat: template('frontend/components'),
+}
+
+const nameTemplates = {
+  // Business Logic Components
+  longDomain: template(`{{prefix}}{{modifier}}{{domain}}{{component}}`),
+  longDomain2: template(`{{prefix}}{{domain}}{{component}}{{component2}}`),
+
+  // App Components
+  page1: template(`{{domain}}Page`),
+  layout: template(`{{domain}}Layout`),
+
+  presentationalShort: template(`Base{{component}}`),
+  presentationalLong: template(`Base{{component}}{{component2}}`),
+  medium1: template(`{{prefix}}{{modifier}}{{component}}`),
+  medium2: template(`{{prefix}}{{component}}{{component2}}`),
+  short: template(`{{prefix}}{{component}}`),
+}
+
+const prefixes = ['I', 'V', 'Cy', null]
+
+export const componentNameGenerator = (options: { template: any, omit: any, overrides: any } = { template: nameTemplates.medium1, omit: [], overrides: {} }) => {
+  const withoutValues = reduce(options.omit, (acc, v) => {
+    acc[v] = null
+
+    return acc
+  }, {})
+
+  const components = jml.pickCombination(componentNames, 2)
+  const defaultOptions = {
+    modifier: jml.pick(modifiers),
+    domain: jml.pick(domainModels),
+    prefix: jml.pick(prefixes),
+    component: components[0],
+    component2: components[1],
+  }
+
+  return options.template({
+    ...defaultOptions,
+    ...withoutValues,
+    ...options.overrides,
+  })
+}
+
+const allRandomComponents = combineProperties({
+  domain: domainModels,
+  modifier: modifiers,
+  prefix: prefixes,
+  component: componentNames,
+  component2: componentNames,
+  fileExtension,
+  specPattern,
+  directory: keys(directories),
+})
+
+export const randomComponents = (n = 200) => {
+  return faker.random.arrayElements(allRandomComponents, n).map((d) => {
+    const name = componentNameGenerator({
+      overrides: d,
+      template: faker.random.objectElement(nameTemplates),
+    })
+
+    const gitFileState = jml.pick(['modified', 'unmodified', 'added', 'deleted'])
+
+    return {
+      componentName: name,
+      relativePath: directories[d.directory](d),
+      specExtension: d.specPattern,
+      fileExtension: d.fileExtension,
+      name: `${name}${d.specPattern}${d.fileExtension}`,
+      id: faker.datatype.uuid(),
+      gitInfo: {
+        comitter: gitFileState ? faker.internet.userName() : undefined,
+        timeAgo: gitFileState ? faker.datatype.datetime() : undefined,
+        fileState: gitFileState,
+      },
+    }
+  }, n)
+}

packages/app/package.json

@@ -28,6 +28,7 @@
     "@intlify/vite-plugin-vue-i18n": "2.4.0",
     "@packages/frontend-shared": "0.0.0-development",
     "@testing-library/cypress": "8.0.0",
+    "@types/faker": "5.5.8",
     "@urql/core": "2.3.1",
     "@urql/vue": "0.4.3",
     "@vitejs/plugin-vue": "1.2.4",
@@ -36,11 +37,14 @@
     "@windicss/plugin-interaction-variants": "1.0.0",
     "bluebird": "3.5.3",
     "classnames": "2.3.1",
+    "combine-properties": "0.1.0",
     "concurrently": "^6.2.0",
     "cross-env": "6.0.3",
+    "faker": "5.5.3",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.5",
     "javascript-time-ago": "2.3.8",
+    "just-my-luck": "3.0.0",
     "prismjs": "1.24.0",
     "rimraf": "3.0.2",
     "rollup-plugin-polyfill-node": "^0.7.0",
@@ -55,7 +59,7 @@
     "vite-plugin-windicss": "1.2.4",
     "vite-svg-loader": "2.1.1",
     "vue": "3.2.6",
-    "vue-i18n": "9.2.0-beta.1",
+    "vue-i18n": "9.2.0-beta.7",
     "vue-prism-component": "2.0.0",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "4",

packages/app/src/Foo.spec.tsx

@@ -4,6 +4,9 @@ import Foo from './Foo.vue'
 describe('Foo', () => {
   it('renders something', () => {
     cy.mountFragment(FooFragmentDoc, {
+      onResult: (ctx) => {
+        return ctx
+      },
       render: (gqlVal) => {
         return <Foo gql={gqlVal} />
       },