Skip to content

Commit

Permalink
test(connect): added e2e tests
Browse files Browse the repository at this point in the history 
Closes #115

Signed-off-by: Lukas Mertens <[email protected]>

commit-id:ff70640a
  • Loading branch information
@lukas-mertens
lukas-mertens committed Apr 2, 2024
1 parent 8ea96a4 commit 4178558
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 11 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/e2e-tests.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
browser: ['chrome', 'firefox']
browser: ['electron', 'firefox']
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v3
Expand All @@ -27,11 +27,11 @@ jobs:
- name: Run Cypress Tests
uses: cypress-io/github-action@v6
with:
start: pnpm preview
start: pnpm dlx http-server dist -p 4173
build: pnpm build
wait-on: 'http://localhost:4173' # Adjust according to your server port
wait-on-timeout: 60
command: pnpm exec cypress run --browser ${{ matrix.browser }} --headless --config baseUrl=http://localhost:4173
command: pnpm exec cypress run --browser ${{ matrix.browser }} --headless --config baseUrl=http://localhost:4173,video=true
- uses: actions/upload-artifact@v4
if: failure()
name: Upload cypress screenshots if tests fail
Expand Down
5 changes: 5 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,8 @@ pnpm-debug.log*
*.njsproj
*.sln
*.sw?


# cypress
cypress/videos
cypress/screenshots
64 changes: 64 additions & 0 deletions cypress/e2e/connect-screen.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,70 @@
import {faker} from "@faker-js/faker";

describe('Connect-Screen', () => {
beforeEach(() => {
cy.clearAllLocalStorage();
});

it('should load connect screen by default', () => {
cy.visit('/');
cy.get('[data-cy="add-everest-instance"]').should('be.visible');
});

it('should be possible to create, edit and delete an Everest instance', () => {
cy.visit('/');
// add instance
cy.get('[data-cy="add-everest-instance"]').click();
cy.get('[data-cy="delete-instance"]').should('not.exist');
const instanceName = faker.word.words(2);
cy.get('[data-cy="instance-name-field"]').type(instanceName);
cy.get('[data-cy="host-address-field"]').type('localhost');
cy.get('[data-cy="port-field"]').clear().type('8080');
cy.get('[data-cy="save-instance"]').click();
cy.get('[data-cy="server-list-item"]').contains(instanceName).should('be.visible');

// edit instance
cy.get('[data-cy="server-list-item"]')
.contains(instanceName)
.parentsUntil('.v-list-subheader__text')
.find('[data-cy="edit-instance"]')
.click();
const newInstanceName = faker.word.words(2);
cy.get('[data-cy="instance-name-field"]').type(`{selectall}{backspace}${newInstanceName}`);
cy.get('[data-cy="save-instance"]').click();
cy.get('[data-cy="server-list-item"]')
.contains(newInstanceName)
.should('be.visible');
cy.get('[data-cy="server-list-item"]')
.contains(instanceName)
.should('not.exist');


// delete instance
cy.get('[data-cy="server-list-item"]')
.contains(newInstanceName)
.parentsUntil('.v-list-subheader__text')
.find('[data-cy="edit-instance"]')
.click();
cy.get('[data-cy="delete-instance"]').click();
cy.get('[data-cy="server-list-item"]')
.contains(instanceName)
.should('not.exist');
});

it('should automatically connect if autoConnect is set to true', () => {
cy.visit('/');
cy.get('[data-cy="auto-connect-checkbox').click();
cy.get('[data-cy="server-list-item').contains('Simulator').click();
cy.get('[data-cy="hamburger-menu"]').click();
cy.get('[data-cy="switch-instance"]').click();

// should not reconnect automatically after switching instance, only on page reload
cy.get('[data-cy="server-list-item"]', {timeout: 6000}).contains('Simulator').should('be.visible');
cy.wait(1000);
cy.get('[data-cy="server-list-item"]').contains('Simulator').should('be.visible');

// check if automatically reconnected
cy.visit('/');
cy.get('[data-cy="hamburger-menu"]', {timeout: 6000}).should('be.visible');
});
});
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
},
"devDependencies": {
"@babel/types": "^7.23.0",
"@faker-js/faker": "^8.4.1",
"@types/node": "^20.10.6",
"@types/splitpanes": "^2.2.6",
"@typescript-eslint/eslint-plugin": "^6.17.0",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 22 additions & 6 deletions src/pages/ConnectPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
v-model="instanceId.value.value"
:error-messages="instanceId.errorMessage.value"
hint="For example 'Local', 'Development'..."
data-cy="instance-name-field"
>
</v-text-field>
</v-col>
Expand All @@ -39,6 +40,7 @@
<v-select v-model="protocol.value.value"
:error-messages="protocol.errorMessage.value"
label="Protocol"
data-cy="protocol-select-field"
:items="[ { value: 'ws', title: 'ws://' }, { value: 'wss', title: 'wss://' } ]"
></v-select>
</v-col>
Expand All @@ -47,6 +49,7 @@
label="EVerest instance host address"
v-model="host.value.value"
:error-messages="host.errorMessage.value"
data-cy="host-address-field"
hint="For example, localhost"
></v-text-field>
</v-col>
Expand All @@ -55,6 +58,7 @@
label="Port"
v-model="port.value.value"
:error-messages="port.errorMessage.value"
data-cy="port-field"
hint="For example, 8849"
>
</v-text-field>
Expand All @@ -67,13 +71,19 @@
elevation="2"
v-if="currentView === ComponentViews.EDIT"
@click="deleteItem()"
>
</v-btn>
data-cy="delete-instance"
></v-btn>
</v-col>
<v-spacer />
<v-col class="text-right">
<v-btn class="mx-4" icon="mdi-close" elevation="2" @click="closeEdit()"></v-btn>
<v-btn icon="mdi-check" elevation="2" type="submit" :disabled="!meta.valid"></v-btn>
<v-btn
icon="mdi-check"
elevation="2"
type="submit"
:disabled="!meta.valid"
data-cy="save-instance"
></v-btn>
</v-col>
</v-row>
</v-container>
Expand All @@ -83,14 +93,19 @@
<v-list-item v-for="(server, index) in servers"
:key="server.id"
prepend-icon="mdi-server"
@click="connect(server)"
v-bind="props">
data-cy="server-list-item"
@click="connect(server)">

<v-list-item-title>{{ server.id }}</v-list-item-title>
<v-list-item-subtitle>{{ server.host }}</v-list-item-subtitle>
<template v-slot:append>
<v-list-item-action v-if="server.editable">
<v-btn variant="text" icon="mdi-pencil" @click.prevent.stop="openEditServerView(index)"></v-btn>
<v-btn
variant="text"
icon="mdi-pencil"
@click.prevent.stop="openEditServerView(index)"
data-cy="edit-instance"
></v-btn>
</v-list-item-action>
<v-tooltip :text="server.hint" v-if="server.hint">
<template v-slot:activator="{ props }">
Expand All @@ -103,6 +118,7 @@
</v-list-item>
</v-list-subheader>
<v-checkbox v-model="connectAutomatically"
data-cy="auto-connect-checkbox"
label="Automatically connect to this instance"></v-checkbox>
<v-alert v-bind:text="error.status" prominent type="error" icon="mdi-cloud-alert" v-model="error.active" closable>
</v-alert>
Expand Down
5 changes: 3 additions & 2 deletions src/pages/MainPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<template>
<v-app>
<v-app-bar color="primary">
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-app-bar-nav-icon @click="drawer = !drawer" data-cy="hamburger-menu"></v-app-bar-nav-icon>
<v-spacer/>
<v-img class="mx-4 rotateable" max-height="40" max-width="40" src="/img/icons/everest_lf_logo_white.svg"/>
<v-toolbar-title class="app-bar-title">EVerest Admin Panel</v-toolbar-title>
Expand All @@ -17,7 +17,8 @@
</v-list-item>
<v-tooltip location="end">
<template v-slot:activator="{ props }">
<v-list-item @click="changeInstance()" append-icon="mdi-image-filter-hdr" link v-bind="props">
<v-list-item @click="changeInstance()" append-icon="mdi-image-filter-hdr" link v-bind="props"
data-cy="switch-instance">
<v-list-item-title>Change EVerest instance</v-list-item-title>
</v-list-item>
</template>
Expand Down

0 comments on commit 4178558

Please sign in to comment.