How to Test a React Card Component and Multi-State Buttons

[00:00 - 00:05] Testing the product card component. Let's see what do we have here. First of all, we render the product data.

[00:06 - 00:13] An image that should have SRC and Alt-Tugs. The price, the product name, and also a button.

[00:14 - 00:19] This button can have one of two states. If the product is added to the card, then the button should be disabled.

[00:20 - 00:25] And the text only should say "Edit to card". Otherwise, it should be "Add to card".

[00:26 - 00:30] And the button should trigger the "Add to card" function from the use card hook when clicked. Let's write the test.

[00:31 - 00:38] Open SRC Home and there create a new file. Product, Card, Spec, TSX.

[00:39 - 00:43] So here we want to test the product card. Write, describe, product, card.

[00:44 - 00:49] First of all, we tested the renders correctly. Eat, to do, renders correctly.

[00:50 - 00:53] Then we have two different cases. First one is when the product is in the card.

[00:54 - 00:58] And second is when the product is not in the card. Let's add two describe blocks.

[00:59 - 01:08] Describe when the product is in the card. And then another one, when the product, remove the S when the product is not in the card.

[01:09 - 01:14] Add the callbacks. And then in the first case, when the product is in the card, add an Eat block.

[01:15 - 01:21] Eat, to do, the Add to card. Barne is disabled.

[01:22 - 01:30] Inside of the when the product is not in the card, we'll add another block, describe, on Add. Add, to, Card, Card.

[01:31 - 01:40] Click, Eat, to do, calls, the Add to card function. So we first test that it renders correctly.

[01:41 - 01:49] Then if the product is in the card, then we test that we render a disabled version of this button. And the text is saying Add it to card.

[01:50 - 01:58] If the product is not in the card, then we're under the primary button saying Add to card. And on Card click, we call the Add to card function.

[01:59 - 02:03] And add the product to the card. First, let's mock the card context.

[02:04 - 02:10] Just mock Card context. And here we want to mock the use Card context.

[02:11 - 02:17] It's just a fan now. We want to adjust the types, const use Card context.

[02:18 - 02:31] Mock is use Card context that we type to unknown. And then we type to just mock from partial of return type of type of use Card context.

[02:32 - 02:35] Impert the use Card context. Now let's define the product mock.

[02:36 - 02:47] Const product of type product is an object that has name product. Full price 55 and image test JPEG.

[02:48 - 02:50] Let's write the renders correctly test. Remove the to do.

[02:51 - 02:55] Add the callback. Here we mock the return value of the use Card context mock.

[02:56 - 03:03] Use Card context mock mock return value. We mock the Add to card.

[03:04 - 03:08] It is now a function that does nothing. And we add products.

[03:09 - 03:14] We define it as an array with the product. We defined on the product card top level describe.

[03:15 - 03:21] Let's render our product card. Const container get by roll equals render.

[03:22 - 03:28] And here we pass the product card and passing the datum product. Now we can define our expectations.

[03:29 - 03:39] First of all we want to see that the product card renders the product name. Expect container inner HTML to match product.

[03:40 - 03:55] Then we expect container image HTML to render the price 55 zorkmets. And then we expect that the image we get it by roll has attribute as you see that equals test JPEG.

[03:56 - 04:00] All right, the test is passing. Then let's test the case when the product is in the card.

[04:01 - 04:18] Remove the to do add the callback mock the return value of the use Card context hook. Same as we did in the previous test get the get by roll get by roll by rendering the product card with datum that equals product.

[04:19 - 04:34] Now let's expect that the bottom is disabled expect get by roll button to be disabled. Finally, let's test that when the product is not on the card click on the add to card button will call add to card function.

[04:35 - 04:42] Remove the to do mock the add to card function. Use the smoke in the use card context return value.

[04:43 - 04:47] Render the product card. Now fire event click on the add to card button.

[04:48 - 04:53] And now we expect that the add to card function have been called with the product. Wait until the tests pass.

[04:54 - 04:58] And now we're done testing the home page components. We'll test the use products hook later.

[04:59 - 05:01] But for now let's move on to the card page.