mate-academy / react_tabs

React Tabs

Implement the App and Tabs components to render and switch between given tabs.

Here is the working version

1. Save the selectedTabId in the App (the first tab is selected by default);
2. Implement the Tabs component accepting tabs as a prop and displaying a link per each tab and the content of the selected tab.
3. Each link should have a href with a #tab-id (see the markup).
4. Pass the selectedTabId as a prop to the Tabs, the specified tab should be selected if possible (otherwise, the first tab is selected).
5. The Tabs should show the content of the selected tab (add an attribute data-cy="TabContent" for testing).
6. The selected tab (li) should have an is-active class.
7. Pass the onTabSelected callback to the Tabs, it should be called whenever the user selects another tab. (Don't call the callback if the tab was not changed)
8. The callback should receive the data of the selected tab (an object from the array)
9. The App title (h1) should show a text saying Selected tab is Tab 1 (show the title of the selected tab).
10. When the user selects another tab the h1 should be updated accordingly.
11. The Tabs component should be stateless (don't have an internal state, only props).

Instructions

• Install Prettier Extention and use this VSCode settings to enable format on save.
• Implement a solution following the React task guideline.
• Use the React TypeScript cheat sheet.
• Open one more terminal and run tests with npm test to ensure your solution is correct.
• Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.

react_tabs's Issues

Гж, было бы красиво ещё стили добавить!:)

Добавь заголовок, который будет меняться в зависимости от выбранной вкладки, было бы красиво ещё стили добавить!:)

Tests fail when using selectedTab object

When someone decides to use whole object and pass it as a prop to Tabs component, the following test will fail

describe('', () => {
    it('should highlight the first tab if selectedTabId is wrong', () => {
      const tabs = [
        { id: 'tab-10', title: 'Tab 10', content: 'Some text 10' },
        { id: 'tab-20', title: 'Tab 20', content: 'Some text 20' },
        { id: 'tab-30', title: 'Tab 30', content: 'Some text 30' },
        { id: 'tab-40', title: 'Tab 40', content: 'Some text 40' },
      ];

      mount((
        <Tabs
          tabs={tabs}
          selectedTabId="asdasd"
          onTabSelected={() => { }}
        />
      ));

      page.tabs().eq(0)
        .should('have.class', 'is-active');

      page.tabs().eq(1)
        .should('not.have.class', 'is-active');
    });
  });

This is due to the fact that selectedTabId will be undefined.

I think it's better to use whole tab object in App.tsx and Tabs.tsx due to the fact that we need id, title and content throughout the project.