test: plugins

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/FolderExplorerItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="foder-explorer-item">
+  <div class="folder-explorer-item">
     <VueIcon :icon="folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
     <div class="folder-name">
       {{ folder.name }}
@@ -43,7 +43,7 @@ export default {
   position relative
   top 5px
 
-.foder-explorer-item
+.folder-explorer-item
   padding $padding-item
   h-box()
   align-items center

packages/@vue/cli-ui/src/components/PackageSearchItem.vue

@@ -16,7 +16,7 @@
       show-description
     >
       <template slot="name">
-        <span class="name">
+        <span class="name" data-testid="name">
           <ais-highlight
             :result="pkg"
             attribute-name="name"

packages/@vue/cli-ui/src/components/ProjectSelectList.vue

@@ -17,6 +17,7 @@
                 <div
                   v-if="data.projects.find(item => item.favorite)"
                   class="cta-text"
+                  :class="favorite ? 'favorite' : 'other'"
                 >
                   {{ $t(`components.project-select-list.titles.${favorite ? 'favorite' : 'other'}`) }}
                 </div>

packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue

@@ -6,6 +6,7 @@
           class="icon-button"
           :icon-left="project.favorite ? 'star' : 'star_border'"
           v-tooltip="$t('components.project-select-list-item.tooltips.favorite')"
+          data-testid="favorite-button"
           @click.stop="$emit('favorite')"
         />
       </div>
@@ -20,6 +21,7 @@
           class="icon-button"
           icon-left="delete"
           v-tooltip="$t('components.project-select-list-item.tooltips.delete')"
+          data-testid="delete-button"
           @click.stop="$emit('remove')"
         />
       </div>

packages/@vue/cli-ui/src/views/ProjectPlugins.vue

@@ -10,6 +10,7 @@
           :label="$t('views.project-plugins.button')"
           class="primary"
           :to="{ name: 'project-plugins-add' }"
+          data-testid="add-plugin"
         />
       </template>
 

packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue

@@ -75,6 +75,7 @@
                 :label="$t('views.project-plugins-add.tabs.search.buttons.install', { target: selectedId || $t('views.project-plugins-add.plugin') })"
                 class="big primary"
                 :disabled="!selectedId"
+                data-testid="download-plugin"
                 @click="installPlugin()"
               />
             </div>
@@ -108,6 +109,7 @@
                 :label="$t('views.project-plugins-add.tabs.configuration.buttons.finish')"
                 class="big primary"
                 :disabled="!configurationValid"
+                data-testid="finish-install"
                 @click="invokePlugin()"
               />
             </div>

packages/@vue/cli-ui/tests/e2e/specs/test.js

@@ -60,4 +60,54 @@ describe('Vue project manager', () => {
     cy.get('.project-home', { timeout: 250000 }).should('be.visible')
     cy.get('.current-project').should('have.text', 'cli-ui-test')
   })
+
+  it('Favorites the project', () => {
+    cy.visit('/project/select')
+    cy.get('.project-select-list-item').eq(0).get('[data-testid="favorite-button"]').click()
+    cy.get('.cta-text.favorite').should('be.visible')
+    cy.get('.project-select-list-item').eq(0).get('[data-testid="favorite-button"]').click()
+    cy.get('.cta-text.favorite').should('not.exist')
+  })
+
+  it('Imports a project', () => {
+    cy.visit('/project/select')
+    cy.get('.project-select-list-item').eq(0).get('[data-testid="delete-button"]').click()
+    cy.get('.project-select-list-item').should('not.exist')
+    cy.get('.tab-button').eq(2).click()
+    cy.get('.import').within(() => {
+      cy.get('.folder-explorer').should('be.visible')
+      cy.get('.current-path').click()
+      cy.get('.path-input input').clear().type(Cypress.env('cwd') + '{enter}')
+      cy.get(`.folder-explorer-item:contains('cli-ui-test')`).click()
+      cy.get('.import-project').should('not.have.class', 'disabled').click()
+    })
+    cy.get('.project-home').should('be.visible')
+    cy.get('.current-project').should('have.text', 'cli-ui-test')
+  })
+})
+
+describe('Plugins', () => {
+  it('Should display the plugins', () => {
+    cy.visit('/')
+    cy.get('.project-plugin-item').should('have.length', 2)
+  })
+
+  it('Should add a plugin', () => {
+    cy.visit('/')
+    cy.get('[data-testid="add-plugin"]').click()
+    cy.get('.project-plugins-add').should('be.visible')
+    // Search
+    cy.get('.package-search-item:contains("@vue/cli-plugin-pwa")').should('be.visible')
+    cy.get('.instant-search-input input').clear().type('unit-jest')
+    cy.get('.package-search-item:contains("@vue/cli-plugin-pwa")').should('be.not.visible')
+    cy.get('.package-search-item:contains("@vue/cli-plugin-unit-jest")').should('be.visible')
+    cy.get('.instant-search-input input').clear()
+    // Install
+    cy.get('.package-search-item:contains("@vue/cli-plugin-pwa") [data-testid="name"]').should('be.visible').click()
+    cy.get('[data-testid="download-plugin"]:contains("@vue/cli-plugin-pwa")').should('not.have.class', 'disabled').click()
+    cy.get('.loading-screen .vue-ui-loading-indicator').should('be.visible')
+    cy.get('.prompts-list', { timeout: 250000 }).should('be.visible')
+    cy.get('[data-testid="finish-install"]').should('not.have.class', 'disabled').click()
+    cy.get('.project-plugin-item').should('have.length', 3)
+  })
 })