Merge pull request mate-academy#1 from mate-academy/task

implemented task and tests

.gitignore

@@ -1,6 +1,6 @@
 .idea
 node_modules
-DS_Store
+.DS_Store
 yarn.lock
-backstop_data/bitmaps_test
-backstop_data/html_report
+backstop_data
+!backstop_data/engine_scripts/

.travis.yml

@@ -1,10 +1,9 @@
 language: node_js
 node_js:
-- '11'
+  - '11'
 cache: npm
-services:
-- docker
 before_script:
   - bash ./config/hooks/start-server.sh
 script:
-  - bash ./config/hooks/test-ci.sh
+  - npm run css:reference
+  - npm run css:test

config/backstop/backstopConfig.js

@@ -1,15 +1,10 @@
 'use strict';
 
-const urls = {
-  development: 'http://host.docker.internal:8080',
-  travis: 'http://127.0.0.1:8080'
-};
-
 // https://github.com/garris/BackstopJS#advanced-scenarios
 const basicScenario = {
   label: 'test', // name of the test
-  url: urls.development,
-  referenceUrl: '', // put here reference to github-pages with ready project
+  url: 'http://localhost:8080',
+  referenceUrl: 'https://mate-academy.github.io/layout_solutions/style-it-up/',
   readyEvent: '',
   readySelector: '',
   delay: 1000,
@@ -25,8 +20,10 @@ const basicScenario = {
   requireSameDimensions: true
 };
 
-const config = {
+module.exports = {
   id: 'test',
+  onBeforeScript: 'puppet/onBefore.js',
+  onReadyScript: 'puppet/onReady.js',
   viewports: [
     {
       name: 'tablet_h',
@@ -35,7 +32,22 @@ const config = {
     }
   ],
   scenarios: [
-    { ...basicScenario }
+    {
+      ...basicScenario,
+      label: 'entire-document',
+      selectors: ['document']
+    },
+    {
+      ...basicScenario,
+      label: 'default-block',
+      selectors: ['#qa-block']
+    },
+    {
+      ...basicScenario,
+      label: 'hovered-block',
+      hoverSelectors: ['#qa-block'],
+      selectors: ['#qa-block']
+    }
     // define here scenarios for testing
   ],
   paths: {
@@ -53,12 +65,5 @@ const config = {
   asyncCaptureLimit: 5,
   asyncCompareLimit: 50,
   debug: false,
-  debugWindow: false,
-  // eslint-disable-next-line max-len
-  dockerCommandTemplate: 'docker run --rm -it --network host --mount type=bind,source="{cwd}",target=/src backstopjs/backstopjs:{version} {backstopCommand} {args}'
-};
-
-module.exports = {
-  urls,
-  config
+  debugWindow: false
 };

package.json

@@ -1,16 +1,14 @@
 {
-  "name": "layout-task-boilerplate",
+  "name": "style-it-up",
   "version": "1.0.0",
-  "description": "Boilerplate for layout tasks with visual regression testing",
+  "description": "Style it up",
   "main": "src/main.js",
   "scripts": {
-    "css:test:ci": "rimraf ./backstop_data/bitmaps_test && backstop test --docker --config=config/backstop/backstopConfigTravis",
-    "css:test:linux": "rm -rf ./backstop_data/bitmaps_test && backstop test --docker --config=config/backstop/backstopConfigTravis",
-    "css:test": "rimraf ./backstop_data/bitmaps_test && backstop test --docker --config=config/backstop/backstopConfigDev",
-    "css:reference": "rimraf ./backstop_data/bitmaps_reference && backstop reference --docker --config=config/backstop/backstopConfigDev",
+    "css:test": "rimraf ./backstop_data/bitmaps_test && backstop test --config=config/backstop/backstopConfig",
+    "css:reference": "rimraf ./backstop_data/bitmaps_reference && backstop reference --config=config/backstop/backstopConfig",
     "deploy": "bash ./config/hooks/deploy.sh",
     "lint": "stylelint src/**/*.css && eslint src/**/*.js && htmllint src/*.html",
-    "start": "http-server ./src -p 8080"
+    "start": "http-server ./src -p 8080 -c-1"
   },
   "keywords": [],
   "author": "Mate Academy",

readme.md

@@ -1,15 +1,28 @@
-# Boilerplate for layout tasks
+# Style it up
 
-Here is the description.
+Your task is to change `style.css` in order to get the page in `index.html` 
+looking and behaving just as described below.
+
+Please **do not** modify or replace the HTML itself. Do take a look at what’s 
+inside `index.html` though.
+
+The page consists of a header, a footer, and 9 blocks between them.
+
+The width of the blocks must be 300 pixels. The height of each of the blocks 
+(including both header and footer) has to be 100 pixels. When hovered (the 
+cursor is on the block), height must increase to 200 pixels.
+The color of the header must be blue, the color of the footer must be black, and 
+the colors of the blocks in between must be the following
+1. red
+1. green
+1. orange
+
+There should be no vertical spacing between the blocks and the edges of the 
+page. Place the blocks so that they are horizontally centered on the page.
 
 You can find some sample screenshots in the [backstop_data/bitmaps_reference](backstop_data/bitmaps_reference) folder.
 
 ---
 **Read the guideline before start**
 
 [Guideline](https://github.com/mate-academy/layout_task-guideline/blob/master/README.md)
-
-**Result**
-
-[Demo link](https://mate-academy.github.io/layout_task-boilerplate-ci/) <br>
-[Test report](https://mate-academy.github.io/layout_task-boilerplate-ci/report/html_report/)

src/index.html

@@ -13,7 +13,21 @@
   <link rel="stylesheet" href="./style.css">
 </head>
 <body>
+<div id="header"></div>
 
+<div class="important"></div>
+<div class="interesting"></div>
+<div class="surprising"></div>
+
+<div class="important" id="qa-block"></div>
+<div class="interesting"></div>
+<div class="surprising"></div>
+
+<div class="important"></div>
+<div class="interesting"></div>
+<div class="surprising"></div>
+
+<div id="footer"></div>
 <script type="text/javascript" src="./main.js"></script>
 </body>
 </html>