Merge branch 'develop' of https://github.com/tainacan/tainacan into develop

This commit is contained in:
weryques 2018-03-07 14:10:15 -03:00
commit 1bc977a890
3 changed files with 57 additions and 37 deletions

View File

@ -25,61 +25,53 @@ You wil also need:
* `Sass` to compile sass into css files * `Sass` to compile sass into css files
* `WP-Cli` to configure the test environment * `WP-Cli` to configure the test environment
* `Phpunit` to run unit tests * `Phpunit` to run unit tests
* `Node` to work with Vue.js * `Node` to handle dependencies and vuild the JS application
``` ```
sudo apt-get install phpunit composer ruby nodejs npm sudo apt-get install phpunit composer ruby nodejs npm
sudo gem install sass sudo gem install sass
``` ```
* How to install WP-Cli check [here](https://wp-cli.org/#installing). * To install WP-Cli, check [the official documentation](https://wp-cli.org/#installing).
## Setting up ## Setting up
First of all, clone this repository. First of all, clone this repository.
Note that you can NOT clone it directly in the WordPress `plugins` directory. Clone it in a folder of its own and configure your build to point to the your local WordPress `plugins` Note that you can NOT clone it directly in the WordPress `plugins` directory. Clone it in a folder of its own and configure your build to point to your local WordPress `plugins` folder.
folder.
``` ```
git clone git@git.github.com:tainacan/tainacan.git git clone git@git.github.com:tainacan/tainacan.git
``` ```
Install dependencies via composer Set up a WordPress installation. This could be a dedicated installation to develop tainacan or you can use an existing instance you have. Its up to you, but you will need one, both for developing and manually testing, as well to run automated integration tests.
```
composer install
npm install
```
And that's pretty much all. Now you will want to set up your build and your tests.
## Build ## Build
When we want to build the plugin, we run `build.sh` that basically compiles all the assets (sass), installs any dependence and moves the files to the plugin directory. This compiled version of the plugin will be then added to the official WordPress Plugin repository. When we want to build the plugin, we run `build.sh` that basically installs any dependencies, compiles all the assets (sass and js) and moves the files to the plugin directory. This compiled version of the plugin is the one added to the official WordPress Plugin repository.
In order to use it, make a copy of `build-config-sample.sh` and name it only `build-config.sh`. Edit and fill in your environment details:
* `wp_base_dir`: The base directory for you local WordPress installation, used for development and testing. e.g ~/develop/wordpress
* `wp_url`: The base URL for your local WordPress installation/ e.g http://localhost/wp
* `wp_plugin_dir`: The directory for your plugin build. Should be a directory inside `wp_base_dir`. e.g ~/develop/wordpress/wp-content/plugins/test-tainacan
Once you are ready, you can run:
``` ```
./build.sh ./build.sh
``` ```
In order to use it, make a copy of `build-config-sample.sh` and name it only `build-config.sh`. Edit and set the path to the Wordpress installation, the URL to access Wordpress, and the path to the default Wordpress plugins folder where the build will be done. While developing, you might want to run `build-watch.sh`. This script will watch your development folder for changes and automatically build the plugin so you don't have to do it manually every time you modify a file.
If you are running a local environment, you might want to check `build-watch.sh`. This script will watch your development folder for changes and automatically build the plugin so you don't have to do it manually every time you modify a file.
## Tests ## Tests
To execute all the tests, simply execute the `run-tests` script. But first you need to configure the testing frameworks separately. We used `PHPUnit` to check the unit tests and `Cypress.io` to check the integration and acceptance tests. Tainacan uses `phpunit` to run tests for the backend and the API, and `cypress` tu run tests for the front end. This is a very important part of the development proccess! Never commit anything before run all the tests to make sure you did not break anything. If you are developing a new feature, you must write tests for it. If you are fixing a bug, you should first write a test that reproduces the bug and then make it pass.
#### Configuration Cypress.io To execute all the tests, simply execute the `run-tests` script. But first you need to configure PHPUnit.
To run the integration and acceptance tests is simple, because WP-Cli will create a test environment in the same Wordpress used for the development of tainacan, according to the configurations provided in `build-config.sh`. And so just run the script: #### Preparing PHPUnit
```
./run-cypress.sh
```
#### Configuration PHPUnit
To run the unit tests it is necessary to create a new MySQL database for your unit tests. This database will be cleaned and restored every time you run PHPUnit. To run the unit tests it is necessary to create a new MySQL database for your unit tests. This database will be cleaned and restored every time you run PHPUnit.
Install the WordPress test library by running the script provided in: Install the WordPress test library by running the script provided in:
@ -104,14 +96,34 @@ The parameters are:
Inside `tests` folder, edit the file called `bootstrap-config-sample.php` and inform the folder where you installed your WordPress Test Library. This will be `/path/to/wordpress-test-folder/wodpress-tests-lib`. Save the file as `bootstrap-config.php`. Inside `tests` folder, edit the file called `bootstrap-config-sample.php` and inform the folder where you installed your WordPress Test Library. This will be `/path/to/wordpress-test-folder/wodpress-tests-lib`. Save the file as `bootstrap-config.php`.
Also note that the installation script will create a config file in the destination folder with your database credentials. If you have to change it, you will need to edit it there. And so just run the script: Note that the installation script will create a config file in the destination folder with your database credentials. If you have to change it, you will need to edit it there.
You only need to do all this once, and now you are ready to run tests.
#### Running tests
If you want to run all the tests, simply run:
```
./run-tests.sh
```
If you want to run only backend tests, run
``` ```
phpunit phpunit
``` ```
### You are done! Now, to run your tests, simply go to the root directory of the repository and type: (Note that `phpunit` accpets several parametrs, for example if you want to run just a specific group of tests).
If you want to run front-end tests, opening the Cypress app and beeing able to run individual tests and debug, run
``` ```
./run-tests.sh ./run-cypress.sh
``` ```
**Important note about the Cypress setup:**
Cypress will use the same local WordPress installation you configure in the build to run its tests. But before it does so, it will edit the `wp-config.php` file and change the `$db_prefix` variable, so, in reality, it will run all the tests in a brand new WordPress installation. After the tests are completed, it delete this installation from the database and restores the `wp-config.php` as it was before. So, make sure you allways let the script run till the end to restore you configuration. For instance, if you opened Cypress window and are running the tests, dont exit it by Ctrl+C in the terminal. Close the window gently and let the script finish its job.
If, by any reason you interrupt the script, no worries, just manually edit you `wp-config.php` and delete the line added by the script.

View File

@ -80,6 +80,11 @@ return [
'label_allow_multiple' => __('Allow multiple values', 'tainacan'), 'label_allow_multiple' => __('Allow multiple values', 'tainacan'),
'label_default_value' => __('Default value', 'tainacan'), 'label_default_value' => __('Default value', 'tainacan'),
'label_unique_value' => __('Unique value', 'tainacan'), 'label_unique_value' => __('Unique value', 'tainacan'),
'label_yes' => __('Yes', 'tainacan'),
'label_no' => __('No', 'tainacan'),
'label_collection_related' => __('Collection Related', 'tainacan'),
'label_fields_for_search' => __('Fields for search', 'tainacan'),
'label_allow_repeated_items' => __('Allow repeated items', 'tainacan'),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_dragndrop_fields_collection' => __('Drag and drop Fields here to add them to Collection.', 'tainacan'), 'instruction_dragndrop_fields_collection' => __('Drag and drop Fields here to add them to Collection.', 'tainacan'),
@ -98,6 +103,8 @@ return [
'info_warning_item_delete' => __('Do you really want to delete this item?', 'tainacan'), 'info_warning_item_delete' => __('Do you really want to delete this item?', 'tainacan'),
'info_warning_selected_collections_delete' => __('Do you really want to delete the selected collections?', 'tainacan'), 'info_warning_selected_collections_delete' => __('Do you really want to delete the selected collections?', 'tainacan'),
'info_warning_selected_items_delete' => __('Do you really want to delete the selected items?', 'tainacan'), 'info_warning_selected_items_delete' => __('Do you really want to delete the selected items?', 'tainacan'),
'info_warning_collection_related' => __('The field Collection related is required', 'tainacan'),
'info_warning_no_fields_found' => __('No fields found in this collection', 'tainacan'),
] ]
?> ?>

View File

@ -1,7 +1,7 @@
<template> <template>
<section> <section>
<b-field <b-field
label="Collection related" :label="$i18n.get('label_collection_related')"
:type="type" :type="type"
:message="message"> :message="message">
<b-select <b-select
@ -26,7 +26,7 @@
class="loading-spinner"></div> class="loading-spinner"></div>
<b-field <b-field
v-if="hasFields" v-if="hasFields"
label="Field for search"> :label="$i18n.get('label_fields_for_search')">
<div class="block"> <div class="block">
<div <div
v-for="option in fields" v-for="option in fields"
@ -44,7 +44,7 @@
</transition> </transition>
<b-field label="Allow repeated items"> <b-field :label="$i18n.get('label_allow_repeated_items')">
<div class="block"> <div class="block">
<b-switch v-model="modelRepeated" <b-switch v-model="modelRepeated"
type="is-primary" type="is-primary"
@ -74,6 +74,7 @@
invalid: true, invalid: true,
message: '', message: '',
type: '', type: '',
icon: '',
collections:[], collections:[],
fields: [], fields: [],
loading: true, loading: true,
@ -94,8 +95,8 @@
this.fetchFieldsFromCollection(value); this.fetchFieldsFromCollection(value);
} else { } else {
this.invalid = true; this.invalid = true;
this.type = 'is-danger'; this.type = 'is-warning';
this.message = 'The field Collection related is required'; this.message = this.$i18n.get('info_warning_collection_related');
this.fields = []; this.fields = [];
this.hasFields = false; this.hasFields = false;
this.modelSearch = [] this.modelSearch = []
@ -110,7 +111,7 @@
this.fetchCollections().then( data => { this.fetchCollections().then( data => {
if( this.collection_id && this.collection_id !== '' ){ if( this.collection_id && this.collection_id !== '' ){
this.collection = this.collection_id; this.collection = this.collection_id;
} else if ( this.value && this.value.collection_id ) { } else if ( this.value ) {
this.collection = this.value.collection_id; this.collection = this.value.collection_id;
} }
}); });
@ -163,7 +164,7 @@
this.hasFields = false; this.hasFields = false;
this.$toast.open({ this.$toast.open({
duration: 4000, duration: 4000,
message: `No fields found in this collection`, message: this.$i18n.get('info_warning_no_fields_found'),
position: 'is-bottom', position: 'is-bottom',
type: 'is-danger' type: 'is-danger'
}) })
@ -187,7 +188,7 @@
} }
}, },
labelRepeated(){ labelRepeated(){
return ( this.modelRepeated === 'yes' ) ? 'Yes' : 'No'; return ( this.modelRepeated === 'yes' ) ? this.$i18n.get('label_yes') : this.$i18n.get('label_no');
}, },
emitValues(){ emitValues(){
this.$emit('input',{ this.$emit('input',{