If you develop projects with a component based approach, you will reach very fast a huge number of components and complex projects structure. In that case it could be a good start to think about the use of a way for isolated component rendering like Storybook offers.
Let’s have a quick view on Storybook to understand the concept and tool. Storybook is tool for developing UI components in isolation for React, Vue and Angular. With the use of Stoybook you will gain benefits which can support your development experience within the team.
Component based development but actually no way to render components in isolated environments
* test rendering different cases
/special cases like no data, longer content/
* interaction testing
/action logger/
* built-in style guide which updates with your code
* snapshot testing with jest
Anyone who has ever started programming knows the situation. You write a component that works at first sight, but then has a lot of bugs when you use it. In the development phase this is quite natural, but if the application is handed over to a customer without much testing, so the big bang is not far away.
Now you sit there and have to test several 1000 elements, which affect every changes. Repeating tests several times is time-consuming and nerve-racking.
But fortunately there is the test framwork Cypress, which was developed especially for Web application.
The special thing about Cypress is that everything runs automatically. Manual clicking is a thing of the past.
You can read a detailed feature description at: https://docs.cypress.io/guides/overview/why-cypress.html#Our-mission
Start with Cypress
Install Cypress
First of all, we navigate to our project folder in the terminal and then install all the necessary packages there.
$ cd/your/project/path
npm:
$ npm install cypress --save-dev
yarn:
$ yarn add cypress --dev
Open Cypress
npm:
$ npx cypress open
yarn:
$ yarn run cypress open
Cypress User Interface
The main menu should look something like this:
As you can see, the tool already provides many finished examples. To check if everything works, you can simply click on a sample test and a new window will open where the test will be executed.
The Cypress Test-Runner opens and should look something like this:
The First Steps
In this section I will give you a short summary what you should know for the start.
1. create a test file
All test files come in the folder: cypress/intergration
naming convention: fileName_spec.js or fileName.spec.js
describe(), it(), context() and specify() contain the actual test and you can also use them to structure your test and give it a name.
File structure in an example:
// -- Start: Our Application Code --
function add (a, b) {
return a + b
}
// -- End: Our Application Code --
// -- Start: Our Cypress Tests --
describe('Unit test our math functions', function() {
context('math', function() {
it('can add numbers', function() {
expect(add(1, 2)).to.eq(3)
})
})
// -- End: Our Cypress Tests --
2. Write test
As soon as you have created the test file, Cypress automatically updates the test list and your test should be selectable in the menu.
This section shows the basic functions.
Visit the test website: cy.visit()
This function checks the link and returns a true if a 2XX status like 200 is returned. Otherwise a false is returned and the test fails.
get(selector) – Returns the DOM element selected with the selector.
describe('My First Test', function() {
it('Test PHMU Website', function() {
cy.visit('https://www.phmu.de/')
})
it('Test contain PHMU slogan', function() {
cy.get('img[class=image]')
//Sucht ein img element mit der CSS-Klasse image
})
})
Interacting with Elements
After you have queried the elements in the previous step, it is also possible to interact with the elements. If interaction with an element is not possible, the test will be displayed as failed.
In this blog I have only given you the most necessary information for Cypress. Cypress is too big to put everything in one blog.
As I have already mentioned, I highly recommend you to read the documentation. Besides the good documentation it also contains Best Practices to test effectively.
Tailwind CSS as a utility-based framework ensures an incredibly efficient workflow when developing modern frontends. To use it in your WordPress Theme you could simply serve it from CDN. But for going beyond Tailwind’s rudimentary functionality you can’t avoid setting it up locally in your Theme. In this article we will set up Tailwind CSS in a WordPress Theme using gulp.js.
WPGulp and Gulp-PostCSS
To integrate Tailwind into your WordPress Theme you should install WPGulp first. WPGulp is a plugin to simplify gulp.js setups in WordPress. Additionally, you will need the gulp plugin of PostCSS to process Tailwind.
npx wpgulp
npm install -D gulp-postcss
Now you have installed a complete gulp setup that generates compact CSS files from SCSS. Inside your wpgulp.config.js you can configure your project paths and other variables. Specify the location of your SCSS files and where your CSS shall be generated. Since your project is now based on SCSS you should adapt your previous stylesheets.
Installing Tailwind CSS
At this point we are ready to integrate Tailwind into our theme:
To customize Tailwind individually, you can generate a config file:
npx tailwind init
In the created tailwind.config.js you can configure Tailwind as you like. More at
Integration von Tailwind CSS in gulp
Now we have everything we need to configure Tailwind with gulp. In our gulpfile.babel.js we will add PostCSS and Tailwind to the CSS-related plugins at first:
Both plugins are imported into our gulp file as constants. Now we want gulp to use them. The gulp tasks styles and stylesRTL generate our finale CSS files and right-to-left stylesheets. Here we will insert PostCSS and Tailwind:
Once done we can test if our setup works by simply adding a Tailwind class i.e. bg-red-500 to any HTML element in one of your PHP files.
Now you can run npm start. If all the styles are generated successfully you can check your site if the new Tailwind styles are displayed correctly. If so, congratulations! You just have set up Tailwind CSS in your WordPress Theme. Now you can customize your Tailwind theme in the tailwind.config.js.