chore: more tests and configuration

Author: astagi

.github/workflows/build-next.yml

@@ -0,0 +1,30 @@
+name: build-next
+on:
+  push:
+    branches: [ develop ]
+  pull_request:
+    branches: [ develop ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      max-parallel: 24
+      matrix:
+        node-version: [14.x, 16.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }} 🪢
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies 📦
+        run: npm install && npm run bootstrap
+      - name: Run lint and component tests 🧪
+        uses: cypress-io/github-action@v2
+        with:
+          command: npm run test:oruga-next
+      - name: Upload coverage 📈
+        uses: codecov/codecov-action@v2
+        flags: oruga-next
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

package.json

@@ -4,6 +4,8 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "test:oruga": "lerna run test --scope @oruga-ui/oruga",
+    "test:oruga-next": "lerna run test --scope @oruga-ui/oruga-next",
+    "test:watch:oruga-next": "lerna run test --scope @oruga-ui/oruga-next",
     "ci:oruga": "lerna run ci --scope @oruga-ui/oruga",
     "lint:oruga": "lerna run lint --scope @oruga-ui/oruga",
     "lint:fix:oruga": "lerna run lint:fix --scope @oruga-ui/oruga",

packages/oruga-next/.gitignore

@@ -21,3 +21,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Cypress
+cypress/videos

packages/oruga-next/package.json

@@ -36,7 +36,9 @@
     "build:style:watch": "concurrently \"sass ../oruga/src/scss/oruga-full-vars.scss dist/oruga-full-vars.css --watch\" \"sass ../oruga/src/scss/oruga.scss dist/oruga.css --watch\"",
     "build:lib": "rimraf dist && npm run build:vue && npm run build:style",
     "build:lib:watch": "npm link && concurrently \"npm run build:vue:watch\" \"npm run build:style:watch\"",
-    "publish:lib": "cp -R ../oruga/src/scss ./src && cp ../../README.md . && npm run build:lib && npm publish"
+    "publish:lib": "cp -R ../oruga/src/scss ./src && cp ../../README.md . && npm run build:lib && npm publish",
+    "test": "rm -rf .nyc_output coverage && NODE_ENV=test cypress run-ct",
+    "test:watch": "rm -rf .nyc_output coverage && NODE_ENV=test cypress open-ct"
   },
   "keywords": [
     "oruga",

packages/oruga-next/src/components/autocomplete/tests/Autocomplete.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@cypress/vue'
+import SimpleAutocomplete from './SimpleAutocomplete.vue'
+
+
+it('Autocomplete', () => {
+    mount(SimpleAutocomplete)
+    cy.get('input').click().type('j')
+    cy.get('input').type('{downarrow}{downarrow}{enter}')
+    cy.get('input').should('have.value', 'Node.js')
+})

packages/oruga-next/src/components/autocomplete/tests/SimpleAutocomplete.vue

@@ -0,0 +1,65 @@
+<template>
+  <p class="content"><b>Selected:</b> {{ selected }}</p>
+  <o-field label="Find a JS framework">
+    <o-autocomplete
+      rounded
+      v-model="name"
+      :data="filteredDataArray"
+      placeholder="e.g. jQuery"
+      icon="search"
+      clearable
+      @select="select"
+    >
+      <template #empty>No results found</template>
+    </o-autocomplete>
+  </o-field>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import OAutocomplete from "../Autocomplete.vue";
+import OField from "../../field/Field.vue";
+export default defineComponent({
+  data() {
+    return {
+      data: [
+        "Angular",
+        "Angular 2",
+        "Aurelia",
+        "Backbone",
+        "Ember",
+        "jQuery",
+        "Meteor",
+        "Node.js",
+        "Polymer",
+        "React",
+        "RxJS",
+        "Vue.js",
+      ],
+      name: "",
+      selected: null,
+    };
+  },
+  components: {
+    [OAutocomplete.name]: OAutocomplete,
+    [OField.name]: OField,
+  },
+  computed: {
+    filteredDataArray(): string[] {
+      return this.data.filter((option: any) => {
+        return (
+          option.toString().toLowerCase().indexOf(this.name.toLowerCase()) >= 0
+        );
+      });
+    },
+  },
+  methods: {
+    select(option: any) {
+      this.selected = option;
+    },
+  },
+});
+</script>
+
+<style>
+</style>

packages/oruga-next/src/components/button/Button.spec.ts

@@ -0,0 +1,14 @@
+import { mount } from '@cypress/vue'
+import OButton from '../Button.vue'
+
+it('Button', () => {
+    mount(OButton, {
+        slots: {
+            default: {
+                render: () => 'Hello Cypress!'
+            }
+        }
+    })
+
+  cy.get('button').contains('Hello Cypress!').click()
+})

packages/oruga-next/src/components/button/tests/Button.spec.ts

@@ -10,6 +10,7 @@ export default defineConfig({
         include: 'src/*',
         exclude: ["node_modules", "cypress/"],
         extension: [".ts", ".vue"],
+        cypress: true
       })
   ]
 })