Силиус и режущий зубы на TDD

 <?php // src/Sylius/Behat/Page/Admin/Order/OrderPage.php namespace Sylius\Behat\Page\Admin\Order; use Behat\Mink\Exception\ElementNotFoundException; use Behat\Mink\Session; use Sylius\Behat\Page\SymfonyPage; use Sylius\Behat\Service\Accessor\TableAccessorInterface; use Symfony\Component\Routing\RouterInterface; use Sylius\Behat\Page\Admin\Crud\IndexPage; class OrderPage extends IndexPage implements OrderPageInterface { /** * @inheritDoc */ public function findIcons($class) { $foundIcons = $this->getElement('icon')->find('css', '.' . implode('.', explode(' ', $class))); if (!$foundIcons) { throw new ElementNotFoundException($this->getSession(), 'Icons with class(es) ' . $class); } return $foundIcons; } /** * @inheritDoc */ protected function getDefinedElements() { return array_merge(parent::getDefinedElements(), [ 'icon' => '.icon', ]); } } 

Sylius определил более 120 элементов (классов и идентификаторов) для идентификации различных вещей на страницах, но, видимо, не значков. (Поиск src\Sylius\Behat для них). Нам нужно найти класс icon поэтому мы определяем наш собственный в getDefinedElements() . Наш findIcons() ищет класс, который мы передаем из нашей функции. Когда значки имеют более одного имени, например, «корзина покупок», нам нужно найти оба имени.

Шаг 3. Добавьте контекст для запуска тестов.

Контекст — это класс, который также предоставляется как сервис. Начиная с src/Sylius/Behat/Resources/config/services.xml вы найдете <import resource="services/contexts.xml" /> в верхней части. После последующего импорта вы окажетесь в src/Sylius/Behat/Resources/config/services/contexts/ где были настроены некоторые категории контекста ( cli.xml , domain.xml , hook.xml , setup.xml , transform.xml и ui.xml ). Мы за ui.xml . Открой это. Найдите сервис sylius.behat.context.ui.admin.managing_orders и мы добавляем наш прямо под ним:

 <service id="sylius.behat.context.ui.admin.viewing_page_icon" class="Sylius\Behat\Context\Ui\Admin\ViewingPageIconContext"> <argument type="service" id="sylius.behat.page.admin.order.order_page" /> <tag name="fob.context_service" /> </service> 

Обратите внимание на связь между id сервиса и class . Точки заменяются обратными слешами и верблюжьими именами классов.

Создайте src\Sylius\Behat\Context\Ui\Admin\ViewingPageIconContext.php и добавьте следующее:

 <?php // src/Sylius/Behat/Context/Ui/Admin/ViewingPageIconContext.php namespace Sylius\Behat\Context\Ui\Admin; use Behat\Behat\Context\Context; use Sylius\Behat\Page\Admin\Order\OrderPageInterface; use Webmozart\Assert\Assert; use Behat\Behat\Tester\Exception\PendingException; class ViewingPageIconContext implements Context { /** * @var OrderPageInterface */ private $orderPage; /** * @param OrderPageInterface $orderPage */ public function __construct(OrderPageInterface $orderPage) { $this->orderPage = $orderPage; } /** * @Then /^the "([^"]*)" icon should be visible on the page$/ */ public function theIconShouldBeVisibleOnThePage($class) { $icons = $this->orderPage->findIcons($class); Assert::eq(count($icons), 1, sprintf('Icon with class, %s, not found', $class)); } } 

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

Давайте запустим наш тест. Сбой, потому что еще нет значка корзины покупок. Теперь мы можем пойти дальше и внести изменения. Откройте src/Sylius/Bundle/AdminBundle/Resources/config/routing/order.yml и измените icon: cart на icon: shopping basket . Запустите тест, и он должен быть зеленым.

Далее мы внесем пару других изменений. Наш магазин одноканальный, поэтому колонка Channel не нужна. Во-вторых, мы хотим, чтобы строка таблицы имела различный фон в зависимости от состояния. Для этого мы напишем еще один тест перед внесением изменений. Отмените один или два заказа в разделе администратора, чтобы у нас были разные состояния.

• Обновите наши функции файла features\order\managing_orders\browsing_orders_with_visual_display.feature с помощью этого:

   @ui Scenario: Checking row of a cancelled order When I view the summary of the order "#00000022" And I cancel this order When I browse orders Then this order should have order payment state "Cancelled" And the row should be marked with the order payment state "Cancelled" 

• Мы также обновим OrderPageInterface и OrderPage :

   // src/Sylius/Behat/Page/Admin/Order/OrderPageInterface.php /** * Match table rows by class. * * @param string $class * The class to match table rows against. * * @return mixed * The matched rows or false. */ public function findTableRows($class); 

   // src/Sylius/Behat/Page/Admin/Order/OrderPage.php /** * @inheritDoc */ public function findTableRows($class) { $foundRows = $this->getElement('table')->find('css', '.' . $class); if (!$foundRows) { throw new ElementNotFoundException($this->getSession(), 'Rows with class ' . $class); } return $foundRows; } 

  Элемент таблицы уже определен в Sylius, поэтому мы просто используем его. Мы находим все строки с переданным классом. Когда вы запускаете тест, он красный. Теперь мы можем внести необходимые изменения.

• Переопределите столбцы «State» и «Channel» в сетке sylius_admin_order , определенной в src/Sylius/Bundle/AdminBundle/Resources/config/grids/order.yml .

  • Создайте app\config\grids.yml и добавьте это:

    sylius_grid: grids: sylius_admin_order: fields: channel: enabled: false state: enabled: false 

  • Расскажите Силиусу об этом файле, импортировав его в app\config\config.yml :

    - { resource: "grids.yml" } 

• Скопируйте src\Sylius\Bundle\UiBundle\Resources\views\Macro\table.html.twig в app\Resources\SyliusUiBundle\views\Macro\table.html.twig и в {% macro row(grid, definition, row) %} , замените <tr class="item"> на <tr class="item {{ row.state | lower }}"> . Все, что нам нужно сделать, это добавить CSS для выходных классов здесь.

• Скопируйте src\Sylius\Bundle\AdminBundle\Resources\views\Order\Label\PaymentState\awaiting_payment.html.twig в app\Resources\SyliusAdminBundle\views\Order\Label\PaymentState\awaiting_payment.html.twig . Мы хотим, чтобы значок и метка были заглавными. Измените файл на этот:

   <span class="ui olive label"> {{ value|trans|upper }} </span> 

• Скопируйте src\Sylius\Bundle\AdminBundle\Resources\views\Order\Label\PaymentState\cancelled.html.twig в app\Resources\SyliusAdminBundle\views\Order\Label\PaymentState\cancelled.html.twig . Измените файл на этот:

   <span class="ui yellow label"> {{ value|trans|upper }} </span> 

• Скопируйте src\Sylius\Bundle\AdminBundle\Resources\views\Order\Label\ShippingState\cancelled.html.twig в app\Resources\SyliusAdminBundle\views\Order\Label\ShippingState\cancelled.html.twig . Мы делаем то же, что и выше:

   <span class="ui yellow label"> {{ value|trans|upper }} </span> 

• Скопируйте src\Sylius\Bundle\AdminBundle\Resources\views\Order\Label\ShippingState\ready.html.twig в app\Resources\SyliusAdminBundle\views\Order\Label\ShippingState\ready.html.twig . Мы делаем то же, что и выше:

   <span class="ui blue label"> {{ value|trans|upper }} </span> 

• Скопируйте src\Sylius\Bundle\UiBundle\Resources\views\_stylesheets.html.twig в app\Resources\SyliusUiBundle\views\_stylesheets.html.twig . Здесь мы добавляем наш пользовательский CSS-файл чуть ниже стандартного: <link rel="stylesheet" href="{{ asset('assets/admin/css/style.css') }}"> . Есть и другие способы сделать это, но это самый быстрый способ сохранить наши изменения изолированно.

• Добавьте assets/admin/css/style.css с нашим великолепным CSS.

   .order-row.new { background-color: #c5effd; } .order-row.cancelled { background-color: #fbe7af; } 

Запустите тест снова. Это все зеленое.

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

Наконец, давайте добавим тест, чтобы подтвердить, что столбца Channel больше нет.

1. Обновите наши функции файла features\order\managing_orders\browsing_orders_with_visual_display.feature с помощью этого:

    Scenario: Not seeing a column on the page When I browse orders Then the "channel" column should not be visible on the page 

2. Обновите OrderPageInterface.php с помощью:

    // src/Sylius/Behat/Page/Admin/Order/OrderPageInterface.php /** * Get table headers. * * @return mixed * The array of headers keys or empty array. */ public function findTableHeaders(); 

3. OrderPage.php новый метод в OrderPage.php :

    // src/Sylius/Behat/Page/Admin/Order/OrderPage.php /** * {@inheritdoc} */ public function findTableHeaders() { $headers = $this->getTableAccessor() ->getSortableHeaders($this->getElement('table')); return is_array($headers) ? array_keys($headers) : array(); } 

   Sylius поставляется с классом TableAccessor с множеством полезных методов для работы с таблицами в тестах. Заголовки таблиц по умолчанию сортируются, и мы просто вызываем метод, который выбирает все сортируемые элементы на странице.

4. Обновите наш контекст ViewingPageIconContext.php :

     // src\Sylius\Behat\Context\Ui\Admin\ViewingPageIconContext.php /** * @Then /^the "([^"]*)" column should not be visible on the page$/ */ public function theColumnShouldNotBeVisibleOnThePage($column) { $foundHeaders = $this->orderPage->findTableHeaders(); Assert::false(in_array(strtolower($column), $foundHeaders), sprintf('%s column not found', $column)); } 

Мы получаем все заголовки таблиц на странице заказа. Массив элементов заголовка вводится по имени, например, дате, клиенту, каналу, номеру, paymentState, shippingState и т. Д., Представляющим столбцы. Мы проверяем ключи, чтобы убедиться, что нашего столбца больше нет на странице.

Вывод

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

Мы изучили StoryBDD, написав пару тестов Behat для демонстрации этого процесса. Хотя это простые примеры, те же принципы применяются при выполнении более сложных задач или работе с тестами SpecBDD или PHPUnit.

Какой подход вы используете при тестировании? Только TDD? Только BDD? И то и другое? Может быть, BDDed TDD ? Дайте нам знать!