add tests

Author: lmiller1990

packages/app/cypress/e2e/integration/settings.spec.ts

@@ -1,4 +1,4 @@
-describe('Settings', { viewportWidth: 1200 }, () => {
+describe('Settings', { viewportWidth: 600 }, () => {
   beforeEach(() => {
     cy.setupE2E('component-tests')
 
@@ -39,8 +39,17 @@ describe('Settings', { viewportWidth: 1200 }, () => {
     cy.wait('@ReconfigureProject')
   })
 
-  it.only('selects well known editor', () => {
+  it('selects well known editor', () => {
     cy.visitApp()
     cy.get('[href="#/settings"]').click()
+    cy.contains('Device Settings').click()
+    cy.findByPlaceholderText('Custom path...').clear().type('/usr/local/bin/vim')
+
+    cy.intercept('POST', 'mutation-SetPreferredEditorBinary', (req) => {
+      expect(req.body.variables).to.eql({ 'value': '/usr/local/bin/vim' })
+    }).as('SetPreferred')
+
+    cy.get('[data-cy="use-custom-editor"]').click()
+    cy.wait('@SetPreferred')
   })
 })

packages/app/src/settings/device/ExternalEditorSettings.spec.tsx

@@ -5,24 +5,34 @@ import { ExternalEditorSettingsFragmentDoc } from '../../generated/graphql-test'
 const editorText = defaultMessages.settingsPage.editor
 
 describe('<ExternalEditorSettings />', () => {
-  beforeEach(() => {
+  it('renders the placeholder by default', () => {
     cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
       render: (gqlVal) => {
         return <ExternalEditorSettings gql={gqlVal} />
       },
     })
-  })
 
-  it('renders the placeholder by default', () => {
     cy.findByText(editorText.noEditorSelectedPlaceholder).should('be.visible')
   })
 
   it('renders the title and description', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
     cy.findByText(editorText.description).should('be.visible')
     cy.findByText(editorText.title).should('be.visible')
   })
 
   it('can select an editor', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
     const optionsSelector = '[role=option]'
     const inputSelector = '[aria-haspopup=true]'
 
@@ -32,4 +42,19 @@ describe('<ExternalEditorSettings />', () => {
       cy.wrap($options.first()).click()
     })
   })
+
+  it('can input a custom binary', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
+    cy.findByPlaceholderText('Custom path...').type('/usr/bin')
+    cy.get('[data-cy="use-custom-editor"]').as('custom')
+    cy.get('@custom').click()
+
+    cy.get('@custom').should('be.focused')
+    cy.get('[data-cy="use-well-known-editor"]').should('not.be.focused')
+  })
 })

packages/app/src/settings/device/ExternalEditorSettings.vue

@@ -8,12 +8,13 @@
     </template>
 
     <div class="flex items-center">
-      <input 
-        type="radio" 
-        v-model="editorToUse" 
+      <input
+        v-model="editorToUse"
+        type="radio"
         class="mr-5px"
+        data-cy="use-well-known-editor"
         value="found"
-      />
+      >
 
       <Select
         :model-value="selectedWellKnownEditor"
@@ -46,17 +47,18 @@
     </div>
 
     <div class="flex items-center py-2">
-      <input 
-        type="radio" 
+      <input
+        v-model="editorToUse"
+        type="radio"
         class="mr-5px"
-        v-model="editorToUse" 
         value="custom"
-      />
+        data-cy="use-custom-editor"
+      >
 
       <div class="w-400px">
-        <Input 
-          v-model="customBinary" 
-          inputClasses="text-sm"
+        <Input
+          v-model="customBinary"
+          input-classes="text-sm"
           placeholder="Custom path..."
           @blur="setCustomBinary"
         >
@@ -78,7 +80,6 @@ import Icon from '@cy/components/Icon.vue'
 import SettingsSection from '../SettingsSection.vue'
 import { useI18n } from '@cy/i18n'
 import Select from '@cy/components/Select.vue'
-import Button from '@cy/components/Button.vue'
 import Input from '@cy/components/Input.vue'
 import VSCode from '~icons/logos/visual-studio-code'
 import Atom from '~icons/logos/atom-icon'
@@ -141,13 +142,13 @@ const customBinary = ref<string>('')
 const selectedWellKnownEditor = ref<Editor>()
 const editorToUse = ref<'found' | 'custom'>('found')
 
-
 watch(
-  () => props.gql.localSettings.preferences.preferredEditorBinary, 
+  () => props.gql.localSettings.preferences.preferredEditorBinary,
   (perferredEditorBinary) => {
-    const isWellKnownEditor = props.gql.localSettings.availableEditors.find((x) => 
-      x.binary === perferredEditorBinary
-    )
+    const isWellKnownEditor = props.gql.localSettings.availableEditors.find((x) => {
+      return x.binary === perferredEditorBinary
+    })
+
     editorToUse.value = isWellKnownEditor ? 'found' : 'custom'
 
     if (isWellKnownEditor) {
@@ -157,7 +158,7 @@ watch(
     if (editorToUse.value === 'custom' && perferredEditorBinary) {
       customBinary.value = perferredEditorBinary
     }
-  }, { immediate: true }
+  }, { immediate: true },
 )
 
 watch(editorToUse, (val) => {

packages/data-context/src/util/urqlCacheKeys.ts

@@ -18,5 +18,6 @@ export const urqlCacheKeys: Partial<CacheExchangeOpts> = {
     ProjectPreferences: (data) => data.__typename,
     VersionData: () => null,
     LocalSettings: (data) => data.__typename,
+    LocalSettingsPreferences: () => null,
   },
 }