settings.json (OMS)

{
  "module-templates.engine": "handlebars",
  "module-templates.templates": [
      {
          "displayName": "OMS component",
          "defaultPath": "src/components",
          "folder": "{{kebab name}}",
          "questions": {
              "name": "Component name"
          },
          "files": [
              {
                  "name": "{{kebab name}}.vue",
                  "content": [
                      "<template>",
                      "  <div>",
                      "    {{kebab name}}",
                      "  </div>",
                      "</template>",
                      "",
                      "<script lang=\"ts\">",
                      "import { defineComponent } from 'vue'",
                      "import { useMachine } from '@xstate/vue'",
                      "import { machine } from './machine'",
                      "",
                      "export default defineComponent({",
                      "  name: '{{pascal name}}',",
                      "",
                      "  setup () {",
                      "    const { state, send } = useMachine(machine)",
                      "",
                      "    return {",
                      "      state,",
                      "      send,",
                      "    }",
                      "  },",
                      "})",
                      "</script>",
                      ""
                  ]
              },
              {
                  "name": "index.ts",
                  "content": [
                      "import {{pascal name}} from './{{kebab name}}.vue'",
                      "",
                      "export default {{pascal name}}",
                      ""
                  ]
              },
              {
                  "name": "machine.ts",
                  "content": [
                      "import { Machine } from 'xstate'",
                      "",
                      "export type MachineContext = {",
                      "  id: string | null;",
                      "}",
                      "",
                      "export interface MachineStatesSchema {",
                      "  states: {",
                      "    enabled: {};",
                      "    disabled: {};",
                      "  };",
                      "}",
                      "",
                      "export type MachineEvent =",
                      "  | { type: 'DISABLE' }",
                      "  | { type: 'ENABLE' }",
                      "",
                      "export const machine = Machine<MachineContext, MachineStatesSchema, MachineEvent>({",
                      "  id: 'machine',",
                      "  context: {",
                      "    id: null,",
                      "  },",
                      "  initial: 'enabled',",
                      "  states: {",
                      "    enabled: {",
                      "      on: {",
                      "        DISABLE: 'disabled',",
                      "      },",
                      "    },",
                      "    disabled: {",
                      "      on: {",
                      "        ENABLE: 'enabled',",
                      "      },",
                      "    },",
                      "  },",
                      "})",
                      ""
                  ]
              },
              {
                  "name": "/__tests__/{{kebab name}}.spec.ts",
                  "content": [
                      "/* eslint-disable @typescript-eslint/no-explicit-any */",
                      "import { mount, VueWrapper } from '@vue/test-utils'",
                      "import {{pascal name}} from '#components/{{kebab name}}'",
                      "",
                      "let wrapper: VueWrapper<any>",
                      "",
                      "const defaultId = 'sample-id'",
                      "",
                      "beforeEach(() => {",
                      "  wrapper = mount({{pascal name}}, {",
                      "    props: {",
                      "      id: defaultId,",
                      "    },",
                      "  })",
                      "})",
                      "",
                      "afterEach(() => {",
                      "  wrapper.unmount()",
                      "})",
                      "",
                      "describe('{{pascal name}}', () => {",
                      "  describe('defaults', () => {",
                      "    it('should be visible', async () => {",
                      "      expect(wrapper.find('[data-{{kebab name}}-root]').isVisible()).toBe(true)",
                      "    })",
                      "  })",
                      "",
                      "  describe('slots', () => {})",
                      "",
                      "  describe('props', () => {})",
                      "",
                      "  describe('functionality', () => {})",
                      "})",
                      "",
                  ]
              },
              {
                  "name": "/__tests__/machine.spec.ts",
                  "content": [
                      "import { machine } from '../machine'",
                      "",
                      "describe('{{pascal name}} machine', () => {",
                      "  // This is an example of a pure fucntionality test.",
                      "  it('transitions from `enabled` to `disabled` when the DISABLE event occurs', async () => {",
                      "    const expectedValue = 'disabled'",
                      "    const actualState = machine.transition('enabled', 'DISABLE')",
                      "",
                      "    expect(actualState.matches(expectedValue)).toBe(true)",
                      "  })",
                      "",
                      "  // This is an example of a data caching test.",
                      "  it('should cache data', (done) => {",
                      "    let cachedData = false",
                      "    ",
                      "    const mockMachine = machine.withConfig({",
                      "      actions: {",
                      "        cacheItems: () => {",
                      "          cachedData = true",
                      "        },",
                      "      },",
                      "    }, {",
                      "      data: null,",
                      "    })",
                      "",
                      "    const service = interpret(mockMachine).onTransition(state => {",
                      "      if (state.changed && state.matches('success')) {",
                      "        expect(cachedData).toBe(true)",
                      "        done()",
                      "      }",
                      "    })",
                      "",
                      "    service.start()",
                      "    service.send('FETCH')",
                      "  })",
                      "",
                      "  // These are examples of service invoke tests.",
                      "  it('should successfully fetch data', (done) => {",
                      "    const mockMachine = shipmentsMachine.withConfig({",
                      "      services: {",
                      "        fetch: () => {",
                      "          return new Promise(resolve => {",
                      "            resolve('success')",
                      "          })",
                      "        },",
                      "      },",
                      "    }, {",
                      "      data: null,",
                      "    })",
                      "",
                      "    const service = interpret(mockMachine).onTransition(state => {",
                      "      if (state.changed && state.matches('success')) {",
                      "        expect(state.context.data).toBe('success')",
                      "        done()",
                      "      }",
                      "    })",
                      "",
                      "    service.start()",
                      "    service.send('FETCH')",
                      "  })",
                      "})",
                      ""
                  ]
              },
          ]
      },
  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "volar.tsPlugin": true
}