Commit aaa9e6ee authored by Johan Vervloet's avatar Johan Vervloet

Merge branch 'feature/1' into 'master'

Run yarn from gitlab ci, closes #1.

Closes #1

See merge request !1
parents 97db6af0 9f9c887f
Pipeline #68644877 passed with stages
in 2 minutes and 1 second
/.idea
/vendor
/node_modules
/public/build
cache:
paths:
- vendor/
- node_modules/
- .yarn
stages:
- build
- test
install development dependencies:
install php dependencies:
stage: build
image: composer:1.8
variables:
......@@ -20,6 +22,18 @@ install development dependencies:
- tests/_support/_generated
expire_in: 3 days
install javascript dependencies:
stage: build
image: node:8
script:
- yarn config set cache-folder .yarn
- yarn install
- yarn run encore dev
artifacts:
paths:
- public/build
expire_in: 3 days
run web tests:
services:
# use version 3.141.59-oxygen of chrome container, because the web tests
......@@ -36,7 +50,9 @@ run web tests:
stage: test
image: registry.gitlab.com/johanv/codeception-ci-demo/php
dependencies:
- install development dependencies
# Make sure to add dependencies to both tasks, to get all the artifacts.
- install php dependencies
- install javascript dependencies
script:
- LOCAL_IP=$(ip route get 8.8.8.8 | awk -F"src " 'NR==1{split($2,a," ");print a[1]}')
- echo Local IP $LOCAL_IP
......
# Running codeception web tests with gitlab-ci
I created this demo project because I have struggled a lot to get this working on another project I work on.
Initially I just wanted to run web tests, I added running yarn during CI later on.
Disclaimer: I am just cluelessly trying things out. If you see mistakes, please let me know.
## The demo application
The application I will be testing, is a very basic vue.js application. You can see what it does by opening
the `public/index.html` page in your browser.
The application I will be testing, is a very basic vue.js application.
If you want to try it out, you first need to run yarn:
```
yarn install
yarn encore dev
```
If you don't have yarn, see the [installation instructions](https://yarnpkg.com/lang/en/docs/install/).
Then you can just open the the `public/index.html` page in your browser.
## Testing locally
......@@ -37,9 +48,11 @@ E.g. the built in server of php:
This is easy with docker:
```
docker run --net=host selenium/standalone-chrome
docker run --net=host selenium/standalone-chrome:3.141.59-oxygen
```
(I pinned on this version, because it doesn't seem to work on newer versions. I have no clue why.)
### Run the tests
```
......@@ -69,4 +82,4 @@ It is based on the [Dockerfile](https://gitlab.com/johanv/codeception-ci-demo/bl
## A thing you should not try
I tried to use nginx and php-fpm containers for running the webserver for the tests, but this caused all kinds of (docker) networking issues.
So you shouldn't do that. As it turns out, PHP's built-in webserver will do the job just fine.
\ No newline at end of file
So you shouldn't do that. As it turns out, PHP's built-in webserver will do the job just fine.
// assets/js/app.js
import Vue from 'vue';
import Hello from './components/Hello'
/**
* Create a fresh Vue Application instance
*/
new Vue({
el: '#app',
// render: h => h(Hello)
components: {Hello}
});
<template>
<div>
Say hello to:
<input type="text" id="itemInput" v-model="newItem" />
<input type="button" value="Go" v-on:click="addToList"/>
<ul>
<li v-for="item in helloList">Hello <span v-text="item"></span>!</li>
</ul>
</div>
</template>
<script>
console.log('Hello component!');
module.exports = {
data: function() {
return {
newItem: null,
helloList: []
};
},
methods: {
addToList: function() {
this.helloList.push(this.newItem);
}
},
}
</script>
......@@ -3,32 +3,18 @@
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
Say hello to:
<input type="text" id="itemInput" v-model="newItem" />
<input type="button" value="Go" v-on:click="addToList"/>
<ul>
<li v-for="item in helloList">Hello <span v-text="item"></span>!</li>
</ul>
<hello></hello>
</div>
<script type="text/javascript">
var helloComponent = new Vue({
el: '#app',
data: {
newItem: null,
helloList: []
},
methods: {
addToList: function() {
this.helloList.push(this.newItem);
}
}
});
</script>
<!-- It doesn't seem to work with the scripts in the head section. -->
<script src="build/runtime.js"></script>
<script src="build/vendors~app.js"></script>
<script src="build/app.js"></script>
</body>
</html>
var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
// Enable Vue loader
.enableVueLoader()
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment