5 kyu

Truncate paragraph using higher-order component in React JS

536richkotze
Description
Loading description...
React
Fundamentals
View
AllIssues2Questions1Suggestions1Show Resolved
  • Please sign in or sign up to leave a comment.
  • anton.a.minin Avatar

    Hi, @richkotze!

    Thanks for a nice kata.

    But, what if typeof childten isn't a string?

      it('should not shorten text unless typeof children is string', () => {
    const result = shallow(<ShortParagraph><b>{text}</b></ShortParagraph>);
    expect(result.children().text()).toEqual(text);
  });
  • rsschool_5e8bafe1d34ec435 Avatar

    Hello @richkotze,

    Could you help me with adding React task to Codewars?

    How to add React and Jest to environment? I've tried to do that, but Codewars complaing on "import React".

    • richkotze Avatar

      You need to import react in both solution and test case code views.

      Don't think Jest is available in codewars.

      See the package.json for available testing frameworks: https://github.com/codewars/codewars-runner-cli/blob/master/package.json

      Question marked resolved by richkotze 5 years ago
    • kazk Avatar

      Codewars currently doesn't allow authors to specify a test framework, but the code runner service does support other test frameworks including Jest for JS/TS. When this kata and other React kata had to be updated from Node 6.x, I had to specify the React environment available in Node 10.x/12.x using a hack because the default environment no longer includes React. The new React environment uses Jest.

      @mikhama

      Until Codewars supports the configuration in the kata editor, you need to use some hack using a special comment. To create a kata with React, you need to set the language version to Node 12.x and add the following to Preloaded:

      // HACK The following special comment allows React with Jest.
// This is a temporary hack until Codewars supports test framework choices.
// @config: env-set node12_react

      This will tell the code runner to use the React environment instead.

      The tests should look something like the following:

      import React from "react";
import Adapter from "enzyme-adapter-react-16";
import Enzyme, { shallow } from "enzyme";
Enzyme.configure({ adapter: new Adapter() });

import FooComponent, { foo } from "./solution";

// Then write tests
    • rsschool_5e8bafe1d34ec435 Avatar

      Thank you very much!

  • Voile Avatar

    Needs a test where textLength is 0.

  • Voile Avatar

    So I came across this test:

    should allow addition props through  

props = { random: 'prop',
  className: 'bold',
  textLength: -1,
  children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. \nLorem Ipsum has been the industry\'s standard dummy text ever since the 1500s' }

Should have a className prop passed through
Should have a random prop passed through

    It seems that the test is broken? Even returning the input component directly will fail these two tests.

    • richkotze Avatar

      I can't replicate the issue, could you provide a code example of what you mean so I can try it myself please?

    • Voile Avatar

      Even the simplest code like

      const React = require('react');

const withTruncateParagraph = paragraph => {
  return paragraph;
}

      will not pass those 2 tests. But this is just a HOC that doesn't do anything extra.

    • richkotze Avatar

      That example would not pass those tests.

      An HOC must return a new function (this basically becomes the react component to be used)

      Then to pass the props from the above function through to original component, you would need to spread them return <Parapraph {...props} />

      The docs provide better examples about HOC on React site: https://reactjs.org/docs/higher-order-components.html

    • Voile Avatar

      I... don't know. Every article about HOC that I've searched on the web (including that one) are always full of code and never any concise examples as to what HOC actually is and how they're defined and used. So it's not really helpful (at least to me).

      In fact, that's my impression on the existing React katas on CW in general. The docs for such a popular framework is (surprisingly?) lacking for some unknown reason.

      I think you might need to provide more useful references.

    • richkotze Avatar

      I've updated the kata description with a sentence explaining the structure and provide an example of a basic HOC to help.

      Do you think this will help getting started with HOC?

    • Voile Avatar

      I'm afraid that doesn't tell anything more than before.

      Now that I've passed those two tests (by observing the result values and trying to shove random stuff in random places) and have seen other's solutions, there are clearly many more things that needs to be clarified/explained.

    • richkotze Avatar

      The remaining bits to fill in are part of the React framework.

      I was thinking of creating a few React katas that help progress to this point. Link them all up.

      Would that be a good approach to this?

      Or I can explain the different parts in the description?

    • Voile Avatar

      The first one is probably the best. Then you can add stuff like

      If you have problems with this kata, you can try these easier parts first to get some ideas what to do: ...

    • richkotze Avatar

      Okay, I will start that soon.

      I'm happy for this kata to be approved and I will add a link to the supporting kata.

    • richkotze Avatar

      I've just created an easier version of ReactJS HOC kata

      Try it out: PC upgrade specs using HOC in ReactJS

      Hope it helps.

      Issue marked resolved by richkotze 7 years ago
  • richkotze Avatar

    Hello - this ReactJS kata on higher-order components is ready to try out.