Внесение в участие в местных проектах OpenSource

Привет! Во время этого поста в блоге я буду обсуждать два вопроса, которые я решил взять на этот релиз, два запроса на вытягивание, которые закрыли проблемы и два небольших обзора кода, которые я сделал в Проект телескопа !

Убить двух птиц с двумя камнями

Выбор двух вопросов, которые бросили мне вызов больше, чем мои проблемы Hacktoberfest, было непростым процессом. Последний вызов, который я остановил от Hacktoberfest, вносил нового поставщика в Уведомление . В конце концов я закончил тем, что выбрал Телескоп выпуск и Выпуск Для небольшого проекта OpenSource.

Проблема телескопа

Выпуск телескопа переключал телескоп с использования Body-Parser для Express.json (). Эта проблема была не так сложной, как я думал Но это научило меня чему -то действительно крутому! До этого вопроса я всегда использовал Body-Parser Но после исследования я узнал, что вы можете просто использовать Express. Как только я понял, что он был встроен для выражения, внедрив решение для Pr было легко!

Удивительная привязанность

Awesome-Adoption Второй проект, над которым я работал для этого проекта. Awesome-Adoption-это проект с открытым исходным кодом, который позволяет людям принять домашних животных. Выпуск Я работал над тем, чтобы я писал тесты, которые проверяли страницу пожертвования веб -сайта. Основными проверками были:

Тест на фильтрацию
Падать
Ожидая элементов из списка

Это было очень пугающим для меня, так как я все еще новичок в написании тестов, но задача была включена! Сначала я пытался проверить страницу пожертвования с помощью тестирования рендеринга и шутки. У меня было много проблем, пытающихся имитировать выпадения, поэтому мне пришлось обратиться к сообществу за помощью. Один из членов сообщества привел меня к Пользователь-событие | Библиотека тестирования . Это действительно помогло мне начать формировать тесты, написав.

test("Test for filtering", () => {
  render();

  userEvent.selectOptions(
    screen.getByTestId("dropdown"),
    screen.getByTestId("donate-test-selection-united-states", {
      name: "united states",
    })
  );

Выше было одним из первых тестов, которые я написал, используя USEREVEV инструмент. Чтобы взять элементы в React, я использовал testid Чтобы захватить элементы. Хотя это сработало, и тесты работали, был лучший способ сделать это. Обзор кода рекомендовал мне использовать Getbyrole вариант. Этот вариант позволил нам:

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

userEvent.selectOptions(
    screen.getByTestId("dropdown"),
    screen.getByRole("option", {
      name: "united states",
    })
  );

 expect(
    screen.getByRole("option", {
      name: "united states",
    }).selected
  ).toBeTruthy();

expect(screen.getAllByRole("option").length).toBe(10);

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

Обзоры кода

Я обнаружил, что два обзора кода были для меня очень сложными. Я чувствовал, что просмотр кода и попытки улучшить его было очень сложно. Код выглядел хорошо, и если была проблема, он был очень маленьким. В конце концов я нашел вещи, которые могли бы помочь привлечь запросы и улучшить код!

Первый обзор

Мой Первый обзор был очень маленький обзор. Я обнаружил, что в запросе на привлечение программист использовал Цвет: 'черный' вместо #000000 Анкет Это может быть немного разборчиво, но стиль CSS использует гексакод для определения цветов.

Второй обзор

Мой Второй обзор Не намного больше, но научил меня правило Eslint. Для начала я обнаружил, что стильные миксы совпадают с маржа в CSS с использованием пиксели или Эм . Поэтому я порекомендовал придерживаться одного, так что в единицах нет смесь. Второй комментарий была ошибкой Eslint, вызванной неаричарными операторами. Eslint не допускает унарных операторов, вызывающих ошибку в коде. Чтобы исправить это, я рекомендовал, используя переменная вместо переменная ++ Анкет

Вывод

Этот релиз был очень сложной задачей, но многому научил меня сотрудничать с новыми проектами и что вы никогда не перестаете учиться. Теперь, когда я перехожу от этого, я буду работать над своим последним проектом семестра. Сложная проблема, которая займет у меня 3 недели. Увидимся в следующий раз!

Оригинал: “https://dev.to/luigizaccagnini/contributing-to-local-opensource-projects-cjk”