@htmlacademy/autocheck

Автоматические проверки проекта

Входной файл index.js может исполльзоваться как cli приложение . Приложение первым аргументом получает путь до распакованного архива, вторым список проверок. В результате отдаёт масиив результатов.

Запуск

npm i — установить зависимости npm run build — сгенерировать билд приложения

Входная точка для cli будет по адресу ./build/index.js

Структура работы автоматических проверок

Проверка

• Все проверки находятся в папке src/checks
• Каждый модуль проверки является классом, должен наследоваться от интерфейса checkable и экспортироваться по умолчанию
• У проверки есть 2 обязательных метода:
  • getRequirement - в нём указывается какие данные нужны проверке
  • check - получает на вход объект ресурсов и в нём описывается основная логика проверки

В файле проверки выполняется основная логика серверной проверки. Некоторые операции повторяются в разных проверках. Чтобы избежать повтора, такую логику можно вынести в ресурсы.

Ресурсы

• Для того, чтобы ресурсы (например ast деревья) могли шарить разные проверки они вынесены в отдельные модули ресурсов по адресу src/data
• Каждый модуль ресурсов является классом, должен наследоваться от интерфейса Storable и экспортироваться по умолчанию
• У ресурсов есть 1 обязательный метод - getData. Он генерирует необходимые ресурсы в зависимости от входных данных и 1 объект - resource, в котором хранятся все данные.

Ресурсами могут быть любые данные приложения. Это может быть объекты ast дерева, массив из списка файлов приложения, скриншоты, количество html файлов на странице страниц и прочее. Для упрощения в ресурсаз можно хранить логику генерации объекта ответа.

Логика работы

Класс src/checker.ts связывает между собой проверки и ресурсы.

• Для оптимизации он кеширует модули проверок и ресурсов,
• собирает у проверок список необходимых ресуросов (через метод getRequirement)
• генерирует ресурсы
• вызывает проверку (через метод check) передавая в неё инстансы классов ресурсов
• далее выполняется основная логика проверки выдавая ответ по проверке
• ответы собираются в один ответ и асинхронно возвращаются из класса

Результат проверки

В результате проверки формируется массив объектов Result. Посмотреть подробное описание формата ответа можно в файле src/interfaces/result.ts

Пример входных данных проверки:

[
  {
    "type": "css-id"
  },
  {
    "type": "validation"
  },
  {
    "type": "img-size"
  },
  {
    "type": "alternative-font"
  },
  {
    "type": "important"
  },
  {
    "type": "eslint",
    "details": "es5"
  },
  {
    "type": "curly-brace",
    "details": "es6"
  }
]

Пример ответа:

[
  {
    "check": "css-id",
    "status": "success",
    "message": "Для стилизации идентификаторы не используются",
    "results": []
  },
  {
    "status": "failed",
    "message": "Ошибки валидации",
    "check": "html-validation",
    "results": [
      {
        "status": false,
        "message": "Bad value “true” for attribute “hidden” on element “h1”.",
        "file": "index.html",
        "code": "body>\n    <h1 class=\"visually-hidden\" hidden=\"true\">Дизайн",
        "line": 11,
        "column": 5
      }
    ]
  },
  {
    "check": "img-size",
    "status": "failed",
    "message": "Ошибки указания размеров у изображений",
    "results": [
      {
        "message": "Не указаны размеры у изображения",
        "file": "catalog.html",
        "code": "<img src=\"img/logo.svg\" alt=\"Logo\">",
        "status": false,
        "line": 14,
        "column": 51
      }
    ]
  },
  {
    "check": "alternative-font",
    "status": "failed",
    "message": "Данные об использовании альтернативных шрифтов",
    "results": [
      {
        "status": false,
        "message": "Не хватает значений альтернативных шрифтов. Свойство: font-family, cелектор: pre.",
        "file": "normalize.css",
        "code": "font-family:monospace,monospace",
        "line": 65,
        "column": 3
      }
    ]
  },
  {
    "check": "important",
    "status": "success",
    "message": "Для стилизации не используется important",
    "results": []
  }
]