fix(unify): fixing icons and supporting router within the shared cypress commands package

packages/app/.windicss/icon-color-plugins.ts

@@ -37,14 +37,23 @@ const makeRuleForClass = ({ name, theme, weight, color }: RuleConfig) => {
       '> *[stroke].icon-light': {
         stroke: resolvedColor,
       },
+      '> *[fill][stroke].icon-light-fill': {
+        fill: resolvedColor,
+      },
     },
     [darkKey]: {
+      '> *[fill].icon-dark-fill': {
+        fill: resolvedColor,
+      },
       '> *[fill].icon-dark': {
         fill: resolvedColor,
       },
       '> *[stroke].icon-dark': {
         stroke: resolvedColor,
       },
+      '> *[fill][stroke].icon-dark-stroke': {
+        stroke: resolvedColor,
+      },
     },
   }
 }
@@ -73,17 +82,17 @@ function addIconUtilityClasses (theme) {
     // Output is an object where each new class is a key
     // And the selectors and values affected are values
     /**
-     * {
-     *  `.icon-light-green-500`: {
-     *    '> *[stroke].icon-light': {
-     *      stroke: resolvedColor
-     *    },
-     *    '> *[fill].icon-light': {
-     *      fill: resolvedColor
-     *    }
-     *  }
-     * }
-     */
+      * {
+      *  `.icon-light-green-500`: {
+      *    '> *[stroke].icon-light': {
+      *      stroke: resolvedColor
+      *    },
+      *    '> *[fill].icon-light': {
+      *      fill: resolvedColor
+      *    }
+      *  }
+      * }
+      */
     return { ...acc, ...additionalClasses }
   }, {
 

packages/app/cypress/support/index.ts

@@ -1,4 +1,4 @@
-import '@packages/frontend-shared/cypress/support/commands'
+import { registerMountFn } from '@packages/frontend-shared/cypress/support/commands'
 // ***********************************************************
 // This example support/index.js is processed and
 // loaded automatically before your test files.
@@ -20,3 +20,6 @@ import 'virtual:windi.css'
 import '../../src/main.scss'
 import '@iconify/iconify'
 import '@purge-icons/generated'
+import { createRouter } from '../../src/router/router'
+
+registerMountFn({ plugins: [() => createRouter()] })

packages/app/src/navigation/SidebarNavigationRow.spec.tsx

@@ -1,8 +1,8 @@
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
-import BookIcon from '~icons/cy/book_x16'
-import SettingsIcon from '~icons/mdi/settings'
-import HeartIcon from '~icons/mdi/heart'
-import BookmarkIcon from '~icons/bi/bookmark-star'
+import BookIcon from '~icons/cy/book_x24'
+import SettingsIcon from '~icons/cy/settings_x24'
+import TestResultsIcon from '~icons/cy/test-results_x24'
+import PlaceholderIcon from '~icons/cy/placeholder_x24'
 
 describe('SidebarNavigationRow', () => {
   it('renders something', () => {
@@ -12,8 +12,8 @@ describe('SidebarNavigationRow', () => {
       <h2 class="text-white text-sm uppercase truncate">Tab Style</h2>
       <SidebarNavigationRow icon={BookIcon} active/>
       <SidebarNavigationRow icon={SettingsIcon} />
-      <SidebarNavigationRow icon={HeartIcon} />
-      <SidebarNavigationRow icon={BookmarkIcon} active/>
+      <SidebarNavigationRow icon={TestResultsIcon} />
+      <SidebarNavigationRow icon={PlaceholderIcon} />
     </div>))
   })
 })

packages/app/vite.config.ts

@@ -41,9 +41,7 @@ export default defineConfig({
         customCollections: ['cy'],
       }),
     }),
-    WindiCSS({
-      configFiles: [path.resolve(__dirname, './.windicss/windi.config')],
-    }),
+    WindiCSS(),
     VueSvgLoader(),
   ],
   define: {

packages/app/.windicss/windi.config.ts → packages/app/windi.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'windicss/helpers'
 import InteractionVariants from '@windicss/plugin-interaction-variants'
-import { IconDuotoneColorsPlugin } from './icon-color-plugins'
-import { safelist } from './safelist'
+import { IconDuotoneColorsPlugin } from './.windicss/icon-color-plugins'
+import { safelist } from './.windicss/safelist'
 
 export default defineConfig({
   // This adds !important to all utility classes. https://csswizardry.com/2016/05/the-importance-of-important/

packages/frontend-shared/cypress/support/commands.ts

@@ -6,7 +6,7 @@ import { testUrqlClient } from '@packages/frontend-shared/src/graphql/testUrqlCl
 import { Component, computed, watch, defineComponent, h } from 'vue'
 import { ClientTestContext } from '../../src/graphql/ClientTestContext'
 import type { TestSourceTypeLookup } from '@packages/graphql/src/testing/testUnionType'
-import { createI18n } from '@packages/launchpad/src/locales/i18n'
+import { each } from 'lodash'
 import 'cypress-file-upload'
 
 /**
@@ -19,9 +19,45 @@ import 'cypress-file-upload'
   send: () => {},
 }
 
-Cypress.Commands.add(
-  'mount',
-  <C extends Parameters<typeof mount>[0]>(comp: C, options: CyMountOptions<C> = {}) => {
+export const registerMountFn = ({ plugins }) => {
+  Cypress.Commands.add(
+    'mount',
+    <C extends Parameters<typeof mount>[0]>(comp: C, options: CyMountOptions<C> = {}) => {
+      const context = new ClientTestContext({
+        config: {},
+        cwd: '/dev/null',
+        // @ts-ignore
+        browser: null,
+        global: false,
+        project: '/dev/null',
+        projectRoot: '/dev/null',
+        invokedFromCli: true,
+        testingType: 'e2e',
+        os: 'darwin',
+        _: [''],
+      }, {})
+
+      options.global = options.global || {}
+      options.global.stubs = options.global.stubs || {}
+      options.global.stubs.transition = false
+      options.global.plugins = options.global.plugins || []
+      each(plugins, (pluginFn: () => any) => {
+        options?.global?.plugins?.push(pluginFn())
+      })
+
+      options.global.plugins.push({
+        install (app) {
+          app.use(urql, testUrqlClient({
+            context,
+          }))
+        },
+      })
+
+      return mount(comp, options)
+    },
+  )
+
+  function mountFragment<Result, Variables, T extends TypedDocumentNode<Result, Variables>> (source: T, options: MountFragmentConfig<T>, list: boolean = false): Cypress.Chainable<ClientTestContext> {
     const context = new ClientTestContext({
       config: {},
       cwd: '/dev/null',
@@ -36,111 +72,79 @@ Cypress.Commands.add(
       _: [''],
     }, {})
 
-    options.global = options.global || {}
-    options.global.stubs = options.global.stubs || {}
-    options.global.stubs.transition = false
-    options.global.plugins = options.global.plugins || []
-    options.global.plugins.push(createI18n())
-    options.global.plugins.push({
-      install (app) {
-        app.use(urql, testUrqlClient({
-          context,
-        }))
-      },
-    })
-
-    return mount(comp, options)
-  },
-)
-
-function mountFragment<Result, Variables, T extends TypedDocumentNode<Result, Variables>> (source: T, options: MountFragmentConfig<T>, list: boolean = false): Cypress.Chainable<ClientTestContext> {
-  const context = new ClientTestContext({
-    config: {},
-    cwd: '/dev/null',
-    // @ts-ignore
-    browser: null,
-    global: false,
-    project: '/dev/null',
-    projectRoot: '/dev/null',
-    invokedFromCli: true,
-    testingType: 'e2e',
-    os: 'darwin',
-    _: [''],
-  }, {})
-
-  let hasMounted = false
-
-  return mount(defineComponent({
-    name: `mountFragment`,
-    setup () {
-      const fieldName = list ? 'testFragmentMemberList' : 'testFragmentMember'
-      const result = useQuery({
-        query: `
-          query MountFragmentTest {
-            ${fieldName} {
-              ...${(source.definitions[0] as FragmentDefinitionNode).name.value}
+    let hasMounted = false
+
+    return mount(defineComponent({
+      name: `mountFragment`,
+      setup () {
+        const fieldName = list ? 'testFragmentMemberList' : 'testFragmentMember'
+        const result = useQuery({
+          query: `
+            query MountFragmentTest {
+              ${fieldName} {
+                ...${(source.definitions[0] as FragmentDefinitionNode).name.value}
+              }
             }
-          }
-          ${print(source)}
-        `,
-      })
-
-      if (!options.expectError) {
-        watch(result.error, (o) => {
-          if (result.error.value) {
-            cy.log('GraphQL Error', result.error.value).then(() => {
-              throw result.error.value
-            })
-          }
+            ${print(source)}
+          `,
         })
-      }
 
-      return {
-        gql: computed(() => result.data.value?.[fieldName]),
-      }
-    },
-    render: (props) => {
-      if (props.gql && !hasMounted) {
-        hasMounted = true
-        Cypress.log({
-          displayName: 'gql',
-          message: (source.definitions[0] as FragmentDefinitionNode).name.value,
-          consoleProps () {
-            return {
-              gql: props.gql,
-              source: print(source),
+        if (!options.expectError) {
+          watch(result.error, (o) => {
+            if (result.error.value) {
+              cy.log('GraphQL Error', result.error.value).then(() => {
+                throw result.error.value
+              })
             }
-          },
-        }).end()
-      }
+          })
+        }
 
-      return props.gql ? options.render(props.gql) : h('div')
-    },
-  }), {
-    global: {
-      stubs: {
-        transition: false,
+        return {
+          gql: computed(() => result.data.value?.[fieldName]),
+        }
       },
-      plugins: [
-        createI18n(),
-        {
-          install (app) {
-            app.use(urql, testUrqlClient({
-              context,
-              rootValue: options.type(context),
-            }))
-          },
+      render: (props) => {
+        if (props.gql && !hasMounted) {
+          hasMounted = true
+          Cypress.log({
+            displayName: 'gql',
+            message: (source.definitions[0] as FragmentDefinitionNode).name.value,
+            consoleProps () {
+              return {
+                gql: props.gql,
+                source: print(source),
+              }
+            },
+          }).end()
+        }
+
+        return props.gql ? options.render(props.gql) : h('div')
+      },
+    }), {
+      global: {
+        stubs: {
+          transition: false,
         },
-      ],
-    },
-  }).then(() => context)
-}
+        plugins: [
+          {
+            install (app) {
+              app.use(urql, testUrqlClient({
+                context,
+                rootValue: options.type(context),
+              }))
+            },
+          },
+        ],
+      },
+    }).then(() => context)
+  }
 
-Cypress.Commands.add('mountFragment', mountFragment)
+  Cypress.Commands.add('mountFragment', mountFragment)
 
-Cypress.Commands.add('mountFragmentList', (source, options) => {
-  return mountFragment(source, options, true)
-})
+  Cypress.Commands.add('mountFragmentList', (source, options) => {
+    return mountFragment(source, options, true)
+  })
+}
 
 type GetRootType<T> = T extends TypedDocumentNode<infer U, any>
   ? U extends { __typename?: infer V }

packages/launchpad/cypress/support/commands.ts

@@ -1 +1,4 @@
-import '@packages/frontend-shared/cypress/support/commands'
+import { registerMountFn } from '@packages/frontend-shared/cypress/support/commands'
+import { createI18n } from '@packages/launchpad/src/locales/i18n'
+
+registerMountFn({ plugins: [() => createI18n()] })