Рубрики
Uncategorized

Трубопровод для кухонного раковины — Часть 1 — Местная установка

Здравствуйте, это мой самый первый dev.to post. Пожалуйста, дайте мне знать, если вы найдете это полезным и понравилось бы мне … Теги с DevOps, Github, Vue, JavaScript.

Здравствуйте, это мой самый первый dev.to сообщение. Пожалуйста, дайте мне знать, если вы найдете его полезным и хотели бы, чтобы я продолжал писать остальную часть серии.

Обзор

Этот пост должен быть частью серии. Сегодня мы сосредоточены на нашей местной установке разработки и первоначальной инструментарии. В конце этого поста у вас будет приложение Vue Barebones с автоматическим тестированием (Cypress), покрытием кода (CodeCov) и инструментом визуального обзора (Percy).

Примечание. Я не работаю, и не получаю компенсацию любым из компаний или упомянутых продуктов.

Моя день работа работает в предельном развитии для большой компании с большим бюджетом. У меня есть доступ к почти любому инструменту, который мне нужно, чтобы выполнить работу. Я также являюсь частью небольшой некоммерческой прибыли, которую мы создали в честь моего сына. Таким образом, инструменты, которые я использую, на обоих концах спектра затрат.

https://www.twentz.com Это сайт, который я построен для некоммерческого. Это не приобретает много трафика. Работа на сайте, как это не легко эмоционально. Чтобы меня мотивированы, я использую его для эксперимента с новыми идеями и технологиями. Я должен быть осторожен. У меня нет бюджета.

Я переработал https://www.twentz.com Сайт в этом году, и хотя мы держим наш хостинг затраты, я начал сомневаться со всеми свободными предложениями инструмента SASS для любителей, если бы я мог даже сократить стоимость хостинга ни на что. Когда я начал смотреть в это, я увидел, что я мог бы взять его еще дальше, чем я понял.

Я бросил вызов, чтобы увидеть, как далеко я могу получить с автоматизированным конвейером CICD, используя инструменты с открытым исходным кодом и бесплатные услуги SASS. Обратите внимание, что это все написано от разработчика, который значительно фокусируется на переднем конце. Мы не говорим докер контейнеров, Куберовники или что-то подобное. Я построил процесс CICD, который просто настроить и поддерживать для проекта переднего конца. Я использую Vue в этом руководстве, но это может быть легко модифицировано для обработки угловых, реагировать и, вероятно, даже SVELTE.

Я называю этот трубопровод кухонной раковины, потому что я продолжаю бросать практически во всем, что хочу попробовать.

Используемые инструменты

Местная настройка

SASS поставщики (в сегодняшнем посте)

  • Кодеков — инструмент визуального обзора
  • Перси — инструмент визуального тестирования

ГИТУБ этой статьи репо

Давайте погрузимся вправо в

Создайте свой проект

vue create kitchen-sink-pipeline

Я использую настройки по умолчанию для простоты. Если вам нужны дополнительные функции, включите их по мере необходимости. Я не включил тестирование E2E, когда я устанавливаю это по определенной причине (больше на это позже)

  • Подтвердите приложение работает ( NPM Run обслуживают и посетите http://localhost: 8080/ )

  • совершить ваш проект к Github

Добавить кипарис для тестирования

Выше я указывал, что не добавлять тестирование E2E через Vue CLI. Я сделал это решение по двум причинам.

  1. VUE CLI делает самую уверенность, которая не является установкой по умолчанию Cypress
  2. Cypress развивается с очень быстрым темпом (по состоянию на данную запись версии 4.8.0), а Vue CLI заблокирован в версии 3.8.3

Давайте вернемся к этому

Установите и инициализируйте кипарис

npm install cypress --save-dev

потом

npx cypress open

Нажмите на Хорошо, получил это Когда выясняется Cypress, он создаст настройку по умолчанию в нашем репо, после завершения установки закрыть Cypress.

Примечание: есть много консервированных тестов, предоставляемых кипарисом в Cypress/Integration/Примеры каталог. Вы можете удалить их, но я перемещаю их в кипарисы/примеры и добавить это к моему .gitignore файл, потому что я нахожу их, чтобы быть удобной ссылкой.

С завершением настройки Cypress по умолчанию вы увидите Cypress.json Файл в корне вашего проекта. Отредактируйте этот файл, чтобы он знал, где найти ваше приложение.

{
  "baseUrl": "http://localhost:8080"
}
  • Изменить свой package.json Добавляя Тест: местный скрипт
  "scripts": {
    ...
    "test:local": "npm run serve & cypress open"
  },
  • Создайте новый файл Cypress/.eslintrc.js и добавьте следующий код для предотвращения ошибок льмина
module.exports = {
  plugins: ["cypress"],
  env: {
    mocha: true
  },
  rules: {
    strict: "off"
  }
};

Создать простой тест

Мы собираемся обеспечить нагрузки приложений и отображают заголовок. Я собираюсь создать этот тест, используя Cypress лучшие практики для выбора элементов

  • Редактировать SRC/Компоненты/helloworld.vue Файл

    от
{{ msg }}

к

{{ msg }}
  • Создайте новый файл Cypress/Integration/Views.spec.js со следующим контентом
describe("Verify the app loads", () => {
  it("Visit the app root url", () => {
    cy.visit("/");
    cy.contains("[data-cy=headline]", "Welcome to Your Vue.js App");
  });
});

Запустить тест локально

Выполнить Испытание NPM Run: местный

Когда открывается окно кипариса, нажмите Запустите все спецификации И наш тест будет работать.

То, как приложение в данный момент работает, он горячий перегрузка. Вы можете играть и посмотреть, можете ли вы получить тест, чтобы выйти из строя, когда вы редактируете и сохраните свой код в режиме реального времени.

ПРИМЕЧАНИЕ: Теперь отличное время для совершения ваших изменений.

Хорошо, время выдержать его

Наличие проекта установки и тестирование на месте — это довольно Barebones Basic. Какой наш уровень уверенности мы тестируем все? Я думаю, что пришло время, когда мы зарабатываем некоторые обновления, чтобы получить отчеты о неисправности кода на месте! Есть много мнений о тестировании и оснастке. Я собираюсь справиться со всем этим, просто кипарис ради этого поста.

Настраивать

  • Установите пакеты, необходимые для включения охвата кода кипариса
npm install @cypress/code-coverage babel-plugin-istanbul istanbul-lib-coverage nyc --save-dev

  • ВАЖНЫЙ (Мне потребовалось некоторое время, чтобы отладить эту часть, так что я спасу тебя разочарование) Удалить babel.config.js.

  • Создать .babelrc Файл в корне вашего проекта со следующим содержимым

{
  "presets": ["@vue/cli-plugin-babel/preset"],
  "plugins": ["istanbul"]
}
  • Создать .nycrc Файл в корне вашего проекта со следующим содержимым
{
  "extension": [".js", ".vue"]
}
  • Редактировать Cypress/support/commands.js Заменив содержимое файла или добавление этого в верхнюю часть файла
import "@cypress/code-coverage/support";
  • Редактировать Cypress/plugins/index.js содержание
module.exports = (on, config) => {
  require("@cypress/code-coverage/task")(on, config);
  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config;
};
  • Выполнить Испытание NPM Run: Local Затем запустите свой тест. Вы увидите, что покрытие теперь является частью теста. Закрыть Cypress после прогона теста
  • Cypress добавляет некоторые каталоги, которые нам не нужно хранить в нашем репо. Добавьте следующие элементы на ваш .gitignore файл.
# code coverage directories and files
.nyc_output
coverage

ПРИМЕЧАНИЕ: Теперь отличное время для совершения ваших изменений.

Теперь вы можете взглянуть на ваш отчет о покрытии кода, открывая Охват/LCOV-отчет/index.html В вашем веб-браузере. Вы можете увидеть, что, поскольку мы проверили заголовочную стоимость в нашем приложении Vue, у нас есть 100% кодовой охват.

Но подождите, что есть еще

У нас есть простое веб-приложение, тестирование кипариса и покрытие кода. Что еще нам нужно?

Давайте получим нашу местную среду, чтобы общаться с 2 нашими продуктами SASS

Начнем с Codecov.io

Почему нам это нужно, когда у нас уже есть отчет о покрытии?

Преимущество системы охвата кода — это способность иметь возможность отслеживать скорость улучшения нашего кода. Кодеков сохраняет историю, чтобы мы могли видеть, когда наш охват улучшится или снижается. Я признаю, что это не Должен иметь Но в то же время мне было любопытно, поэтому я хотел посмотреть, что это займет, и ответ «не так много».

  • Создать пустой CodeCov.yaml Файл в вашем корневом проекте. Мы делаем это сейчас, чтобы вы могли добавить свой токен на более поздний шаг
codecov:
  token: "{TOKEN GOES HERE}"
  • Откройте свой браузер и перейдите в https://codecov.io/signup и зарегистрируйтесь для вашего бесплатного аккаунта.
  • Как только у вас есть учетная запись, добавьте свой репозиторий
  • После того, как вы добавите, что репо, вы закончите на следующем экране:
  • Скопируйте свой токен и вставьте значение в свой CodeCov.yaml файл
codecov:
  token: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  • В корне вашего проекта Type Type в Bash <(Curl -s https://codecov.io/bash)
  • Последний вывод из вышеуказанной команды — ваш URL отчета. Откройте URL в браузере, и теперь вы можете увидеть отчет. Опять же, это мало из-за простоты нашего файла.
  • Вы захотите добавить CodeCov.yaml к вашему .git игнорировать файл.

Пусть «закончить это с чем-то крутым … Пришло время для Перси.

Я буду честен, я не уверен, как много я покупаю в визуальном тестировании сравнения, но я могу сказать, что это крутой ребенок. Это демо-хорошо, а Перси довольно дарн просто настроить с инструментами, которые у нас есть на месте.

  • Откройте свой браузер и перейдите в https://percy.io/ и нажмите Начать бесплатно в заголовке и зарегистрируйте свой бесплатный аккаунт.
  • На приборной панели вашей учетной записи нажмите Создать новый проект
  • Дайте свой проект имя и нажмите Создать проект
  • Теперь вы сейчас находитесь в вашем рабочем пространстве проекта.

Нет ничего там, поэтому давайте вернемся в наш код и позаботься об этом.

  • В вашем проекте выполняется
npm install --save-dev @percy/cypress
  • открыть Cypress/support/commands.js и отредактируйте файл, чтобы добавить @ percy/cypress .
import '@percy/cypress';
import "@cypress/code-coverage/support";
  • открыть В Cypress/plugins/index.js и отредактируйте файл, чтобы добавить PercyhealthCheck
/// 
/**
 * @type {Cypress.PluginConfig}
 */
let percyHealthCheck = require("@percy/cypress/task")

module.exports = (on, config) => {
  require("@cypress/code-coverage/task")(on, config);

  // add other tasks to be registered here
  on("task", percyHealthCheck);

  // IMPORTANT to return the config object
  // with any changed environment variables
  return config;
};
  • Теперь мы добавляем визуальные тесты нашим Cypress/Integration/Views.spec.js Файл, добавив Cy.Percysnapshot ();
describe("Verify the app loads", () => {
  it("Visit the app root url", () => {
    cy.visit("/");
    cy.contains("[data-cy=headline]", "Welcome to Your Vue.js App");
    cy.percySnapshot();
  });
});
Пришло время запустить тест и загрузить снимок в Перси.
  • Вернитесь на рабочее пространство веб-сайта Percy Web и получите токен проекта, следуя указаниям на экран и установите токен в существующем терминале.
    • Примечание : Если вы закроете сеанс терминала, вам придется снова установить токен проекта. Когда мы добавляем это на трубопровод, мы автоматизируем это, поэтому нам не придется беспокоиться об этом прямо сейчас.
  • Обновите Тест: местный Значение в Скрипты раздел
"test:local": "npm run serve & percy exec -- cypress open"
  • Выполнить Испытание NPM Run: Local в вашем терминале. Затем запустите ваш кипарис, как обычно.
  • После того, как вы закрыли ваш Cypress Test, вернитесь к вашему рабочему пространству Percy, и ваша сборка должна быть там для обзора. Если это не так, просто обновите окно браузера.
  • Теперь пришло время играть. Я бы потратил время, чтобы внести изменения в базовое приложение.
    • Играть с некоторыми тестированием в кипарисе
    • Сделайте некоторые визуальные изменения в приложение и посмотрите, насколько Перси обрабатывает их.
    • Добавьте еще несколько кодов в проект, напишите некоторые тесты и посмотрите, как оно влияет на ваше кодовое покрытие.

Конечно — Примечание: Теперь отличное время для совершения ваших изменений.

Мы закончили с частью 1

Спасибо за то время, чтобы прочитать это. Я хотел бы, чтобы некоторые отзывы. Если люди заинтересованы, часть 2 будет все о проводке по этому поводу действий GitHub, чтобы получить все инструменты в конвейере сборки и опубликовано на производственном веб-сайте.

Оригинал: «https://dev.to/justtrey/kitchen-sink-pipeline-part-1-local-setup-4iod»

Читайте ещё по теме: