initial commit

.editorconfig

@@ -0,0 +1,10 @@
+#airbnb
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

.eslintignore

@@ -0,0 +1,2 @@
+/backstop_data
+/src/report

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@mate-academy/eslint-config',
+};

.gitignore

@@ -0,0 +1,7 @@
+.idea
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+backstop_data
+!backstop_data/engine_scripts/

.stylelintignore

@@ -0,0 +1,2 @@
+/backstop_data/
+/src/report

.stylelintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: "@mate-academy/stylelint-config",
+  rules: {}
+}

.travis.yml

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

config/backstop/backstopConfig.js

@@ -0,0 +1,54 @@
+'use strict';
+
+// https://github.com/garris/BackstopJS#advanced-scenarios
+const basicScenario = {
+  label: 'test', // name of the test
+  url: 'http://localhost:8080',
+  referenceUrl: '', // put here reference to github-pages with ready project
+  readyEvent: '',
+  readySelector: '',
+  delay: 1000,
+  hideSelectors: ['[data-qa-hidden]'],
+  removeSelectors: ['[data-qa-remove]'],
+  hoverSelector: '',
+  clickSelector: '',
+  postInteractionWait: 0,
+  selectors: '',
+  selectorExpansion: true,
+  expect: 0,
+  misMatchThreshold: 1, // 1% of 100%
+  requireSameDimensions: true,
+};
+
+module.exports = {
+  id: 'test',
+  onBeforeScript: 'puppet/onBefore.js',
+  onReadyScript: 'puppet/onReady.js',
+  viewports: [
+    {
+      name: 'tablet_h',
+      width: 1024,
+      height: 768,
+    },
+  ],
+  scenarios: [
+    { ...basicScenario },
+    // define here scenarios for testing
+  ],
+  paths: {
+    bitmaps_reference: 'backstop_data/bitmaps_reference',
+    bitmaps_test: 'backstop_data/bitmaps_test',
+    engine_scripts: 'backstop_data/engine_scripts',
+    html_report: 'backstop_data/html_report',
+    ci_report: 'backstop_data/ci_report',
+  },
+  report: ['browser'],
+  engine: 'puppeteer',
+  engineOptions: {
+    args: ['--no-sandbox'],
+  },
+  asyncCaptureLimit: 5,
+  asyncCompareLimit: 50,
+  debug: false,
+  debugWindow: false,
+};

config/hooks/deploy.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+cp -R backstop_data/ src/report
+git add src/
+git commit -m "deploy static content"
+git subtree push --prefix src origin gh-pages
+./node_modules/.bin/rimraf src/report
+git add src/
+git commit -m "removed report after deploy"

config/hooks/start-server.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+npm run start &
+sleep 3

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "layout-task-boilerplate",
+  "version": "1.0.0",
+  "description": "Boilerplate for layout tasks with visual regression testing",
+  "main": "src/main.js",
+  "scripts": {
+    "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 --rc ./node_modules/@mate-academy/htmllint-config/.htmllintrc src/*.html",
+    "start": "http-server ./src -p 8080 -c-1"
+  },
+  "keywords": [],
+  "author": "Mate Academy",
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "@mate-academy/eslint-config": "*",
+    "@mate-academy/htmllint-config": "*",
+    "@mate-academy/stylelint-config": "*",
+    "backstopjs": "^4.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-node": "^8.0.1",
+    "htmllint": "^0.7.3",
+    "htmllint-cli": "0.0.7",
+    "http-server": "^0.11.1",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "rimraf": "^2.6.3",
+    "stylelint": "^10.0.0"
+  },
+  "lint-staged": {
+    "linters": {
+      "*.css": [
+        "stylelint",
+        "git add"
+      ],
+      "*.js": [
+        "eslint",
+        "git add"
+      ],
+      "*.html": [
+        "htmllint --rc  ./node_modules/@mate-academy/htmllint-config/.htmllintrc",
+        "git add"
+      ]
+    },
+    "ignore": [
+      "**/backstop_data/**",
+      "**/report/**"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "post-commit": "git update-index --again",
+      "pre-commit": "lint-staged"
+    }
+  }
+}

readme.md

@@ -0,0 +1,13 @@
+# Boilerplate for layout tasks
+
+Here is the description.
+
+---
+**Read the guideline before start**
+
+[Guideline](https://github.com/mate-academy/layout_task-guideline/blob/master/README.md)
+
+**Result**
+
+- [UPDATE DEMO LINK](https://<your_account>.github.io/<repo_name>/)
+- [UPDATE TEST REPORT LINK](https://<your_account>.github.io/<repo_name>/report/html_report/)

src/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width,
+          user-scalable=no,
+          initial-scale=1.0,
+          maximum-scale=1.0,
+          minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+
+<script type="text/javascript" src="./main.js"></script>
+</body>
+</html>

src/main.js

@@ -0,0 +1 @@
+'use strict';