diff --git a/.github/workflows/app-test.yml b/.github/workflows/app-test.yml new file mode 100644 index 0000000..cf22aa4 --- /dev/null +++ b/.github/workflows/app-test.yml @@ -0,0 +1,45 @@ +name: app-test + +on: + push: + branches: [master] + workflow_dispatch: + +jobs: + app-test: + runs-on: ${{ matrix.os }} + name: Test NodeJS ${{ matrix.node_version }} on ${{ matrix.os }} + strategy: + fail-fast: false + matrix: + node_version: ['16', '18', '20'] + os: [windows-latest, macos-latest, ubuntu-latest] + + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 + + - name: Setup NodeJS ${{ matrix.node_version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node_version }} + cache: npm + cache-dependency-path: '**/package-lock.json' + + - name: Cache dependencies + uses: actions/cache@v2 + id: npm-cache + with: + path: | + **/node_modules + key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-npm- + + - name: Install dependencies + if: steps.npm-cache.outputs.cache-hit != 'true' + run: npm i + + - name: Test module script + run: npm run test diff --git a/package-lock.json b/package-lock.json index c6b2ab5..21f1e59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ }, "devDependencies": { "@mdi/font": "^7.2.96", + "@playwright/test": "^1.35.1", "@typescript-eslint/eslint-plugin": "^5.60.0", "@typescript-eslint/parser": "^5.60.0", "@vitejs/plugin-vue": "^4.2.3", @@ -31,6 +32,7 @@ "eslint-plugin-n": "^16.0.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-vue": "^9.14.1", + "playwright": "^1.35.1", "prettier": "^2.8.8", "typescript": "^5.0.4", "vite": "^4.3.9", @@ -1433,6 +1435,25 @@ "node": ">= 8" } }, + "node_modules/@playwright/test": { + "version": "1.35.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz", + "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==", + "dev": true, + "dependencies": { + "@types/node": "*", + "playwright-core": "1.35.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, "node_modules/@rollup/pluginutils": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", @@ -6113,6 +6134,34 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.35.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.35.1.tgz", + "integrity": "sha512-NbwBeGJLu5m7VGM0+xtlmLAH9VUfWwYOhUi/lSEDyGg46r1CA9RWlvoc5yywxR9AzQb0mOCm7bWtOXV7/w43ZA==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "playwright-core": "1.35.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/playwright-core": { + "version": "1.35.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz", + "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/plist": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.6.tgz", diff --git a/package.json b/package.json index 7b1c117..eada667 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "lint": "eslint --ext .js,.ts,.vue -f ./node_modules/eslint-friendly-formatter src", "lint:fix": "eslint --ext .js,.ts,.vue -f ./node_modules/eslint-friendly-formatter --fix src", "format": "prettier .", - "format:fix": "prettier . --write" + "format:fix": "prettier . --write", + "test": "npm run build:dir && playwright test" }, "engines": { "node": ">=16.0.0" @@ -41,6 +42,7 @@ }, "devDependencies": { "@mdi/font": "^7.2.96", + "@playwright/test": "^1.35.1", "@typescript-eslint/eslint-plugin": "^5.60.0", "@typescript-eslint/parser": "^5.60.0", "@vitejs/plugin-vue": "^4.2.3", @@ -55,6 +57,7 @@ "eslint-plugin-n": "^16.0.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-vue": "^9.14.1", + "playwright": "^1.35.1", "prettier": "^2.8.8", "typescript": "^5.0.4", "vite": "^4.3.9", diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue index 72a4d97..f91f982 100644 --- a/src/renderer/screens/MainScreen.vue +++ b/src/renderer/screens/MainScreen.vue @@ -49,6 +49,7 @@ const handleCountIncrease = (): void => { { - - + + {{ $t('menu.increase-count') }} @@ -98,6 +99,7 @@ const handleCountIncrease = (): void => { setTimeout(resolve, milliseconds)) +} + +function isElementVisible(selector: string, waitingMilliseconds = 100) { + return new Promise((resolve) => { + setTimeout(async () => { + expect(await appWindow.isVisible(selector), `Confirm selector '${selector}' is visible`).toBe( + true + ) + resolve(true) + }, waitingMilliseconds) + }) +} + +test.beforeAll(async () => { + // Open Electron app from build directory + appElectron = await electron.launch({ args: ['dist/main/index.js'] }) + appWindow = await appElectron.firstWindow() + + await appWindow.waitForEvent('load') +}) + +test('Environment check', async () => { + const isPackaged = await appElectron.evaluate(async ({ app }) => { + return app.isPackaged + }) + + expect(isPackaged, 'Confirm that is in development mode').toBe(false) +}) + +test('Document element check', async () => { + await isElementVisible('.v-toolbar__content') + await isElementVisible('#main-logo') + await isElementVisible('#select-language') +}) + +test('Counter button click check', async () => { + await appWindow.click('#btn-counter', { clickCount: 10, delay: 50 }) + + const counterValueElement = await appWindow.$('#counter-badge .v-badge__badge') + + expect( + await appWindow.evaluate((element) => element.innerHTML, counterValueElement), + 'Confirm counter value is same' + ).toBe('10') +}) + +test.afterAll(async () => { + await waiting(2000) + await appElectron.close() +})