From 8a0ef511339943ff8a3732704f8101afd27814fa Mon Sep 17 00:00:00 2001 From: Elvanos Date: Tue, 29 Aug 2023 00:05:58 +0200 Subject: [PATCH] Cleaned up frontend testing & Readme file --- README.md | 28 +++---- cypress.config.ts | 2 +- package.json | 8 +- .../GlobalWindowButtons.cy.test.ts | 11 +++ .../GlobalWindowButtons.vitest.test.ts | 28 +++++++ .../GlobalWindowButtons.vue | 22 ++++-- src/components/QuasarButton.vue | 19 ----- src/components/QuasarCheckComponents.vue | 44 ----------- src/components/QuasarDark.vue | 16 ---- src/components/QuasarDate.vue | 50 ------------ src/components/QuasarDialog.vue | 78 ------------------- src/components/QuasarDrawer.vue | 40 ---------- src/components/QuasarMenu.vue | 31 -------- src/components/QuasarPageSticky.vue | 29 ------- src/components/QuasarSelect.vue | 54 ------------- src/components/QuasarTooltip.vue | 31 -------- src/components/VModelComponent.vue | 32 -------- src/components/__tests__/QuasarButton.cy.ts | 43 ---------- .../__tests__/QuasarCheckComponents.cy.ts | 38 --------- src/components/__tests__/QuasarDark.cy.ts | 22 ------ src/components/__tests__/QuasarDate.cy.ts | 33 -------- src/components/__tests__/QuasarDialog.cy.ts | 42 ---------- src/components/__tests__/QuasarDrawer.cy.ts | 20 ----- src/components/__tests__/QuasarMenu.cy.ts | 21 ----- .../__tests__/QuasarPageSticky.cy.ts | 21 ----- src/components/__tests__/QuasarSelect.cy.ts | 44 ----------- src/components/__tests__/QuasarTooltip.cy.ts | 10 --- .../__tests__/VModelComponent.cy.ts | 72 ----------------- .../__tests__/color-assertions.cy.ts | 12 --- src/components/__tests__/data-cy.cy.ts | 16 ---- src/components/color-assertions.vue | 5 -- src/components/data-cy.vue | 7 -- .../vitest/__tests__/ExampleComponent.test.ts | 38 --------- test/vitest/__tests__/NotifyComponent.test.ts | 19 ----- .../__tests__/demo/ExampleComponent.vue | 52 ------------- .../vitest/__tests__/demo/NotifyComponent.vue | 13 ---- 36 files changed, 75 insertions(+), 976 deletions(-) create mode 100644 src/components/GlobalWindowButtons/GlobalWindowButtons.cy.test.ts create mode 100644 src/components/GlobalWindowButtons/GlobalWindowButtons.vitest.test.ts delete mode 100644 src/components/QuasarButton.vue delete mode 100644 src/components/QuasarCheckComponents.vue delete mode 100644 src/components/QuasarDark.vue delete mode 100644 src/components/QuasarDate.vue delete mode 100644 src/components/QuasarDialog.vue delete mode 100644 src/components/QuasarDrawer.vue delete mode 100644 src/components/QuasarMenu.vue delete mode 100644 src/components/QuasarPageSticky.vue delete mode 100644 src/components/QuasarSelect.vue delete mode 100644 src/components/QuasarTooltip.vue delete mode 100644 src/components/VModelComponent.vue delete mode 100644 src/components/__tests__/QuasarButton.cy.ts delete mode 100644 src/components/__tests__/QuasarCheckComponents.cy.ts delete mode 100644 src/components/__tests__/QuasarDark.cy.ts delete mode 100644 src/components/__tests__/QuasarDate.cy.ts delete mode 100644 src/components/__tests__/QuasarDialog.cy.ts delete mode 100644 src/components/__tests__/QuasarDrawer.cy.ts delete mode 100644 src/components/__tests__/QuasarMenu.cy.ts delete mode 100644 src/components/__tests__/QuasarPageSticky.cy.ts delete mode 100644 src/components/__tests__/QuasarSelect.cy.ts delete mode 100644 src/components/__tests__/QuasarTooltip.cy.ts delete mode 100644 src/components/__tests__/VModelComponent.cy.ts delete mode 100644 src/components/__tests__/color-assertions.cy.ts delete mode 100644 src/components/__tests__/data-cy.cy.ts delete mode 100644 src/components/color-assertions.vue delete mode 100644 src/components/data-cy.vue delete mode 100644 test/vitest/__tests__/ExampleComponent.test.ts delete mode 100644 test/vitest/__tests__/NotifyComponent.test.ts delete mode 100644 test/vitest/__tests__/demo/ExampleComponent.vue delete mode 100644 test/vitest/__tests__/demo/NotifyComponent.vue diff --git a/README.md b/README.md index ffd7348..39931a5 100644 --- a/README.md +++ b/README.md @@ -11,42 +11,44 @@ Make sure you are running this with Node v16.17.0 ("nvm" is great for these olde ##### Ensure that the Yarn global install location is in your PATH after install. (details in article linked above) -```bash +``` yarn global add @quasar/cli ``` ## Install the dependencies and set up the project -```bash +``` yarn ``` ### Start the app in Quasar development mode (hot-code reloading, error reporting, etc.) -```bash +``` quasar dev -m electron ``` ### Build the app for production -```bash +``` quasar build ``` ### Testing: +> Keep in mind that Cypress tests are limited to front-end testing due to the nature of Electron's nodeJS-based backend. Anything in Electron's main and preload will NOT work. + #### Unit test - with pretty web-UI -```bash +``` test:unit:ui ``` #### Unit test - without any UI, fully in a terminal -```bash -test:unit ``` -#### Component test - via Cypress, pick Electron on the config screen (I suggest turning on the electron dev window first, the test is a bit buggy sometimes) -```bash -test:component +test:unit:ci ``` -#### e2e test - via Cypress, pick Electron on the config screen (I suggest turning on the electron dev window first, the test is a bit buggy sometimes) -```bash -test:e2e +#### Component test, Frontend - via Cypress, pick Electron on the config screen (I suggest turning on the electron dev window first, the test is a bit buggy sometimes) +``` +test:component:frontend +``` +#### E2E test, Froentend - via Cypress, pick Electron on the config screen (I suggest turning on the electron dev window first, the test is a bit buggy sometimes) +``` +test:e2e:frontend ``` ### Customize the configuration diff --git a/cypress.config.ts b/cypress.config.ts index 6a02a56..8ac6688 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -22,7 +22,7 @@ export default defineConfig({ return config }, supportFile: 'test/cypress/support/component.ts', - specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}', + specPattern: 'src/**/*.cy.test.{js,jsx,ts,tsx}', indexHtmlFile: 'test/cypress/support/component-index.html', devServer: injectQuasarDevServerConfig() } diff --git a/package.json b/package.json index b62a735..58e0b27 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ "test:unit:ui": "vitest --ui", "test:unit": "vitest", "test:unit:ci": "vitest run", - "test:e2e": "cross-env NODE_ENV=test start-test \"quasar dev\" http-get://localhost:9000 \"cypress open --e2e\"", - "test:e2e:ci": "cross-env NODE_ENV=test start-test \"quasar dev\" http-get://localhost:9000 \"cypress run --e2e\"", - "test:component": "cross-env NODE_ENV=test cypress open --component", - "test:component:ci": "cross-env NODE_ENV=test cypress run --component" + "test:e2e:frontend": "cross-env NODE_ENV=test start-test \"quasar dev\" http-get://localhost:9000 \"cypress open --e2e\"", + "test:e2e:frontend:ci": "cross-env NODE_ENV=test start-test \"quasar dev\" http-get://localhost:9000 \"cypress run --e2e\"", + "test:component:frontend": "cross-env NODE_ENV=test cypress open --component", + "test:component:frontend:ci": "cross-env NODE_ENV=test cypress run --component" }, "dependencies": { "@electron/remote": "^2.0.10", diff --git a/src/components/GlobalWindowButtons/GlobalWindowButtons.cy.test.ts b/src/components/GlobalWindowButtons/GlobalWindowButtons.cy.test.ts new file mode 100644 index 0000000..8fb73f5 --- /dev/null +++ b/src/components/GlobalWindowButtons/GlobalWindowButtons.cy.test.ts @@ -0,0 +1,11 @@ +import GlobalWindowButtons from './GlobalWindowButtons.vue' + +describe('Component test - GlobalWindowButtons', () => { + it('should have a `accent` color & `dark` background-color', () => { + cy.mount(GlobalWindowButtons) + + cy.get('.q-btn-group') + .should('have.backgroundColor', 'var(--q-dark)') + .should('have.color', 'var(--q-accent)') + }) +}) diff --git a/src/components/GlobalWindowButtons/GlobalWindowButtons.vitest.test.ts b/src/components/GlobalWindowButtons/GlobalWindowButtons.vitest.test.ts new file mode 100644 index 0000000..0d339d5 --- /dev/null +++ b/src/components/GlobalWindowButtons/GlobalWindowButtons.vitest.test.ts @@ -0,0 +1,28 @@ +import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest' +import { mount } from '@vue/test-utils' +import { describe, expect, it } from 'vitest' +import GlobalWindowButtons from './GlobalWindowButtons.vue' + +installQuasar() + +describe('Unit test - GlobalWindowButtons component', () => { + it('should mount three buttons', () => { + const wrapper = mount(GlobalWindowButtons) + expect(wrapper.findAll('.q-btn')).toHaveLength(3) + }) + + it('should have `minimize` button', () => { + const wrapper = mount(GlobalWindowButtons) + expect(wrapper.findAll('.globalWindowButtons__minimize')).toHaveLength(1) + }) + + it('should have `resize` button', () => { + const wrapper = mount(GlobalWindowButtons) + expect(wrapper.findAll('.globalWindowButtons__minimize')).toHaveLength(1) + }) + + it('should have `close` button', () => { + const wrapper = mount(GlobalWindowButtons) + expect(wrapper.findAll('.globalWindowButtons__minimize')).toHaveLength(1) + }) +}) diff --git a/src/components/GlobalWindowButtons/GlobalWindowButtons.vue b/src/components/GlobalWindowButtons/GlobalWindowButtons.vue index 801159c..c9c8340 100644 --- a/src/components/GlobalWindowButtons/GlobalWindowButtons.vue +++ b/src/components/GlobalWindowButtons/GlobalWindowButtons.vue @@ -10,6 +10,7 @@ :ripple="false" dark size="xs" + class="globalWindowButtons__minimize" @click="minimizeWindow()" > { - window.faWindowControlAPI.minimizeWindow() + console.log(process.env.MODE) + if (process.env.MODE === 'electron') { + window.faWindowControlAPI.minimizeWindow() + } } /* Triggers resize of the window by the min/max button click */ const resizeWindow = () => { - window.faWindowControlAPI.resizeWindow() + if (process.env.MODE === 'electron') { + window.faWindowControlAPI.resizeWindow() + } } /* @@ -87,14 +93,18 @@ Otherwise, the app simply closes */ const tryCloseWindow = () => { // TODO add project close checking - window.faWindowControlAPI.closeWindow() + if (process.env.MODE === 'electron') { + window.faWindowControlAPI.closeWindow() + } } /* Checks if the window is maximized and sets local ref */ const checkIfWindowMaximized = () => { - isMaximized.value = window.faWindowControlAPI.checkWindowMaximized() + if (process.env.MODE === 'electron') { + isMaximized.value = window.faWindowControlAPI.checkWindowMaximized() + } } /* diff --git a/src/components/QuasarButton.vue b/src/components/QuasarButton.vue deleted file mode 100644 index f1cede6..0000000 --- a/src/components/QuasarButton.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/src/components/QuasarCheckComponents.vue b/src/components/QuasarCheckComponents.vue deleted file mode 100644 index 65aff6b..0000000 --- a/src/components/QuasarCheckComponents.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/src/components/QuasarDark.vue b/src/components/QuasarDark.vue deleted file mode 100644 index 9e9a866..0000000 --- a/src/components/QuasarDark.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/src/components/QuasarDate.vue b/src/components/QuasarDate.vue deleted file mode 100644 index be2d850..0000000 --- a/src/components/QuasarDate.vue +++ /dev/null @@ -1,50 +0,0 @@ - - - diff --git a/src/components/QuasarDialog.vue b/src/components/QuasarDialog.vue deleted file mode 100644 index cd9eb93..0000000 --- a/src/components/QuasarDialog.vue +++ /dev/null @@ -1,78 +0,0 @@ - - - diff --git a/src/components/QuasarDrawer.vue b/src/components/QuasarDrawer.vue deleted file mode 100644 index fd698ce..0000000 --- a/src/components/QuasarDrawer.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - diff --git a/src/components/QuasarMenu.vue b/src/components/QuasarMenu.vue deleted file mode 100644 index 30607bf..0000000 --- a/src/components/QuasarMenu.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - diff --git a/src/components/QuasarPageSticky.vue b/src/components/QuasarPageSticky.vue deleted file mode 100644 index adac605..0000000 --- a/src/components/QuasarPageSticky.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/src/components/QuasarSelect.vue b/src/components/QuasarSelect.vue deleted file mode 100644 index fd49ce2..0000000 --- a/src/components/QuasarSelect.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - diff --git a/src/components/QuasarTooltip.vue b/src/components/QuasarTooltip.vue deleted file mode 100644 index d711d21..0000000 --- a/src/components/QuasarTooltip.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - diff --git a/src/components/VModelComponent.vue b/src/components/VModelComponent.vue deleted file mode 100644 index a0e0018..0000000 --- a/src/components/VModelComponent.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/src/components/__tests__/QuasarButton.cy.ts b/src/components/__tests__/QuasarButton.cy.ts deleted file mode 100644 index 52fd3f1..0000000 --- a/src/components/__tests__/QuasarButton.cy.ts +++ /dev/null @@ -1,43 +0,0 @@ -import QuasarButton from '../QuasarButton.vue' - -describe('QuasarButton', () => { - it('renders a message', () => { - const label = 'Hello there' - cy.mount(QuasarButton, { - props: { - label - } - }) - - cy.dataCy('button').should('contain', label) - }) - - it('renders another message', () => { - const label = 'Will this work?' - cy.mount(QuasarButton, { - props: { - label - } - }) - - cy.dataCy('button').should('contain', label) - }) - - it('should have a `positive` color', () => { - cy.mount(QuasarButton) - - cy.dataCy('button') - .should('have.backgroundColor', 'var(--q-positive)') - .should('have.color', 'white') - }) - - it('should emit `test` upon click', () => { - cy.mount(QuasarButton) - - cy.dataCy('button') - cy.dataCy('button').click() - cy.dataCy('button').should(() => { - expect(Cypress.vueWrapper.emitted('test')).to.have.length(1) - }) - }) -}) diff --git a/src/components/__tests__/QuasarCheckComponents.cy.ts b/src/components/__tests__/QuasarCheckComponents.cy.ts deleted file mode 100644 index 93ed5fc..0000000 --- a/src/components/__tests__/QuasarCheckComponents.cy.ts +++ /dev/null @@ -1,38 +0,0 @@ -import QuasarCheckComponents from '../QuasarCheckComponents.vue' - -describe('QuasarCheckbox', () => { - it('can be used with normal Cypress commands', () => { - cy.mount(QuasarCheckComponents) - - cy.dataCy('checkbox').check() - cy.dataCy('checkbox').should('be.checked') - - cy.dataCy('checkbox').uncheck() - cy.dataCy('checkbox').should('not.be.checked') - }) -}) - -describe('QuasarToggle', () => { - it('can be used with normal Cypress commands', () => { - cy.mount(QuasarCheckComponents) - - cy.dataCy('toggle').check() - cy.dataCy('toggle').should('be.checked') - - cy.dataCy('toggle').uncheck() - cy.dataCy('toggle').should('not.be.checked') - }) -}) - -describe('QuasarToggle', () => { - it('can be used with normal Cypress commands', () => { - cy.mount(QuasarCheckComponents) - - cy.dataCy('radio-1').check() - cy.dataCy('radio-1').should('be.checked') - - cy.dataCy('radio-2').check() - cy.dataCy('radio-2').should('be.checked') - cy.dataCy('radio-1').should('not.be.checked') - }) -}) diff --git a/src/components/__tests__/QuasarDark.cy.ts b/src/components/__tests__/QuasarDark.cy.ts deleted file mode 100644 index 5ce88c6..0000000 --- a/src/components/__tests__/QuasarDark.cy.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Dark } from 'quasar' -import QuasarDark from '../QuasarDark.vue' - -describe('QuasarDark', () => { - it('changes its color', () => { - cy.mount(QuasarDark) - - cy.dataCy('dark-card') - .should('not.have.class', 'q-dark') - .then(() => { - Dark.set(true) - }) - - cy.dataCy('dark-card') - .should('have.class', 'q-dark') - .then(() => { - Cypress.vueWrapper.vm.$q.dark.set(false) - }) - - cy.dataCy('dark-card').should('not.have.class', 'q-dark') - }) -}) diff --git a/src/components/__tests__/QuasarDate.cy.ts b/src/components/__tests__/QuasarDate.cy.ts deleted file mode 100644 index 243e36b..0000000 --- a/src/components/__tests__/QuasarDate.cy.ts +++ /dev/null @@ -1,33 +0,0 @@ -import QuasarDate from '../QuasarDate.vue' - -const targetDate = '2023/02/23' - -describe('QuasarDate', () => { - it('selects a date by date string', () => { - cy.mount(QuasarDate) - - cy.dataCy('date-picker').selectDate(targetDate) - cy.dataCy('date-value').should('have.text', targetDate) - }) - - it('selects a date by date object', () => { - cy.mount(QuasarDate) - - cy.dataCy('date-picker').selectDate(new Date(targetDate)) - cy.dataCy('date-value').should('have.text', targetDate) - }) - - it('selects a date displayed into a popup proxy', () => { - cy.mount(QuasarDate) - - cy.dataCy('open-date-picker-popup-button').click() - cy.withinDialog(() => { - cy.get('.q-date').selectDate(targetDate) - }) - cy.dataCy('date-value').should('have.text', targetDate) - - // When dealing with a nested dialog, or a popup proxy within a dialog, - // add a data-cy on the dialog/popup-proxy containing the QDate and use the `withinDialog` extended signature: - // Example: cy.withinDialog({ dataCy: 'date-picker-popup', fn: () => { cy.get('.q-date').selectDate(targetDate); } }) - }) -}) diff --git a/src/components/__tests__/QuasarDialog.cy.ts b/src/components/__tests__/QuasarDialog.cy.ts deleted file mode 100644 index 5c2994f..0000000 --- a/src/components/__tests__/QuasarDialog.cy.ts +++ /dev/null @@ -1,42 +0,0 @@ -import DialogWrapper from 'app/test/cypress/wrappers/DialogWrapper.vue' -import QuasarDialog from '../QuasarDialog.vue' - -describe('QuasarDialog', () => { - it('should show a dialog with a message', () => { - const message = 'Hello, I am a dialog' - cy.mount(DialogWrapper, { - props: { - component: QuasarDialog, - componentProps: { - message - } - } - }) - - cy.withinDialog((el) => { - cy.wrap(el).should('contain', message) - cy.dataCy('ok-button').click() - }) - }) - - it('should keep the dialog open when not dismissed', () => { - const message = 'Hello, I am a dialog' - cy.mount(DialogWrapper, { - props: { - component: QuasarDialog, - componentProps: { - message - } - } - }) - - // The helper won't check for the dialog to be closed - // when the callback completes - cy.withinDialog({ - persistent: true, - fn: (el) => { - cy.wrap(el).should('contain', message) - } - }) - }) -}) diff --git a/src/components/__tests__/QuasarDrawer.cy.ts b/src/components/__tests__/QuasarDrawer.cy.ts deleted file mode 100644 index fc0657b..0000000 --- a/src/components/__tests__/QuasarDrawer.cy.ts +++ /dev/null @@ -1,20 +0,0 @@ -import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue' -import QuasarDrawer from '../QuasarDrawer.vue' - -describe('QuasarDrawer', () => { - it('should show a drawer', () => { - cy.mount(LayoutContainer, { - props: { - component: QuasarDrawer - } - }) - cy.dataCy('drawer') - .should('exist') - .dataCy('button') - .should('not.be.visible') - cy.get('.q-scrollarea .scroll') - cy.get('.q-scrollarea .scroll').scrollTo('bottom', { duration: 500 }) - cy.get('.q-scrollarea .scroll').dataCy('button') - cy.get('.q-scrollarea .scroll').should('be.visible') - }) -}) diff --git a/src/components/__tests__/QuasarMenu.cy.ts b/src/components/__tests__/QuasarMenu.cy.ts deleted file mode 100644 index a6fd4d7..0000000 --- a/src/components/__tests__/QuasarMenu.cy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import QuasarMenu from '../QuasarMenu.vue' - -describe('QuasarMenu', () => { - it('click an item by content', () => { - cy.mount(QuasarMenu) - - cy.dataCy('open-menu-btn').click() - cy.withinMenu(() => { - cy.get('.q-item').contains('Item 1').click() - }) - }) - - it('click an item by cardinality', () => { - cy.mount(QuasarMenu) - - cy.dataCy('open-menu-btn').click() - cy.withinMenu(() => { - cy.get('.q-item').eq(1).click() - }) - }) -}) diff --git a/src/components/__tests__/QuasarPageSticky.cy.ts b/src/components/__tests__/QuasarPageSticky.cy.ts deleted file mode 100644 index f887f6a..0000000 --- a/src/components/__tests__/QuasarPageSticky.cy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue' -import QuasarPageSticky from '../QuasarPageSticky.vue' - -describe('QuasarPageSticky', () => { - it('should show a sticky at the bottom-right of the page', () => { - cy.mount(LayoutContainer, { - props: { - component: QuasarPageSticky, - title: 'Test' - } - }) - - cy.dataCy('button') - .should('be.visible') - .should(($el) => { - const rect = $el[0].getBoundingClientRect() - expect(rect.bottom).to.equal(window.innerHeight - 18) - expect(rect.right).to.equal(window.innerWidth - 18) - }) - }) -}) diff --git a/src/components/__tests__/QuasarSelect.cy.ts b/src/components/__tests__/QuasarSelect.cy.ts deleted file mode 100644 index 4f68bc2..0000000 --- a/src/components/__tests__/QuasarSelect.cy.ts +++ /dev/null @@ -1,44 +0,0 @@ -import QuasarSelect from '../QuasarSelect.vue' - -function dataCySelect (dataCyId: string) { - return cy.dataCy(dataCyId).closest('.q-select') -} - -describe('QuasarSelect', () => { - it('makes sure the select is disabled', () => { - cy.mount(QuasarSelect, { - props: { disable: true } - }) - - // `cy.dataCy('select')` won't work in this case, as it won't get the root q-select element - dataCySelect('select').should('have.attr', 'aria-disabled', 'true') - }) - - it('selects an option by content', () => { - cy.mount(QuasarSelect) - - cy.dataCy('select').select('Option 1') - cy.dataCy('select-value').should('have.text', 'Option 1') - }) - - it('selects an option by cardinality', () => { - cy.mount(QuasarSelect) - - cy.dataCy('select').select(1) - cy.dataCy('select-value').should('have.text', 'Option 2') - }) - - it('selects an option asynchronously', () => { - cy.mount(QuasarSelect, { - props: { - loadOptionsAsync: true - } - }) - - // Wait for loading to complete - cy.dataCy('select').get('.q-spinner').should('not.exist') - - cy.dataCy('select').select('Option 3') - cy.dataCy('select-value').should('have.text', 'Option 3') - }) -}) diff --git a/src/components/__tests__/QuasarTooltip.cy.ts b/src/components/__tests__/QuasarTooltip.cy.ts deleted file mode 100644 index 13ed819..0000000 --- a/src/components/__tests__/QuasarTooltip.cy.ts +++ /dev/null @@ -1,10 +0,0 @@ -import QuasarTooltip from '../QuasarTooltip.vue' - -describe('QuasarTooltip', () => { - it('should show a tooltip', () => { - cy.mount(QuasarTooltip) - - cy.dataCy('button').trigger('mouseover') - cy.dataCy('tooltip').contains('Here I am!') - }) -}) diff --git a/src/components/__tests__/VModelComponent.cy.ts b/src/components/__tests__/VModelComponent.cy.ts deleted file mode 100644 index 17871c0..0000000 --- a/src/components/__tests__/VModelComponent.cy.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress' -import { ref } from 'vue' -import VModelComponent from '../VModelComponent.vue' - -describe('VModelComponent', () => { - it('should show the value', () => { - const text = 'Quasar' - - cy.mount(VModelComponent, { - props: { - modelValue: text - } - }) - - cy.dataCy('model-value').should('contain', text) - }) - - it('should call the listener when an update via inner button occurs', () => { - const text = 'Quasar' - const fn = cy.stub() - - cy.mount(VModelComponent, { - props: { - modelValue: text, - // This is how Vue internally codifies listeners, - // defining a prop prepended with `on` and camelCased - 'onUpdate:modelValue': fn - } - }) - - cy.dataCy('button') - cy.dataCy('button').click() - cy.dataCy('button').then(() => { - expect(fn).to.be.calledWith('uasar') - }) - }) - - it('should update the value via inner button when not using the helper', () => { - const text = 'Quasar' - - cy.mount(VModelComponent, { - props: { - modelValue: text, - 'onUpdate:modelValue': (emittedValue: string) => - Cypress.vueWrapper.setProps({ modelValue: emittedValue }) - } - }) - - cy.dataCy('button').click() - cy.dataCy('model-value').should('contain', 'uasar') - }) - - it('should update the value via inner button using the helper', () => { - const model = ref('Quasar') - - cy.mount(VModelComponent, { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - props: { - ...vModelAdapter(model) - } - }) - - cy.dataCy('button').click() - cy.dataCy('model-value') - .should('contain', 'uasar') - .then(() => { - // You cannot access `model.value` in a synchronous way, - // you need to chain checks on it to a Cypress command or you'll be testing the initial value. - expect(model.value).to.equal('uasar') - }) - }) -}) diff --git a/src/components/__tests__/color-assertions.cy.ts b/src/components/__tests__/color-assertions.cy.ts deleted file mode 100644 index e4e1190..0000000 --- a/src/components/__tests__/color-assertions.cy.ts +++ /dev/null @@ -1,12 +0,0 @@ -import ColorAssertionsComponent from '../color-assertions.vue' - -describe('color assertions', () => { - it('works with names, hex codes and CSS variables', () => { - cy.mount(ColorAssertionsComponent) - - cy.get('.wrapper') - .should('have.color', 'var(--q-primary)') - .and('have.backgroundColor', 'black') - .and('have.backgroundColor', '#000') - }) -}) diff --git a/src/components/__tests__/data-cy.cy.ts b/src/components/__tests__/data-cy.cy.ts deleted file mode 100644 index 3b97e3e..0000000 --- a/src/components/__tests__/data-cy.cy.ts +++ /dev/null @@ -1,16 +0,0 @@ -import DataCyComponent from '../data-cy.vue' - -describe('dataCy command', () => { - it('works as a parent command', () => { - cy.mount(DataCyComponent) - - cy.dataCy('wrapper').should('exist') - cy.dataCy('paragraph').should('exist').and('contain', 'Test') - }) - - it('works as a child command', () => { - cy.mount(DataCyComponent) - - cy.dataCy('wrapper').dataCy('paragraph').should('exist') - }) -}) diff --git a/src/components/color-assertions.vue b/src/components/color-assertions.vue deleted file mode 100644 index 9b58e31..0000000 --- a/src/components/color-assertions.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/components/data-cy.vue b/src/components/data-cy.vue deleted file mode 100644 index 5e3ffe7..0000000 --- a/src/components/data-cy.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/test/vitest/__tests__/ExampleComponent.test.ts b/test/vitest/__tests__/ExampleComponent.test.ts deleted file mode 100644 index 5963478..0000000 --- a/test/vitest/__tests__/ExampleComponent.test.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest' -import { mount } from '@vue/test-utils' -import { describe, expect, it } from 'vitest' -import ExampleComponent from './demo/ExampleComponent.vue' - -installQuasar() - -describe('example Component', () => { - it('should mount component with todos', () => { - const wrapper = mount(ExampleComponent, { - props: { - title: 'Hello', - meta: { - totalCount: 4 - }, - todos: [ - { id: 1, content: 'Hallo' }, - { id: 2, content: 'Hoi' } - ] - } - }) - expect(wrapper.vm.clickCount).toBe(0) - wrapper.find('.q-item').trigger('click') - expect(wrapper.vm.clickCount).toBe(1) - }) - - it('should mount component without todos', () => { - const wrapper = mount(ExampleComponent, { - props: { - title: 'Hello', - meta: { - totalCount: 4 - } - } - }) - expect(wrapper.findAll('.q-item')).toHaveLength(0) - }) -}) diff --git a/test/vitest/__tests__/NotifyComponent.test.ts b/test/vitest/__tests__/NotifyComponent.test.ts deleted file mode 100644 index d156a94..0000000 --- a/test/vitest/__tests__/NotifyComponent.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest' -import { mount } from '@vue/test-utils' -import { Notify } from 'quasar' -import { describe, expect, it, vi } from 'vitest' -import NotifyComponent from './demo/NotifyComponent.vue' - -installQuasar({ plugins: { Notify } }) - -describe('notify example', () => { - it('should call notify on click', async () => { - expect(NotifyComponent).toBeTruthy() - - const wrapper = mount(NotifyComponent, {}) - const spy = vi.spyOn(Notify, 'create') - expect(spy).not.toHaveBeenCalled() - wrapper.trigger('click') - expect(spy).toHaveBeenCalled() - }) -}) diff --git a/test/vitest/__tests__/demo/ExampleComponent.vue b/test/vitest/__tests__/demo/ExampleComponent.vue deleted file mode 100644 index a419f8e..0000000 --- a/test/vitest/__tests__/demo/ExampleComponent.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - diff --git a/test/vitest/__tests__/demo/NotifyComponent.vue b/test/vitest/__tests__/demo/NotifyComponent.vue deleted file mode 100644 index 26d3174..0000000 --- a/test/vitest/__tests__/demo/NotifyComponent.vue +++ /dev/null @@ -1,13 +0,0 @@ - - -