6 янв в 00:15

Как я тестовое на Frontend разработчика сдавал

Простой

JavaScript*Карьера в IT-индустрииIT-компании

Ожидает приглашения

Всем привет! Меня зовут Владимир. Я frontend разработчик с 1 годом опыта:‑) По айтишным меркам это «Я никто, и звать меня никак». Естественно, мало прилетает приглашений и мало есть из чего выбирать. И тут мне прилетает приглашение на работу от компании X. Зарплатная вилка от 60к до 160к. Позиция на Мидла.
(Меня всегда напрягает такой диапазон зарплатной вилки, так как понятно что до 160к допрыгнуть, надо здороваться за руку с Илоном Маском и спать в одной постели с Бейонсе:))

Владимир, добрый день!
Спасибо, что Вы откликнулись на вакансию «Front-end разработчик» компании XXX.
Выполните, пожалуйста, тестовое задание: XXX - ссылка на тестовое
Результаты присылайте ответным сообщением, и мы договоримся о времени собеседования.
C уважением,
XXX

Я понимаю, что это обычный фильтр, чтобы сразу оценить ребят на практике и что они могут.
И вот как звучит тестовое задание дословно:

Нужно создать страницу выдачи билетов с фильтрами (как на макете ниже).
Необходимо выполнить следующие задания:
1 Рендер билетов (#task1)
Используйте React для того, чтобы отрисовать билеты с данными, сортированные по цене, из файла tickets.json
2 Фильтрация билетов (#task2)
Фильтрация билетов в выдаче по количеству пересадок.
При выполнении задач должны быть соблюдены условия:
• Используйте JavaScript/TypeScript;
Работоспособность в браузерах: IE 11, Chrome;
Для удобства можно воспользоваться любыми вспомогательными библиотеками. Соответствие примерному макету на картинке и любые дополнительные функции приложения приветствуются.

Само тестовое не сложное, надо накидать верcтку и сделать элементарный рендер билетов и фильтрацию по категориям, но меня смутило

Что в тестовом нет ссылки на макет фигмы, и многие меня поймут что по картинке, сделать верстку намного сложнее, так как ни отступы не замеришь, ни цвет проверишь.
Данные представлены в формате json. Но при этом про запросы, сервер в ТЗ не написано.
Про сроки мне сказали что надо сделать за 2 дня и скинуть репозиторий проекта и деплой.

И я начал его выполнять чтобы уложиться в сроки :-)

И все по стандарту. Создал репозиторий, инициализировал стартовый проект.
По стеку у меня было база - React, TS, CSS Modules, Vite.

1. В первую очередь накидал верстку 'на глаз' и вот что у меня получилось. Ушло пару часов.

Вроде хорошо, все тыкается и работает.

2. После я вынес билет в отдельный компонент и сделал рендер по списку. json файл я перенес в обычную data.ts, написал типизацию данных и выполнил рендер. И добавил скролл, чтобы они были ограничены по высоте и можно было скролить билеты.

<div className="ticket_list">
          {filteredTickets.map(
            (
              {
                origin,
                origin_name,
                destination,
                destination_name,
                departure_date,
                departure_time,
                arrival_date,
                arrival_time,
                stops,
                price,
              },
              index
            ) => (
              <Ticket
                key={index}
                origin={origin}
                originName={origin_name}
                destination={destination}
                destinationName={destination_name}
                departureDate={departure_date}
                departureTime={departure_time}
                arrivalDate={arrival_date}
                arrivalTime={arrival_time}
                stops={stops}
                price={price}
              />
            )
          )}
        </div>

3. Теперь надо было закрыть вторую таску и сделать фильтрацию по категориям. Тут немного подзапарился, и начал гуглить как эту логику реализовать. Начинаю шерстить stack overflow, Хабр и тут БАЦ!

Натыкаюсь на это тестовое 1 в 1, но от компании Авиасейлс. Захожу в ТЗ Авиасейлс. И спасибо вам господи ребята как вы подробно пишите тестовое задание. Там и макет фигмы, и написано зачем json файл с данными лежит(Разрабы в компании X решили положить болт и не написать зачем там вообще он), и какие тесты написать. НО! В Авиасейлс это тестовое было на сеньор разработчика. Вот ссылочка.

4. Но все же у меня приложение намного проще и в итоге у меня фильтрация была реализована через обычное состояние:

const [filters, setFilters] = useState({
    stops: [] as number[],
  });

  const handleStopsFilterChange = (stops: number) => {
    setFilters((prevFilters) => {
      const newStops = prevFilters.stops.includes(stops)
        ? prevFilters.stops.filter((stop) => stop !== stops)
        : [...prevFilters.stops, stops];
      return {
        ...prevFilters,
        stops: newStops,
      };
    });
  };

  const filteredTickets = tickets.filter(
    (ticket) =>
      filters.stops.length === 0 || filters.stops.includes(ticket.stops)
  );

<div className="nav_category_btns">
            {[0, 1, 2, 3].map((stops) => (
              <label key={stops} className="nav_category_btn">
                <input
                  type="checkbox"
                  className="checkbox"
                  checked={filters.stops.includes(stops)}
                  onChange={() => handleStopsFilterChange(stops)}
                />
                <span className="custom_checkbox" />
                <div className="nav_category_text">
                  {stops === 0
                    ? "Без пересадок"
                    : stops === 1
                    ? "1 пересадка"
                    : `${stops} пересадки`}
                </div>
              </label>
            ))}
          </div>

В итоге таски закрыты, фильтрация работает, рендер билетов работает и я счастливый, потратив часов 6 своего времени, отравляю тестовое.

Жду день, два, три, четыре, но ответа все равно нет и решил немного напомнить про себ

здравствуйте! В течение какого времени мне ожидать фидбек?

И спустя пару дней мне приходит очень странный фидбек

Здравствуйте, К сожалению, мы не можем пригласить вас на следующий этап к собеседованию . Ниже комментарии разработчика: Неаккуратная работа. Не соответствует дизайну, не имеет адаптива. Половина необходимого для реализации функционала отсутствует. В сравнении с другими, работа кажется слабее, и поэтому не могу пропустить на собеседование.

Я потратил 6 часов и ждал неделю чтобы мою работу просто назвали неаккуратной и слабой:)

В итоге написал ответное письмо такое

Спорный фидбек от разработчика:

— Не соответствует дизайну — в ТЗ не указана ссылка на макет, следовательно намного сложнее скопировать дизайн 1 в 1
— Неаккуратная работа — где? в каких местах? Почему неаккуратная? Хочется услышать более детальный ответ
— Не имеет адаптива — в ТЗ такая задача есть? Я не вижу данной таски
— Половина необходимого для реализации функционала отсутствует — Какого функционала? В ТЗ написано закрыть две таски. 1 — Рендер билетов, 2 — Фильтрация билетов. Таски закрыты. Больше тасок в ТЗ не вижу
— В сравнении с другими, работа кажется слабее — после прочитанного фидбека, не могу понять, где именно моя работа считается слабой. Ваш разработчик как‑то проверял вручную? Может быть он написал автотесты чтобы выделить баги? Нет.
Буду очень благодарен, если мое сообщение дойдет до разработчика, который проверял мою работу. Потому что я потратил свое время, чтобы выполнить ТЗ, а ваш разработчик, который набирает персонал, даже не постарался написать более подробный фидбек.
В результате могу сказать, что тестовое задание своровано у компании Авиасейлс и используется в вашей компании.
https://github.com/KosyanMedia/test-tasks/blob/master/aviasales_frontend/README.md
Прежде чем отправлять тестовое задание, будет хорошо, если тестовое будет составлено корректно, потому что по ссылке выше написано все намного подробнее по задачам, а также приложен макет в фигме и ссылка, по которой можно стучаться и получать данные.
Спасибо большое!

Репозиторий проекта, среди тысячи тестовых, которых я делал
Деплой проекта

В общем, это моя первая статья, сумбурно получилось, но я пишу ее чтобы сказать что я до сих пор в поиске позиции на фронтенд разработчика. Поэтому если вдруг - пишите мне в тг https://t.me/sadbatya

Для самый внимательных и тех кто до конца дочитал — компания называется Idea Platform.
Вот ссылка на вакансию. Сэкономлю ваше драгоценное время.

Хабы: