times components

Библиотека компонентов Times

Цель

Дом Times ' react Components.

Dev Environment

Нам требуется macOS с node.js (для конкретной версии, пожалуйста, проверьте пакет.

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

Просмотр наших компонентов

Перейдите на http://components.thetimes.co.uk

Начиная

1. Запустите yarn install

2. Компоненты можно увидеть в бегом в сборнике рассказов

• сборник рассказов
  1. yarn storybook
  2. Перейдите в http: // localhost: 9001

Схема

Смотрите пакет UTILS о том, как обновить схему.

Отладка

Компоненты в этом проекте могут быть отлажены через инструменты разработчика вашего браузера. Эти шаги предполагают использование Chrome Devtools.

Отладить наш сборник веб -рассказов:

1. yarn storybook
2. Перейдите к http: // localhost: 9001
3. Открыть Devtools
4. Нажмите на источники
5. На вкладке «Сеть» под самой левой панелью, развернуть top => storybook-preview-iframe => webpack: // => . => Пакеты

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

Ссылка на временные компоненты с проектом рендеринга

Следуйте этим шагам здесь

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

Смотрите ваши изменения в рендеринге с файлами rnw.js

Помимо связывания компонентов Times и рендеринга вместе, вы можете просмотреть изменения, внесенные в компоненты Times в рендеринге через файлы rnw.js.

1. В Times, после того, как вы внесли свои изменения, запустите yarn bundle в пакете, в котором вы работали. Если вы работали в пакете ts-components вам нужно сначала запустить yarn build , а затем yarn bundle .
2. Запуск команды создает файл rnw.js в корне папки. Проверьте файл, чтобы увидеть, произошли ли ваши изменения.
3. Скопируйте содержимое файла rnw.js и вставьте его в соответствующий файл в render's node_modules . Например, если вы объединили файл rnw.js в пакете article-skeleton в компонентах Times, вы бы вставили содержимое в node_modules/@times-components/article-skeleton/rnw.js .
4. Запустите рендеринг, и вы должны увидеть свои изменения.

Отладка тестов

Тесты в настоящее время используют Jest для запуска, поэтому, если вы хотите отладить какое -либо тест, следуйте этим шагам:

1. (Найдите свою тестовую команду) jest --config="./packages/provider/__tests__/jest.config.js" . В зависимости от того, из какого каталога мы запускаем тесты, каталог --config может отличаться. Мой каталог Currenct находится в репо-корнере: times-components .

2. Смотрите вашу тестовую команду из package.json для специального пакета, который вы хотите проверить.

Примечание. Если у вас нет шутки, вы можете использовать его локально из node_modules/.bin/jest

3. (Начальные тесты в режиме отладки). Нам нужно начать одну и ту же команду, но через узел в режиме отладки, как SO: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

--runInBand jest Если мы не добавим этот флаг, только процесс узла, который начал jest будет отладком.

4. (Добавить операторы отладки) Нормали мы бы добавили точки останова, но когда удаленная отладка, это не всегда возможно, потому что файлы, которые мы должны поставить точки останова, еще не загружены jest . Поэтому, чтобы отладчик остановился там, где мы хотим, нам нужно добавить debugger; заявления вместо точек останова в коде и при необходимости повторно переносить.

5. (Прикрепите к веб -сокету) Как только мы запустим тесты в режиме отладки, нам нужно прикрепить к нему:

• (Рекомендуется) Используйте хромированную дистанционную отладку для узла:

  1. Open chrome://inspect на хромированной адресной панели
  2. Open dedicated DevTools for Node узла
  3. Если вы запустили тесты с вышеупомянутой команды, она должна автоматически подключиться, но если она не перейдет на вкладку Connection во всплывающем окне и добавьте подключение localhost:9229 или какой-либо ваш порт
  4. Отладчик должен остановиться на первой строке из-за флага --inspect-brk , и как только вы нажмете кнопку воспроизведения (резюме выполнение), он должен остановиться на вашем debugger; заявление

  Примечание: как только он остановится, вы можете увидеть, как весь ваш код объединен в одной строке. Для этого есть простое исправление: в нижней части окна отладки рядом с Line: 1 Column: 1 Метки {}

• (Использовать VSCODE) Конфигурация должна выглядеть близко к этому:

 ...
    "configurations" : [
      {
          "localRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "remoteRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "type" : " node " ,
          "request" : " attach " ,
          "name" : " Attach to Server on 9229 " ,
          "address" : " 127.0.0.1 " ,
          "port" : 9229
      }
  ]

Внося

См. Appling.md для обширного разрыва проекта.

yarn commit будет совершать файлы (так же, как git commit ) и поможет участнику добавить подходящее сообщение о коммите в соответствии с обычной изменчивой изменением