Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit test features

Browse Source
This commit is contained in:
Xavier Escudero
2019-05-02 20:18:54 +02:00
parent 51dfaa9727
commit 11def83df2
8 changed files with 2882 additions and 1409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.idea/encodings.xml generated Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" addBOMForNewFiles="with NO BOM" />
</project>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/the-example-app-nodejs.iml" filepath="$PROJECT_DIR$/.idea/the-example-app-nodejs.iml" />
</modules>
</component>
</project>

9
.idea/the-example-app-nodejs.iml generated Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

176
.idea/workspace.xml generated Normal file
View File

@@ -0,0 +1,176 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="7f693907-6d19-4a62-aa98-e7c1d2e159d6" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileEditorManager">
<leaf>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/README-TESTING.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="SPLIT">
<first_editor relative-caret-position="380">
<caret line="26" column="21" selection-start-line="26" selection-start-column="21" selection-end-line="26" selection-end-column="21" />
</first_editor>
<second_editor />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="300">
<caret line="20" column="34" lean-forward="true" selection-start-line="20" selection-start-column="34" selection-end-line="20" selection-end-column="34" />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/README-TESTING.md" />
<option value="$PROJECT_DIR$/package.json" />
</list>
</option>
</component>
<component name="ProjectFrameBounds" extendedState="6" fullScreen="true">
<option name="y" value="23" />
<option name="width" value="1680" />
<option name="height" value="1027" />
</component>
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="PackagesPane" />
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="the-example-app-nodejs" type="b2602c69:ProjectViewProjectNode" />
<item name="the-example-app-nodejs" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/test" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="7f693907-6d19-4a62-aa98-e7c1d2e159d6" name="Default Changelist" comment="" />
<created>1556820779270</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1556820779270</updated>
</task>
<servers />
</component>
<component name="ToolWindowManager">
<frame x="0" y="0" width="1680" height="1050" extended-state="6" />
<editor active="true" />
<layout>
<window_info id="Image Layers" />
<window_info id="Designer" />
<window_info id="UI Designer" />
<window_info id="Capture Tool" />
<window_info id="Favorites" side_tool="true" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24969475" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="bottom" id="Version Control" />
<window_info anchor="bottom" id="Terminal" visible="true" weight="0.32959184" />
<window_info anchor="bottom" id="Event Log" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="right" id="Palette" />
<window_info anchor="right" id="Theme Preview" />
<window_info anchor="right" id="Capture Analysis" />
<window_info anchor="right" id="Palette&#9;" />
<window_info anchor="right" id="Maven" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/README-TESTING.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="SPLIT">
<first_editor relative-caret-position="380">
<caret line="26" column="21" selection-start-line="26" selection-start-column="21" selection-end-line="26" selection-end-column="21" />
</first_editor>
<second_editor />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="300">
<caret line="20" column="34" lean-forward="true" selection-start-line="20" selection-start-column="34" selection-end-line="20" selection-end-column="34" />
</state>
</provider>
</entry>
</component>
<component name="masterDetails">
<states>
<state key="ProjectJDKs.UI">
<settings>
<last-edited>1.8</last-edited>
<splitter-proportions>
<option name="proportions">
<list>
<option value="0.2" />
</list>
</option>
</splitter-proportions>
</settings>
</state>
</states>
</component>
</project>

201
README-TESTING.md Normal file
View File

@@ -0,0 +1,201 @@
# Getting started
# Installation
## Installing cucumber
Reference:[Cucumber](https://cucumber.io/docs)
```shell
# NPM
npm install --save-dev cucumber
```
[Apickli - REST API integration testing framework with cucumber.js](https://github.com/apickli/apickli)
## Installing cypress
Install locally executing:
``$ npm install cypress --save-dev``
Add in package.json, npm scripts to execute Cypress commands:
```
{
"scripts": {
"cypress:open": "cypress open"
}
}
```
Create a file named **cypress.json**:
```
{
"baseUrl": "http://localhost:3007",
"fixturesFolder": false,
"integrationFolder": "./test/e2e/specs",
"supportFile": false
}
```
Here we're changing the default path used by cypress where tests are defined (integration by default).
https://medium.com/@itortv/how-to-integrate-cypress-and-cucumber-in-your-development-flow-in-just-a-few-weeks-96a46ac9165a
# Tutorial
## Writing tests of API services
test/
---- features/
--------- step_definitions/
-------------- apickli-gherkin.js
--------- support/
-------------- init.js
--------- myapi.feature
---- package.json
## Writing tests
We are going to create a test file named 'home.spec.js' to go to the home page.
```
|----src
| |----test
| | |----e2e
| | | |----specs
| | | | |----home.spec.js
```
And with the content:
```
describe('Go home page', function() {
it('Does not do much!', function() {
expect(true).to.equal(true)
})
})
```
## Executing tests
1. Open a terminal and execute:
``$ npm run cypress:open``
You'll see how the app is opened and one screen to help you to get started:
![help started cypress](img/cypress-start.png)
Press *OK, got it!* to continue.
1. Below **INTEGRATION TESTS** you can see the home.spec.js created
1. Click on line **home.spec.js**
1. You'll see how the test is executed and the result
![cypress first execution](img/cypress-first-execution.png)
# Exercises
## Exercise 1: Go to home page and check title
1. Open app
``$ npm run start:dev``
1. Edit the test 'home.spec.js' and change it to:
```
describe('Go home page', function() {
it('Visits home page', function() {
cy.visit('http://localhost:3000')
})
})
```
As you write or change file look at window of cypress (dynamically it changes and re-execute the tests!).
You'll see how we reach the home page:
![cypress-example-home-1](img/cypress-example-home-1.png)
1. Now we're going to check **Hello ContentFul** text is shown in page
```
describe('Home page test', function() {
it('finds title', function() {
cy.visit('http://localhost:3000')
cy.contains('Hello Contentful')
})
})
```
## Exercise 2: Go to home page and then click on courses tab
Sometimes you need to access the DOM of web page, and it's not easy (except with Cypress!).
1. Click on open selector button (at left of url location)
1. Click on COURSES tab
You'll see a complete path to get to the element using Cypress
![cypress-open-selector-select-element](img/cypress-open-selector-select-element.png)
1. Press button of copy to clipboard and paste at the end of test
1. Add click action:
```
describe('Home page test', function() {
it('finds title', function() {
cy.visit('http://localhost:3000')
cy.contains('Hello Contentful')
cy.get('.header__navigation > ul > :nth-child(2) > a').click()
})
})
```
![cypress-open-selector-select-element-click](img/cypress-open-selector-select-element-click.png)
## Exercise 3: Add an assertion to verify we've two courses available
```
describe('Home page test', function() {
it('finds title', function() {
cy.visit('http://localhost:3000')
cy.contains('Hello Contentful')
cy.get('.header__navigation > ul > :nth-child(2) > a').click()
cy.get('.courses > h1').should('have.text', 'All courses (2)')
})
})
```
Or better if we can count how many cards are:
```
describe('Home page test', function() {
it('finds title', function() {
cy.visit('http://localhost:3000')
cy.contains('Hello Contentful')
cy.get('.header__navigation > ul > :nth-child(2) > a').click()
cy.get('.course-card').its('length').should('eq', 2)
})
})
```
![cypress-example-courses-length](img/cypress-example-courses-length.png)

3883
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -17,7 +17,8 @@
"test:integration": "jest test/integration", "test:integration": "jest test/integration",
"test:integration:watch": "jest test/integration --watch", "test:integration:watch": "jest test/integration --watch",
"test:unit": "jest test/unit", "test:unit": "jest test/unit",
"test:unit:watch": "jest test/unit --watch" "test:unit:watch": "jest test/unit --watch",
"cypress:open": "cypress open"
}, },
"engines": { "engines": {
"node": ">=8.9.3" "node": ">=8.9.3"
@@ -38,6 +39,7 @@
"devDependencies": { "devDependencies": {
"cheerio": "^1.0.0-rc.2", "cheerio": "^1.0.0-rc.2",
"cookie": "^0.3.1", "cookie": "^0.3.1",
"cypress": "^3.2.0",
"eslint": "^4.18.1", "eslint": "^4.18.1",
"eslint-config-standard": "^11.0.0", "eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.8.0", "eslint-plugin-import": "^2.8.0",